Merge pull request #26 from andreruffert/develop

Enhancements
andreruffert · Apr 7, 2014 · 15cd22e · 15cd22e
2 parents 02655dd + bdfd2aa
commit 15cd22e
Show file tree

Hide file tree

Showing 10 changed files with 125 additions and 79 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
 .DS_Store
 node_modules
 .sass-cache
+
+# Ignore files beginning with a #
+\#*
diff --git a/.jshintrc b/.jshintrc
@@ -19,6 +19,7 @@
   "trailing": true,
   "smarttabs": true,
   "globals": {
-    "jQuery": true
+    "jQuery": true,
+    "define": true
   }
 }
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "rangeslider.js",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "main": "dist/rangeslider.js",
   "homepage": "https://github.com/andreruffert/rangeslider.js",
   "author": "André Ruffert",

diff --git a/dist/rangeslider.css b/dist/rangeslider.css
@@ -1,8 +1,4 @@
-.rangeslider {
-  position: relative;
-}
-
-.rangeslider__range,
+.rangeslider,
 .rangeslider__fill {
   background: #e6e6e6;
   border: none;
@@ -20,6 +16,10 @@
   border-radius: 10px;
 }
 
+.rangeslider {
+  position: relative;
+}
+
 .rangeslider__fill {
   background: #00ff00;
   position: absolute;

diff --git a/dist/rangeslider.js b/dist/rangeslider.js
@@ -1,4 +1,4 @@
-/*! rangeslider.js - v0.2.4 | (c) 2014 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */
+/*! rangeslider.js - v0.2.5 | (c) 2014 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */
 'use strict';
 
 (function (module) {
@@ -39,8 +39,7 @@
         inputrange = supportsRange(),
         defaults = {
             polyfill: true,
-            baseClass: 'rangeslider',
-            rangeClass: 'rangeslider__range',
+            rangeClass: 'rangeslider',
             fillClass: 'rangeslider__fill',
             handleClass: 'rangeslider__handle',
             startEvent: ((!touchevents) ? 'mousedown' : 'touchstart') + '.' + pluginName,
@@ -109,14 +108,13 @@
         }
 
         this.identifier = 'js-' + pluginName + '-' +(+new Date());
-        this.value      = parseInt(this.$element[0].value) || 0;
-        this.min        = parseInt(this.$element[0].getAttribute('min')) || 0;
-        this.max        = parseInt(this.$element[0].getAttribute('max')) || 0;
-        this.step       = parseInt(this.$element[0].getAttribute('step')) || 1;
-        this.$range     = $('<div class="' + this.options.rangeClass + '" />');
+        this.value      = parseFloat(this.$element[0].value) || 0;
+        this.min        = parseFloat(this.$element[0].getAttribute('min')) || 0;
+        this.max        = parseFloat(this.$element[0].getAttribute('max')) || 100;
+        this.step       = parseFloat(this.$element[0].getAttribute('step')) || 1;
         this.$fill      = $('<div class="' + this.options.fillClass + '" />');
         this.$handle    = $('<div class="' + this.options.handleClass + '" />');
-        this.$base      = $('<div class="' + this.options.baseClass + '" id="' + this.identifier + '" />').insertBefore(this.$element).prepend(this.$range, this.$fill, this.$handle, this.$element);
+        this.$range     = $('<div class="' + this.options.rangeClass + '" id="' + this.identifier + '" />').insertBefore(this.$element).prepend(this.$fill, this.$handle, this.$element);
 
         // visually hide the input
         this.$element.css({
@@ -136,11 +134,24 @@
 
         // Attach Events
         var _this = this;
+
         this.$window.on('resize' + '.' + pluginName, debounce(function() {
             // Simulate resizeEnd event.
             delay(function() { _this.update(); }, 300);
         }, 20));
+
         this.$document.on(this.options.startEvent, '#' + this.identifier, this.handleDown);
+
+        // Listen to programmatic value changes
+        this.$element.on('change' + '.' + pluginName, function(e, data) {
+            if (data && data.origin === pluginName) {
+                return;
+            }
+
+            var value = e.target.value,
+                pos = _this.getPositionFromValue(value);
+            _this.setPosition(pos);
+        });
     }
 
     Plugin.prototype.init = function() {
@@ -152,7 +163,7 @@
     };
 
     Plugin.prototype.update = function() {
-        this.handleWidth    = this.$handle.width();
+        this.handleWidth    = this.$handle[0].offsetWidth;
         this.rangeWidth     = this.$range[0].offsetWidth;
         this.maxHandleX     = this.rangeWidth - this.handleWidth;
         this.grabX          = this.handleWidth / 2;
@@ -166,8 +177,13 @@
         this.$document.on(this.options.moveEvent, this.handleMove);
         this.$document.on(this.options.endEvent, this.handleEnd);
 
-        var posX = this.getRelativePosition(this.$base[0], e),
-            handleX = this.getPositionFromNode(this.$handle[0]) - this.getPositionFromNode(this.$base[0]);
+        // If we click on the handle don't set the new position
+        if ((' ' + e.target.className + ' ').replace(/[\n\t]/g, ' ').indexOf(this.options.handleClass) > -1) {
+            return false;
+        }
+
+        var posX = this.getRelativePosition(this.$range[0], e),
+            handleX = this.getPositionFromNode(this.$handle[0]) - this.getPositionFromNode(this.$range[0]);
 
         this.setPosition(posX - this.grabX);
 
@@ -178,7 +194,7 @@
 
     Plugin.prototype.handleMove = function(e) {
         e.preventDefault();
-        var posX = this.getRelativePosition(this.$base[0], e);
+        var posX = this.getRelativePosition(this.$range[0], e);
         this.setPosition(posX - this.grabX);
     };
 
@@ -187,7 +203,7 @@
         this.$document.off(this.options.moveEvent, this.handleMove);
         this.$document.off(this.options.endEvent, this.handleEnd);
 
-        var posX = this.getRelativePosition(this.$base[0], e);
+        var posX = this.getRelativePosition(this.$range[0], e);
         if (this.onSlideEnd && typeof this.onSlideEnd === 'function') {
             this.onSlideEnd(posX - this.grabX, this.value);
         }
@@ -203,17 +219,12 @@
     Plugin.prototype.setPosition = function(pos) {
         var left, value;
         left = this.cap(pos, 0, this.maxHandleX);
-        value = this.getValueFromPosition(left);
 
         // Snap steps
-        if (this.step > 1) {
-            value = Math.ceil((value) / this.step ) * this.step;
-            left = this.getPositionFromValue(value);
-        }
+        value = (this.getValueFromPosition(left) / this.step) * this.step;
+        left = this.getPositionFromValue(value);
 
-        left = Math.ceil(left);
-
-        this.$fill[0].style.width = (left + this.handleWidth)  + 'px';
+        this.$fill[0].style.width = (left + this.grabX)  + 'px';
         this.$handle[0].style.left = left + 'px';
         this.setValue(value);
 
@@ -236,27 +247,25 @@
     };
 
     Plugin.prototype.getRelativePosition = function(node, e) {
-        return (e.pageX || e.originalEvent.changedTouches[0].pageX || 0) - this.getPositionFromNode(node);
+        return (e.pageX || e.originalEvent.clientX || e.originalEvent.touches[0].clientX || e.currentPoint.x) - this.getPositionFromNode(node);
     };
 
     Plugin.prototype.getPositionFromValue = function(value) {
         var percentage, pos;
-        percentage = ((value - this.min) / (this.max - this.min)) * 100;
-        pos = (percentage/100) * this.maxHandleX;
-
+        percentage = (value - this.min)/(this.max - this.min);
+        pos = percentage * this.maxHandleX;
         return pos;
     };
 
     Plugin.prototype.getValueFromPosition = function(pos) {
         var percentage, value;
-        percentage = ((pos) / (this.maxHandleX)) * 100;
-        value = Math.ceil(((percentage/100) * (this.max - this.min)) + this.min);
-
+        percentage = (pos) / (this.maxHandleX);
+        value = this.step * Math.ceil((((percentage) * (this.max - this.min)) + this.min) / this.step);
         return value;
     };
 
     Plugin.prototype.setValue = function(value) {
-        this.$element.val(value).trigger('change');
+        this.$element.val(value).trigger('change', {origin: pluginName});
     };
 
     // A really lightweight plugin wrapper around the constructor,

diff --git a/dist/rangeslider.min.js b/dist/rangeslider.min.js
diff --git a/example/index.html b/example/index.html
@@ -17,39 +17,53 @@
             margin: 0 auto;
             max-width: 800px;
         }
+
         output {
             display: block;
             font-size: 30px;
             font-weight: bold;
             text-align: center;
             margin: 30px 0;
+            width: 100%;
         }
     </style>
 </head>
 <body>
+    <div id="js-example-change-value">
+        <h2>Programmatic value changes</h2>
+        <input type="range" min="0" max="100" value="50" data-rangeslider>
+        <output></output>
+        <input type="number" value="10"><button>Change value</button>
+    </div>
+
+    <br>
+    <br>
+    <br>
+    <br>
 
     <div>
-        <input type="range" min="10" max="100" step="1" value="50" data-rangeslider>
+        <input type="range" min="10" max="11" step="0.1" value="10.2" data-rangeslider>
         <output></output>
     </div>
 
-    <br>
     <br>
     <br>
 
     <div>
-        <input type="range" min="10" max="1000" step="10" value="300" data-rangeslider>
+        <input type="range" min="10" max="1000" step="10" value="500" data-rangeslider>
         <output></output>
     </div>
 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
     <script src="../dist/rangeslider.min.js"></script>
     <script>
         $(function() {
-            var selector    = '[data-rangeslider]',
+
+            var $document   = $(document),
+                selector    = '[data-rangeslider]',
                 $input      = $(selector);
 
-            $(document).on('change', selector, function(e) {
+            $document.on('change', selector, function(e) {
                 var value = e.target.value,
                     output = e.target.parentNode.parentNode.getElementsByTagName('output')[0];
                 output.innerHTML = value;
@@ -69,6 +83,16 @@
                 // Callback function
                 onSlideEnd: function(position) {}
             });
+
+
+            // Example functionality to demonstrate programmatic value changes
+            $document.on('click', '#js-example-change-value button', function(e) {
+                var $inputRange = $('input[type="range"]', e.target.parentNode),
+                    value = $('input[type="number"]', e.target.parentNode)[0].value;
+
+                $inputRange.val(value).change();
+            });
+
         });
     </script>
 </body>

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "rangeslider.js",
   "title": "rangeslider.js",
   "description": "Simple, small and fast JavaScript/jQuery polyfill for the HTML5 <input type=\"range\"> slider element",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "homepage": "https://github.com/andreruffert/rangeslider.js",
   "license": "MIT",
   "keywords": [