feat: address bar improvements

This commit is contained in:
Ayo 2023-06-19 16:43:50 +02:00
parent 9d11dc8050
commit 4e26302101
2 changed files with 13 additions and 9 deletions

View file

@ -11,9 +11,6 @@ const placeholder = 'Type the article URL here';
<div class="address-bar"> <div class="address-bar">
<form> <form>
<button aria-label="Home" class="left-buttons" type="button" id="app-home" name="app-home" onclick="window.location.href='/'; return false;" hidden>
<Icon name="ic:round-library-books" />
</button>
<button aria-label="Back" class="left-buttons" type="button" id="app-back" name="app-back" onclick="history.go(-1); return false;" hidden> <button aria-label="Back" class="left-buttons" type="button" id="app-back" name="app-back" onclick="history.go(-1); return false;" hidden>
<Icon name="ic:round-arrow-back-ios" /> <Icon name="ic:round-arrow-back-ios" />
</button> </button>
@ -21,6 +18,9 @@ const placeholder = 'Type the article URL here';
<button aria-label="Submit" class="right-buttons" type="submit" id="submit"> <button aria-label="Submit" class="right-buttons" type="submit" id="submit">
<Icon name="ri:ai-generate" /> <Icon name="ri:ai-generate" />
</button> </button>
<button aria-label="Home" class="right-buttons" type="button" id="app-home" name="app-home" onclick="window.location.href='/'; return false;" hidden>
<Icon name="ic:round-library-books" />
</button>
<button aria-label="GitHub" class="right-buttons" type="button" id="gh-link" onclick="window.open('https://github.com/ayoayco/cozy', '_blank');" hidden> <button aria-label="GitHub" class="right-buttons" type="button" id="gh-link" onclick="window.open('https://github.com/ayoayco/cozy', '_blank');" hidden>
<Icon name="mdi:github" /> <Icon name="mdi:github" />
</button> </button>
@ -42,6 +42,7 @@ const placeholder = 'Type the article URL here';
if (urlInput.value === '') { if (urlInput.value === '') {
backLink.setAttribute('disabled', 'true'); backLink.setAttribute('disabled', 'true');
submitBtn.setAttribute('disabled', 'true'); submitBtn.setAttribute('disabled', 'true');
homeLink.setAttribute('disabled', 'true');
} }
urlInput.addEventListener('input', (e) => { urlInput.addEventListener('input', (e) => {

View file

@ -73,8 +73,9 @@ export function renderPost(responseText, url, postDivSelector: string, preventPu
postDiv.innerHTML = newPost.innerHTML postDiv.innerHTML = newPost.innerHTML
const appUrl = document.getElementById('app-url') as HTMLInputElement; const appUrl = document.getElementById('app-url') as HTMLInputElement;
const cozyUrl = html.querySelector('meta[property="cozy:url"]')?.getAttribute('content'); const cozyUrl = html.querySelector('meta[property="cozy:url"]')?.getAttribute('content');
const backBtn = document.getElementById('app-back') as HTMLButtonElement; const homeBtn = document.querySelector<HTMLButtonElement>('#app-home');
const submitBtn = document.getElementById('submit') as HTMLButtonElement; const backBtn = document.querySelector<HTMLButtonElement>('#app-back');
const submitBtn = document.querySelector<HTMLButtonElement>('#app-submit');
const title = html.querySelector('meta[property="cozy:title"]')?.getAttribute('content'); const title = html.querySelector('meta[property="cozy:title"]')?.getAttribute('content');
@ -82,12 +83,14 @@ export function renderPost(responseText, url, postDivSelector: string, preventPu
if(cozyUrl !== '/') { if(cozyUrl !== '/') {
appUrl.value = cozyUrl || ''; appUrl.value = cozyUrl || '';
backBtn.removeAttribute('disabled'); backBtn?.removeAttribute('disabled');
submitBtn.removeAttribute('disabled'); submitBtn?.removeAttribute('disabled');
homeBtn?.removeAttribute('disabled');
} else { } else {
appUrl.value = ''; appUrl.value = '';
backBtn.setAttribute('disabled', 'true'); backBtn?.setAttribute('disabled', 'true');
submitBtn.setAttribute('disabled', 'true'); submitBtn?.setAttribute('disabled', 'true');
homeBtn?.setAttribute('disabled', 'true');
} }
if(!preventPushState) { if(!preventPushState) {