From ad823614a22807321d28ad25fa5440d439d84975 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Wed, 29 Nov 2023 18:22:05 -0400 Subject: content: generateGroupInfoPage: colorize tooltips --- src/content/dependencies/generateGroupInfoPage.js | 31 +++++++++++++++++++---- 1 file changed, 26 insertions(+), 5 deletions(-) (limited to 'src/content') diff --git a/src/content/dependencies/generateGroupInfoPage.js b/src/content/dependencies/generateGroupInfoPage.js index 5bf2b1bf..0e5d645b 100644 --- a/src/content/dependencies/generateGroupInfoPage.js +++ b/src/content/dependencies/generateGroupInfoPage.js @@ -3,6 +3,7 @@ import {empty, stitchArrays} from '#sugar'; export default { contentDependencies: [ 'generateAbsoluteDatetimestamp', + 'generateColorStyleVariables', 'generateContentHeading', 'generateGroupNavLinks', 'generateGroupSecondaryNav', @@ -63,6 +64,10 @@ export default { sec.albums.galleryLink = relation('linkGroupGallery', group); + sec.albums.colorVariables = + group.albums + .map(() => relation('generateColorStyleVariables')); + sec.albums.albumLinks = group.albums .map(album => relation('linkAlbum', album)); @@ -91,6 +96,9 @@ export default { data.name = group.name; data.color = group.color; + data.albumColors = + group.albums.map(album => album.color); + return data; }, @@ -137,10 +145,21 @@ export default { albumLink: sec.albums.albumLinks, groupLink: sec.albums.groupLinks, datetimestamp: sec.albums.datetimestamps, - }).map(({albumLink, groupLink, datetimestamp}) => { + colorVariables: sec.albums.colorVariables, + albumColor: data.albumColors, + }).map(({ + albumLink, + groupLink, + datetimestamp, + colorVariables, + albumColor, + }) => { const prefix = 'groupInfoPage.albumList.item'; const parts = [prefix]; - const options = {album: albumLink}; + const options = {}; + + options.album = + albumLink.slot('color', false); if (datetimestamp) { parts.push('withYear'); @@ -161,9 +180,11 @@ export default { })); } - return language.$(...parts, options); - }) - .map(content => html.tag('li', content))), + return ( + html.tag('li', + {style: colorVariables.slot('color', albumColor).content}, + language.$(...parts, options))); + })), ], ], -- cgit 1.3.0-6-gf8a5