« get me outta code hell

basic artist list in info cards - hsmusic-wiki - HSMusic - static wiki software cataloguing collaborative creation
about summary refs log tree commit diff
path: root/static
diff options
context:
space:
mode:
author(quasar) nebula <towerofnix@gmail.com>2021-04-05 16:34:36 -0300
committer(quasar) nebula <towerofnix@gmail.com>2021-04-05 16:34:36 -0300
commit6a6d9a1cff905676ae2335b3aaba1dee47ad386c (patch)
treef84b8b5361bdce0577821106990518f96b88ee27 /static
parent8d8da77772eacbf1a58fff96c2e6e792d38f5e1b (diff)
basic artist list in info cards
Diffstat (limited to 'static')
-rw-r--r--static/client.js23
1 files changed, 23 insertions, 0 deletions
diff --git a/static/client.js b/static/client.js
index 96d227f1..6883b83b 100644
--- a/static/client.js
+++ b/static/client.js
@@ -223,6 +223,17 @@ function link(a, type, {name, directory, color}) {
     a.href = getLinkHref(type, directory);
 }
 
+function joinElements(type, elements) {
+    // We can't use the Intl APIs with elements, 8ecuase it only oper8tes on
+    // strings. So instead, we'll pass the element's outer HTML's (which means
+    // the entire HTML of that element).
+    //
+    // That does mean this function returns a string, so always 8e sure to
+    // set innerHTML when using it (not appendChild).
+
+    return list[type](elements.map(el => el.outerHTML));
+}
+
 const infoCard = (() => {
     const container = document.getElementById('info-card-container');
 
@@ -257,12 +268,24 @@ const infoCard = (() => {
                 container.classList.add('show');
             }, 50);
 
+            // 8asic details.
+
             const nameLink = container.querySelector('.info-card-name a');
             link(nameLink, 'track', data);
 
             const albumLink = container.querySelector('.info-card-album a');
             link(albumLink, 'album', data.links.album);
 
+            const artistSpan = container.querySelector('.info-card-artists span');
+            artistSpan.innerHTML = joinElements('conjunction', data.links.artists.map(({ who: artist }) => {
+                const a = document.createElement('a');
+                a.href = getLinkHref('artist', artist.directory);
+                a.innerText = artist.name;
+                return a;
+            }));
+
+            // Cover art.
+
             const [ containerNoReveal, containerReveal ] = [
                 container.querySelector('.info-card-art-container.no-reveal'),
                 container.querySelector('.info-card-art-container.reveal')