/*
 * imageComparison: Slider to quickly compare two images.
 * 2.0.0
 *
 * By Max Ulyanov
 * Src: https://github.com/M-Ulyanov/ImageComparison/
 * Example https://m-ulyanov.github.io/image-comparison/
 */



'use strict';

const defaultOptions = {
    container: null,
    startPosition: 50,
    data: null
};


/**
 * Constructor
 * @param options
 */
var ImageComparison = function (options) {
    this.options = utils.extend({}, [defaultOptions, options], {
        clearEmpty: true
    });
    this.container = this.options.container;
    this.images = [this.options.data[0].image, this.options.data[1].image];
    this.labels = [this.options.data[0].label, this.options.data[1].label];
    this._animateInterval = null;
    this._comparisonSeparator = null;
    this._items = [];

    if (this.container == null) {
        console.error('Container element not found!')
    }

    if (!this.images[0] || !this.images[1]) {
        console.error('Need two images!')
    }

    this._build();
    this._setEvents();
};


/**
 * Build HTML structure
 * @private
 */
ImageComparison.prototype._build = function () {
    this.options.container.classList.add('comparison-widget');
    for (var i = 0; i < 2; i++) {
        var item = document.createElement('div');
        item.classList.add('comparison-item');

        var content = document.createElement('div');
        content.classList.add('comparison-item__content');
        if (this.labels[i]) {
            content.innerHTML = '<div class="comparison-item__label">' + this.labels[i] + '</div>';
        }
        this.images[i].classList.add('comparison-item__image');
        content.appendChild(this.images[i]);
        item.appendChild(content);

        if (i === 0) {
            item.classList.add('comparison-item--first');
            item.style.width = this.options.startPosition + '%';
            this._comparisonSeparator = document.createElement('div');
            this._comparisonSeparator.classList.add('comparison-separator');
            this._comparisonSeparator.innerHTML = '<div class="comparison-control"><div class="comparison-control__mask"></div></div>';
            item.appendChild(this._comparisonSeparator);
        }

        this._items.push(item);
        this.container.appendChild(item);
    }

};


/**
 * Set need DOM events
 * @private
 */
ImageComparison.prototype._setEvents = function () {
    var comparison = this;

    comparison.container.addEventListener('click', function (event) {
        comparison._calcPosition(event);
    });

    utils.setMultiEvents(comparison._comparisonSeparator, ['mousedown', 'touchstart'], function () {
        comparison._comparisonSeparator.classList.add('actived');
    });

    utils.setMultiEvents(document.body, ['mouseup', 'touchend'], function () {
        comparison._comparisonSeparator.classList.remove('actived');
    });

    utils.setMultiEvents(document.body, ['mousemove', 'touchmove'], function (event) {
        if (comparison._comparisonSeparator.classList.contains('actived')) {
            comparison._calcPosition(event);
            if (document['selection']) {
                document['selection'].empty();
            }
        }
    });

    utils.setMultiEvents(window, ['resize', 'load'], function () {
        comparison._setImageSize();
    });

    for (var i = 0; i < comparison.images.length; i++) {
        comparison.images[i].addEventListener('dragstart', function (e) {
            e.preventDefault();
        });
    }

};


/**
 * Calc current position (click, touch or move)
 * @param event
 * @private
 */
ImageComparison.prototype._calcPosition = function (event) {
    var containerCoords = this.container.getBoundingClientRect();
    var containerWidth = containerCoords.width;
    /** @namespace event.touches */
    var horizontalPositionForElement = (event.clientX || event.touches[0].pageX) - containerCoords.left;
    var positionInPercent = horizontalPositionForElement * 100 / containerWidth;
    if (positionInPercent > 100) {
        positionInPercent = 100;
    }
    else if (positionInPercent < 0) {
        positionInPercent = 0;
    }
    this._controllerPosition(positionInPercent.toFixed(2), event.type);
};


/**
 * Controller position
 * @param positionInPercent
 * @param eventType
 * @private
 */
ImageComparison.prototype._controllerPosition = function (positionInPercent, eventType) {
    switch (eventType) {
        case 'click':
            this._setPositionWithAnimate(positionInPercent);
            break;
        default :
            this._updatePosition(positionInPercent);
    }
};


/**
 * Set position with animate
 * @param newPositionInPercent
 * @returns {boolean}
 * @private
 */
ImageComparison.prototype._setPositionWithAnimate = function (newPositionInPercent) {
    var comparison = this;
    var currentPositionInPercent = parseFloat(comparison._items[0].style.width);
    clearInterval(comparison._animateInterval);

    if (newPositionInPercent == currentPositionInPercent) {
        return false;
    }
    else if (currentPositionInPercent > newPositionInPercent) {
        decrementPosition();
    }
    else {
        incrementPosition();
    }


    // Support animate functions
    function incrementPosition() {
        comparison._animateInterval = setInterval(function () {
            currentPositionInPercent++;
            comparison._updatePosition(currentPositionInPercent);
            if (currentPositionInPercent >= newPositionInPercent) {
                setFinalPositionAndClearInterval();
            }
        }, 10);
    }

    function decrementPosition() {
        comparison._animateInterval = setInterval(function () {
            currentPositionInPercent--;
            comparison._updatePosition(currentPositionInPercent);
            if (currentPositionInPercent <= newPositionInPercent) {
                setFinalPositionAndClearInterval();
            }
        }, 10);
    }

    function setFinalPositionAndClearInterval() {
        comparison._updatePosition(newPositionInPercent);
        clearInterval(comparison._animateInterval);
    }


};


/**
 * Set position item[0]
 * @param percent
 * @private
 */
ImageComparison.prototype._updatePosition = function (percent) {
    this._items[0].style.width = percent + '%';
};


/**
 * Set the width of image that has a position absolute
 * @private
 */
ImageComparison.prototype._setImageSize = function () {
    this.images[0].style.width = this.container.offsetWidth + 'px';
};


/**
 * Utils Methods
 * @type {{extend: Function, getConstructor: Function}}
 */
var utils = {

    /**
     * Native extend object
     * @param target
     * @param objects
     * @param options
     * @returns {*}
     */
    extend: function (target, objects, options) {

        for (var object in objects) {
            if (objects.hasOwnProperty(object)) {
                recursiveMerge(target, objects[object]);
            }
        }

        function recursiveMerge(target, object) {
            for (var property in object) {
                if (object.hasOwnProperty(property)) {
                    var current = object[property];
                    if (utils.getConstructor(current) === 'Object') {
                        if (!target[property]) {
                            target[property] = {};
                        }
                        recursiveMerge(target[property], current);
                    }
                    else {
                        // clearEmpty
                        if (options.clearEmpty) {
                            if (current == null) {
                                continue;
                            }
                        }
                        target[property] = current;
                    }
                }
            }
        }

        return target;
    },


    /**
     * Set Multi addEventListener
     * @param element
     * @param events
     * @param func
     */
    setMultiEvents: function (element, events, func) {
        for (var i = 0; i < events.length; i++) {
            element.addEventListener(events[i], func);
        }
    },


    /**
     * Get object constructor
     * @param object
     * @returns {string}
     */
    getConstructor: function (object) {
        return Object.prototype.toString.call(object).slice(8, -1);
    }
};


export { ImageComparison };
@@ -206,23 +206,8 @@
 %0A%0A%0A%0A
-'use strict';%0A%0A
 cons

Add module support