From af4ca039b42da9968e82087560eb398f3b3bbd17 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Thu, 17 Jul 2025 15:12:07 -0300 Subject: content, data, client, css: style selector first pass --- src/content/dependencies/generateCoverGrid.js | 10 ++++ .../dependencies/generateGroupGalleryPage.js | 5 +- .../generateGroupGalleryPageAlbumGrid.js | 6 +++ .../generateGroupGalleryPageAlbumsByDateView.js | 22 ++++++-- .../generateGroupGalleryPageStyleSelector.js | 62 ++++++++++++++++++++++ 5 files changed, 101 insertions(+), 4 deletions(-) create mode 100644 src/content/dependencies/generateGroupGalleryPageStyleSelector.js (limited to 'src/content') diff --git a/src/content/dependencies/generateCoverGrid.js b/src/content/dependencies/generateCoverGrid.js index e1f13af3..e7113091 100644 --- a/src/content/dependencies/generateCoverGrid.js +++ b/src/content/dependencies/generateCoverGrid.js @@ -32,6 +32,12 @@ export default { v.isString))), }, + itemAttributes: { + validate: v => + v.strictArrayOf( + v.optional(v.isAttributes)), + }, + lazy: {validate: v => v.anyOf(v.isWholeNumber, v.isBoolean)}, actionLinks: {validate: v => v.sparseArrayOf(v.isHTML)}, }, @@ -44,6 +50,7 @@ export default { [ stitchArrays({ classes: slots.classes, + attributes: slots.itemAttributes, image: slots.images, link: slots.links, name: slots.names, @@ -54,6 +61,7 @@ export default { Array.from(slots.links).fill(null) }).map(({ classes, + attributes, image, link, name, @@ -66,6 +74,8 @@ export default { {class: ['grid-item', 'box']}, + attributes, + (classes ? {class: classes} : null), diff --git a/src/content/dependencies/generateGroupGalleryPage.js b/src/content/dependencies/generateGroupGalleryPage.js index dfdad0e8..8e11f9e5 100644 --- a/src/content/dependencies/generateGroupGalleryPage.js +++ b/src/content/dependencies/generateGroupGalleryPage.js @@ -183,7 +183,10 @@ export default { }))), */ - relations.albumsByDateView, + relations.albumsByDateView.slots({ + showTitle: + !html.isBlank(relations.albumsBySeriesView), + }), relations.albumsBySeriesView.slots({ attributes: [ diff --git a/src/content/dependencies/generateGroupGalleryPageAlbumGrid.js b/src/content/dependencies/generateGroupGalleryPageAlbumGrid.js index 96cadb03..4f8aaf3b 100644 --- a/src/content/dependencies/generateGroupGalleryPageAlbumGrid.js +++ b/src/content/dependencies/generateGroupGalleryPageAlbumGrid.js @@ -33,6 +33,9 @@ export default { tracks: albums.map(album => album.tracks.length), + styles: + albums.map(album => album.style), + notFromThisGroup: albums.map(album => !album.groups.includes(group)), }), @@ -56,6 +59,9 @@ export default { }), })), + itemAttributes: + data.styles.map(style => ({'data-style': style})), + info: stitchArrays({ tracks: data.tracks, diff --git a/src/content/dependencies/generateGroupGalleryPageAlbumsByDateView.js b/src/content/dependencies/generateGroupGalleryPageAlbumsByDateView.js index b7d01eb5..58375f3e 100644 --- a/src/content/dependencies/generateGroupGalleryPageAlbumsByDateView.js +++ b/src/content/dependencies/generateGroupGalleryPageAlbumsByDateView.js @@ -1,7 +1,11 @@ import {sortChronologically} from '#sort'; export default { - contentDependencies: ['generateGroupGalleryPageAlbumGrid'], + contentDependencies: [ + 'generateGroupGalleryPageAlbumGrid', + 'generateGroupGalleryPageStyleSelector', + ], + extraDependencies: ['html', 'language'], query: (group) => ({ @@ -10,6 +14,11 @@ export default { }), relations: (relation, query, group) => ({ + styleSelector: + (group.divideAlbumsByStyle + ? relation('generateGroupGalleryPageStyleSelector', group) + : null), + albumGrid: relation('generateGroupGalleryPageAlbumGrid', query.albums, @@ -17,6 +26,10 @@ export default { }), slots: { + showTitle: { + type: 'boolean', + }, + attributes: { type: 'attributes', mutable: false, @@ -31,8 +44,11 @@ export default { {[html.onlyIfContent]: true}, html.tag('section', [ - html.tag('h2', - language.$(capsule, 'title')), + slots.showTitle && + html.tag('h2', + language.$(capsule, 'title')), + + relations.styleSelector, relations.albumGrid, ]))), diff --git a/src/content/dependencies/generateGroupGalleryPageStyleSelector.js b/src/content/dependencies/generateGroupGalleryPageStyleSelector.js new file mode 100644 index 00000000..4f9d02a9 --- /dev/null +++ b/src/content/dependencies/generateGroupGalleryPageStyleSelector.js @@ -0,0 +1,62 @@ +import {unique} from '#sugar'; + +export default { + extraDependencies: ['html', 'language'], + + query: (group) => ({ + styles: + unique(group.albums.map(album => album.style)), + }), + + data: (query, group) => ({ + albums: + group.albums.length, + + styles: + query.styles, + }), + + generate: (data, {html, language}) => + language.encapsulate('groupGalleryPage', pageCapsule => + (data.styles.length <= 1 + ? html.blank() + : html.tag('p', {class: 'gallery-style-selector'}, + {class: ['drop', 'shiny']}, + + language.encapsulate(pageCapsule, 'albumStyleSwitcher', capsule => [ + html.tag('span', + language.$(capsule)), + + html.tag('br'), + + html.tag('span', {class: 'styles'}, + data.styles.map(style => + html.tag('label', {'data-style': style}, [ + html.tag('input', {type: 'checkbox'}, + {checked: true}), + + html.tag('span', + language.$(capsule, style)), + ]))), + + html.tag('br'), + + html.tag('span', {class: ['count', 'all']}, + language.$(capsule, 'count.all', { + total: data.albums, + })), + + html.tag('span', {class: ['count', 'filtered']}, + {style: 'display: none'}, + + language.$(capsule, 'count.filtered', { + count: html.tag('span'), + total: data.albums, + })), + + html.tag('span', {class: ['count', 'none']}, + {style: 'display: none'}, + + language.$(capsule, 'count.none')), + ])))), +}; -- cgit 1.3.0-6-gf8a5