From 04a617eb5fbe7023c7af91f843b9f482f0c604ea Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Tue, 2 May 2023 13:50:04 -0300 Subject: content: generateAlbumSidebar: move track sections into own function For cleaner dependencies and finer-grained refreshing. --- src/content/dependencies/generateAlbumSidebar.js | 123 ++------------------- .../generateAlbumSidebarTrackSection.js | 98 ++++++++++++++++ 2 files changed, 110 insertions(+), 111 deletions(-) create mode 100644 src/content/dependencies/generateAlbumSidebarTrackSection.js (limited to 'src/content/dependencies') diff --git a/src/content/dependencies/generateAlbumSidebar.js b/src/content/dependencies/generateAlbumSidebar.js index 36785f23..ab659b99 100644 --- a/src/content/dependencies/generateAlbumSidebar.js +++ b/src/content/dependencies/generateAlbumSidebar.js @@ -1,139 +1,40 @@ export default { contentDependencies: [ 'generateAlbumSidebarGroupBox', + 'generateAlbumSidebarTrackSection', 'linkAlbum', - 'linkTrack', ], - extraDependencies: [ - 'getColors', - 'html', - 'language', - ], + extraDependencies: ['html'], + - relations(relation, album, _track) { + relations(relation, album, track) { const relations = {}; relations.albumLink = relation('linkAlbum', album); - relations.trackLinks = - album.trackSections.map(trackSection => - trackSection.tracks.map(track => - relation('linkTrack', track))); - relations.groupBoxes = album.groups.map(group => relation('generateAlbumSidebarGroupBox', album, group)); + relations.trackSections = + album.trackSections.map(trackSection => + relation('generateAlbumSidebarTrackSection', album, track, trackSection)); + return relations; }, data(album, track) { - const data = {}; - - data.isAlbumPage = !track; - data.isTrackPage = !!track; - - data.hasTrackNumbers = album.hasTrackNumbers; - - data.trackSectionInfo = - album.trackSections.map(trackSection => ({ - name: trackSection.name, - color: trackSection.color, - isDefaultTrackSection: trackSection.isDefaultTrackSection, - - firstTrackNumber: trackSection.startIndex + 1, - lastTrackNumber: trackSection.startIndex + trackSection.tracks.length, - - includesCurrentTrack: track && trackSection.tracks.includes(track), - currentTrackIndex: trackSection.tracks.indexOf(track), - })); - - return data; + return {isAlbumPage: !track}; }, - generate(data, relations, { - getColors, - html, - language, - }) { - const {isTrackPage, isAlbumPage} = data; + generate(data, relations, {html}) { + const {isAlbumPage} = data; const trackListPart = html.tags([ html.tag('h1', relations.albumLink), - data.trackSectionInfo.map( - ({ - name, - color, - isDefaultTrackSection, - - firstTrackNumber, - lastTrackNumber, - - includesCurrentTrack, - currentTrackIndex, - }, index) => { - const trackLinks = relations.trackLinks[index]; - - const sectionName = - html.tag('span', {class: 'group-name'}, - (isDefaultTrackSection - ? language.$('albumSidebar.trackList.fallbackSectionName') - : name)); - - let style; - if (color) { - const {primary} = getColors(color); - style = `--primary-color: ${primary}`; - } - - const trackListItems = - trackLinks.map((trackLink, index) => - html.tag('li', - { - class: - includesCurrentTrack && - index === currentTrackIndex && - 'current', - }, - language.$('albumSidebar.trackList.item', { - track: trackLink, - }))); - - return html.tag('details', - { - class: includesCurrentTrack && 'current', - - open: ( - // Leave sidebar track sections collapsed on album info page, - // since there's already a view of the full track listing - // in the main content area. - isTrackPage && - - // Only expand the track section which includes the track - // currently being viewed by default. - includesCurrentTrack), - }, - [ - html.tag('summary', {style}, - html.tag('span', - (data.hasTrackNumbers - ? language.$('albumSidebar.trackList.group.withRange', { - group: sectionName, - range: `${firstTrackNumber}–${lastTrackNumber}` - }) - : language.$('albumSidebar.trackList.group', { - group: sectionName, - })))), - - (data.hasTrackNumbers - ? html.tag('ol', - {start: firstTrackNumber}, - trackListItems) - : html.tag('ul', trackListItems)), - ]); - }), + relations.trackSections, ]); if (isAlbumPage) { diff --git a/src/content/dependencies/generateAlbumSidebarTrackSection.js b/src/content/dependencies/generateAlbumSidebarTrackSection.js new file mode 100644 index 00000000..2aca6da1 --- /dev/null +++ b/src/content/dependencies/generateAlbumSidebarTrackSection.js @@ -0,0 +1,98 @@ +export default { + contentDependencies: ['linkTrack'], + extraDependencies: ['getColors', 'html', 'language'], + + relations(relation, album, track, trackSection) { + const relations = {}; + + relations.trackLinks = + trackSection.tracks.map(track => + relation('linkTrack', track)); + + return relations; + }, + + data(album, track, trackSection) { + const data = {}; + + data.hasTrackNumbers = album.hasTrackNumbers; + data.isTrackPage = !!track; + + data.name = trackSection.name; + data.color = trackSection.color; + data.isDefaultTrackSection = trackSection.isDefaultTrackSection; + + data.firstTrackNumber = trackSection.startIndex + 1; + data.lastTrackNumber = trackSection.startIndex + trackSection.tracks.length; + + if (track) { + const index = trackSection.tracks.indexOf(track); + if (index !== -1) { + data.includesCurrentTrack = true; + data.currentTrackIndex = index; + } + } + + return data; + }, + + generate(data, relations, {getColors, html, language}) { + const sectionName = + html.tag('span', {class: 'group-name'}, + (data.isDefaultTrackSection + ? language.$('albumSidebar.trackList.fallbackSectionName') + : data.name)); + + let style; + if (data.color) { + const {primary} = getColors(data.color); + style = `--primary-color: ${primary}`; + } + + const trackListItems = + relations.trackLinks.map((trackLink, index) => + html.tag('li', + { + class: + data.includesCurrentTrack && + index === data.currentTrackIndex && + 'current', + }, + language.$('albumSidebar.trackList.item', { + track: trackLink, + }))); + + return html.tag('details', + { + class: data.includesCurrentTrack && 'current', + + open: ( + // Leave sidebar track sections collapsed on album info page, + // since there's already a view of the full track listing + // in the main content area. + data.isTrackPage && + + // Only expand the track section which includes the track + // currently being viewed by default. + data.includesCurrentTrack), + }, + [ + html.tag('summary', {style}, + html.tag('span', + (data.hasTrackNumbers + ? language.$('albumSidebar.trackList.group.withRange', { + group: sectionName, + range: `${data.firstTrackNumber}–${data.lastTrackNumber}` + }) + : language.$('albumSidebar.trackList.group', { + group: sectionName, + })))), + + (data.hasTrackNumbers + ? html.tag('ol', + {start: data.firstTrackNumber}, + trackListItems) + : html.tag('ul', trackListItems)), + ]); + }, +}; -- cgit 1.3.0-6-gf8a5