cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: clean up component logic

Browse source
This commit is contained in:
Cory Dransfeldt 2024-02-21 11:15:58 -08:00
parent 4a68d4d64a
commit f5007b07a7
No known key found for this signature in database
4 changed files with 14791 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14824
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

5
package.json
View file

@ -1,6 +1,6 @@
{
"name": "coryd.dev",
"version": "6.5.7",
"version": "6.5.9",
"description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
"type": "module",
"scripts": {
@ -23,7 +23,8 @@
"@daviddarnes/mastodon-post": "^1.1.1",
"@remy/webmention": "^1.5.0",
"@zachleat/pagefind-search": "^1.0.3",
"@zachleat/webcare-webshare": "^1.0.3"
"@zachleat/webcare-webshare": "^1.0.3",
"netlify-cli": "^17.16.4"
},
"devDependencies": {
"@11ty/eleventy": "3.0.0-alpha.5",

2
src/_includes/partials/now/playing.liquid
View file

@ -1,2 +1,4 @@
<script type="module" src="/assets/scripts/components/now-playing.js"></script>
<div style="height:28px;margin-bottom: 1rem">
<now-playing></now-playing>
</div>

61
src/assets/scripts/components/now-playing.js
View file

@ -2,73 +2,32 @@ const nowPlayingTemplate = document.createElement('template')
nowPlayingTemplate.innerHTML = `
<p class="client-side">
<span class="text--blurred" data-key="loading">🎧 Album by Artist</span>
<span class="text--blurred fade" data-key="loading">🎧 Album by Artist</span>
<span>
<span data-key="content" style="opacity:0"></span>
<span class="fade" data-key="content" style="opacity:0"></span>
</span>
</p>
`
nowPlayingTemplate.id = "now-playing-template"
if (!document.getElementById(nowPlayingTemplate.id)) document.body.appendChild(nowPlayingTemplate)
class NowPlaying extends HTMLElement {
static register(tagName) {
if ("customElements" in window) {
customElements.define(tagName || "now-playing", NowPlaying);
}
if ("customElements" in window) customElements.define(tagName || "now-playing", NowPlaying);
}
async connectedCallback() {
this.append(this.template);
const data = { ...(await this.data) };
const populateNowPlaying = (component, data, cache) => {
component.querySelectorAll("[data-key]").forEach(async (slot) => {
const { key } = slot.dataset
const value = data[key]
const loading = this.querySelector('[data-key="loading"]')
const content = this.querySelector('[data-key="content"]')
const value = data['content']
if (!value || value === typeof undefined) {
slot.style.opacity = '0'
slot.style.display = 'none'
}
if (cache) {
if (key === 'loading') {
slot.style.opacity = '0'
slot.style.display = 'none'
} else if (key === 'content') {
slot.innerHTML = value
slot.style.opacity = '1'
}
}
if (!cache) {
if (key === 'loading') {
slot.classList.add('fade')
slot.style.opacity = '0'
setTimeout(() => {
slot.style.display = 'none'
}, 300);
} else if (key === 'content') {
slot.classList.add('fade')
setTimeout(() => {
slot.innerHTML = value
slot.style.opacity = '1'
}, 300);
}
}
})
}
try {
const cache = JSON.parse(localStorage.getItem('now-playing'))
if (cache) populateNowPlaying(this, cache, true)
} catch (e) {}
populateNowPlaying(this, data)
try {
localStorage.setItem('now-playing', JSON.stringify(data))
} catch (e) {}
loading.style.opacity = '0'
content.style.opacity = '1'
loading.style.display = 'none'
content.innerHTML = value
}
get template() {