fix affinity slider updates - issue #1714

1 files changed, 106 insertions, 40 deletions

diff --git a/library/jRange/jquery.range.js b/library/jRange/jquery.range.js
index 860b74511..924dc8d41 100644
--- a/library/jRange/jquery.range.js
+++ b/library/jRange/jquery.range.js
@@ -27,6 +27,8 @@
 	jRange.prototype = {
 		defaults: {
 			onstatechange: function() {},
+      ondragend: function() {},
+      onbarclicked: function() {},
 			isRange: false,
 			showLabels: true,
 			showScale: true,
@@ -34,13 +36,14 @@
 			format: '%s',
 			theme: 'theme-green',
 			width: 300,
-			disable: false
+			disable: false,
+			snap: false
 		},
 		template: '<div class="slider-container">\
 			<div class="back-bar">\
                 <div class="selected-bar"></div>\
-                <div class="pointer low"></div><div class="pointer-label">123456</div>\
-                <div class="pointer high"></div><div class="pointer-label">456789</div>\
+                <div class="pointer low"></div><div class="pointer-label low">123456</div>\
+                <div class="pointer high"></div><div class="pointer-label high">456789</div>\
                 <div class="clickable-dummy"></div>\
             </div>\
             <div class="scale"></div>\
@@ -48,7 +51,7 @@
 		init: function(node, options) {
 			this.options       = $.extend({}, this.defaults, options);
 			this.inputNode     = $(node);
-			this.options.value = this.inputNode.val() || (this.options.isRange ? this.options.from + ',' + this.options.from : this.options.from);
+			this.options.value = this.inputNode.val() || (this.options.isRange ? this.options.from + ',' + this.options.from : '' + this.options.from);
 			this.domNode       = $(this.template);
 			this.domNode.addClass(this.options.theme);
 			this.inputNode.after(this.domNode);
@@ -71,7 +74,8 @@
 				console.log('jRange : no width found, returning');
 				return;
 			} else {
-				this.domNode.width(this.options.width || this.inputNode.width());
+				this.options.width = this.options.width || this.inputNode.width();
+				this.domNode.width(this.options.width);
 				this.inputNode.hide();
 			}
 
@@ -129,9 +133,11 @@
 			this.domNode.trigger('change', [this, pointer, position]);
 		},
 		onDragEnd: function(e) {
-			this.pointers.removeClass('focused');
+			this.pointers.removeClass('focused')
+				.trigger('rangeslideend');
 			this.labels.removeClass('focused');
 			$(document).off('.slider');
+		  this.options.ondragend.call(this, this.options.value);
 		},
 		barClicked: function(e) {
 			if(this.options.disable) return;
@@ -139,31 +145,52 @@
 			if (this.isSingle())
 				this.setPosition(this.pointers.last(), x, true, true);
 			else {
-				var pointer = Math.abs(parseInt(this.pointers.first().css('left'), 10) - x + this.pointers.first().width() / 2) < Math.abs(parseInt(this.pointers.last().css('left'), 10) - x + this.pointers.first().width() / 2) ?
-					this.pointers.first() : this.pointers.last();
+				var firstLeft      	= Math.abs(parseFloat(this.pointers.first().css('left'), 10)),
+						firstHalfWidth 	= this.pointers.first().width() / 2,
+						lastLeft 			 	= Math.abs(parseFloat(this.pointers.last().css('left'), 10)),
+						lastHalfWidth  	= this.pointers.first().width() / 2,
+						leftSide        = Math.abs(firstLeft - x + firstHalfWidth),
+						rightSide       = Math.abs(lastLeft - x + lastHalfWidth),
+						pointer;
+
+				if(leftSide == rightSide) {
+					pointer = x < firstLeft ? this.pointers.first() : this.pointers.last();
+				} else {
+					pointer = leftSide < rightSide ? this.pointers.first() : this.pointers.last();
+				}
 				this.setPosition(pointer, x, true, true);
 			}
+			this.options.onbarclicked.call(this, this.options.value);
 		},
 		onChange: function(e, self, pointer, position) {
 			var min, max;
-			if (self.isSingle()) {
-				min = 0;
-				max = self.domNode.width();
-			} else {
-				min = pointer.hasClass('high') ? self.lowPointer.position().left + self.lowPointer.width() / 2 : 0;
-				max = pointer.hasClass('low') ? self.highPointer.position().left + self.highPointer.width() / 2 : self.domNode.width();
+			min = 0;
+			max = self.domNode.width();
+
+			if (!self.isSingle()) {
+				min = pointer.hasClass('high') ? parseFloat(self.lowPointer.css("left")) + (self.lowPointer.width() / 2) : 0;
+				max = pointer.hasClass('low') ? parseFloat(self.highPointer.css("left")) + (self.highPointer.width() / 2) : self.domNode.width();
 			}
+
 			var value = Math.min(Math.max(position, min), max);
 			self.setPosition(pointer, value, true);
 		},
 		setPosition: function(pointer, position, isPx, animate) {
-			var leftPos,
-				lowPos = this.lowPointer.position().left,
-				highPos = this.highPointer.position().left,
+			var leftPos, rightPos,
+				lowPos = parseFloat(this.lowPointer.css("left")),
+				highPos = parseFloat(this.highPointer.css("left")) || 0,
 				circleWidth = this.highPointer.width() / 2;
 			if (!isPx) {
 				position = this.prcToPx(position);
 			}
+			if(this.options.snap){
+				var expPos = this.correctPositionForSnap(position);
+				if(expPos === -1){
+					return;
+				}else{
+					position = expPos;
+				}
+			}
 			if (pointer[0] === this.highPointer[0]) {
 				highPos = Math.round(position - circleWidth);
 			} else {
@@ -176,17 +203,33 @@
 				leftPos = 0;
 			} else {
 				leftPos = lowPos + circleWidth;
+				rightPos = highPos + circleWidth;
 			}
+			var w = Math.round(highPos + circleWidth - leftPos);
 			this.bar[animate ? 'animate' : 'css']({
-				'width': Math.round(highPos + circleWidth - leftPos),
-				'left': leftPos
+				'width': Math.abs(w),
+				'left': (w>0) ? leftPos : leftPos + w
 			});
 			this.showPointerValue(pointer, position, animate);
 			this.isReadonly();
 		},
+		correctPositionForSnap: function(position){
+			var currentValue = this.positionToValue(position) - this.options.from;
+			var diff = this.options.width / (this.interval / this.options.step),
+				expectedPosition = (currentValue / this.options.step) * diff;
+			if( position <= expectedPosition + diff / 2 && position >= expectedPosition - diff / 2){
+				return expectedPosition;
+			}else{
+				return -1;
+			}
+		},
 		// will be called from outside
 		setValue: function(value) {
 			var values = value.toString().split(',');
+			values[0] = Math.min(Math.max(values[0], this.options.from), this.options.to) + '';
+			if (values.length > 1){
+				values[1] = Math.min(Math.max(values[1], this.options.from), this.options.to) + '';
+			}
 			this.options.value = value;
 			var prc = this.valuesToPrc(values.length === 2 ? values : [0, values[0]]);
 			if (this.isSingle()) {
@@ -214,15 +257,17 @@
 		getBarWidth: function() {
 			var values = this.options.value.split(',');
 			if (values.length > 1) {
-				return parseInt(values[1], 10) - parseInt(values[0], 10);
+				return parseFloat(values[1]) - parseFloat(values[0]);
 			} else {
-				return parseInt(values[0], 10);
+				return parseFloat(values[0]);
 			}
 		},
 		showPointerValue: function(pointer, position, animate) {
 			var label = $('.pointer-label', this.domNode)[pointer.hasClass('low') ? 'first' : 'last']();
 			var text;
 			var value = this.positionToValue(position);
+			// Is it higer or lower than it should be?
+
 			if ($.isFunction(this.options.format)) {
 				var type = this.isSingle() ? undefined : (pointer.hasClass('low') ? 'low' : 'high');
 				text = this.options.format(value, type);
@@ -239,17 +284,36 @@
 			this.setInputValue(pointer, value);
 		},
 		valuesToPrc: function(values) {
-			var lowPrc = ((values[0] - this.options.from) * 100 / this.interval),
-				highPrc = ((values[1] - this.options.from) * 100 / this.interval);
+			var lowPrc = ((parseFloat(values[0]) - parseFloat(this.options.from)) * 100 / this.interval),
+				highPrc = ((parseFloat(values[1]) - parseFloat(this.options.from)) * 100 / this.interval);
 			return [lowPrc, highPrc];
 		},
 		prcToPx: function(prc) {
 			return (this.domNode.width() * prc) / 100;
 		},
+		isDecimal: function() {
+			return ((this.options.value + this.options.from + this.options.to).indexOf(".")===-1) ? false : true;
+		},
 		positionToValue: function(pos) {
 			var value = (pos / this.domNode.width()) * this.interval;
-			value = value + this.options.from;
-			return Math.round(value / this.options.step) * this.options.step;
+			value = parseFloat(value, 10) + parseFloat(this.options.from, 10);
+			if (this.isDecimal()) {
+				var final = Math.round(Math.round(value / this.options.step) * this.options.step *100)/100;
+				if (final!==0.0) {
+					final = '' + final;
+					if (final.indexOf(".")===-1) {
+						final = final + ".";
+					}
+					while (final.length - final.indexOf('.')<3) {
+						final = final + "0";
+					}
+				} else {
+					final = "0.00";
+				}
+				return final;
+			} else {
+				return Math.round(value / this.options.step) * this.options.step;
+			}
 		},
 		setInputValue: function(pointer, v) {
 			// if(!isChanged) return;
@@ -264,13 +328,20 @@
 				}
 			}
 			if (this.inputNode.val() !== this.options.value) {
-				this.inputNode.val(this.options.value);
+				this.inputNode.val(this.options.value)
+					.trigger('change');
 				this.options.onstatechange.call(this, this.options.value);
 			}
 		},
 		getValue: function() {
 			return this.options.value;
 		},
+		getOptions: function() {
+			return this.options;
+		},
+		getRange: function() {
+			return this.options.from + "," + this.options.to;
+		},
 		isReadonly: function(){
 			this.domNode.toggleClass('slider-readonly', this.options.disable);
 		},
@@ -285,23 +356,18 @@
 		toggleDisable: function(){
 			this.options.disable = !this.options.disable;
 			this.isReadonly();
+		},
+		updateRange: function(range, value) {
+			var values = range.toString().split(',');
+			this.interval = parseInt(values[1]) - parseInt(values[0]);
+			if(value){
+				this.setValue(value);
+			}else{
+				this.setValue(this.getValue());
+			}
 		}
 	};
 
-	/*$.jRange = function (node, options) {
-		var jNode = $(node);
-		if(!jNode.data('jrange')){
-			jNode.data('jrange', new jRange(node, options));
-		}
-		return jNode.data('jrange');
-	};
-
-	$.fn.jRange = function (options) {
-		return this.each(function(){
-			$.jRange(this, options);
-		});
-	};*/
-
 	var pluginName = 'jRange';
 	// A really lightweight plugin wrapper around the constructor,
 	// preventing against multiple instantiations