add onSlideBegin event handler

src/rangeslider.js

@@ -1,3 +1,5 @@
+/*! rangeslider.js - v0.3.2 | (c) 2014 @andreruffert | MIT license | https://github.com/andreruffert/rangeslider.js */
+/* with onSlideBegin handler by Dianemo */
 (function(factory) {
     'use strict';
 
@@ -29,9 +31,12 @@
         pluginInstances = [],
         inputrange = supportsRange(),
         defaults = {
+            touchHandleOnly: true,
+            handleHiddenUntilTouched: false,
             polyfill: true,
             rangeClass: 'rangeslider',
             disabledClass: 'rangeslider--disabled',
+            hiddenClass: 'rangeslider--hidden',
             fillClass: 'rangeslider__fill',
             handleClass: 'rangeslider__handle',
             startEvent: ['mousedown', 'touchstart', 'pointerdown'],
@@ -93,6 +98,7 @@
         this.endEvent   = this.options.endEvent.join('.' + pluginName + ' ') + '.' + pluginName;
         this.polyfill   = this.options.polyfill;
         this.onInit     = this.options.onInit;
+        this.onSlideBegin = this.options.onSlideBegin;
         this.onSlide    = this.options.onSlide;
         this.onSlideEnd = this.options.onSlideEnd;
 
@@ -134,24 +140,30 @@
             delay(function() { _this.update(); }, 300);
         }, 20));
 
-        this.$document.on(this.startEvent, '#' + this.identifier + ':not(.' + this.options.disabledClass + ')', this.handleDown);
+        //this.$document.on(this.startEvent, '#' + this.identifier + ':not(.' + this.options.disabledClass + ')', this.handleDown);
+        this.$range.on(this.startEvent, 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);
+            var value = e.target.value;
+            _this.value = value;
+            _this.update();
         });
     }
 
     Plugin.prototype.init = function() {
         if (this.onInit && typeof this.onInit === 'function') {
             this.onInit();
         }
+
+        if (this.options.handleHiddenUntilTouched) {
+            this.$range.addClass(this.options.hiddenClass);
+        }
+
         this.update();
     };
 
@@ -173,12 +185,33 @@
     };
 
     Plugin.prototype.handleDown = function(e) {
+        if (this.$element.is('[readonly]')) {
+            return;
+        }
+
+        if (this.$range.hasClass(this.options.disabledClass)) {
+            return;
+        }
+
+        var handleTouched = ((' ' + e.target.className + ' ').replace(/[\n\t]/g, ' ').indexOf(this.options.handleClass) > -1);
+        if (this.options.touchHandleOnly && !handleTouched) {
+            return;
+        }
+
+        this.$range.removeClass(this.options.hiddenClass);
+
         e.preventDefault();
+        e.stopPropagation();
+
         this.$document.on(this.moveEvent, this.handleMove);
         this.$document.on(this.endEvent, this.handleEnd);
 
+        if (this.onSlideBegin && typeof this.onSlideBegin === 'function') {
+            this.onSlideBegin(this.position, this.value);
+        }
+
         // 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) {
+        if (handleTouched) {
             return;
         }
 
@@ -194,15 +227,21 @@
 
     Plugin.prototype.handleMove = function(e) {
         e.preventDefault();
+        e.stopPropagation();
         var posX = this.getRelativePosition(this.$range[0], e);
         this.setPosition(posX - this.grabX);
     };
 
     Plugin.prototype.handleEnd = function(e) {
         e.preventDefault();
+        e.stopPropagation();
         this.$document.off(this.moveEvent, this.handleMove);
         this.$document.off(this.endEvent, this.handleEnd);
 
+        if (this.options.handleHiddenUntilTouched) {
+            this.$range.addClass(this.options.hiddenClass);
+        }
+
         if (this.onSlideEnd && typeof this.onSlideEnd === 'function') {
             this.onSlideEnd(this.position, this.value);
         }
@@ -236,12 +275,7 @@
     };
 
     Plugin.prototype.getPositionFromNode = function(node) {
-        var i = 0;
-        while (node !== null) {
-            i += node.offsetLeft;
-            node = node.offsetParent;
-        }
-        return i;
+        return node.getBoundingClientRect().left;
     };
 
     Plugin.prototype.getRelativePosition = function(node, e) {
@@ -269,7 +303,8 @@
     };
 
     Plugin.prototype.destroy = function() {
-        this.$document.off(this.startEvent, '#' + this.identifier, this.handleDown);
+        //this.$document.off(this.startEvent, '#' + this.identifier, this.handleDown);
+        this.$range.off(this.startEvent, this.handleDown);
         this.$element
             .off('.' + pluginName)
             .removeAttr('style')