From 88d6ff83332c4b089a4386efa9cb4469cfef555f Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Tue, 23 Apr 2024 14:32:38 -0300 Subject: content, client, css: generateScopedTrackChronologyLinks: dynamics --- .../generateScopedTrackChronologyLinks.js | 50 ++++++++++++++++------ .../dependencies/generateTrackChronologyLinks.js | 11 ++++- src/static/css/site.css | 15 +++++++ src/static/js/client.js | 41 +++++++++++++++++- src/strings-default.yaml | 6 +++ 5 files changed, 107 insertions(+), 16 deletions(-) diff --git a/src/content/dependencies/generateScopedTrackChronologyLinks.js b/src/content/dependencies/generateScopedTrackChronologyLinks.js index 6fc3f6eb..fb43203b 100644 --- a/src/content/dependencies/generateScopedTrackChronologyLinks.js +++ b/src/content/dependencies/generateScopedTrackChronologyLinks.js @@ -10,6 +10,8 @@ export default { 'linkTrack', ], + extraDependencies: ['html', 'language'], + relations(relation, album, track) { const albumFilter = (album @@ -71,17 +73,39 @@ export default { }; }, - generate: (relations) => - relations.chronologyLinks.slots({ - chronologyInfoSets: [ - { - headingString: 'misc.chronology.heading.track', - contributions: relations.artistChronologyContributions, - }, - { - headingString: 'misc.chronology.heading.coverArt', - contributions: relations.coverArtistChronologyContributions, - }, - ], - }), + slots: { + scope: { + validate: v => v.is('wiki', 'album'), + }, + + visible: {type: 'boolean'}, + }, + + generate: (relations, slots, {html, language}) => + html.tag('div', {class: 'scoped-chronology'}, + {class: 'scope-' + slots.scope}, + slots.visible && {style: 'display: block'}, + + [ + html.tag('p', + language.$('trackPage.nav.chronology.scope', { + scope: + html.tag('a', {class: 'scoped-chronology-switcher'}, + {href: '#'}, + language.$('trackPage.nav.chronology.scope', slots.scope)), + })), + + relations.chronologyLinks.slots({ + chronologyInfoSets: [ + { + headingString: 'misc.chronology.heading.track', + contributions: relations.artistChronologyContributions, + }, + { + headingString: 'misc.chronology.heading.coverArt', + contributions: relations.coverArtistChronologyContributions, + }, + ], + }), + ]), }; diff --git a/src/content/dependencies/generateTrackChronologyLinks.js b/src/content/dependencies/generateTrackChronologyLinks.js index ba4428a5..33911c79 100644 --- a/src/content/dependencies/generateTrackChronologyLinks.js +++ b/src/content/dependencies/generateTrackChronologyLinks.js @@ -12,7 +12,14 @@ export default { generate: (relations, {html}) => html.tags([ - relations.wikiChronologyLinks, - relations.albumChronologyLinks, + relations.wikiChronologyLinks.slots({ + scope: 'wiki', + visible: true, + }), + + relations.albumChronologyLinks.slots({ + scope: 'album', + visible: false, + }), ]), }; diff --git a/src/static/css/site.css b/src/static/css/site.css index cdd0fb0e..622c3ac1 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -155,6 +155,7 @@ body::before { .nav-bottom-row { grid-area: bottom-row; align-self: start; + margin-top: 0.25em; } .sidebar-column { @@ -505,6 +506,20 @@ a:not([href]):hover { white-space: nowrap; } +#header .scoped-chronology { + display: none; +} + +#header .scoped-chronology p { + margin-top: 0; + margin-bottom: 0.25em; +} + +#header .scoped-chronology-switcher { + text-decoration: underline; + text-decoration-style: dotted; +} + #secondary-nav { text-align: center; } diff --git a/src/static/js/client.js b/src/static/js/client.js index 4fadffc4..32fffebe 100644 --- a/src/static/js/client.js +++ b/src/static/js/client.js @@ -5,7 +5,7 @@ // that cannot 8e done at static-site compile time, 8y its fundamentally // ephemeral nature. -import {accumulateSum, empty, filterMultipleArrays, stitchArrays} +import {accumulateSum, atOffset, empty, filterMultipleArrays, stitchArrays} from '../shared-util/sugar.js'; import {fetchWithProgress} from './xhr-util.js'; @@ -2950,6 +2950,45 @@ clientSteps.getPageReferences.push(getAdditionalNamesBoxReferences); clientSteps.addInternalListeners.push(addAdditionalNamesBoxInternalListeners); clientSteps.addPageListeners.push(addAdditionalNamesBoxListeners); +// Scoped chronology links -------------------------------- + +const scopedChronologyLinksInfo = initInfo('scopedChronologyLinksInfo', { + containers: null, + switchers: null, +}); + +function getScopedChronologyLinksReferences() { + const info = scopedChronologyLinksInfo; + + info.containers = + Array.from(document.querySelectorAll('.scoped-chronology')); + + info.switchers = + info.containers + .map(container => container.querySelector('.scoped-chronology-switcher')); +} + +function addScopedChronologyLinksPageHandlers() { + const info = scopedChronologyLinksInfo; + + for (const [index, switcher] of info.switchers.entries()) { + const currentContainer = + info.containers[index]; + + const nextContainer = + atOffset(info.containers, index, +1, {wrap: true}); + + switcher.addEventListener('click', domEvent => { + domEvent.preventDefault(); + cssProp(currentContainer, 'display', 'none'); + cssProp(nextContainer, 'display', 'block'); + }); + } +} + +clientSteps.getPageReferences.push(getScopedChronologyLinksReferences); +clientSteps.addPageListeners.push(addScopedChronologyLinksPageHandlers); + // Group contributions table ------------------------------ // TODO: Update to clientSteps style. diff --git a/src/strings-default.yaml b/src/strings-default.yaml index 301fd5f2..33c3c829 100644 --- a/src/strings-default.yaml +++ b/src/strings-default.yaml @@ -1841,6 +1841,12 @@ trackPage: _: "{TRACK}" withNumber: "{NUMBER}. {TRACK}" + chronology: + scope: + _: "({SCOPE})" + wiki: "Across this wiki..." + album: "Within this album..." + socialEmbed: heading: "{ALBUM}" title: "{TRACK}" -- cgit 1.3.0-6-gf8a5