From bdb4276ffae1c978ec1d1a6e462faf8c117e20a9 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Wed, 26 Jul 2023 11:13:29 -0300 Subject: content: generateGridActionLinks --- src/content/dependencies/generateCoverCarousel.js | 67 +++++++++++++--------- src/content/dependencies/generateCoverGrid.js | 18 +++++- .../dependencies/generateGridActionLinks.js | 22 +++++++ 3 files changed, 77 insertions(+), 30 deletions(-) create mode 100644 src/content/dependencies/generateGridActionLinks.js (limited to 'src/content/dependencies') diff --git a/src/content/dependencies/generateCoverCarousel.js b/src/content/dependencies/generateCoverCarousel.js index e854113e..c3ce1df6 100644 --- a/src/content/dependencies/generateCoverCarousel.js +++ b/src/content/dependencies/generateCoverCarousel.js @@ -2,16 +2,24 @@ import {empty, repeat, stitchArrays} from '../../util/sugar.js'; import {getCarouselLayoutForNumberOfItems} from '../../util/wiki-data.js'; export default { + contentDependencies: ['generateGridActionLinks'], extraDependencies: ['html'], + relations(relation) { + return { + actionLinks: relation('generateGridActionLinks'), + }; + }, + slots: { images: {validate: v => v.strictArrayOf(v.isHTML)}, links: {validate: v => v.strictArrayOf(v.isHTML)}, lazy: {validate: v => v.oneOf(v.isWholeNumber, v.isBoolean)}, + actionLinks: {validate: v => v.sparseArrayOf(v.isHTML)}, }, - generate(slots, {html}) { + generate(relations, slots, {html}) { const stitched = stitchArrays({ image: slots.images, @@ -24,31 +32,36 @@ export default { const layout = getCarouselLayoutForNumberOfItems(stitched.length); - return html.tag('div', - { - class: 'carousel-container', - 'data-carousel-rows': layout.rows, - 'data-carousel-columns': layout.columns, - }, - repeat(3, [ - html.tag('div', - {class: 'carousel-grid', 'aria-hidden': 'true'}, - stitched.map(({image, link}, index) => - html.tag('div', {class: 'carousel-item'}, - link.slots({ - attributes: {tabindex: '-1'}, - content: - image.slots({ - thumb: 'small', - square: true, - lazy: - (typeof slots.lazy === 'number' - ? index >= slots.lazy - : typeof slots.lazy === 'boolean' - ? slots.lazy - : false), - }), - })))), - ])); + return html.tags([ + html.tag('div', + { + class: 'carousel-container', + 'data-carousel-rows': layout.rows, + 'data-carousel-columns': layout.columns, + }, + repeat(3, [ + html.tag('div', + {class: 'carousel-grid', 'aria-hidden': 'true'}, + stitched.map(({image, link}, index) => + html.tag('div', {class: 'carousel-item'}, + link.slots({ + attributes: {tabindex: '-1'}, + content: + image.slots({ + thumb: 'small', + square: true, + lazy: + (typeof slots.lazy === 'number' + ? index >= slots.lazy + : typeof slots.lazy === 'boolean' + ? slots.lazy + : false), + }), + })))), + ])), + + relations.actionLinks + .slot('actionLinks', slots.actionLinks), + ]); }, }; diff --git a/src/content/dependencies/generateCoverGrid.js b/src/content/dependencies/generateCoverGrid.js index c7713cce..a9beb6f4 100644 --- a/src/content/dependencies/generateCoverGrid.js +++ b/src/content/dependencies/generateCoverGrid.js @@ -1,8 +1,15 @@ import {stitchArrays} from '../../util/sugar.js'; export default { + contentDependencies: ['generateGridActionLinks'], extraDependencies: ['html'], + relations(relation) { + return { + actionLinks: relation('generateGridActionLinks'), + }; + }, + slots: { images: {validate: v => v.strictArrayOf(v.isHTML)}, links: {validate: v => v.strictArrayOf(v.isHTML)}, @@ -10,11 +17,12 @@ export default { info: {validate: v => v.strictArrayOf(v.isHTML)}, lazy: {validate: v => v.oneOf(v.isWholeNumber, v.isBoolean)}, + actionLinks: {validate: v => v.sparseArrayOf(v.isHTML)}, }, - generate(slots, {html}) { + generate(relations, slots, {html}) { return ( - html.tag('div', {class: 'grid-listing'}, + html.tag('div', {class: 'grid-listing'}, [ stitchArrays({ image: slots.images, link: slots.links, @@ -37,6 +45,10 @@ export default { html.tag('span', {[html.onlyIfContent]: true}, name), html.tag('span', {[html.onlyIfContent]: true}, info), ], - })))); + })), + + relations.actionLinks + .slot('actionLinks', slots.actionLinks), + ])); }, }; diff --git a/src/content/dependencies/generateGridActionLinks.js b/src/content/dependencies/generateGridActionLinks.js new file mode 100644 index 00000000..09399f17 --- /dev/null +++ b/src/content/dependencies/generateGridActionLinks.js @@ -0,0 +1,22 @@ +import {empty} from '../../util/sugar.js'; + +export default { + extraDependencies: ['html'], + + slots: { + actionLinks: {validate: v => v.sparseArrayOf(v.isHTML)}, + }, + + generate(slots, {html}) { + if (empty(slots.actionLinks)) { + return html.blank(); + } + + return ( + html.tag('div', {class: 'grid-actions'}, + slots.actionLinks + .filter(Boolean) + .map(link => link + .slot('attributes', {class: ['grid-item', 'box']})))); + }, +}; -- cgit 1.3.0-6-gf8a5