60 lines
1.6 KiB
JavaScript
60 lines
1.6 KiB
JavaScript
|
function create_music_card(item) {
|
||
|
|
var artist = "ari melody";
|
||
|
|
if (item.artists) {
|
||
|
|
artist = item.artists.join(", ");
|
||
|
|
}
|
||
|
|
let card = document.createElement('a');
|
||
|
|
card.href = `/music/${item.id}`;
|
||
|
|
card.classList.add("music");
|
||
|
|
card.id = item.id;
|
||
|
|
card.innerHTML =
|
||
|
|
`<div class="music-artwork">
|
||
|
|
<img src=${item.artwork || '/img/music_artwork/placeholder.jpg'} alt="${item.title} artwork" width=128>
|
||
|
|
</div>
|
||
|
|
<div class="music-details">
|
||
|
|
<h1 class="music-title">${item.title}</h1>
|
||
|
|
<h2 class="music-artist">${artist}</h2>
|
||
|
|
<h3 class="music-type-${item.type}">${item.type}</h3>
|
||
|
|
<ul class="music-links">
|
||
|
|
${ item.links.map(link => {
|
||
|
|
return `<li><a href="${link.url}">${link.title.toLowerCase()}</a></li>`
|
||
|
|
}).join("") }
|
||
|
|
</ul>
|
||
|
|
</div>`;
|
||
|
|
return card;
|
||
|
|
}
|
||
|
|
|
||
|
|
document.querySelectorAll("h2.question").forEach(element => {
|
||
|
|
element.onclick = (e) => {
|
||
|
|
const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}#${e.target.id}`;
|
||
|
|
window.location = url;
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
document.querySelectorAll('blockquote').forEach(
|
||
|
|
element => {
|
||
|
|
element.onclick = (e) => {
|
||
|
|
navigator.clipboard.writeText(e.target.innerText);
|
||
|
|
console.log('copied quote contents to clipboard!\n\n' + e.target.innerText);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
fetch('/music.json')
|
||
|
|
.then(res => {
|
||
|
|
if (!res.ok) {
|
||
|
|
throw new Error(`Failed to download music data! ${res.status}`);
|
||
|
|
}
|
||
|
|
return res.json();
|
||
|
|
})
|
||
|
|
.then(music => {
|
||
|
|
let music_container = document.getElementById('music-container');
|
||
|
|
for (index in music) {
|
||
|
|
let item = music[index];
|
||
|
|
let dom = create_music_card(item);
|
||
|
|
music_container.append(dom);
|
||
|
|
};
|
||
|
|
});
|
||
|
|
|
||
|
|
|