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.SliderRange.js

//SliderRange
App.SliderRange = function(window, $, EventMgr, App) {
  'use strict';
  var init = function() {
      EventMgr.on($content(), sliderSelector, 'mousedown', sliderDrag);
      EventMgr.on($content(), sliderInputSelector, 'change', sliderForceMove);
      EventMgr.bind('appendForm', start);
      EventMgr.on($content(), sliderInputSelector, 'keydown', sliderKeyDownHandler);
      EventMgr.on($content(), sliderInputSelector, 'keyup', deleteSliderHandler);
      EventMgr.on($content(), sliderSelector, 'ontouchstart', sliderDrag);
    },

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

    boundLineEl = null,

    sliderSelector = '.slider_range .slider-wrapper:not(".readonly") .sliderel',

    sliderInputSelector = '.slider_range input.slider-input:not(".readonly")',

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

    minLeft = 0, maxLeft = 0,

  //flag for change input value
    fromInput = false,

    type = null,

    start = function (e, data) {
      tabId = data.tabId;
      $('#incont-' + tabId + ' .slider_range .sliderel').each(function() {
        self = this;
        fromInput = true;
        getDataSlider();
        if (type === 'left') {
          maxLeft = maxleft;
        }
        var value = this.getAttribute('data-value'),
          bound = max - min,
          delta = bound/maxleft,
          np = value/delta - min/delta;
        setPosition(np);
      });
    },

    sliderForceMove = function(e) {
      e = e || window.event;
      fromInput = true;
      var id = this.getAttribute('data-rel'),
        el,
        suffix;
      self = App.Dom.byId(id);
      getDataSlider();
      if (type === 'left') {
        suffix = "_min";
      } else if ( type === 'right') {
        suffix = "_max";
      }
      el = App.Dom.byId(inputId + suffix);
      var value = el.value,
        bound = max - min,
        delta = bound/maxleft,
        np = value/delta - min/delta;
      if(np > maxleft) {
        fromInput = false;
      }
      setPosition(np);
      blockEvent(e);
      return false;
    },

    UPKEY = 38,

    DOWNKEY = 40,

    sliderKeyDownHandler = function(e) {
      e = e || window.event;
      var codeKey = e.which || e.keyCode,
        id;
      if (codeKey === UPKEY || codeKey === DOWNKEY) {
        id = this.getAttribute('data-rel');
        self = App.Dom.byId(id);
        getDataSlider();
        blockEvent(e);
      }
      if (codeKey === UPKEY) {
        clearInterval(intId);
        sliderMoveForKeyDown(true);
        intId = setInterval(function(){sliderMoveForKeyDown(true);}, 100);
        blockEvent(e);
      } else if (codeKey === DOWNKEY) {
        clearInterval(intId);
        sliderMoveForKeyDown(false);
        intId = setInterval(function(){sliderMoveForKeyDown(false);}, 100);
        blockEvent(e);
      }
    },

    deleteSliderHandler = function() {
      clearInterval(intId);
    },

    sliderMoveForKeyDown = function(up) {
      var el,
        suffix, value;
      if (type === 'left') {
        suffix = "_min";
      } else if ( type === 'right') {
        suffix = "_max";
      }
      el = App.Dom.byId(inputId + suffix);
      value = el.value;
      if (up) {
        value = parseInt(value, 10) + 1;
      } else {
        if (value === max) {
          value = value - 3;
        } else {
          value = value - 1;
        }
      }
      el.value = value;
      EventMgr.trigger('changeSliderValue', {tabId: tabId});
      $('#' + inputId + suffix).trigger('change');
    },

    sliderDrag = function(e) {
      e = e || window.event;
      if (e.touches){
        shiftX = e.touches[0].pageX - parseInt(this.style.left, 10);
        document.ontouchmove = sliderMove;
        document.ontouchend = sliderDrop;
        document.ontouchcancel = sliderDrop;
      } else{
        shiftX = e.clientX - parseInt(this.style.left, 10);
        document.onmousemove = sliderMove;
        document.onmouseup = sliderDrop;
      }
      self = this;
      getDataSlider();
      return false;
    },

    sliderMove = function(e) {
      e = e || window.event;
      if (e.touches){
        setPosition(e.touches[0].pageX - shiftX);
      } else {
        setPosition(e.clientX - shiftX);
      }
      return false;
    },

    sliderDrop = function() {
      document.onmousemove = null;
      document.onmouseup = null;
      document.ontouchmove = null;
      document.ontouchend = null;
      document.ontouchcancel = null;
    },

    setPosition = function(newPosition) {
      var np = 0,
        boundLeft = 0,
        boundWidth = 0;
      if ( (newPosition <= maxLeft) && (newPosition >= minLeft) ){
        np = newPosition;
      }
      else if (newPosition > maxLeft) {
        fromInput = false;
        np = maxLeft;
      }
      else {
        fromInput = false;
        np = minLeft;
      }

      self.style.left = np + 'px';
      if (!fromInput) {
        calcValue(np);
      }
      if (type === 'left') {
        boundLeft = np;
        boundWidth = maxLeft - np;
      } else if (type === 'right') {
        boundLeft = minLeft;
        boundWidth = np - minLeft;
      }
      boundLineEl.style.left = boundLeft + 'px';
      boundLineEl.style.width = boundWidth + 'px';
      fromInput = false;
      return false;
    },

    calcValue = function (np) {
      var bound = max - min,
        delta = bound/maxleft,
        value = Math.round(np * delta) + parseInt(min, 10),
        el,suffix;
      if (type === 'left') {
        suffix = "_min";
      } else if ( type === 'right') {
        suffix = "_max";
      }
      el = App.Dom.byId(inputId + suffix);
      if (el !== null) {
        el.value = value;
      }
      // EventMgr.trigger('changeSliderValue', {tabId: tabId});
    },

    getDataSlider = function() {
      type = self.getAttribute('data-type');
      tabId = self.getAttribute('data-tabid');
      inputId = self.getAttribute('data-id');
      min = self.getAttribute('data-min');
      max = self.getAttribute('data-max');
      width = $(self).parent().width();
      maxleft = width - 9;
      if (type === 'left') {
        maxLeft = parseInt(App.Dom.byId(inputId + '-slider_right').style.left, 10);
        minLeft = 0;
      } else if (type === 'right') {
        minLeft = parseInt(App.Dom.byId(inputId + '-slider_left').style.left, 10);
        maxLeft = maxleft;
      }
      boundLineEl = App.Dom.byId(inputId + '-bound-line');
    };

  return {
    init: init
  };
}(window, $, EventMgr, App);