Carousel: Default

import Util from '@sproutsocial/sprout-brand/modules/util';
import JS_CLASSES from '../../../constants/js-classes';
/**
 * ImageSwapper is a fun class that handles the magic of swapping images in carousels
 * @example
 * const carousels = document.querySelectorAll('.js-carousel');
 * each(carousels, (el)=> { new ImageSwapper({ container: el }); });
 */
class ImageSwapper {
    static defaultProps = {
        container: null, // DOM object of our "carousel"
        childClass: '.js-swapimage', // Interaction class
        carouselInterval: false // if set to an integer will automatically persist the carousel
    };

    constructor(props = {}) {
        this.props = Object.assign({}, ImageSwapper.defaultProps, props);

        if (props.container === null) {
            throw 'ImageSwapper requires a container prop.';
        }

        const carousel = this.props.container;

        const carouselItems = carousel.querySelectorAll(this.props.childClass);

        Util.each(carouselItems, el => {
            if (carousel.classList.contains('js-hover')) {
                el.addEventListener('mouseover', this.swapImage.bind(el));
            }
            el.addEventListener('click', this.swapImage.bind(el));
            el.addEventListener('keypress', this.swapImage.bind(el));
        });

        Util.triggerEvent(carouselItems[0], 'click');

        if (!carousel.classList.contains('js-preventPreload')) {
            this.getImagesToPreload(carouselItems);
        }

        if (this.props.carouselInterval) {
            this.carouselImages(this.props.container, this.props.carouselInterval);
        }
    }

    /**
     * Takes in a carousel element and an integer for an interval
     * then triggers a click to the next carousel item with a setInterval
     */
    carouselImages(el, interval) {
        const carouselItems = el.children;
        let counter = 0;

        setInterval(() => {
            counter = (counter + 1) % carouselItems.length;

            Util.triggerEvent(carouselItems[counter], 'click');
        }, interval);
    }

    /**
     * Gets passed an array of elements and grabs their
     * data-srcset's from the markup and creates an array
     * then sends that created array to our pre-loading function
     */
    getImagesToPreload(el) {
        const isRetina = Util.isRetina();

        Util.each(el, el => {
            const dataSource = el.getAttribute('data-srcset');
            const dataSourceArray = dataSource.split(',');
            let img;

            if (isRetina) {
                let retinaImg = dataSourceArray[1];
                retinaImg = retinaImg.split(' ');
                img = retinaImg[1];
            } else {
                img = dataSourceArray[0];
            }

            this.preloadImages(img);
        });
    }

    /**
     * Takes in an image URL and makes a network request for the image.
     */
    preloadImages(imgURL) {
        const imageObject = new Image();
        imageObject.src = imgURL;
    }

    /**
     * SwapImage removes the active state of other carousel items then
     * adds an active state for the current one, it also updates the
     * target carousel with a data attribute of the srcset
     */
    swapImage() {
        // Remove the active state from the other items

        const parentCarousel = Util.closest(this, JS_CLASSES.CAROUSEL);
        Util.each(parentCarousel.querySelectorAll('.is-active'), el => {
            el.classList.remove('is-active');
        });

        // Add the active state

        this.classList.add('is-active');

        // get the srcset from the data attribute and update its intended target

        const imageSrcset = this.getAttribute('data-srcset');
        const imageTargetId = parentCarousel.hasAttribute('data-target')
            ? parentCarousel.getAttribute('data-target')
            : this.getAttribute('data-target');
        const imageTarget = imageTargetId
            ? document.getElementById(imageTargetId.substr(1))
            : parentCarousel.querySelector(JS_CLASSES.CAROUSEL_TARGET);

        imageTarget.setAttribute('srcset', imageSrcset);
        parentCarousel.classList.add('is-loading');
        imageTarget.addEventListener('load', () => {
            parentCarousel.classList.remove('is-loading');
        });

        if (window.picturefill) {
            window.picturefill({
                elements: [imageTarget],
                reevaluate: true
            });
        }
    }
}

export default ImageSwapper;