From 64990187b7a35b3c1db8e169f83591b557bb9121 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Fri, 3 Mar 2023 10:11:44 -0400 Subject: new All Sheet Music listing --- src/listing-spec.js | 59 +++++++++++++++++++++++++++++++++++++++++--- src/page/album-commentary.js | 2 +- src/static/client.js | 4 +-- src/static/site3.css | 15 +++++++---- src/strings-default.json | 8 ++++-- src/util/link.js | 8 +++--- 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}), -- cgit 1.3.0-6-gf8a5