chronology buttons

2 files changed, 52 insertions, 5 deletions

diff --git a/site.css b/site.css
index 69c580d..4c993eb 100644
--- a/site.css
+++ b/site.css
@@ -69,7 +69,11 @@ a:hover {
 
 #sidebar p {
     text-align: center;
-    margin: 0;
+    margin: 0.5em 0;
+}
+
+#sidebar p:last-child {
+    margin-bottom: 0;
 }
 
 #sidebar hr {
diff --git a/upd8.js b/upd8.js
index 3c28ee9..5d09439 100644
--- a/upd8.js
+++ b/upd8.js
@@ -1511,6 +1511,35 @@ function getAlbumListTag(album) {
     }
 }
 
+function chronologyButtons(currentTrack, {mapProperty, toArtist, filterCondition, headingWord}) {
+    return currentTrack[mapProperty] && currentTrack[mapProperty].map(toArtist).map(artist => {
+        if (!artistNames.includes(artist)) return '';
+
+        const releasedTracks = allTracks.filter(track => track.album.directory !== C.UNRELEASED_TRACKS_DIRECTORY && track[mapProperty] && track[mapProperty].map(toArtist).includes(artist));
+        const index = releasedTracks.indexOf(currentTrack);
+
+        if (index === -1) return '';
+
+        const previous = releasedTracks[index - 1];
+        const next = releasedTracks[index + 1];
+        const parts = [
+            previous && `<a href="${C.TRACK_DIRECTORY}/${previous.directory}/index.html" title="${previous.name}">Previous</a>`,
+            next && `<a href="${C.TRACK_DIRECTORY}/${next.directory}/index.html" title="${next.name}">Next</a>`
+        ].filter(Boolean);
+
+        const heading = `${th(index + 1)} ${headingWord} by <a href="${C.ARTIST_DIRECTORY}/${C.getArtistDirectory(artist)}/index.html">${artist}</a>`;
+
+        return parts.length ? fixWS`
+            <p>
+                ${heading}<br>
+                (${parts.join(', ')})
+            </p>
+        ` : fixWS`
+            <p>${heading}</p>
+        `;
+    }).filter(Boolean).join('\n');
+}
+
 function generateSidebarForAlbum(album, currentTrack = null) {
     const listTag = getAlbumListTag(album);
     return fixWS`
@@ -1522,10 +1551,24 @@ function generateSidebarForAlbum(album, currentTrack = null) {
                 <li class="${track === currentTrack ? 'current' : ''}"><a href="${C.TRACK_DIRECTORY}/${track.directory}/index.html">${track.name}</a></li>
             `).join('\n')}
         </${listTag}>
-        <hr>
-        <p>
-            <a href="${C.JS_DISABLED_DIRECTORY}/index.html" data-random="track-in-album">Random track</a></li>
-        </p>
+        ${(album.tracks.length > 1 || currentTrack) && `<hr>`}
+        ${album.tracks.length > 1 && fixWS`
+            <p>
+                <a href="${C.JS_DISABLED_DIRECTORY}/index.html" data-random="track-in-album">Random track</a></li>
+            </p>
+        `}
+        ${currentTrack && fixWS`
+            ${chronologyButtons(currentTrack, {
+                mapProperty: 'artists',
+                toArtist: artist => artist,
+                headingWord: 'track'
+            })}
+            ${chronologyButtons(currentTrack, {
+                mapProperty: 'coverArtists',
+                toArtist: ({ who }) => who,
+                headingWord: 'track art'
+            })}
+        `}
     `
 }