diff options
Diffstat (limited to 'src/content')
3 files changed, 85 insertions, 52 deletions
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, + ], + }), }; |