Slider: Faded

import Wallop from 'wallop';
import {each} from '@sproutsocial/sprout-brand/modules/util';
import '@sproutsocial/sprout-brand/modules/polyfills/request-animation-frame';

/**
 * (Just a) Slider is module for hiding and showing things.
 * @example
 * const sliders = document.querySelectorAll('.js-slider');
 * each(sliders, (el)=> { new Slider({ container: el, options: {autoplay: 4000} }); });
 */
class Slider {
    static defaultProps = {
        container: null,
        hasNavigation: false,
        triggerClass: 'js-slider-trigger',
        animationId: null,
        options: {
            autoplay: false,
            buttonPreviousClass: 'js-slider-previous',
            buttonNextClass: 'js-slider-next',
            itemClass: 'Slider-item',
            currentItemClass: 'is-current',
            showPreviousClass: 'is-showingPrevious',
            showNextClass: 'is-showingNext',
            hidePreviousClass: 'is-hidingPrevious',
            hideNextClass: 'is-hidingNext',
            carousel: true
        }
    };

    constructor(props = {}) {
        props.options = Object.assign({}, Slider.defaultProps.options, props.options || {});
        this.props = Object.assign({}, Slider.defaultProps, props);
        this.slider = new Wallop(this.props.container, this.props.options);

        if (this.props.hasNavigation) {
            // Will check the document for triggers outside of the container, then check within the container
            const triggers =
                document.querySelectorAll(`.${this.props.triggerClass}[data-slider-id="${this.props.container.id}"]`) ||
                this.props.container.querySelectorAll(`.${this.props.triggerClass}`);

            if (triggers && triggers.length > 0) {
                each(triggers, trigger => {
                    trigger.addEventListener('click', e => {
                        e.preventDefault();
                        this.slider.goTo(parseInt(trigger.getAttribute('data-target')));
                        this.changeActiveTrigger(trigger, triggers);
                        this.props.container.focus(); // Auto focus the slider
                        if (this.animationId) {
                            cancelAnimationFrame(this.animationId);
                        }
                    });
                });
            }

            this.slider.on('change', () => {
                const currentTrigger =
                    document.querySelector(
                        `.${this.props.triggerClass}[data-slider-id="${this.props.container.id}"][data-target="${this
                            .slider.currentItemIndex}"]`
                    ) ||
                    this.props.container.querySelector(
                        `.${this.props.triggerClass}[data-target="${this.slider.currentItemIndex}"]`
                    );

                this.changeActiveTrigger(currentTrigger, triggers);
            });
        }

        if (typeof this.props.options.autoplay === 'number') {
            this.autoplay.call(this, this.props.options.autoplay);
        }

        this.props.container.addEventListener('keydown', event => {
            if (event.keyCode === 37) {
                this.slider.previous();
            } else if (event.keyCode === 39) {
                this.slider.next();
            }
        });
    }

    changeActiveTrigger(trigger, allTriggers) {
        each(allTriggers, el => {
            el.classList.remove('is-active');
        });

        trigger.classList.add('is-active');
    }

    autoplay(interval) {
        let lastTime = 0;

        const frame = timestamp => {
            const update = timestamp - lastTime >= interval;

            if (update) {
                this.slider.next();
                lastTime = timestamp;
            }

            this.animationId = requestAnimationFrame(frame);
        };

        this.animationId = requestAnimationFrame(frame);

        if (this.slider.buttonPrevious) {
            this.slider.buttonPrevious.addEventListener('click', () => {
                cancelAnimationFrame(this.animationId);
            });
        }

        if (this.slider.buttonNext) {
            this.slider.buttonNext.addEventListener('click', () => {
                cancelAnimationFrame(this.animationId);
            });
        }
    }
}

export default Slider;