Add Video Rows

components-eleventy/video/row.js

@@ -0,0 +1,80 @@
+
+import VideoCard from './card.js'
+import SubmitCard from './submit-card.js'
+
+function getCardType ( video ) {
+    const isSubmitCard = video.endpoint.includes('https://docs.google.com/forms')
+
+    if ( isSubmitCard ) return SubmitCard
+
+    return VideoCard
+}
+
+export default function ( videos, options = {} ) {
+
+    const {
+        cardWidth = '325',
+        classes = ''
+    } = options
+
+    // Math.random should be unique because of its seeding algorithm.
+    // Convert it to base 36 (numbers + letters), and grab the first 9 characters
+    // after the decimal.
+    const uid = Math.random().toString(36).substr(2, 9)
+    const rowId = `row-${ uid }`
+
+    // Setup inline lazysizes
+    this.usingComponent( 'helpers/scroll.js' )
+
+    // console.log('video', video)
+
+    const cardsHtml = videos.map( video => {
+        const Card = getCardType( video )
+
+        // console.log('Card', this.boundComponent(Card)( video ) )
+
+        return this.boundComponent(Card)( video )
+    } ).join('')
+
+    // console.log( 'cardsHtml', cardsHtml )
+
+    return /* html */`
+
+<div class="video-row relative w-full ${ classes }">
+
+    <div
+        id="${ rowId }"
+        class="video-row-contents flex overflow-x-auto whitespace-no-wrap py-2 space-x-6"
+        style="scroll-snap-type:x mandatory;"
+    >
+
+        ${ cardsHtml }
+
+    </div>
+    <button
+        class="absolute left-0 h-10 w-10 flex justify-center items-center transform -translate-y-1/2 -translate-x-1/2 bg-darker rounded-full"
+        style="top:50%;"
+        distance="${ cardWidth * -1 }"
+        scroll-target="#${ rowId }"
+        onclick="scrollHorizontalCarousel( event )"
+    >
+        <svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400" style="transform: scaleX(-1);">
+            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
+        </svg>
+    </button>
+    <button
+        class="absolute right-0 h-10 w-10 flex justify-center items-center transform -translate-y-1/2 translate-x-1/2 bg-darker rounded-full"
+        style="top:50%;"
+        distance="${ cardWidth }"
+        scroll-target="#${ rowId }"
+        onclick="scrollHorizontalCarousel( event )"
+    >
+        <svg viewBox="0 0 20 20" fill="currentColor" class="h-5 w-5 text-gray-400">
+            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
+        </svg>
+    </button>
+
+</div>
+
+    `
+}