Slider

slider.js

'use strict';

var APP = window.APP = window.APP || {};

APP.ColorSwatches = (function(){

    //constants
    var SLIDER_NEXT_BTN_CLASS = "swatches-slider-next";
    var SLIDER_PREV_BTN_CLASS = "swatches-slider-prev";
    var SLIDER_PREV_BTN_ACTIVE_CLASS = "color-swatches__slider-prev--active";
    var SLIDER_UL_CLASS = "color-swatches__list";
    var SLIDE_UL_FIRST_ELEMENT = "color-swatches__list__first-item";
    var SLIDE_CONTAINER_CENTER_CLASS = "color-swatches__container--center";
    var SLIDE_CONTAINER_CLASS = "color-swatches__container";
    var SLIDE_ITEM = "color-swatches__list__item";
    var SLIDE_ITEM_ACTIVE = "color-swatches__list__item__img--active";
    var SENSIBLE_VALUE = 5;

    var swatchesList;
    var sliderPrev;
    var container;
    var swipeCounter;
    var swipeLimit;
    var swipePageX;
    var flagNumber;

    var addPreviousButton = function () {
      var firstItem = swatchesList.children[0];
      if(firstItem.classList.contains(SLIDE_UL_FIRST_ELEMENT)) {
        sliderPrev.classList.remove(SLIDER_PREV_BTN_ACTIVE_CLASS);
        container.classList.remove(SLIDE_CONTAINER_CENTER_CLASS);
      } else {
        sliderPrev.classList.add(SLIDER_PREV_BTN_ACTIVE_CLASS);
        container.classList.add(SLIDE_CONTAINER_CENTER_CLASS);
      }
    };

    var next = function(event) {
      $(".color-swatches__list__item__img").removeClass(SLIDE_ITEM_ACTIVE);
      var firstItem = swatchesList.children[0];
      swatchesList.appendChild(firstItem);
      addPreviousButton();
    };

    var prev = function() {
      $(".color-swatches__list__item__img").removeClass(SLIDE_ITEM_ACTIVE);
      var lastItem = swatchesList.children[swatchesList.children.length-1];
      var firstItem = swatchesList.children[0];
      swatchesList.insertBefore(lastItem, firstItem);
      addPreviousButton();
    };

    var onSwipeRight = function (mouseMoveEvent) {
      if(swipeCounter > SENSIBLE_VALUE) {
        prev();
        swipeCounter = 0;
      }
      swipeCounter++;
    };

    var onSwipeLeft = function (mouseMoveEvent) {
      if(swipeCounter < -SENSIBLE_VALUE) {
        next();
        swipeCounter = 0;
      }
      swipeCounter--;
    };

    var resetOrder = function() {
      if(window.innerWidth > 768) {
        $(".color-swatches__list__item__img").removeClass(SLIDE_ITEM_ACTIVE);
        var listLength = swatchesList.children.length;
        for(var index = 0; index < listLength; index++) {
          var element = swatchesList.querySelector("[data-position=\""+index+"\"]");
          swatchesList.appendChild(element);
        }
      }
    };

    var detectSwipeDirection = function (mouseDownEvent, mouseMoveEvent) {
      if(flagNumber === 0) {
        swipePageX = mouseMoveEvent.pageX;
        flagNumber++;
      } else {
        flagNumber=0;
        if(swipePageX > mouseMoveEvent.pageX) {
          return "left";
        } else {
          return "right";
        }
      }
    };

    var onSwatchesDrag = function (mouseDownEvent, mouseMoveEvent) {
      if(window.innerWidth < 768) {
        var direction = detectSwipeDirection(mouseDownEvent, mouseMoveEvent);
        if(direction === "right") {
          onSwipeRight(mouseMoveEvent);
        } else if(direction === "left") {
          onSwipeLeft(mouseMoveEvent);
        }
      }
    };

    var draggable = function(element, onDragFunction) {
      var $element = $(element);
      $element.on('mousedown', function (mouseDownEvent) {
        swipeCounter = 0;
        flagNumber = 0;
        if(typeof mouseDownEvent.target.setCapture === 'function' ){
          mouseDownEvent.target.setCapture();
        }
        $element.on('mousemove', function(mouseMoveEvent) {
          onDragFunction(mouseDownEvent, mouseMoveEvent);
        });
      });
      $element.on('mouseup', function() {
        $element.unbind('mousemove');
     });
    };

    var itemSelected = function(event) {
      var target = event.target;
      if(target.tagName === "IMG"){
        $(".color-swatches__list__item__img").removeClass(SLIDE_ITEM_ACTIVE);
        $(target).addClass(SLIDE_ITEM_ACTIVE);
      }
    };

    var bindEventsToUI = function() {
      container = document.getElementsByClassName(SLIDE_CONTAINER_CLASS)[0];
      var sliderNext = document.getElementById(SLIDER_NEXT_BTN_CLASS);
      sliderPrev = document.getElementById(SLIDER_PREV_BTN_CLASS);
      swatchesList = container.getElementsByClassName(SLIDER_UL_CLASS)[0];
      sliderNext.addEventListener('click', next);
      sliderPrev.addEventListener('click', prev);
      swatchesList.addEventListener('click', itemSelected);
      draggable(swatchesList, onSwatchesDrag);
      window.onresize = resetOrder;
    };

    var init = function() {

        bindEventsToUI();
    };

    /**
     * interfaces to public functions
     */

    return {
        init: init
    };

}());