From 53483407a9f1f7fe20db6574fd4127d0c875e2ce Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Tue, 23 Apr 2024 16:33:45 -0300 Subject: content: generateChronologyLinksScopeSwitcher --- .../generateChronologyLinksScopeSwitcher.js | 52 +++++++++++++++++++++ .../generateScopedTrackChronologyLinks.js | 54 ++++++---------------- .../dependencies/generateTrackChronologyLinks.js | 31 +++++++------ src/static/css/site.css | 11 ++--- src/static/js/client.js | 44 +++++++++++++----- src/strings-default.yaml | 6 +-- 6 files changed, 126 insertions(+), 72 deletions(-) create mode 100644 src/content/dependencies/generateChronologyLinksScopeSwitcher.js (limited to 'src') diff --git a/src/content/dependencies/generateChronologyLinksScopeSwitcher.js b/src/content/dependencies/generateChronologyLinksScopeSwitcher.js new file mode 100644 index 00000000..53ec87a6 --- /dev/null +++ b/src/content/dependencies/generateChronologyLinksScopeSwitcher.js @@ -0,0 +1,52 @@ +import {stitchArrays} from '#sugar'; + +export default { + extraDependencies: ['html', 'language'], + + slots: { + scopes: { + validate: v => v.strictArrayOf(v.isStringNonEmpty), + }, + + contents: { + validate: v => v.strictArrayOf(v.isHTML), + }, + + open: { + type: 'boolean', + default: true, + }, + }, + + generate: (slots, {html, language}) => + html.tag('details', {class: 'scoped-chronology-switcher'}, + slots.open && + {open: true}, + + [ + html.tag('summary', + language.$('trackPage.nav.chronology.scope.title', { + scope: + slots.scopes.map((scope, index) => + html.tag('a', {class: 'switcher-link'}, + {href: '#'}, + + (index === 0 + ? {style: 'display: inline'} + : {style: 'display: none'}), + + language.$('trackPage.nav.chronology.scope', scope))), + })), + + stitchArrays({ + scope: slots.scopes, + content: slots.contents, + }).map(({scope, content}, index) => + html.tag('div', {class: 'scope-' + scope}, + (index === 0 + ? {style: 'display: block'} + : {style: 'display: none'}), + + content)), + ]), +}; diff --git a/src/content/dependencies/generateScopedTrackChronologyLinks.js b/src/content/dependencies/generateScopedTrackChronologyLinks.js index 7cb9ee63..87a7c0fd 100644 --- a/src/content/dependencies/generateScopedTrackChronologyLinks.js +++ b/src/content/dependencies/generateScopedTrackChronologyLinks.js @@ -10,8 +10,6 @@ export default { 'linkTrack', ], - extraDependencies: ['html', 'language'], - relations(relation, album, track) { const albumFilter = (album @@ -73,41 +71,19 @@ export default { }; }, - 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({ - showOnly: true, - - chronologyInfoSets: [ - { - headingString: 'misc.chronology.heading.track', - contributions: relations.artistChronologyContributions, - }, - { - headingString: 'misc.chronology.heading.coverArt', - contributions: relations.coverArtistChronologyContributions, - }, - ], - }), - ]), + generate: (relations) => + relations.chronologyLinks.slots({ + showOnly: true, + + 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 33911c79..accb9ef1 100644 --- a/src/content/dependencies/generateTrackChronologyLinks.js +++ b/src/content/dependencies/generateTrackChronologyLinks.js @@ -1,8 +1,13 @@ export default { - contentDependencies: ['generateScopedTrackChronologyLinks'], - extraDependencies: ['html'], + contentDependencies: [ + 'generateChronologyLinksScopeSwitcher', + 'generateScopedTrackChronologyLinks', + ], relations: (relation, track) => ({ + scopeSwitcher: + relation('generateChronologyLinksScopeSwitcher'), + wikiChronologyLinks: relation('generateScopedTrackChronologyLinks', null, track), @@ -10,16 +15,16 @@ export default { relation('generateScopedTrackChronologyLinks', track.album, track), }), - generate: (relations, {html}) => - html.tags([ - relations.wikiChronologyLinks.slots({ - scope: 'wiki', - visible: true, - }), + generate: (relations) => + relations.scopeSwitcher.slots({ + scopes: [ + 'wiki', + 'album', + ], - relations.albumChronologyLinks.slots({ - scope: 'album', - visible: false, - }), - ]), + contents: [ + relations.wikiChronologyLinks, + relations.albumChronologyLinks, + ], + }), }; diff --git a/src/static/css/site.css b/src/static/css/site.css index 622c3ac1..c068c07d 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -510,16 +510,15 @@ a:not([href]):hover { display: none; } -#header .scoped-chronology p { - margin-top: 0; - margin-bottom: 0.25em; -} - -#header .scoped-chronology-switcher { +#header .scoped-chronology-switcher .switcher-link { text-decoration: underline; text-decoration-style: dotted; } +#header .scoped-chronology-switcher > div { + margin-left: 20px; +} + #secondary-nav { text-align: center; } diff --git a/src/static/js/client.js b/src/static/js/client.js index 5611a349..fe45ba16 100644 --- a/src/static/js/client.js +++ b/src/static/js/client.js @@ -2954,7 +2954,7 @@ clientSteps.addPageListeners.push(addAdditionalNamesBoxListeners); const scopedChronologyLinksInfo = initInfo('scopedChronologyLinksInfo', { containers: null, - switchers: null, + switcherLinks: null, modes: null, session: { @@ -2965,12 +2965,18 @@ const scopedChronologyLinksInfo = initInfo('scopedChronologyLinksInfo', { function getScopedChronologyLinksReferences() { const info = scopedChronologyLinksInfo; + const switcher = + document.querySelector('.scoped-chronology-switcher'); + + if (!switcher) { + return; + } + info.containers = - Array.from(document.querySelectorAll('.scoped-chronology')); + Array.from(switcher.querySelectorAll(':scope > div')); - info.switchers = - info.containers - .map(container => container.querySelector('.scoped-chronology-switcher')); + info.switcherLinks = + Array.from(switcher.querySelectorAll('.switcher-link')); info.modes = info.containers @@ -2984,21 +2990,29 @@ function addScopedChronologyLinksPageHandlers() { const info = scopedChronologyLinksInfo; const {session} = scopedChronologyLinksInfo; - for (const [index, switcher] of info.switchers.entries()) { - const currentContainer = - info.containers[index]; - + for (const [index, { + container: currentContainer, + switcherLink: currentSwitcherLink, + }] of stitchArrays({ + container: info.containers, + switcherLink: info.switcherLinks, + }).entries()) { const nextContainer = atOffset(info.containers, index, +1, {wrap: true}); + const nextSwitcherLink = + atOffset(info.switcherLinks, index, +1, {wrap: true}); + const nextMode = atOffset(info.modes, index, +1, {wrap: true}); - switcher.addEventListener('click', domEvent => { + currentSwitcherLink.addEventListener('click', domEvent => { domEvent.preventDefault(); cssProp(currentContainer, 'display', 'none'); + cssProp(currentSwitcherLink, 'display', 'none'); cssProp(nextContainer, 'display', 'block'); + cssProp(nextSwitcherLink, 'display', 'inline'); session.selectedMode = nextMode; }); @@ -3013,11 +3027,19 @@ function mutateScopedChronologyLinksContent() { if (info.modes.includes(selectedMode)) { const selectedIndex = info.modes.indexOf(selectedMode); - for (const [index, container] of info.containers.entries()) { + for (const [index, { + container, + switcherLink, + }] of stitchArrays({ + container: info.containers, + switcherLink: info.switcherLinks, + }).entries()) { if (index === selectedIndex) { cssProp(container, 'display', 'block'); + cssProp(switcherLink, 'display', 'inline'); } else { cssProp(container, 'display', 'none'); + cssProp(switcherLink, 'display', 'none'); } } } diff --git a/src/strings-default.yaml b/src/strings-default.yaml index c1298555..a2814112 100644 --- a/src/strings-default.yaml +++ b/src/strings-default.yaml @@ -1844,9 +1844,9 @@ trackPage: chronology: scope: - _: "({SCOPE})" - wiki: "Across this wiki..." - album: "Within this album..." + title: "Chronology links {SCOPE}:" + wiki: "across this wiki" + album: "within this album" socialEmbed: heading: "{ALBUM}" -- cgit 1.3.0-6-gf8a5