diff options
| -rw-r--r-- | static/client.js | 23 | ||||
| -rwxr-xr-x | upd8.js | 1 |
2 files changed, 24 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') diff --git a/upd8.js b/upd8.js index abf4d17e..36873665 100755 --- a/upd8.js +++ b/upd8.js @@ -2443,6 +2443,7 @@ writePage.html = (pageFn, {paths, strings, to}) => { </div> <h1 class="info-card-name"><a></a></h1> <p class="info-card-album">${strings('releaseInfo.from', {album: '<a></a>'})}</p> + <p class="info-card-artists">${strings('releaseInfo.by', {artists: '<span></span>'})}</p> </div> </div> </div> |