From 3fb01a3022a3f47c0e1e6e76771a35fce23a128b Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Fri, 29 Dec 2023 23:58:38 -0400 Subject: content: generateColorStyleAttribute --- .../dependencies/generateAlbumSecondaryNav.js | 26 ++++--------- .../dependencies/generateColorStyleAttribute.js | 37 ++++++++++++++++++ .../dependencies/generateColorStyleRules.js | 23 ++++++++--- .../dependencies/generateCommentaryEntry.js | 17 ++++---- src/content/dependencies/generateContentHeading.js | 9 ++--- src/content/dependencies/generateFlashIndexPage.js | 45 ++++++---------------- src/content/dependencies/generateGroupInfoPage.js | 21 +++------- .../dependencies/generateGroupSecondaryNav.js | 14 +++---- .../generateGroupSidebarCategoryDetails.js | 12 ++---- src/content/dependencies/generateTrackInfoPage.js | 21 +++------- .../dependencies/generateWikiHomeContentRow.js | 25 ++++-------- src/content/dependencies/image.js | 14 +++---- 12 files changed, 119 insertions(+), 145 deletions(-) create mode 100644 src/content/dependencies/generateColorStyleAttribute.js (limited to 'src') diff --git a/src/content/dependencies/generateAlbumSecondaryNav.js b/src/content/dependencies/generateAlbumSecondaryNav.js index bbf98875..d2dd7db7 100644 --- a/src/content/dependencies/generateAlbumSecondaryNav.js +++ b/src/content/dependencies/generateAlbumSecondaryNav.js @@ -2,7 +2,7 @@ import {stitchArrays} from '#sugar'; export default { contentDependencies: [ - 'generateColorStyleVariables', + 'generateColorStyleAttribute', 'generatePreviousNextLinks', 'generateSecondaryNav', 'linkAlbumDynamically', @@ -48,9 +48,9 @@ export default { album.groups .map(group => relation('linkGroup', group)); - relations.colorVariables = + relations.colorStyles = album.groups - .map(() => relation('generateColorStyleVariables')); + .map(group => relation('generateColorStyleAttribute', group.color)); if (query.adjacentGroupInfo) { relations.previousNextLinks = @@ -78,13 +78,6 @@ export default { return relations; }, - data(query, album) { - return { - groupColors: - album.groups.map(group => group.color), - }; - }, - slots: { mode: { validate: v => v.is('album', 'track'), @@ -92,24 +85,22 @@ export default { }, }, - generate(data, relations, slots, {html, language}) { + generate(relations, slots, {html, language}) { return relations.secondaryNav.slots({ class: 'nav-links-groups', content: stitchArrays({ - colorVariables: relations.colorVariables, + colorStyle: relations.colorStyles, groupLink: relations.groupLinks, previousNextLinks: relations.previousNextLinks ?? null, previousAlbumLink: relations.previousAlbumLinks ?? null, nextAlbumLink: relations.nextAlbumLinks ?? null, - groupColor: data.groupColors, }).map(({ - colorVariables, + colorStyle, groupLink, previousNextLinks, previousAlbumLink, nextAlbumLink, - groupColor, }) => { if ( slots.mode === 'track' || @@ -129,10 +120,7 @@ export default { return ( html.tag('span', - {style: - colorVariables - .slot('color', groupColor) - .content}, + colorStyle, [ language.$('albumSidebar.groupBox.title', { diff --git a/src/content/dependencies/generateColorStyleAttribute.js b/src/content/dependencies/generateColorStyleAttribute.js new file mode 100644 index 00000000..af8633aa --- /dev/null +++ b/src/content/dependencies/generateColorStyleAttribute.js @@ -0,0 +1,37 @@ +export default { + contentDependencies: ['generateColorStyleVariables'], + extraDependencies: ['html'], + + relations: (relation) => ({ + colorVariables: + relation('generateColorStyleVariables'), + }), + + data: (color) => ({ + color: + color ?? null, + }), + + slots: { + color: { + validate: v => v.isColor, + }, + + context: { + validate: v => v.is( + 'any-content', + 'page-root', + 'primary-only'), + + default: 'any-content', + }, + }, + + generate: (data, relations, slots) => ({ + style: + relations.colorVariables.slots({ + color: slots.color ?? data.color, + context: slots.context, + }).content, + }), +}; diff --git a/src/content/dependencies/generateColorStyleRules.js b/src/content/dependencies/generateColorStyleRules.js index 3f1d0130..c412b8f2 100644 --- a/src/content/dependencies/generateColorStyleRules.js +++ b/src/content/dependencies/generateColorStyleRules.js @@ -2,15 +2,26 @@ export default { contentDependencies: ['generateColorStyleVariables'], extraDependencies: ['html'], - relations: (relation) => - ({variables: relation('generateColorStyleVariables')}), + relations: (relation) => ({ + variables: + relation('generateColorStyleVariables'), + }), + + data: (color) => ({ + color: + color ?? null, + }), slots: { - color: {validate: v => v.isColor}, + color: { + validate: v => v.isColor, + }, }, - generate(relations, slots) { - if (!slots.color) { + generate(data, relations, slots) { + const color = data.color ?? slots.color; + + if (!color) { return ''; } @@ -19,7 +30,7 @@ export default { ...( relations.variables .slots({ - color: slots.color, + color, context: 'page-root', mode: 'property-list', }) diff --git a/src/content/dependencies/generateCommentaryEntry.js b/src/content/dependencies/generateCommentaryEntry.js index b4f24686..522a0284 100644 --- a/src/content/dependencies/generateCommentaryEntry.js +++ b/src/content/dependencies/generateCommentaryEntry.js @@ -2,7 +2,7 @@ import {empty} from '#sugar'; export default { contentDependencies: [ - 'generateColorStyleVariables', + 'generateColorStyleAttribute', 'linkArtist', 'transformContent', ], @@ -31,8 +31,8 @@ export default { ? relation('transformContent', entry.body) : null), - colorVariables: - relation('generateColorStyleVariables'), + colorStyle: + relation('generateColorStyleAttribute'), }), data: (entry) => ({ @@ -82,19 +82,16 @@ export default { } const style = - (slots.color - ? relations.colorVariables - .slot('color', slots.color) - .content - : null); + slots.color && + relations.colorStyle.slot('color', slots.color); return html.tags([ html.tag('p', {class: 'commentary-entry-heading'}, - {style}, + style, language.$(...titleParts, titleOptions)), html.tag('blockquote', {class: 'commentary-entry-body'}, - {style}, + style, relations.bodyContent.slot('mode', 'multiline')), ]); }, diff --git a/src/content/dependencies/generateContentHeading.js b/src/content/dependencies/generateContentHeading.js index 57bacbe5..816cc98a 100644 --- a/src/content/dependencies/generateContentHeading.js +++ b/src/content/dependencies/generateContentHeading.js @@ -1,9 +1,9 @@ export default { extraDependencies: ['html'], - contentDependencies: ['generateColorStyleVariables'], + contentDependencies: ['generateColorStyleAttribute'], relations: (relation) => ({ - colorVariables: relation('generateColorStyleVariables'), + colorStyle: relation('generateColorStyleAttribute'), }), slots: { @@ -22,10 +22,7 @@ export default { {tabindex: '0'}, slots.color && - {style: - relations.colorVariables - .slot('color', slots.color) - .content}, + relations.colorStyle.slot('color', slots.color), [ html.tag('span', {class: 'content-heading-main-title'}, diff --git a/src/content/dependencies/generateFlashIndexPage.js b/src/content/dependencies/generateFlashIndexPage.js index 621d62aa..57072a1f 100644 --- a/src/content/dependencies/generateFlashIndexPage.js +++ b/src/content/dependencies/generateFlashIndexPage.js @@ -2,7 +2,7 @@ import {empty, stitchArrays} from '#sugar'; export default { contentDependencies: [ - 'generateColorStyleVariables', + 'generateColorStyleAttribute', 'generateCoverGrid', 'generatePageLayout', 'image', @@ -29,13 +29,13 @@ export default { layout: relation('generatePageLayout'), - jumpLinkColorVariables: + jumpLinkColorStyles: query.jumpActs - .map(() => relation('generateColorStyleVariables')), + .map(act => relation('generateColorStyleAttribute', act.jumpColor)), - actColorVariables: + actColorStyles: query.flashActs - .map(() => relation('generateColorStyleVariables')), + .map(act => relation('generateColorStyleAttribute', act.color)), actLinks: query.flashActs @@ -61,10 +61,6 @@ export default { query.jumpActs .map(act => act.directory), - jumpLinkColors: - query.jumpActs - .map(act => act.jumpColor), - jumpLinkLabels: query.jumpActs .map(act => act.jump), @@ -73,10 +69,6 @@ export default { query.flashActs .map(act => act.directory), - actColors: - query.flashActs - .map(act => act.color), - actCoverGridNames: query.flashActs .map(act => act.flashes @@ -101,28 +93,21 @@ export default { html.tag('ul', {class: 'quick-info'}, stitchArrays({ - colorVariables: relations.jumpLinkColorVariables, + colorStyle: relations.jumpLinkColorStyles, anchor: data.jumpLinkAnchors, - color: data.jumpLinkColors, label: data.jumpLinkLabels, - }).map(({colorVariables, anchor, color, label}) => + }).map(({colorStyle, anchor, label}) => html.tag('li', html.tag('a', {href: '#' + anchor}, - - {style: - colorVariables - .slot('color', color) - .content}, - + colorStyle, label)))), ], stitchArrays({ - colorVariables: relations.actColorVariables, + colorStyle: relations.actColorStyles, actLink: relations.actLinks, anchor: data.actAnchors, - color: data.actColors, coverGrid: relations.actCoverGrids, coverGridImages: relations.actCoverGridImages, @@ -130,10 +115,9 @@ export default { coverGridNames: data.actCoverGridNames, coverGridPaths: data.actCoverGridPaths, }).map(({ - colorVariables, - anchor, - color, + colorStyle, actLink, + anchor, coverGrid, coverGridImages, @@ -143,12 +127,7 @@ export default { }, index) => [ html.tag('h2', {id: anchor}, - - {style: - colorVariables - .slot('color', color) - .content}, - + colorStyle, actLink), coverGrid.slots({ diff --git a/src/content/dependencies/generateGroupInfoPage.js b/src/content/dependencies/generateGroupInfoPage.js index 8d123c92..3d10298d 100644 --- a/src/content/dependencies/generateGroupInfoPage.js +++ b/src/content/dependencies/generateGroupInfoPage.js @@ -3,7 +3,7 @@ import {empty, stitchArrays} from '#sugar'; export default { contentDependencies: [ 'generateAbsoluteDatetimestamp', - 'generateColorStyleVariables', + 'generateColorStyleAttribute', 'generateContentHeading', 'generateGroupNavLinks', 'generateGroupSecondaryNav', @@ -64,9 +64,9 @@ export default { sec.albums.galleryLink = relation('linkGroupGallery', group); - sec.albums.colorVariables = + sec.albums.albumColorStyles = group.albums - .map(() => relation('generateColorStyleVariables')); + .map(album => relation('generateColorStyleAttribute', album.color)); sec.albums.albumLinks = group.albums @@ -96,9 +96,6 @@ export default { data.name = group.name; data.color = group.color; - data.albumColors = - group.albums.map(album => album.color); - return data; }, @@ -145,14 +142,12 @@ export default { albumLink: sec.albums.albumLinks, groupLink: sec.albums.groupLinks, datetimestamp: sec.albums.datetimestamps, - colorVariables: sec.albums.colorVariables, - albumColor: data.albumColors, + albumColorStyle: sec.albums.albumColorStyles, }).map(({ albumLink, groupLink, datetimestamp, - colorVariables, - albumColor, + albumColorStyle, }) => { const prefix = 'groupInfoPage.albumList.item'; const parts = [prefix]; @@ -182,11 +177,7 @@ export default { return ( html.tag('li', - {style: - colorVariables - .slot('color', albumColor) - .content}, - + albumColorStyle, language.$(...parts, options))); })), ], diff --git a/src/content/dependencies/generateGroupSecondaryNav.js b/src/content/dependencies/generateGroupSecondaryNav.js index 43c78a0f..c649e300 100644 --- a/src/content/dependencies/generateGroupSecondaryNav.js +++ b/src/content/dependencies/generateGroupSecondaryNav.js @@ -1,6 +1,6 @@ export default { contentDependencies: [ - 'generateColorStyleVariables', + 'generateColorStyleAttribute', 'generatePreviousNextLinks', 'generateSecondaryNav', 'linkGroupDynamically', @@ -34,7 +34,7 @@ export default { }; }, - relations(relation, query, sprawl, _group) { + relations(relation, query, sprawl, group) { const relations = {}; relations.secondaryNav = @@ -45,8 +45,8 @@ export default { relation('linkListing', sprawl.groupsByCategoryListing); } - relations.colorVariables = - relation('generateColorStyleVariables'); + relations.colorStyle = + relation('generateColorStyleAttribute', group.category.color); if (query.previousGroup || query.nextGroup) { relations.previousNextLinks = @@ -68,7 +68,6 @@ export default { data: (query, sprawl, group) => ({ categoryName: group.category.name, - categoryColor: group.category.color, }), generate(data, relations, {html, language}) { @@ -89,10 +88,7 @@ export default { (!relations.previousGroupLink && !relations.nextGroupLink ? categoryLink : html.tag('span', - {style: - relations.colorVariables - .slot('color', data.categoryColor) - .content}, + relations.colorStyle, [ categoryLink.slot('color', false), diff --git a/src/content/dependencies/generateGroupSidebarCategoryDetails.js b/src/content/dependencies/generateGroupSidebarCategoryDetails.js index 19c5447c..69de373b 100644 --- a/src/content/dependencies/generateGroupSidebarCategoryDetails.js +++ b/src/content/dependencies/generateGroupSidebarCategoryDetails.js @@ -2,7 +2,7 @@ import {empty, stitchArrays} from '#sugar'; export default { contentDependencies: [ - 'generateColorStyleVariables', + 'generateColorStyleAttribute', 'linkGroup', 'linkGroupGallery', ], @@ -11,8 +11,8 @@ export default { relations(relation, category) { return { - colorVariables: - relation('generateColorStyleVariables'), + colorStyle: + relation('generateColorStyleAttribute', category.color), groupInfoLinks: category.groups.map(group => @@ -30,7 +30,6 @@ export default { const data = {}; data.name = category.name; - data.color = category.color; data.isCurrentCategory = category === group.category; @@ -54,10 +53,7 @@ export default { [ html.tag('summary', - {style: - relations.colorVariables - .slot('color', data.color) - .content}, + relations.colorStyle, html.tag('span', language.$('groupSidebar.groupList.category', { diff --git a/src/content/dependencies/generateTrackInfoPage.js b/src/content/dependencies/generateTrackInfoPage.js index b5121386..25664148 100644 --- a/src/content/dependencies/generateTrackInfoPage.js +++ b/src/content/dependencies/generateTrackInfoPage.js @@ -12,7 +12,7 @@ export default { 'generateAlbumSidebar', 'generateAlbumStyleRules', 'generateChronologyLinks', - 'generateColorStyleVariables', + 'generateColorStyleAttribute', 'generateCommentarySection', 'generateContentHeading', 'generateContributionList', @@ -142,9 +142,9 @@ export default { otherReleases.heading = relation('generateContentHeading'); - otherReleases.colorVariables = + otherReleases.colorStyles = track.otherReleases - .map(() => relation('generateColorStyleVariables')); + .map(track => relation('generateColorStyleAttribute', track.color)); otherReleases.trackLinks = track.otherReleases @@ -315,9 +315,6 @@ export default { hasTrackNumbers: track.album.hasTrackNumbers, trackNumber: track.album.tracks.indexOf(track) + 1, - otherReleaseColors: - track.otherReleases.map(track => track.color), - numAdditionalFiles: track.additionalFiles.length, }; }, @@ -387,14 +384,12 @@ export default { trackLink: sec.otherReleases.trackLinks, albumLink: sec.otherReleases.albumLinks, datetimestamp: sec.otherReleases.datetimestamps, - colorVariables: sec.otherReleases.colorVariables, - color: data.otherReleaseColors, + colorStyle: sec.otherReleases.colorStyles, }).map(({ trackLink, albumLink, datetimestamp, - colorVariables, - color, + colorStyle, }) => { const parts = ['releaseInfo.alsoReleasedAs.item']; const options = {}; @@ -413,11 +408,7 @@ export default { return ( html.tag('li', - {style: - colorVariables - .slot('color', color) - .content}, - + colorStyle, language.$(...parts, options))); })), ], diff --git a/src/content/dependencies/generateWikiHomeContentRow.js b/src/content/dependencies/generateWikiHomeContentRow.js index c8354fea..8bc54e15 100644 --- a/src/content/dependencies/generateWikiHomeContentRow.js +++ b/src/content/dependencies/generateWikiHomeContentRow.js @@ -1,20 +1,14 @@ export default { - contentDependencies: ['generateColorStyleVariables'], + contentDependencies: ['generateColorStyleAttribute'], extraDependencies: ['html'], - relations(relation) { - return { - colorVariables: - relation('generateColorStyleVariables'), - }; - }, + relations: (relation, row) => ({ + colorStyle: + relation('generateColorStyleAttribute', row.color), + }), - data(row) { - return { - name: row.name, - color: row.color, - }; - }, + data: (row) => + ({name: row.name}), slots: { content: {type: 'html'}, @@ -22,10 +16,7 @@ export default { generate: (data, relations, slots, {html}) => html.tag('section', {class: 'row'}, - {style: - relations.colorVariables - .slot('color', data.color) - .content}, + relations.colorStyle, [ html.tag('h2', data.name), diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js index 91bae43c..9fa2ba1c 100644 --- a/src/content/dependencies/image.js +++ b/src/content/dependencies/image.js @@ -14,10 +14,11 @@ export default { 'to', ], - contentDependencies: ['generateColorStyleVariables'], + contentDependencies: ['generateColorStyleAttribute'], relations: (relation) => ({ - colorVariables: relation('generateColorStyleVariables'), + colorStyle: + relation('generateColorStyleAttribute'), }), data(artTags) { @@ -122,9 +123,8 @@ export default { const colorStyle = slots.color && - relations.colorVariables - .slot('color', slots.color) - .content; + relations.colorStyle + .slot('color', slots.color); const willSquare = slots.square; @@ -262,7 +262,7 @@ export default { wrapped = html.tag('div', {class: 'image-container'}, - {style: styleOnContainer}, + styleOnContainer, !originalSrc && {style: 'placeholder-image'}, @@ -295,7 +295,7 @@ export default { html.tag('a', {class: ['box', 'image-link']}, {id: idOnLink}, {class: classOnLink}, - {style: styleOnLink}, + styleOnLink, hide && {class: 'js-hide'}, -- cgit 1.3.0-6-gf8a5