main/VideoCarouselLoader.js

/**
 * Loads and configures any video carousels that are on the page.
 * Set's up a listener to check if video carousels are loaded dynamically via a liveblog.
 * Creates a VideoCarousel instance for each carousel.
 *
 * @module VideoCarouselLoader
 * @prop {object} selectors - Video carousel CSS selectors
 * @prop {object} settings - Video carousel config settings objects
 */

import VideoCarousel from './classes/VideoCarousel';
import delegateEvent from '../utils/delegateEvent';
import Messenger from './Messenger';

const VideoCarouselLoader = {
	selectors: {
		embed: '.l-videoCarousel--embed',
		standalone: '.l-videoCarousel--standalone',
		drawer: '.l-videoCarousel--drawer',
		smallDrawer: '.l-videoCarousel--smallDrawer',
	},

	settings: {
		embed: {
			carousel: {
				initSettings: {
					gap: 16, // test
					perView: 2,
					peek: {
						before: 0,
						after: 128,
					},
					breakpoints: {
						599: {
							perView: 1,
						},
					},
				},
				activeSettings: {
					gap: 16, // test
					perView: 2,
					peek: 64,
					breakpoints: {
						599: {
							perView: 1,
						},
					},
				},
			},
			isStandalone: false,
		},
		standalone: {
			carousel: {
				initSettings: {
					gap: 32,
					perView: 4,
					peek: {
						before: 0,
						after: 136,
					},
					breakpoints: {
						1199: {
							perView: 3,
							gap: 24,
						},
						899: {
							perView: 2,
							gap: 24,
						},
					},
				},
				activeSettings: {
					gap: 32,
					perView: 4,
					peek: 68,
					breakpoints: {
						1199: {
							perView: 3,
							gap: 24,
						},
						899: {
							perView: 2,
							gap: 24,
						},
					},
				},
				enableAtWidth: 498,
			},
			isStandalone: true,
		},
		drawer: {
			carousel: {
				initSettings: {
					perView: 3,
					peek: {
						before: 0,
						after: 128,
					},
					breakpoints: {
						599: {
							perView: 1,
						},
					},
				},
				activeSettings: {
					perView: 3,
					peek: 64,
					breakpoints: {
						599: {
							perView: 1,
						},
					},
				},
			},
			isStandalone: true,
		},
		smallDrawer: {
			carousel: {
				initSettings: {
					gap: 32,
					perView: 4,
					peek: {
						before: 0,
						after: 136,
					},
					breakpoints: {
						1199: {
							perView: 3,
							gap: 24,
						},
						899: {
							perView: 2,
							gap: 24,
						},
					},
				},
				activeSettings: {
					gap: 32,
					perView: 4,
					peek: 68,
					breakpoints: {
						1199: {
							perView: 3,
							gap: 24,
						},
						899: {
							perView: 2,
							gap: 24,
						},
					},
				},
				enableAtWidth: 498,
			},
			isStandalone: true,
		},
	},

	dynamicRegionSelector: '#wpcom-liveblog-container',

	/**
	 * Initializes video carousel embeds based on `this.selectors` and `this.settings`.
	 * Listens for carousel embeds added via a liveblog.
	 *
	 * @method init
	 */
	init() {
		[].forEach.call( Object.keys( this.selectors ), ( key ) => {
			const $elems = document.querySelectorAll( this.selectors[key]);
			const settings  = this.settings[key];

			[].forEach.call( $elems, ( $elem ) => {
				const videoCarousel = new VideoCarousel( $elem, settings );
				videoCarousel.init();
			});
		});

		// watch for liveblog carousels that are dynamically added
		delegateEvent( this.dynamicRegionSelector, 'click', this.selectors.embed, ( e, $carousel ) => {
			// don't do this if we've already initialized this object
			if ( 'false' === $carousel.dataset.videoCarouselInit ) {
				const videoCarousel = new VideoCarousel( $carousel, this.settings.embed );
				videoCarousel.init();
			}
		});

		// Register iframe receiver for communicating with video player in the iframe.
		Messenger.registerReceiver( 'gnca_video', VideoCarousel );
	},
};

export default VideoCarouselLoader;