From 3553923530adcb67f579cf56471baafff96abfb2 Mon Sep 17 00:00:00 2001 From: Sam Carlton Date: Fri, 29 Jan 2021 17:32:55 -0600 Subject: [PATCH] Add Video Rows --- components-eleventy/video/card.js | 9 +-- components-eleventy/video/row.js | 80 +++++++++++++++++++++++ components-eleventy/video/submit-card.js | 81 ++++++++++++++++++++++++ helpers/scroll.js | 13 ++++ pages-eleventy/tv.11ty.js | 20 +----- 5 files changed, 182 insertions(+), 21 deletions(-) create mode 100644 components-eleventy/video/row.js create mode 100644 components-eleventy/video/submit-card.js create mode 100644 helpers/scroll.js diff --git a/components-eleventy/video/card.js b/components-eleventy/video/card.js index ceedfb1..0f77819 100644 --- a/components-eleventy/video/card.js +++ b/components-eleventy/video/card.js @@ -9,10 +9,11 @@ function pill ( text ) { ` } -export default function ( video, { - width = '325px', - classes = 'w-full flex-shrink-0 flex-grow-0 border-2 border-transparent rounded-2xl overflow-hidden' -} ) { +export default function ( video, options = {} ) { + const { + width = '325px', + classes = 'w-full flex-shrink-0 flex-grow-0 border-2 border-transparent rounded-2xl overflow-hidden' + } = options // Setup inline lazysizes this.usingComponent( 'node_modules/lazysizes/lazysizes.min.js' ) diff --git a/components-eleventy/video/row.js b/components-eleventy/video/row.js new file mode 100644 index 0000000..308e9c5 --- /dev/null +++ b/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 */` + +
+ +
+ + ${ cardsHtml } + +
+ + + +
+ + ` +} diff --git a/components-eleventy/video/submit-card.js b/components-eleventy/video/submit-card.js new file mode 100644 index 0000000..717bc4b --- /dev/null +++ b/components-eleventy/video/submit-card.js @@ -0,0 +1,81 @@ + +export default function ( video, { + width = '325px', + classes = 'w-full flex-shrink-0 flex-grow-0 border-2 border-transparent rounded-2xl overflow-hidden' +} ) { + + // Setup inline lazysizes + // this.usingComponent( 'node_modules/lazysizes/lazysizes.min.js' ) + + // console.log('video', video) + + return /* html */` +
+ +
+
+
+
+
+
+ + + +
+
+
+
Submit Video
+
+
+ +
+ +
+ +
+
+
+ + + ${video.name} + +
+
+
+
+ + + +
+ +
+ + +
+
${ video.name }
+
+
+ +
+` +} diff --git a/helpers/scroll.js b/helpers/scroll.js new file mode 100644 index 0000000..e94fbfa --- /dev/null +++ b/helpers/scroll.js @@ -0,0 +1,13 @@ + + +function scrollHorizontalCarousel ( event ) { + event.stopPropagation() + + // console.log('event.target', event.currentTarget) + // console.log('distance', event.currentTarget.getAttribute('distance')) + + const distance = Number(event.currentTarget.getAttribute('distance')) + const scrollTarget = document.querySelector(event.currentTarget.getAttribute('scroll-target')) + + scrollTarget.scrollBy({ left: distance, behavior: 'smooth' }) +} diff --git a/pages-eleventy/tv.11ty.js b/pages-eleventy/tv.11ty.js index 74ff865..693dd74 100644 --- a/pages-eleventy/tv.11ty.js +++ b/pages-eleventy/tv.11ty.js @@ -2,7 +2,7 @@ import dotenv from 'dotenv' import config from '../nuxt.config' -import VideoCard from '../components-eleventy/video/card.js' +import VideoRow from '../components-eleventy/video/row.js' // Setup dotenv dotenv.config() @@ -51,7 +51,7 @@ class TV { } } - render({ name, video }) { + render({ video }) { // console.log('video.payload', Object.keys(video.payload)) @@ -80,23 +80,9 @@ class TV {

Related Videos

-
-
- ${ video.payload.relatedVideos.map( this.boundComponent(VideoCard) ).join('') } + ${ this.boundComponent(VideoRow)( video.payload.relatedVideos ) } -
- - -