From 64577a579707a1193f7c7db61defdcdd6ff1bc05 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Sun, 4 Jun 2023 19:04:26 -0300 Subject: content: generateArtistGalleryPage Oh look! It's not a stub! --- .../dependencies/generateArtistGalleryPage.js | 112 +++++++++++++++++++++ src/content/dependencies/generateArtistInfoPage.js | 52 ---------- src/content/dependencies/generateCoverGrid.js | 44 ++++++++ 3 files changed, 156 insertions(+), 52 deletions(-) create mode 100644 src/content/dependencies/generateArtistGalleryPage.js create mode 100644 src/content/dependencies/generateCoverGrid.js (limited to 'src/content/dependencies') diff --git a/src/content/dependencies/generateArtistGalleryPage.js b/src/content/dependencies/generateArtistGalleryPage.js new file mode 100644 index 00000000..41758d59 --- /dev/null +++ b/src/content/dependencies/generateArtistGalleryPage.js @@ -0,0 +1,112 @@ +import {sortAlbumsTracksChronologically} from '../../util/wiki-data.js'; + +// TODO: Very awkward we have to duplicate this functionality in relations and data. +function getGalleryThings(artist) { + const galleryThings = [...artist.albumsAsCoverArtist, ...artist.tracksAsCoverArtist]; + sortAlbumsTracksChronologically(galleryThings, {latestFirst: true}); + return galleryThings; +} + +export default { + contentDependencies: [ + 'generateArtistNavLinks', + 'generateCoverGrid', + 'generatePageLayout', + 'image', + 'linkAlbum', + 'linkTrack', + ], + + extraDependencies: ['html', 'language'], + + relations(relation, artist) { + const relations = {}; + + relations.layout = + relation('generatePageLayout'); + + relations.artistNavLinks = + relation('generateArtistNavLinks', artist); + + relations.coverGrid = + relation('generateCoverGrid'); + + const galleryThings = getGalleryThings(artist); + + relations.links = + galleryThings.map(thing => + (thing.album + ? relation('linkTrack', thing) + : relation('linkAlbum', thing))); + + relations.images = + galleryThings.map(thing => + relation('image', thing.artTags)); + + return relations; + }, + + data(artist) { + const data = {}; + + data.name = artist.name; + + const galleryThings = getGalleryThings(artist); + + data.numArtworks = galleryThings.length; + + data.names = + galleryThings.map(thing => thing.name); + + data.paths = + galleryThings.map(thing => + (thing.album + ? ['media.trackCover', thing.album.directory, thing.directory, thing.coverArtFileExtension] + : ['media.albumCover', thing.directory, thing.coverArtFileExtension])); + + return data; + }, + + generate(data, relations, {html, language}) { + return relations.layout + .slots({ + title: + language.$('artistGalleryPage.title', { + artist: data.name, + }), + + headingMode: 'static', + + mainClasses: ['top-index'], + mainContent: [ + html.tag('p', + {class: 'quick-info'}, + language.$('artistGalleryPage.infoLine', { + coverArts: language.countCoverArts(data.numArtworks, { + unit: true, + }), + })), + + relations.coverGrid + .slots({ + links: relations.links, + names: data.names, + images: + relations.images.map((image, i) => + image.slots({ + path: data.paths[i], + })), + }), + ], + + navLinkStyle: 'hierarchical', + navLinks: + relations.artistNavLinks + .slots({ + showExtraLinks: true, + currentExtra: 'gallery', + }) + .content, + }) + }, +} diff --git a/src/content/dependencies/generateArtistInfoPage.js b/src/content/dependencies/generateArtistInfoPage.js index 7599b5b6..aaff7fb2 100644 --- a/src/content/dependencies/generateArtistInfoPage.js +++ b/src/content/dependencies/generateArtistInfoPage.js @@ -760,56 +760,4 @@ export default { }; }, }; - - const artThingsGallery = sortAlbumsTracksChronologically( - [ - ...(artist.albumsAsCoverArtist ?? []), - ...(artist.tracksAsCoverArtist ?? []), - ], - {latestFirst: true, getDate: (o) => o.coverArtDate}); - - const galleryPage = hasGallery && { - type: 'page', - path: ['artistGallery', artist.directory], - page: ({ - generateInfoGalleryLinks, - getAlbumCover, - getGridHTML, - getTrackCover, - html, - link, - language, - }) => ({ - title: language.$('artistGalleryPage.title', {artist: name}), - - main: { - classes: ['top-index'], - headingMode: 'static', - - content: [ - html.tag('p', - {class: 'quick-info'}, - language.$('artistGalleryPage.infoLine', { - coverArts: language.countCoverArts(artThingsGallery.length, { - unit: true, - }), - })), - - html.tag('div', - {class: 'grid-listing'}, - getGridHTML({ - entries: artThingsGallery.map((item) => ({item})), - srcFn: (thing) => - thing.album - ? getTrackCover(thing) - : getAlbumCover(thing), - linkFn: (thing, opts) => - thing.album - ? link.track(thing, opts) - : link.album(thing, opts), - })), - ], - }, - }), - }; */ diff --git a/src/content/dependencies/generateCoverGrid.js b/src/content/dependencies/generateCoverGrid.js new file mode 100644 index 00000000..fdd9f8b7 --- /dev/null +++ b/src/content/dependencies/generateCoverGrid.js @@ -0,0 +1,44 @@ +export default { + extraDependencies: ['html'], + + generate({html}) { + return html.template({ + annotation: `generateCoverGrid`, + + slots: { + images: {validate: v => v.arrayOf(v.isHTML)}, + links: {validate: v => v.arrayOf(v.isHTML)}, + names: {validate: v => v.arrayOf(v.isString)}, + + lazy: {validate: v => v.oneOf(v.isWholeNumber, v.isBoolean)}, + }, + + content(slots) { + return ( + html.tag('div', {class: 'grid-listing'}, + slots.images.map((image, i) => { + const link = slots.links[i]; + const name = slots.names[i]; + return link.slots({ + content: [ + image.slots({ + thumb: 'medium', + lazy: + (typeof slots.lazy === 'number' + ? i >= slots.lazy + : typeof slots.lazy === 'boolean' + ? slots.lazy + : false), + square: true, + }), + html.tag('span', name), + ], + attributes: { + class: ['grid-item', 'box', /* large && 'large-grid-item' */], + }, + }); + }))); + }, + }); + }, +}; -- cgit 1.3.0-6-gf8a5