new All Sheet Music listing

6 files changed, 79 insertions, 17 deletions

diff --git a/src/listing-spec.js b/src/listing-spec.js
index 29b7645c..e86fb403 100644
--- a/src/listing-spec.js
+++ b/src/listing-spec.js
@@ -944,10 +944,63 @@ const listingSpec = [
   },
 
   {
-    // Holy beans the spaghetti LOL
+    directory: 'all-sheet-music',
+    stringsKey: 'other.allSheetMusic',
+    groupUnderOther: true,
 
+    data: ({wikiData: {albumData}}) =>
+      albumData
+        .map(album => ({
+          album,
+          tracks: album.tracks.filter(t => !empty(t.sheetMusicFiles)),
+        }))
+        .filter(({tracks}) => !empty(tracks)),
+
+    html: (data, {
+      html,
+      language,
+      link,
+    }) =>
+      data.flatMap(({album, tracks}) => [
+        html.tag('h3', link.album(album)),
+
+        html.tag('dl', tracks.flatMap(track => [
+          // No hash here since the full list of sheet music is already visible below.
+          // The track link serves more as a quick way to recall which track it is or
+          // visit listening links, all of which is positioned at the top of the page.
+          html.tag('dt', link.track(track)),
+          html.tag('dd',
+            // This page doesn't really look better with color-coded sheet music links.
+            // Track links are still colored.
+            /* {style: getLinkThemeString(track.color)}, */
+            html.tag('ul', track.sheetMusicFiles.map(({title, files}) =>
+              html.tag('li',
+                {class: [files.length > 1 && 'has-details']},
+                (files.length === 1
+                  ? link.albumAdditionalFile(
+                      {album, file: files[0]},
+                      {
+                        text: language.$('listingPage.other.allSheetMusic.sheetMusicLink', {title}),
+                      })
+                  : html.tag('details', [
+                      html.tag('summary',
+                        html.tag('span',
+                          language.$('listingPage.other.allSheetMusic.sheetMusicLink.withMultipleFiles', {
+                            title: html.tag('span', {class: 'group-name'}, title),
+                            files: language.countAdditionalFiles(files.length, {unit: true}),
+                          }))),
+                      html.tag('ul', files.map(file =>
+                        html.tag('li',
+                          link.albumAdditionalFile({album, file})))),
+                    ])))))),
+        ])),
+      ]),
+  },
+
+  {
     directory: 'random',
     stringsKey: 'other.randomPages',
+    groupUnderOther: true,
 
     data: ({wikiData: {albumData}}) => [
       {
@@ -1040,7 +1093,7 @@ const listingSpec = [
 ];
 
 const filterListings = (directoryPrefix) =>
-  listingSpec.filter((l) => l.directory.startsWith(directoryPrefix));
+  listingSpec.filter(l => l.directory.startsWith(directoryPrefix));
 
 const listingTargetSpec = [
   {
@@ -1065,7 +1118,7 @@ const listingTargetSpec = [
   },
   {
     title: ({language}) => language.$('listingPage.target.other'),
-    listings: [listingSpec.find((l) => l.directory === 'random')],
+    listings: listingSpec.filter(l => l.groupUnderOther),
   },
 ];
 
diff --git a/src/page/album-commentary.js b/src/page/album-commentary.js
index 5fd78beb..ebfb0ba9 100644
--- a/src/page/album-commentary.js
+++ b/src/page/album-commentary.js
@@ -57,7 +57,7 @@ export function write(album) {
 
           ...album.tracks.filter(t => t.commentary).flatMap(track => [
             html.tag('h3',
-              {id: 'track.directory', class: ['content-heading']},
+              {id: track.directory, class: ['content-heading']},
               language.$('albumCommentaryPage.entry.title.trackCommentary', {
                 track: link.track(track),
               })),
diff --git a/src/static/client.js b/src/static/client.js
index 0c760500..efae8501 100644
--- a/src/static/client.js
+++ b/src/static/client.js
@@ -528,7 +528,7 @@ const stickyHeadingInfo = Array.from(document.querySelectorAll('.content-sticky-
     const stickySubheadingRow = stickyContainer.querySelector('.content-sticky-subheading-row');
     const stickySubheading = stickySubheadingRow.querySelector('h2');
     const stickyCoverContainer = stickyContainer.querySelector('.content-sticky-heading-cover-container');
-    const stickyCover = stickyCoverContainer.querySelector('.content-sticky-heading-cover');
+    const stickyCover = stickyCoverContainer?.querySelector('.content-sticky-heading-cover');
     const contentHeadings = Array.from(contentContainer.querySelectorAll('.content-heading'));
     const contentCover = contentContainer.querySelector('#cover-art-container');
 
@@ -557,7 +557,7 @@ function prepareStickyHeadings() {
     contentCover,
     stickyCover,
   } of stickyHeadingInfo) {
-    const coverRevealImage = contentCover.querySelector('.reveal');
+    const coverRevealImage = contentCover?.querySelector('.reveal');
     if (coverRevealImage) {
       coverRevealImage.addEventListener('hsmusic-reveal', () => {
         stickyCover.classList.remove('content-sticky-heading-cover-needs-reveal');
diff --git a/src/static/site3.css b/src/static/site3.css
index cd946886..b7f95f54 100644
--- a/src/static/site3.css
+++ b/src/static/site3.css
@@ -364,16 +364,16 @@ body::before {
   padding-left: 5px;
 }
 
-.sidebar > details summary .group-name {
-  color: var(--primary-color);
-}
-
-.sidebar > details summary > span:hover {
+summary > span:hover {
   cursor: pointer;
   text-decoration: underline;
   text-decoration-color: var(--primary-color);
 }
 
+summary .group-name {
+  color: var(--primary-color);
+}
+
 .sidebar > details ul,
 .sidebar > details ol {
   margin-top: 0;
@@ -670,6 +670,11 @@ dl ol {
   margin-bottom: 0;
 }
 
+ul > li.has-details {
+  list-style-type: none;
+  margin-left: -17px;
+}
+
 .album-group-list dt {
   font-style: oblique;
   padding-left: 0;
diff --git a/src/strings-default.json b/src/strings-default.json
index c79c00cf..5f07d8a3 100644
--- a/src/strings-default.json
+++ b/src/strings-default.json
@@ -10,11 +10,11 @@
   "count.tracks.withUnit.other": "{TRACKS} tracks",
   "count.additionalFiles": "{FILES}",
   "count.additionalFiles.withUnit.zero": "",
-  "count.additionalFiles.withUnit.one": "{FILES} additional file",
+  "count.additionalFiles.withUnit.one": "{FILES} file",
   "count.additionalFiles.withUnit.two": "",
   "count.additionalFiles.withUnit.few": "",
   "count.additionalFiles.withUnit.many": "",
-  "count.additionalFiles.withUnit.other": "{FILES} additional files",
+  "count.additionalFiles.withUnit.other": "{FILES} files",
   "count.albums": "{ALBUMS}",
   "count.albums.withUnit.zero": "",
   "count.albums.withUnit.one": "{ALBUMS} album",
@@ -408,6 +408,10 @@
   "listingPage.listTags.byUses.title": "Tags - by Uses",
   "listingPage.listTags.byUses.title.short": "...by Uses",
   "listingPage.listTags.byUses.item": "{TAG} ({TIMES_USED})",
+  "listingPage.other.allSheetMusic.title": "All Sheet Music",
+  "listingPage.other.allSheetMusic.title.short": "All Sheet Music",
+  "listingPage.other.allSheetMusic.sheetMusicLink": "{TITLE}",
+  "listingPage.other.allSheetMusic.sheetMusicLink.withMultipleFiles": "{TITLE} ({FILES})",
   "listingPage.other.randomPages.title": "Random Pages",
   "listingPage.other.randomPages.title.short": "Random Pages",
   "listingPage.misc.trackContributors": "Track Contributors",
diff --git a/src/util/link.js b/src/util/link.js
index e692255a..62106345 100644
--- a/src/util/link.js
+++ b/src/util/link.js
@@ -142,15 +142,15 @@ const link = {
         'media.albumAdditionalFile',
         fakeFileObject.album.directory,
         fakeFileObject.name),
-    {color: false}
-  ),
-  albumAdditionalFile: ({file, album}, {to}) =>
+    {color: false}),
+
+  albumAdditionalFile: ({file, album}, {to, ...opts}) =>
     link._albumAdditionalFileHelper(
       {
         name: file,
         album,
       },
-      {to}),
+      {to, ...opts}),
 
   media: linkPathname('media.path', {color: false}),
   root: linkPathname('shared.path', {color: false}),