aboutsummaryrefslogtreecommitdiffstats
path: root/library/jRange/jquery.range.js
diff options
context:
space:
mode:
Diffstat (limited to 'library/jRange/jquery.range.js')
-rw-r--r--library/jRange/jquery.range.js146
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
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-21 23:57:39 +0000