main/CarouselLoader.js

/**
 * Loads and configures any carousels that are on the page.
 *
 * @module CarouselLoader
 * @prop {object} selectors - Carousel CSS selectors
 * @prop {object} settings - Carousel config settings objects
 */

import Carousel from './classes/Carousel';

const CarouselLoader = {
	selectors: {
		editorsPicks: '.l-editorsPicks',
		featuredCarousel: '.l-featuredCarousel',
		radioBanners: '.l-radioCarousel',
	},

	settings: {
		editorsPicks: {
			initSettings: {
				gap: 32,
				perView: 2,
				peek: {
					before: 0,
					after: 206,
				},
				breakpoints: {
					1023: {
						gap: 32,
						peek: {
							before: 0,
							after: 200,
						},
					},
					599: {
						gap: 16,
						peek: {
							before: 0,
							after: 120,
						},
						perView: 1,
					},
				},
			},
			activeSettings: {
				gap: 32,
				perView: 2,
				peek: 100,
				breakpoints: {
					1023: {
						gap: 32,
						peek: 100,
					},
					599: {
						gap: 16,
						peek: 60,
						perView: 1,
					},
				},
			},
			layoutClass: 'l-editorsPicks',
		},
		featuredCarousel: {
			initSettings: {
				type: 'carousel',
				gap: 1,
				perView: 1,
				peek: 0,
				autoplay: 6000,
			},
			enableAtWidth: 768,
			hasPicker: true,
			layoutClass: 'l-featuredCarousel',
		},
		radioBanners: {
			initSettings: {
				type: 'carousel',
				gap: 1,
				perView: 1,
				peek: {
					before: 120,
					after: 120,
				},
				autoplay: 6000,
				breakpoints: {
					1023: {
						peek: 100,
					},
					599: {
						peek: 0,
					},
				},
			},
			layoutClass: 'l-radioCarousel',
		},
	},

	/**
	 * Initializes carousels based on `this.selectors` and `this.settings`.
	 *
	 * @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 carousel = new Carousel( $elem, settings );
				carousel.init();
			});
		});
	},
};

export default CarouselLoader;