splide/src/js/components/elements/index.js

/**
 * The component for the root element.
 *
 * @author    Naotoshi Fujita
 * @copyright Naotoshi Fujita. All rights reserved.
 */

import { find, addClass, child } from '../../utils/dom';
import { exist } from '../../utils/error';
import { values } from '../../utils/object';

/**
 * The property name for UID stored in a window object.
 *
 * @type {string}
 */
const UID_NAME = 'splideUid';


/**
 * The component for the root element.
 *
 * @param {Splide} Splide - A Splide instance.
 *
 * @return {Object} - The component object.
 */
export default ( Splide ) => {
	/**
	 * Hold the root element.
	 *
	 * @type {Element}
	 */
	const root = Splide.root;

	/**
	 * Hold the class list.
	 *
	 * @type {Object}
	 */
	const classes = Splide.classes;

	/*
	 * Assign unique ID to the root element if it doesn't have the one.
	 * Note that IE doesn't support padStart() to fill the uid by 0.
	 */
	if ( ! root.id ) {
		let uid = window[ UID_NAME ] || 0;
		window[ UID_NAME ] = ++uid;
		root.id = `splide${ uid < 10 ? '0' + uid : uid }`;
	}

	/**
	 * Elements component object.
	 *
	 * @type {Object}
	 */
	const Elements = {
		/**
		 * Called when the component is mounted.
		 * Collect main elements and store them as member properties.
		 */
		mount() {
			const message = 'was not found.';

			this.slider = child( root, classes.slider );

			this.track = find( root, `.${ classes.track }` );
			exist( this.track, `A track ${ message }` );

			this.list = child( this.track, classes.list );
			exist( this.list, `A list ${ message }` );

			this.slides = values( this.list.children );
			exist( this.slides.length, `A slide ${ message }` );

			const arrows = findParts( classes.arrows );
			this.arrows = {
				prev: find( arrows, `.${ classes.prev }` ),
				next: find( arrows, `.${ classes.next }` ),
			};

			const autoplay = findParts( classes.autoplay );
			this.bar   = find( findParts( classes.progress ), `.${ classes.bar }` );
			this.play  = find( autoplay, `.${ classes.play }` );
			this.pause = find( autoplay, `.${ classes.pause }` );

			init();
		},

		/**
		 * Called after all components are mounted.
		 */
		mounted() {
			const rootClass = classes.root;
			const options   = Splide.options;

			addClass(
				root,
				`${ rootClass }`,
				`${ rootClass }--${ options.type }`,
				`${ rootClass }--${ options.direction }`,
				options.drag ? `${ rootClass }--draggable` : '',
				options.isNavigation ? `${ rootClass }--nav` : ''
			);
		},
	};

	/**
	 * Find parts only from children of the root or track.
	 *
	 * @return {Element|null} - A found element or null.
	 */
	function findParts( className ) {
		return child( root, className ) || child( Elements.slider, className );
	}

	/**
	 * Initialization.
	 * Assign ID to some elements if it's not available.
	 */
	function init() {
		if ( ! Elements.track.id ) {
			Elements.track.id = `${ root.id }-track`;
		}

		if ( ! Elements.list.id ) {
			Elements.list.id = `${ root.id }-list`;
		}
	}
	
	return Elements;
}