diff options
Diffstat (limited to 'src/content/dependencies/generateCoverCarousel.js')
-rw-r--r-- | src/content/dependencies/generateCoverCarousel.js | 66 |
1 files changed, 66 insertions, 0 deletions
diff --git a/src/content/dependencies/generateCoverCarousel.js b/src/content/dependencies/generateCoverCarousel.js new file mode 100644 index 0000000..69220da --- /dev/null +++ b/src/content/dependencies/generateCoverCarousel.js @@ -0,0 +1,66 @@ +import {empty, repeat, stitchArrays} from '#sugar'; +import {getCarouselLayoutForNumberOfItems} from '#wiki-data'; + +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.anyOf(v.isWholeNumber, v.isBoolean)}, + actionLinks: {validate: v => v.sparseArrayOf(v.isHTML)}, + }, + + generate(relations, slots, {html}) { + const stitched = + stitchArrays({ + image: slots.images, + link: slots.links, + }); + + if (empty(stitched)) { + return; + } + + const layout = getCarouselLayoutForNumberOfItems(stitched.length); + + 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), + ]); + }, +}; |