/**
* 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;