From c699396105f5aaa2380ab3dee282e1f99f7055fb Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Wed, 2 Aug 2023 12:39:45 -0300 Subject: content: generateAlbumSecondaryNav: rework for updated code style Also use generatePreviousNextLinks here. (This commit uses an updated generateColorStyleVariables where color is provided by slot, which will be included in a follow-up commit consequentially affecting various other areas.) --- .../dependencies/generateAlbumSecondaryNav.js | 166 +++++++++++++-------- 1 file changed, 105 insertions(+), 61 deletions(-) (limited to 'src/content') diff --git a/src/content/dependencies/generateAlbumSecondaryNav.js b/src/content/dependencies/generateAlbumSecondaryNav.js index 6616f20e..3d1e5555 100644 --- a/src/content/dependencies/generateAlbumSecondaryNav.js +++ b/src/content/dependencies/generateAlbumSecondaryNav.js @@ -1,8 +1,9 @@ -import {empty} from '../../util/sugar.js'; +import {stitchArrays} from '../../util/sugar.js'; export default { contentDependencies: [ 'generateColorStyleVariables', + 'generatePreviousNextLinks', 'generateSecondaryNav', 'linkAlbum', 'linkGroup', @@ -11,45 +12,79 @@ export default { extraDependencies: ['html', 'language'], - relations(relation, album) { - const relations = {}; - - relations.secondaryNav = - relation('generateSecondaryNav'); - - relations.groupParts = - album.groups.map(group => { - const relations = {}; - - relations.groupLink = - relation('linkGroup', group); - - relations.colorVariables = - relation('generateColorStyleVariables', group.color); + query(album) { + const query = {}; - if (album.date) { + if (album.date) { + query.adjacentGroupInfo = + album.groups.map(group => { const albums = group.albums.filter(album => album.date); const index = albums.indexOf(album); - const previousAlbum = (index > 0) && albums[index - 1]; - const nextAlbum = (index < albums.length - 1) && albums[index + 1]; - if (previousAlbum) { - relations.previousAlbumLink = - relation('linkAlbum', previousAlbum); - } + return { + previousAlbum: + (index > 0 + ? albums[index - 1] + : null), + + nextAlbum: + (index < albums.length - 1 + ? albums[index + 1] + : null), + }; + }); + } + + return query; + }, - if (nextAlbum) { - relations.nextAlbumLink = - relation('linkAlbum', nextAlbum); - } - } + relations(relation, query, album) { + const relations = {}; - return relations; - }); + relations.secondaryNav = + relation('generateSecondaryNav'); + + relations.groupLinks = + album.groups + .map(group => relation('linkGroup', group)); + + relations.colorVariables = + album.groups + .map(() => relation('generateColorStyleVariables')); + + if (query.adjacentGroupInfo) { + relations.previousNextLinks = + query.adjacentGroupInfo + .map(({previousAlbum, nextAlbum}) => + (previousAlbum || nextAlbum + ? relation('generatePreviousNextLinks') + : null)); + + relations.previousAlbumLinks = + query.adjacentGroupInfo + .map(({previousAlbum}) => + (previousAlbum + ? relation('linkAlbum', previousAlbum) + : null)); + + relations.nextAlbumLinks = + query.adjacentGroupInfo + .map(({nextAlbum}) => + (nextAlbum + ? relation('linkAlbum', nextAlbum) + : null)); + } return relations; }, + data(query, album) { + return { + groupColors: + album.groups.map(group => group.color), + }; + }, + slots: { mode: { validate: v => v.is('album', 'track'), @@ -57,42 +92,51 @@ export default { }, }, - generate(relations, slots, {html, language}) { + generate(data, relations, slots, {html, language}) { return relations.secondaryNav.slots({ class: 'nav-links-groups', content: - relations.groupParts.map(({ - colorVariables, - groupLink, - previousAlbumLink, - nextAlbumLink, - }) => { - const links = [ - previousAlbumLink - ?.slots({ - color: false, - content: language.$('misc.nav.previous'), - }), - - nextAlbumLink - ?.slots({ - color: false, - content: language.$('misc.nav.next'), - }), - ].filter(Boolean); - - return ( - (slots.mode === 'album' && !empty(links) - ? html.tag('span', {style: colorVariables}, [ + stitchArrays({ + colorVariables: relations.colorVariables, + groupLink: relations.groupLinks, + previousNextLinks: relations.previousNextLinks ?? null, + previousAlbumLink: relations.previousAlbumLinks ?? null, + nextAlbumLink: relations.nextAlbumLinks ?? null, + groupColor: data.groupColors, + }).map(({ + colorVariables, + groupLink, + previousNextLinks, + previousAlbumLink, + nextAlbumLink, + groupColor, + }) => { + if ( + slots.mode === 'track' || + !previousAlbumLink && !nextAlbumLink + ) { + return language.$('albumSidebar.groupBox.title', { + group: groupLink, + }); + } + + const {content: previousNextPart} = + previousNextLinks.slots({ + previousLink: previousAlbumLink, + nextLink: nextAlbumLink, + id: false, + }); + + return ( + html.tag('span', + {style: colorVariables.slot('color', groupColor).content}, + [ language.$('albumSidebar.groupBox.title', { - group: groupLink, + group: groupLink.slot('color', false), }), - `(${language.formatUnitList(links)})`, - ]) - : language.$('albumSidebar.groupBox.title', { - group: groupLink, - }))); - }), + `(${language.formatUnitList(previousNextPart)})`, + ])); + }), }); }, }; -- cgit 1.3.0-6-gf8a5