From d631b7def7e6e134245f3df121e7dff26fa2e94f Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Sat, 17 May 2025 13:48:18 -0300 Subject: content, css: generateGroupGalleryPage: mark albums not from group --- src/content/dependencies/generateCoverGrid.js | 24 ++++- .../generateGroupGalleryPageAlbumGrid.js | 8 +- .../generateGroupGalleryPageAlbumsByDateView.js | 6 +- .../generateGroupGalleryPageSeriesSection.js | 105 +++++++++++++-------- src/static/css/site.css | 4 + src/strings-default.yaml | 6 ++ 6 files changed, 108 insertions(+), 45 deletions(-) diff --git a/src/content/dependencies/generateCoverGrid.js b/src/content/dependencies/generateCoverGrid.js index 29ac08b7..e4dfd905 100644 --- a/src/content/dependencies/generateCoverGrid.js +++ b/src/content/dependencies/generateCoverGrid.js @@ -15,6 +15,7 @@ export default { links: {validate: v => v.strictArrayOf(v.isHTML)}, names: {validate: v => v.strictArrayOf(v.isHTML)}, info: {validate: v => v.strictArrayOf(v.isHTML)}, + notFromThisGroup: {validate: v => v.strictArrayOf(v.isBoolean)}, // Differentiating from sparseArrayOf here - this list of classes should // have the same length as the items above, i.e. nulls aren't going to be @@ -44,7 +45,18 @@ export default { link: slots.links, name: slots.names, info: slots.info, - }).map(({classes, image, link, name, info}, index) => + + notFromThisGroup: + slots.notFromThisGroup ?? + Array.from(slots.links).fill(null) + }).map(({ + classes, + image, + link, + name, + info, + notFromThisGroup, + }, index) => link.slots({ attributes: [ {class: ['grid-item', 'box']}, @@ -71,7 +83,15 @@ export default { html.tag('span', {[html.onlyIfContent]: true}, - language.sanitize(name)), + (notFromThisGroup + ? language.encapsulate('misc.coverGrid.details.notFromThisGroup', capsule => + language.$(capsule, { + name, + marker: + html.tag('span', {class: 'grid-name-marker'}, + language.$(capsule, 'marker')), + })) + : language.sanitize(name))), html.tag('span', {[html.onlyIfContent]: true}, diff --git a/src/content/dependencies/generateGroupGalleryPageAlbumGrid.js b/src/content/dependencies/generateGroupGalleryPageAlbumGrid.js index 7015679b..7d9aa2d2 100644 --- a/src/content/dependencies/generateGroupGalleryPageAlbumGrid.js +++ b/src/content/dependencies/generateGroupGalleryPageAlbumGrid.js @@ -5,7 +5,7 @@ export default { contentDependencies: ['generateCoverGrid', 'image', 'linkAlbum'], extraDependencies: ['language'], - relations: (relation, albums) => ({ + relations: (relation, albums, _group) => ({ coverGrid: relation('generateCoverGrid'), @@ -20,7 +20,7 @@ export default { : relation('image'))) }), - data: (albums) => ({ + data: (albums, group) => ({ names: albums.map(album => album.name), @@ -29,6 +29,9 @@ export default { tracks: albums.map(album => album.tracks.length), + + notFromThisGroup: + albums.map(album => !album.groups.includes(group)), }), generate: (data, relations, {language}) => @@ -36,6 +39,7 @@ export default { relations.coverGrid.slots({ links: relations.links, names: data.names, + notFromThisGroup: data.notFromThisGroup, images: stitchArrays({ diff --git a/src/content/dependencies/generateGroupGalleryPageAlbumsByDateView.js b/src/content/dependencies/generateGroupGalleryPageAlbumsByDateView.js index 54f4b8cb..b7d01eb5 100644 --- a/src/content/dependencies/generateGroupGalleryPageAlbumsByDateView.js +++ b/src/content/dependencies/generateGroupGalleryPageAlbumsByDateView.js @@ -9,9 +9,11 @@ export default { sortChronologically(group.albums, {latestFirst: true}), }), - relations: (relation, query, _group) => ({ + relations: (relation, query, group) => ({ albumGrid: - relation('generateGroupGalleryPageAlbumGrid', query.albums), + relation('generateGroupGalleryPageAlbumGrid', + query.albums, + group), }), slots: { diff --git a/src/content/dependencies/generateGroupGalleryPageSeriesSection.js b/src/content/dependencies/generateGroupGalleryPageSeriesSection.js index 3fe3fb45..2ccead5d 100644 --- a/src/content/dependencies/generateGroupGalleryPageSeriesSection.js +++ b/src/content/dependencies/generateGroupGalleryPageSeriesSection.js @@ -21,6 +21,9 @@ export default { query.allAlbumsDated = series.albums.every(album => album.date); + query.anyAlbumNotFromThisGroup = + series.albums.some(album => !album.groups.includes(series.group)); + query.latestAlbum = albumsLatestFirst .filter(album => album.date) @@ -36,21 +39,28 @@ export default { return query; }, - relations: (relation, query, _series) => ({ + relations: (relation, query, series) => ({ gallerySection: relation('generateExpandableGallerySection'), gridAboveCut: - relation('generateGroupGalleryPageAlbumGrid', query.albumsAboveCut), + relation('generateGroupGalleryPageAlbumGrid', + query.albumsAboveCut, + series.group), gridBelowCut: - relation('generateGroupGalleryPageAlbumGrid', query.albumsBelowCut), + relation('generateGroupGalleryPageAlbumGrid', + query.albumsBelowCut, + series.group), }), data: (query, series) => ({ name: series.name, + groupName: + series.group.name, + albums: series.albums.length, @@ -62,6 +72,9 @@ export default { allAlbumsDated: query.allAlbumsDated, + anyAlbumNotFromThisGroup: + query.anyAlbumNotFromThisGroup, + earliestAlbumDate: (query.earliestAlbum ? query.earliestAlbum.date @@ -82,43 +95,57 @@ export default { contentBelowCut: relations.gridBelowCut, caption: - language.encapsulate(capsule, 'caption', workingCapsule => { - const workingOptions = {}; - - workingOptions.tracks = - html.tag('b', - language.countTracks(data.tracks, {unit: true})); - - workingOptions.albums = - html.tag('b', - language.countAlbums(data.albums, {unit: true})); - - if (data.allAlbumsDated) { - const earliestDate = data.earliestAlbumDate; - const latestDate = data.latestAlbumDate; - - const earliestYear = earliestDate.getFullYear(); - const latestYear = latestDate.getFullYear(); - - if (earliestYear === latestYear) { - if (data.albums === 1) { - workingCapsule += '.withDate'; - workingOptions.date = - language.formatDate(earliestDate); - } else { - workingCapsule += '.withYear'; - workingOptions.year = - language.formatYear(earliestDate); + language.encapsulate(capsule, 'caption', captionCapsule => + html.tags([ + data.anyAlbumNotFromThisGroup && + language.$(captionCapsule, 'seriesAlbumsNotFromGroup', { + marker: + language.$('misc.coverGrid.details.notFromThisGroup.marker'), + + series: + html.tag('i', data.name), + + group: data.groupName, + }), + + language.encapsulate(captionCapsule, workingCapsule => { + const workingOptions = {}; + + workingOptions.tracks = + html.tag('b', + language.countTracks(data.tracks, {unit: true})); + + workingOptions.albums = + html.tag('b', + language.countAlbums(data.albums, {unit: true})); + + if (data.allAlbumsDated) { + const earliestDate = data.earliestAlbumDate; + const latestDate = data.latestAlbumDate; + + const earliestYear = earliestDate.getFullYear(); + const latestYear = latestDate.getFullYear(); + + if (earliestYear === latestYear) { + if (data.albums === 1) { + workingCapsule += '.withDate'; + workingOptions.date = + language.formatDate(earliestDate); + } else { + workingCapsule += '.withYear'; + workingOptions.year = + language.formatYear(earliestDate); + } + } else { + workingCapsule += '.withYearRange'; + workingOptions.yearRange = + language.formatYearRange(earliestDate, latestDate); + } } - } else { - workingCapsule += '.withYearRange'; - workingOptions.yearRange = - language.formatYearRange(earliestDate, latestDate); - } - } - - return language.$(workingCapsule, workingOptions); - }), + + return language.$(workingCapsule, workingOptions); + }), + ], {[html.joinChildren]: html.tag('br')})), expandCue: language.$(capsule, 'expand'), diff --git a/src/static/css/site.css b/src/static/css/site.css index 9394e4c8..e536a235 100644 --- a/src/static/css/site.css +++ b/src/static/css/site.css @@ -2874,6 +2874,10 @@ video.pixelate, .pixelate video { max-width: 200px; } +.grid-name-marker { + color: white; +} + .grid-actions { display: flex; flex-direction: row; diff --git a/src/strings-default.yaml b/src/strings-default.yaml index 0f9bd54a..74b05b74 100644 --- a/src/strings-default.yaml +++ b/src/strings-default.yaml @@ -973,6 +973,9 @@ misc: noCoverArt: "{ALBUM}" details: + notFromThisGroup: "{NAME}{MARKER}" + notFromThisGroup.marker: "*" + accent: "({DETAILS})" albumLength: "{TRACKS}, {TIME}" @@ -1689,6 +1692,9 @@ groupGalleryPage: caption.withYearRange: >- {TRACKS} across {ALBUMS}, released {YEAR_RANGE}. + caption.seriesAlbumsNotFromGroup: >- + Albums marked {MARKER} are part of {SERIES}, but not from {GROUP}. + expand: >- Show the rest! -- cgit 1.3.0-6-gf8a5