diff --git a/src/rangeslider.js b/src/rangeslider.js index 855a3a5..2d5a044 100644 --- a/src/rangeslider.js +++ b/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,7 +140,8 @@ 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) { @@ -142,9 +149,9 @@ return; } - var value = e.target.value, - pos = _this.getPositionFromValue(value); - _this.setPosition(pos); + var value = e.target.value; + _this.value = value; + _this.update(); }); } @@ -152,6 +159,11 @@ 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')