diff options
Diffstat (limited to 'src/content/dependencies/generateGroupGalleryPage.js')
| -rw-r--r-- | src/content/dependencies/generateGroupGalleryPage.js | 250 |
1 files changed, 128 insertions, 122 deletions
diff --git a/src/content/dependencies/generateGroupGalleryPage.js b/src/content/dependencies/generateGroupGalleryPage.js index d07847c6..dfdad0e8 100644 --- a/src/content/dependencies/generateGroupGalleryPage.js +++ b/src/content/dependencies/generateGroupGalleryPage.js @@ -1,15 +1,16 @@ import {sortChronologically} from '#sort'; -import {empty, stitchArrays} from '#sugar'; import {filterItemsForCarousel, getTotalDuration} from '#wiki-data'; export default { contentDependencies: [ 'generateCoverCarousel', - 'generateCoverGrid', + 'generateGroupGalleryPageAlbumsByDateView', + 'generateGroupGalleryPageAlbumsBySeriesView', 'generateGroupNavLinks', 'generateGroupSecondaryNav', - 'generateGroupSidebar', + 'generateIntrapageDotSwitcher', 'generatePageLayout', + 'generateQuickDescription', 'image', 'linkAlbum', 'linkListing', @@ -20,116 +21,93 @@ export default { sprawl: ({wikiInfo}) => ({enableGroupUI: wikiInfo.enableGroupUI}), - relations(relation, sprawl, group) { - const relations = {}; + query(_sprawl, group) { + const query = {}; - const albums = + query.allAlbums = sortChronologically(group.albums.slice(), {latestFirst: true}); - relations.layout = - relation('generatePageLayout'); + query.allTracks = + query.allAlbums.flatMap((album) => album.tracks); - relations.navLinks = - relation('generateGroupNavLinks', group); + query.carouselAlbums = + filterItemsForCarousel(group.featuredAlbums); - if (sprawl.enableGroupUI) { - relations.secondaryNav = - relation('generateGroupSecondaryNav', group); - - relations.sidebar = - relation('generateGroupSidebar', group); - } + return query; + }, - const carouselAlbums = filterItemsForCarousel(group.featuredAlbums); + relations: (relation, query, sprawl, group) => ({ + layout: + relation('generatePageLayout'), - if (!empty(carouselAlbums)) { - relations.coverCarousel = - relation('generateCoverCarousel'); + navLinks: + relation('generateGroupNavLinks', group), - relations.carouselLinks = - carouselAlbums - .map(album => relation('linkAlbum', album)); + secondaryNav: + (sprawl.enableGroupUI + ? relation('generateGroupSecondaryNav', group) + : null), - relations.carouselImages = - carouselAlbums - .map(album => relation('image', album.artTags)); - } + coverCarousel: + relation('generateCoverCarousel'), - relations.coverGrid = - relation('generateCoverGrid'); + carouselLinks: + query.carouselAlbums + .map(album => relation('linkAlbum', album)), - relations.gridLinks = - albums - .map(album => relation('linkAlbum', album)); + carouselImages: + query.carouselAlbums + .map(album => relation('image', album.coverArtworks[0])), - relations.gridImages = - albums.map(album => - (album.hasCoverArt - ? relation('image', album.artTags) - : relation('image'))); + quickDescription: + relation('generateQuickDescription', group), - return relations; - }, + albumViewSwitcher: + relation('generateIntrapageDotSwitcher'), - data(sprawl, group) { - const data = {}; + albumsBySeriesView: + relation('generateGroupGalleryPageAlbumsBySeriesView', group), - data.name = group.name; - data.color = group.color; + albumsByDateView: + relation('generateGroupGalleryPageAlbumsByDateView', group), + }), - const albums = sortChronologically(group.albums.slice(), {latestFirst: true}); - const tracks = albums.flatMap((album) => album.tracks); + data: (query, _sprawl, group) => ({ + name: + group.name, - data.numAlbums = albums.length; - data.numTracks = tracks.length; - data.totalDuration = getTotalDuration(tracks, {originalReleasesOnly: true}); + color: + group.color, - data.gridNames = albums.map(album => album.name); - data.gridDurations = albums.map(album => getTotalDuration(album.tracks)); - data.gridNumTracks = albums.map(album => album.tracks.length); + numAlbums: + query.allAlbums.length, - data.gridPaths = - albums.map(album => - (album.hasCoverArt - ? ['media.albumCover', album.directory, album.coverArtFileExtension] - : null)); + numTracks: + query.allTracks.length, - const carouselAlbums = filterItemsForCarousel(group.featuredAlbums); + totalDuration: + getTotalDuration(query.allTracks, {mainReleasesOnly: true}), + }), - if (!empty(group.featuredAlbums)) { - data.carouselPaths = - carouselAlbums.map(album => - (album.hasCoverArt - ? ['media.albumCover', album.directory, album.coverArtFileExtension] - : null)); - } - - return data; - }, - - generate(data, relations, {html, language}) { - return relations.layout - .slots({ - title: language.$('groupGalleryPage.title', {group: data.name}), + generate: (data, relations, {html, language}) => + language.encapsulate('groupGalleryPage', pageCapsule => + relations.layout.slots({ + title: language.$(pageCapsule, 'title', {group: data.name}), headingMode: 'static', color: data.color, mainClasses: ['top-index'], mainContent: [ - relations.coverCarousel - ?.slots({ - links: relations.carouselLinks, - images: - stitchArrays({ - image: relations.carouselImages, - path: data.carouselPaths, - }).map(({image, path}) => - image.slot('path', path)), - }), + relations.coverCarousel.slots({ + links: relations.carouselLinks, + images: relations.carouselImages, + }), + + relations.quickDescription, html.tag('p', {class: 'quick-info'}, - language.$('groupGalleryPage.infoLine', { + language.$(pageCapsule, 'infoLine', { tracks: html.tag('b', language.countTracks(data.numTracks, { @@ -149,50 +127,78 @@ export default { })), })), - relations.coverGrid - .slots({ - links: relations.gridLinks, - names: data.gridNames, - images: - stitchArrays({ - image: relations.gridImages, - path: data.gridPaths, - name: data.gridNames, - }).map(({image, path, name}) => - image.slots({ - path, - missingSourceContent: - language.$('misc.albumGrid.noCoverArt', { - album: name, - }), - })), - info: - stitchArrays({ - numTracks: data.gridNumTracks, - duration: data.gridDurations, - }).map(({numTracks, duration}) => - language.$('misc.albumGrid.details', { - tracks: language.countTracks(numTracks, {unit: true}), - time: language.formatDuration(duration), - })), - }), + ([ + !html.isBlank(relations.albumsBySeriesView), + !html.isBlank(relations.albumsByDateView) + ]).filter(Boolean).length > 1 && + + language.encapsulate(pageCapsule, 'albumViewSwitcher', capsule => + html.tag('p', {class: 'gallery-view-switcher'}, + {class: ['drop', 'shiny']}, + + {[html.onlyIfContent]: true}, + {[html.joinChildren]: html.tag('br')}, + + [ + language.$(capsule), + + relations.albumViewSwitcher.slots({ + initialOptionIndex: 0, + + titles: [ + !html.isBlank(relations.albumsByDateView) && + language.$(capsule, 'byDate'), + + !html.isBlank(relations.albumsBySeriesView) && + language.$(capsule, 'bySeries'), + ].filter(Boolean), + + targetIDs: [ + !html.isBlank(relations.albumsByDateView) && + 'group-album-gallery-by-date', + + !html.isBlank(relations.albumsBySeriesView) && + 'group-album-gallery-by-series', + ].filter(Boolean), + }), + ])), + + /* + data.trackGridLabels.some(value => value !== null) && + html.tag('p', {class: 'gallery-set-switcher'}, + language.encapsulate(pageCapsule, 'setSwitcher', switcherCapsule => + language.$(switcherCapsule, { + sets: + relations.setSwitcher.slots({ + initialOptionIndex: 0, + + titles: + data.trackGridLabels.map(label => + label ?? + language.$(switcherCapsule, 'unlabeledSet')), + + targetIDs: + data.trackGridIDs, + }), + }))), + */ + + relations.albumsByDateView, + + relations.albumsBySeriesView.slots({ + attributes: [ + !html.isBlank(relations.albumsBySeriesView) && + {style: 'display: none'}, + ], + }), ], - leftSidebar: - (relations.sidebar - ? relations.sidebar - .slot('currentExtra', 'gallery') - .content /* TODO: Kludge. */ - : null), - navLinkStyle: 'hierarchical', navLinks: relations.navLinks .slot('currentExtra', 'gallery') .content, - secondaryNav: - relations.secondaryNav ?? null, - }); - }, + secondaryNav: relations.secondaryNav, + })), }; |