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
Download patch file Download diff file Expand all files Collapse all files

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() {