feat: address bar improvements
This commit is contained in:
parent
9d11dc8050
commit
4e26302101
2 changed files with 13 additions and 9 deletions
|
@ -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) => {
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue