diff options
author | (quasar) nebula <qznebula@protonmail.com> | 2023-06-23 19:41:15 -0300 |
---|---|---|
committer | (quasar) nebula <qznebula@protonmail.com> | 2023-06-23 19:41:38 -0300 |
commit | 89e79008b02331b69660bb16b6ca737e37483e61 (patch) | |
tree | 90d24e41e72f72bb3e9898d52c19aad323456bdd /src/content/dependencies/generateCoverCarousel.js | |
parent | d7bd80239dead1179450b2a0b97f97c59e150905 (diff) |
content: generateCoverCarousel
This also introduces a handy stitchArrays() utility, which probably has some uses not caught in this commit.
Diffstat (limited to 'src/content/dependencies/generateCoverCarousel.js')
-rw-r--r-- | src/content/dependencies/generateCoverCarousel.js | 54 |
1 files changed, 54 insertions, 0 deletions
diff --git a/src/content/dependencies/generateCoverCarousel.js b/src/content/dependencies/generateCoverCarousel.js new file mode 100644 index 00000000..2a2503ac --- /dev/null +++ b/src/content/dependencies/generateCoverCarousel.js @@ -0,0 +1,54 @@ +import {empty, repeat, stitchArrays} from '../../util/sugar.js'; +import {getCarouselLayoutForNumberOfItems} from '../../util/wiki-data.js'; + +export default { + extraDependencies: ['html'], + + slots: { + images: {validate: v => v.arrayOf(v.isHTML)}, + links: {validate: v => v.arrayOf(v.isHTML)}, + + lazy: {validate: v => v.oneOf(v.isWholeNumber, v.isBoolean)}, + }, + + generate(slots, {html}) { + const stitched = + stitchArrays({ + image: slots.images, + link: slots.links, + }); + + if (empty(stitched)) { + return; + } + + 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), + }), + })))), + ])); + }, +}; |