ayo/cozy
ayo/cozy
1
Fork 0
Code Issues 2 Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat: address bar button states (#41)

Browse source 
* feat: address bar button states

* 0.1.17
This commit is contained in:
Ayo Ayco 2023-06-14 19:45:57 +02:00 committed by GitHub
parent 5e8d2cf495
commit b76f00ac35
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 29 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "@ayco/cozy",
"version": "0.1.16",
"version": "0.1.17",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@ayco/cozy",
"version": "0.1.16",
"version": "0.1.17",
"dependencies": {
"@astrojs/netlify": "^2.2.2",
"@extractus/article-extractor": "^7.2.15",

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "@ayco/cozy",
"version": "0.1.16",
"version": "0.1.17",
"scripts": {
"start": "astro dev",
"build": "astro build"

28
src/components/AddressBar.astro
View file

@ -12,7 +12,7 @@ const { url } = Astro.props;
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17.51 3.87L15.73 2.1L5.84 12l9.9 9.9l1.77-1.77L9.38 12l8.13-8.13z"/></svg>
</button>
<input type="text" id="app-url" name="url" value={url} placeholder="Type a URL here" />
<button aria-label="Submit" title="Submit" class="right-button" type="submit" id="submit">
<button aria-label="Submit" title="Submit" class="right-button primary-button" type="submit" id="submit">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M6.23 20.23L8 22l10-10L8 2L6.23 3.77L14.46 12z"/></svg>
</button>
<button aria-label="GitHub" title="GitHub" class="right-button" type="button" id="gh-link" onclick="window.location.href = 'https://github.com/ayoayco/cozy'">
@ -24,8 +24,20 @@ const { url } = Astro.props;
<script>
const homeBtn = document.getElementById('app-home') as HTMLButtonElement;
const urlInput = document.getElementById('app-url') as HTMLInputElement;
if (urlInput.value === '')
homeBtn.setAttribute('style', 'display: none');
const submitBtn = document.getElementById('submit') as HTMLButtonElement;
if (urlInput.value === '') {
homeBtn.setAttribute('disabled', 'true');
submitBtn.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">
@ -76,5 +88,15 @@ const { url } = Astro.props;
:global(.right-button) {
margin-left: 0.5rem;
}
:global(.primary-button:not([disabled="true"])) {
color: blue !important;
}
:global(button[disabled="true"]) {
color: #eee !important;
}
}
</style>

2
src/components/Library.astro
View file

@ -72,7 +72,7 @@ const {postDivSelector, skipSave = false} = Astro.props;
if (postDiv && newPost?.innerHTML) {
postDiv.innerHTML = newPost.innerHTML
const homeBtn = document.getElementById('app-home') as HTMLButtonElement;
homeBtn.setAttribute('style', 'display: block');
homeBtn.removeAttribute('disabled');
}
}
const item = document.createElement('li');