119 lines
3.2 KiB
Text
119 lines
3.2 KiB
Text
---
|
|
import Icon from 'astro-iconify';
|
|
|
|
export interface Props {
|
|
url: string;
|
|
}
|
|
|
|
const { url } = Astro.props;
|
|
const placeholder = 'Type the article URL here';
|
|
---
|
|
|
|
<div class="address-bar">
|
|
<form>
|
|
<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" />
|
|
</button>
|
|
<input type="url" id="app-url" name="url" value={url} placeholder={placeholder} required />
|
|
<button aria-label="Submit" class="right-buttons" type="submit" id="submit">
|
|
<Icon name="ri:ai-generate" />
|
|
</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>
|
|
<Icon name="mdi:github" />
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<script>
|
|
const ghLink = document.getElementById('gh-link') as HTMLButtonElement;
|
|
const backLink = document.getElementById('app-back') as HTMLButtonElement;
|
|
const homeLink = document.getElementById('app-home') as HTMLButtonElement;
|
|
const urlInput = document.getElementById('app-url') as HTMLInputElement;
|
|
const submitBtn = document.getElementById('submit') as HTMLButtonElement;
|
|
|
|
// if js is enabled, show the back button and github link
|
|
ghLink.removeAttribute('hidden');
|
|
backLink.removeAttribute('hidden');
|
|
homeLink.removeAttribute('hidden');
|
|
|
|
if (urlInput.value === '') {
|
|
backLink.setAttribute('disabled', 'true');
|
|
submitBtn.setAttribute('disabled', 'true');
|
|
homeLink.setAttribute('disabled', 'true');
|
|
}
|
|
|
|
urlInput.addEventListener('input', (e) => {
|
|
const target = e.target as HTMLInputElement;
|
|
if (target.value === '') {
|
|
submitBtn.setAttribute('disabled', 'true');
|
|
} else {
|
|
submitBtn.removeAttribute('disabled');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.address-bar {
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
:global(form) {
|
|
width: 100%;
|
|
border: 0px;
|
|
padding: 0.5rem;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
border: 1px solid #ccc;
|
|
background-color: #f5f5f5;
|
|
box-shadow: 0 1px 3px 1px #eee;
|
|
display: flex;
|
|
|
|
:global(input[type="url"]) {
|
|
flex: 3;
|
|
background-color: white;
|
|
border-radius: 5px;
|
|
border: 1px solid #eee;
|
|
padding: 0.5rem;
|
|
color: #555;
|
|
}
|
|
|
|
:global(button#app-home),
|
|
:global(button#app-back),
|
|
:global(button#submit),
|
|
:global(button#gh-link) {
|
|
border: 0px;
|
|
background-color: transparent;
|
|
padding: 0px;
|
|
cursor: pointer;
|
|
color: black;
|
|
|
|
:global(svg) {
|
|
border: 0px;
|
|
background-color: transparent;
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
}
|
|
}
|
|
|
|
:global(.left-buttons) {
|
|
margin-right: 0.5rem;
|
|
}
|
|
:global(.right-buttons) {
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
:global(button:hover),
|
|
:global(button.primary-button) {
|
|
color: blue !important;
|
|
}
|
|
|
|
:global(button[disabled="true"]) {
|
|
color: #ccc !important;
|
|
cursor: default !important;
|
|
}
|
|
}
|
|
</style>
|