init

2014-10-26 22:10:13 +03:00 · 2014-10-26 22:10:13 +03:00 · f301cb744d
commit f301cb744d
parent 06f61d8ce8
2271 changed files with 103162 additions and 0 deletions
--- a/02-ui/05-widgets/06-widget-tasks/06-slider-events/solution/slider-events/.plnkr
+++ b/02-ui/05-widgets/06-widget-tasks/06-slider-events/solution/slider-events/.plnkr
@ -0,0 +1 @@
+{"name":"slider-events","plunk":"fDSnstP28seNXtvYZAcb"}
--- a/02-ui/05-widgets/06-widget-tasks/06-slider-events/solution/slider-events/index.html
+++ b/02-ui/05-widgets/06-widget-tasks/06-slider-events/solution/slider-events/index.html
@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <script src="http://code.jquery.com/jquery.min.js"></script>
+  <style>
+
+  .slider {
+    width: 310px;
+    height: 15px;
+    margin: 5px;
+
+    border-radius: 5px;
+    background: #E0E0E0;
+    background: -moz-linear-gradient(left top , #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
+    background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
+    background: linear-gradient(left top, #E0E0E0, #EEEEEE);
+  }
+
+  .slider-thumb {
+    position: relative;
+    width: 10px;
+    height: 25px;
+    left: 10px;
+    top: -5px;
+
+    border-radius: 3px;
+    background: blue;
+    cursor: pointer;
+  }
+
+  .sliding .slider-thumb {
+    cursor: move;
+  }
+  </style>
+</head>
+<body>
+
+<div id="slider" class="slider">
+  <div class="slider-thumb"></div>
+</div>
+
+Slide:<span id="slide">&nbsp;</span>
+Change:<span id="change">&nbsp;</span>
+
+<script>
+
+function Slider(options) {
+  var self = this;
+
+  var elem = options.elem;
+  var thumbElem = elem.find('.slider-thumb');
+
+  // [<*>----------------]
+  //   |...............|
+  // first            last
+  var pixelsPerValue = (elem.width() - thumbElem.width()) / options.max;
+  var value = options.value || 0;
+
+  // при начале переноса фиксируются
+  var thumbCursorShift; // сдвиг курсора относительно бегунка
+  var sliderCoords; // и координаты слайдера
+
+  thumbElem.on('mousedown', onThumbMouseDown)
+    .on('selectstart dragstart', false);
+
+  setSlidingValue(value, true);
+ 
+
+  function onThumbMouseDown(e) {
+    startSlide(e.pageX, e.pageY);
+    return false;
+  }
+
+
+  function onDocumentMouseMove(e) { 
+    //  вычесть координату родителя, т.к. position: relative
+    var newLeft = e.pageX - thumbCursorShift.x - sliderCoords.left;
+
+    // курсор ушёл вне слайдера
+    if (newLeft < 0) {
+      newLeft = 0;
+    }
+
+    var rightEdge = elem.outerWidth() - thumbElem.outerWidth();
+    if (newLeft > rightEdge) {
+      newLeft = rightEdge;
+    }
+
+    setSlidingValue( Math.round( newLeft / pixelsPerValue) );    
+  }
+
+  function onDocumentMouseUp() {
+    endSlide();
+  }
+
+  function endSlide() {
+    $(document).off('.slider');
+    $(self).triggerHandler({
+        type: "change", 
+        value: value
+    });
+
+    elem.removeClass('sliding');
+  }
+    
+  function startSlide(downPageX, downPageY) {
+    var thumbCoords = thumbElem.offset();
+    thumbCursorShift = { 
+      x: downPageX - thumbCoords.left,
+      y: downPageY - thumbCoords.top
+    };
+
+    sliderCoords = elem.offset();
+
+    $(document).on({
+      'mousemove.slider': onDocumentMouseMove,
+      'mouseup.slider': onDocumentMouseUp
+    });
+
+    elem.addClass('sliding');
+  }
+
+  /**
+   * Установить промежуточное значение 
+   * quiet -- означает "не генерировать событие"
+   */ 
+  function setSlidingValue(newValue, quiet) {
+    value = newValue;
+
+    thumbElem.css('left', value * pixelsPerValue ^ 0);
+    if (!quiet) {
+      $(self).triggerHandler({
+        type: "slide", 
+        value: value
+      });
+    }
+  }
+
+  /**
+   * Установить окончательное значение
+   * @param {number} newValue новое значение
+   * @param {boolean} quiet если установлен, то без события
+   */
+  this.setValue = function(newValue, quiet) {
+    // установить значение БЕЗ генерации события slide
+    // т.е. slide в любом случае нет
+    setSlidingValue(newValue, true);
+
+    // ..а change будет, если не указан quiet
+    if (!quiet) {
+      $(self).triggerHandler({
+        type: "change", 
+        value: value
+      });
+    }
+  }
+
+
+}
+
+var slider = new Slider({
+  elem: $('#slider'), 
+  max: 100,
+  value: 10
+});
+
+$(slider).on({
+  slide: function(e) {
+    $('#slide').html(e.value);
+  },
+  change: function(e) {
+    $('#change').html(e.value);
+  }
+});
+
+slider.setValue(50);
+
+</script>
+
+</body>
+</html>
+
				`@ -0,0 +1 @@`
				`{"name":"slider-events","plunk":"fDSnstP28seNXtvYZAcb"}`