Your IP : 18.219.40.177


Current Path : /usr/local/mgr5/skins/orion/src/
Upload File :
Current File : //usr/local/mgr5/skins/orion/src/App.Slider.js

/**
 * Slider module
 * @param {object} window global object
 * @param {object|function} $ jQuery
 * @param {object} EventMgr Event manager
 * @param {object} App Application
 */
/*global App:true*/
App.Slider = function(window, $, EventMgr, App) {
  'use strict';
  var init = function() {
    EventMgr.on($content(), sliderSelector, 'mousedown', drag);
    EventMgr.on($content(), sliderWrapperSelector, 'mousedown', sliderToPoint);
    EventMgr.bind('appendForm', start);
    EventMgr.bind('appendEditInList', startEditInList);
    EventMgr.bind('reloadSlider', start);
    EventMgr.on($content(), sliderInputSelector, 'change', sliderMove);
    EventMgr.on($content(), sliderInputSelector,
        'keydown', sliderKeyDownHandler);
    EventMgr.on($content(), sliderInputSelector, 'keyup', deleteSliderHandler);
    EventMgr.on($content(), sliderSelector, 'ontouchstart', drag);
  },

      $content = function() {
        return $('#main-wrapper');
      },

      sliderSelector = '.l-slider__wr:not(".readonly") .b-slider__el',

      sliderInputSelector = '.b-input_for_slider:not(".readonly")',

      sliderWrapperSelector = '.l-slider__wr:not(".readonly")',

      max = 0, min = 0, self = null, maxleft = 0, shiftX = 0, width = 0,
          intId = null, tabId = '', inputId = null, step = 0,

      //flag for change input value
      fromInput = false,

      calcValue = function(np) {
        var bound = max - min,
            delta = (bound / maxleft),
            initDelta = (min % step),
            value = (Math.round(np * delta) + parseInt(min, 10)),
            el = App.Dom.byId(inputId),
            elSlider = App.Dom.byId(inputId + '-slider'),
            ldf = (value % step),
            rdf = step - ldf;
        if (ldf > rdf) {
          value += rdf;
        } else {
          value -= ldf;
        }
        value += initDelta;
        //check bounds
        if (value > max) {
          value = max;
        } else if (value < min) {
          value = min;
        }
        if (el !== null) {
          el.value = value;
        }
        if (elSlider) {
          elSlider.setAttribute('data-value', value);
        }
        EventMgr.trigger('changeSliderValue', { tabId: tabId });
      },

      getDataSlider = function() {
        tabId = self.getAttribute('data-tabid');
        inputId = self.getAttribute('data-id');
        min = self.getAttribute('data-min');
        step = parseInt(self.getAttribute('data-step'), 10);
        if (!step) { step = 1;}
        max = (self.getAttribute('data-max'));
        width = $(self).parent().width();
        maxleft = width - 9;
      },

      setPosition = function(newPosition) {
        var np = 0;
        if ((newPosition <= maxleft) && (newPosition >= 0)) {
          np = newPosition;
        }
        else if (newPosition > maxleft) {
          fromInput = false;
          np = maxleft;
        }
        else {
          fromInput = false;
          np = 0;
        }
        self.style.left = np + 'px';
        if (!fromInput) {
          calcValue(np);
        }
        fromInput = false;
        return false;
      },

      start = function(e, data) {
        tabId = data.tabId;
        $('#incont-' + tabId + ' .b-slider__el').each(function() {
          self = this;
          fromInput = true;
          getDataSlider();
          if (width !== 0) {
            var value = this.getAttribute('data-value'),
                bound = max - min,
                delta = bound / maxleft,
                np = value / delta - min / delta;
            setPosition(np);
          }
        });
      },

      startEditInList = function(e, data) {
        tabId = data.tabId;
        $('#editinlist-wrapper-' + tabId + ' .b-slider__el')
            .each(function() {
                self = this;
                fromInput = true;
                getDataSlider();
                var value = this.getAttribute('data-value'),
                    bound = max - min,
                    delta = bound / maxleft,
                    np = value / delta - min / delta;
                setPosition(np);
            });
      },

      sliderMove = function(e, sv) {
        e = e || window.event;
        var f = (this.value.substr(0, 1) === '-') ? '-' : '';
        this.value = f + this.value.replace(/\D/g, '');
        fromInput = true;
        var id = this.getAttribute('id');
        self = App.Dom.byId(id + '-slider');
        getDataSlider();
        var value = App.Dom.byId(inputId).value,
            ldf = value % step,
            rdf = step - ldf,
            bound = max - min,
            delta = bound / maxleft,
            initDelta = (min % step),
            np,
            elSlider = App.Dom.byId(inputId + '-slider');
        value -= 0;
        if (ldf > rdf) {
          value += rdf;
        } else {
          value -= ldf;
        }
        value += initDelta;
        this.value = value;
        np = value / delta - min / delta;

        if (np > maxleft) {
          fromInput = false;
        }
        setPosition(np);
        blockEvent(e);

        if (elSlider) {
          elSlider.setAttribute('data-value', value);
        }

        EventMgr.trigger('changeSliderValue', { tabId: tabId });
        return false;
      },

      sliderKeyDownHandler = function(e) {
        e = e || window.event;
        var codeKey = e.which || e.keyCode,
            id;
        if (codeKey === 38 || codeKey === 40) {
          id = this.getAttribute('id');
          self = $('a#' + id + '-slider')[0];
          getDataSlider();
          blockEvent(e);
        }
        if (codeKey === 38 && !e.ctrlKey) {
          clearInterval(intId);
          sliderMoveForKeyDown(true);
          intId = setInterval(function() { sliderMoveForKeyDown(true); }, 100);
          blockEvent(e);
        } else if (codeKey === 40 && !e.ctrlKey) {
          clearInterval(intId);
          sliderMoveForKeyDown(false);
          intId = setInterval(function() { sliderMoveForKeyDown(false); }, 100);
          blockEvent(e);
        }
      },

      deleteSliderHandler = function() {
        var f = (this.value.substr(0, 1) === '-') ? '-' : '';
        this.value = f + this.value.replace(/\D/g, '');
        clearInterval(intId);
      },

      sliderMoveForKeyDown = function(up) {
        var input = App.Dom.byId(inputId),
            value = input.value;
        if (up) {
          value = parseInt(value, 10) + step;
        } else {
          if (value === max) {
            value -= 3;
          } else {
            value -= step;
          }
        }
        input.value = value;
        EventMgr.trigger('changeSliderValue', { tabId: tabId });
        $('#' + inputId).trigger('change');
      },

      sliderToPoint = function(e) {
        e = e || window.event;
        self = $(this).children('.b-slider__el')[0];
        getDataSlider();
        shiftX = e.clientX - $(this).offset().left - 7;
        setPosition(shiftX);
        $('#' + inputId).trigger('change');
      },

      drag = function(e) {
        $(this).trigger('focus');
        e = e || window.event;
        if (e.touches) {
          shiftX = e.touches[0].pageX - parseInt(this.style.left, 10);
          document.ontouchmove = move;
          document.ontouchend = drop;
          document.ontouchcancel = drop;
        } else {
          shiftX = e.clientX - parseInt(this.style.left, 10);
          document.onmousemove = move;
          document.onmouseup = drop;
        }
        self = this;
        getDataSlider();
        blockEvent(e);
        return false;
      },
      //Handler for move
      move = function(e) {
        e = e || window.event;
        if (e.touches) {
          setPosition(e.touches[0].pageX - shiftX);
        } else {
          setPosition(e.clientX - shiftX);
        }
        blockEvent(e);
        return false;
      },
      //Handler for mouseup, unbind mousemove and mouseup
      drop = function(e) {
        $(this).trigger('blur');
        e = e || window.event;
        document.onmousemove = null;
        document.onmouseup = null;
        document.ontouchmove = null;
        document.ontouchend = null;
        document.ontouchcancel = null;
        $('#' + inputId).trigger('change');
        blockEvent(e);
      };

  return {
    init: init
  };

}(window, $, EventMgr, App);