387 lines
17 KiB
JavaScript
387 lines
17 KiB
JavaScript
|
dojo.provide("dojox.form.RangeSlider");
|
||
|
|
dojo.require("dijit.form.HorizontalSlider");
|
||
|
|
dojo.require("dijit.form.VerticalSlider");
|
||
|
|
dojo.require("dojox.fx");
|
||
|
|
|
||
|
|
dojo.declare(
|
||
|
|
"dojox.form._RangeSliderMixin",
|
||
|
|
null,
|
||
|
|
{
|
||
|
|
value: [0,100],
|
||
|
|
|
||
|
|
postCreate: function(){
|
||
|
|
this.inherited(arguments);
|
||
|
|
// we sort the values!
|
||
|
|
// TODO: re-think, how to set the value
|
||
|
|
if(this._isReversed()){
|
||
|
|
this.value.sort(function(a, b){
|
||
|
|
return b-a;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
this.value.sort(function(a, b){
|
||
|
|
return a-b;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// define a custom constructor for a SliderMoverMax that points back to me
|
||
|
|
var _self = this;
|
||
|
|
var mover = function(){
|
||
|
|
dijit.form._SliderMoverMax.apply(this, arguments);
|
||
|
|
this.widget = _self;
|
||
|
|
};
|
||
|
|
dojo.extend(mover, dijit.form._SliderMoverMax.prototype);
|
||
|
|
|
||
|
|
this._movableMax = new dojo.dnd.Moveable(this.sliderHandleMax,{mover: mover});
|
||
|
|
dijit.setWaiState(this.focusNodeMax, "valuemin", this.minimum);
|
||
|
|
dijit.setWaiState(this.focusNodeMax, "valuemax", this.maximum);
|
||
|
|
|
||
|
|
// a dnd for the bar!
|
||
|
|
var barMover = function(){
|
||
|
|
dijit.form._SliderBarMover.apply(this, arguments);
|
||
|
|
this.widget = _self;
|
||
|
|
};
|
||
|
|
dojo.extend(barMover, dijit.form._SliderBarMover.prototype);
|
||
|
|
this._movableBar = new dojo.dnd.Moveable(this.progressBar,{mover: barMover});
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function(){
|
||
|
|
this.inherited(arguments);
|
||
|
|
this._movableMax.destroy();
|
||
|
|
this._movableBar.destroy();
|
||
|
|
},
|
||
|
|
|
||
|
|
_onKeyPress: function(/*Event*/ e){
|
||
|
|
if(this.disabled || this.readOnly || e.altKey || e.ctrlKey){ return; }
|
||
|
|
var focusedEl = e.currentTarget;
|
||
|
|
var minSelected = false;
|
||
|
|
var maxSelected = false;
|
||
|
|
var signedChange;
|
||
|
|
if (focusedEl == this.sliderHandle){
|
||
|
|
minSelected = true;
|
||
|
|
}
|
||
|
|
else if(focusedEl == this.progressBar){
|
||
|
|
maxSelected = true;
|
||
|
|
minSelected = true;
|
||
|
|
}
|
||
|
|
else if(focusedEl == this.sliderHandleMax){
|
||
|
|
maxSelected = true;
|
||
|
|
}
|
||
|
|
switch(e.keyCode){
|
||
|
|
case dojo.keys.HOME:
|
||
|
|
this._setValueAttr(this.minimum, true, maxSelected);
|
||
|
|
break;
|
||
|
|
case dojo.keys.END:
|
||
|
|
this._setValueAttr(this.maximum, true, maxSelected);
|
||
|
|
break;
|
||
|
|
// this._descending === false: if ascending vertical (min on top)
|
||
|
|
// (this._descending || this.isLeftToRight()): if left-to-right horizontal or descending vertical
|
||
|
|
case ((this._descending || this.isLeftToRight()) ? dojo.keys.RIGHT_ARROW : dojo.keys.LEFT_ARROW):
|
||
|
|
case (this._descending === false ? dojo.keys.DOWN_ARROW : dojo.keys.UP_ARROW):
|
||
|
|
case (this._descending === false ? dojo.keys.PAGE_DOWN : dojo.keys.PAGE_UP):
|
||
|
|
if (minSelected && maxSelected){
|
||
|
|
signedChange = Array();
|
||
|
|
signedChange[0] = {'change': e.keyCode == dojo.keys.PAGE_UP ? this.pageIncrement : 1, 'useMaxValue': true};
|
||
|
|
signedChange[1] = {'change': e.keyCode == dojo.keys.PAGE_UP ? this.pageIncrement : 1, 'useMaxValue': false};
|
||
|
|
this._bumpValue(signedChange);
|
||
|
|
}
|
||
|
|
else if (minSelected){
|
||
|
|
this._bumpValue(e.keyCode == dojo.keys.PAGE_UP ? this.pageIncrement : 1, true);
|
||
|
|
}
|
||
|
|
else if (maxSelected){
|
||
|
|
this._bumpValue(e.keyCode == dojo.keys.PAGE_UP ? this.pageIncrement : 1);
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
case ((this._descending || this.isLeftToRight()) ? dojo.keys.LEFT_ARROW : dojo.keys.RIGHT_ARROW):
|
||
|
|
case (this._descending === false ? dojo.keys.UP_ARROW : dojo.keys.DOWN_ARROW):
|
||
|
|
case (this._descending === false ? dojo.keys.PAGE_UP : dojo.keys.PAGE_DOWN):
|
||
|
|
if (minSelected && maxSelected){
|
||
|
|
signedChange = Array();
|
||
|
|
signedChange[0] = {'change': e.keyCode == dojo.keys.PAGE_DOWN ? -this.pageIncrement : -1, 'useMaxValue': false};
|
||
|
|
signedChange[1] = {'change': e.keyCode == dojo.keys.PAGE_DOWN ? -this.pageIncrement : -1, 'useMaxValue': true};
|
||
|
|
this._bumpValue(signedChange);
|
||
|
|
}
|
||
|
|
else if (minSelected){
|
||
|
|
this._bumpValue(e.keyCode == dojo.keys.PAGE_DOWN ? -this.pageIncrement : -1);
|
||
|
|
}
|
||
|
|
else if (maxSelected){
|
||
|
|
this._bumpValue(e.keyCode == dojo.keys.PAGE_DOWN ? -this.pageIncrement : -1, true);
|
||
|
|
}
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
dijit.form._FormValueWidget.prototype._onKeyPress.apply(this, arguments);
|
||
|
|
this.inherited(arguments);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
dojo.stopEvent(e);
|
||
|
|
},
|
||
|
|
|
||
|
|
_onHandleClickMax: function(e){
|
||
|
|
if(this.disabled || this.readOnly){ return; }
|
||
|
|
if(!dojo.isIE){
|
||
|
|
// make sure you get focus when dragging the handle
|
||
|
|
// (but don't do on IE because it causes a flicker on mouse up (due to blur then focus)
|
||
|
|
dijit.focus(this.sliderHandleMax);
|
||
|
|
}
|
||
|
|
dojo.stopEvent(e);
|
||
|
|
},
|
||
|
|
|
||
|
|
_onClkIncBumper: function(){
|
||
|
|
this._setValueAttr(this._descending === false ? this.minimum : this.maximum, true, true);
|
||
|
|
},
|
||
|
|
|
||
|
|
_bumpValue: function(signedChange, useMaxValue){
|
||
|
|
var value;
|
||
|
|
// we pass an array to _setValueAttr when signedChange is an array
|
||
|
|
if(!dojo.isArray(signedChange)){
|
||
|
|
value = this._getBumpValue(signedChange, useMaxValue);
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
value = Array();
|
||
|
|
value[0] = this._getBumpValue(signedChange[0]['change'], signedChange[0]['useMaxValue']);
|
||
|
|
value[1] = this._getBumpValue(signedChange[1]['change'], signedChange[1]['useMaxValue']);
|
||
|
|
}
|
||
|
|
this._setValueAttr(value, true, !dojo.isArray(signedChange) && ((signedChange > 0 && !useMaxValue) || (useMaxValue && signedChange < 0)));
|
||
|
|
},
|
||
|
|
|
||
|
|
_getBumpValue: function(signedChange, useMaxValue){
|
||
|
|
var s = dojo.getComputedStyle(this.sliderBarContainer);
|
||
|
|
var c = dojo._getContentBox(this.sliderBarContainer, s);
|
||
|
|
var count = this.discreteValues;
|
||
|
|
if(count <= 1 || count == Infinity){ count = c[this._pixelCount]; }
|
||
|
|
count--;
|
||
|
|
var myValue = !useMaxValue ? this.value[0] : this.value[1];
|
||
|
|
if((this._isReversed() && signedChange < 0) || (signedChange > 0 && !this._isReversed())){
|
||
|
|
myValue = !useMaxValue ? this.value[1] : this.value[0];
|
||
|
|
}
|
||
|
|
var value = (myValue - this.minimum) * count / (this.maximum - this.minimum) + signedChange;
|
||
|
|
if(value < 0){ value = 0; }
|
||
|
|
if(value > count){ value = count; }
|
||
|
|
return value * (this.maximum - this.minimum) / count + this.minimum;
|
||
|
|
},
|
||
|
|
|
||
|
|
_onBarClick: function(e){
|
||
|
|
if(this.disabled || this.readOnly){ return; }
|
||
|
|
if(!dojo.isIE){
|
||
|
|
// make sure you get focus when dragging the handle
|
||
|
|
// (but don't do on IE because it causes a flicker on mouse up (due to blur then focus)
|
||
|
|
dijit.focus(this.progressBar);
|
||
|
|
}
|
||
|
|
dojo.stopEvent(e);
|
||
|
|
},
|
||
|
|
|
||
|
|
_onRemainingBarClick: function(e){
|
||
|
|
if(this.disabled || this.readOnly){ return; }
|
||
|
|
if(!dojo.isIE){
|
||
|
|
// make sure you get focus when dragging the handle
|
||
|
|
// (but don't do on IE because it causes a flicker on mouse up (due to blur then focus)
|
||
|
|
dijit.focus(this.progressBar);
|
||
|
|
}
|
||
|
|
// now we set the min/max-value of the slider!
|
||
|
|
var abspos = dojo.coords(this.sliderBarContainer, true);
|
||
|
|
var bar = dojo.coords(this.progressBar, true);
|
||
|
|
var relMousePos = e[this._mousePixelCoord] - abspos[this._startingPixelCoord];
|
||
|
|
var leftPos = bar[this._startingPixelCount];
|
||
|
|
var rightPos = bar[this._startingPixelCount] + bar[this._pixelCount];
|
||
|
|
var isMaxVal = this._isReversed() ? relMousePos <= leftPos : relMousePos >= rightPos;
|
||
|
|
this._setPixelValue(this._isReversed() ? (abspos[this._pixelCount]-relMousePos) : relMousePos, abspos[this._pixelCount], true, isMaxVal);
|
||
|
|
dojo.stopEvent(e);
|
||
|
|
},
|
||
|
|
|
||
|
|
_setPixelValue: function(/*Number*/ pixelValue, /*Number*/ maxPixels, /*Boolean*/ priorityChange, /*Boolean*/ isMaxVal){
|
||
|
|
if(this.disabled || this.readOnly){ return; }
|
||
|
|
var myValue = this._getValueByPixelValue(pixelValue, maxPixels);
|
||
|
|
this._setValueAttr(myValue, priorityChange, isMaxVal);
|
||
|
|
},
|
||
|
|
|
||
|
|
_getValueByPixelValue: function(/*Number*/ pixelValue, /*Number*/ maxPixels){
|
||
|
|
pixelValue = pixelValue < 0 ? 0 : maxPixels < pixelValue ? maxPixels : pixelValue;
|
||
|
|
var count = this.discreteValues;
|
||
|
|
if(count <= 1 || count == Infinity){ count = maxPixels; }
|
||
|
|
count--;
|
||
|
|
var pixelsPerValue = maxPixels / count;
|
||
|
|
var wholeIncrements = Math.round(pixelValue / pixelsPerValue);
|
||
|
|
return (this.maximum-this.minimum)*wholeIncrements/count + this.minimum;
|
||
|
|
},
|
||
|
|
|
||
|
|
_setValueAttr: function(/*Array or Number*/ value, /*Boolean, optional*/ priorityChange, /*Boolean, optional*/ isMaxVal){
|
||
|
|
// we pass an array, when we move the slider with the bar
|
||
|
|
var actValue = this.value;
|
||
|
|
if(!dojo.isArray(value)){
|
||
|
|
if(isMaxVal){
|
||
|
|
if (this._isReversed()){
|
||
|
|
actValue[0] = value;
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
actValue[1] = value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
if(this._isReversed()){
|
||
|
|
actValue[1] = value;
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
actValue[0] = value;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
actValue = value;
|
||
|
|
}
|
||
|
|
// we have to reset this values. don't know the reason for that
|
||
|
|
this._lastValueReported = "";
|
||
|
|
this.valueNode.value = this.value = value = actValue;
|
||
|
|
dijit.setWaiState(this.focusNode, "valuenow", actValue[0]);
|
||
|
|
dijit.setWaiState(this.focusNodeMax, "valuenow", actValue[1]);
|
||
|
|
if(this._isReversed()){
|
||
|
|
this.value.sort(function(a, b){
|
||
|
|
return b-a;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
this.value.sort(function(a, b){
|
||
|
|
return a-b;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
// not calling the _setValueAttr-function of dijit.form.Slider, but the super-super-class (needed for the onchange-event!)
|
||
|
|
dijit.form._FormValueWidget.prototype._setValueAttr.apply(this, arguments);
|
||
|
|
this._printSliderBar(priorityChange, isMaxVal);
|
||
|
|
},
|
||
|
|
|
||
|
|
_printSliderBar: function(priorityChange, isMaxVal){
|
||
|
|
var percentMin = (this.value[0] - this.minimum) / (this.maximum - this.minimum);
|
||
|
|
var percentMax = (this.value[1] - this.minimum) / (this.maximum - this.minimum);
|
||
|
|
var percentMinSave = percentMin;
|
||
|
|
if(percentMin > percentMax){
|
||
|
|
percentMin = percentMax;
|
||
|
|
percentMax = percentMinSave;
|
||
|
|
}
|
||
|
|
var sliderHandleVal = this._isReversed() ? ((1-percentMin)*100) : (percentMin * 100);
|
||
|
|
var sliderHandleMaxVal = this._isReversed() ? ((1-percentMax)*100) : (percentMax * 100);
|
||
|
|
var progressBarVal = this._isReversed() ? ((1-percentMax)*100) : (percentMin * 100);
|
||
|
|
if (priorityChange && this.slideDuration > 0 && this.progressBar.style[this._progressPixelSize]){
|
||
|
|
// animate the slider
|
||
|
|
var percent = isMaxVal ? percentMax : percentMin;
|
||
|
|
var _this = this;
|
||
|
|
var props = {};
|
||
|
|
var start = parseFloat(this.progressBar.style[this._handleOffsetCoord]);
|
||
|
|
var duration = this.slideDuration / 10; // * (percent-start/100);
|
||
|
|
if(duration === 0){ return; }
|
||
|
|
if(duration < 0){ duration = 0 - duration; }
|
||
|
|
var propsHandle = {};
|
||
|
|
var propsHandleMax = {};
|
||
|
|
var propsBar = {};
|
||
|
|
// hui, a lot of animations :-)
|
||
|
|
propsHandle[this._handleOffsetCoord] = { start: this.sliderHandle.style[this._handleOffsetCoord], end: sliderHandleVal, units:"%"};
|
||
|
|
propsHandleMax[this._handleOffsetCoord] = { start: this.sliderHandleMax.style[this._handleOffsetCoord], end: sliderHandleMaxVal, units:"%"};
|
||
|
|
propsBar[this._handleOffsetCoord] = { start: this.progressBar.style[this._handleOffsetCoord], end: progressBarVal, units:"%"};
|
||
|
|
propsBar[this._progressPixelSize] = { start: this.progressBar.style[this._progressPixelSize], end: (percentMax - percentMin) * 100, units:"%"};
|
||
|
|
var animHandle = dojo.animateProperty({node: this.sliderHandle,duration: duration, properties: propsHandle});
|
||
|
|
var animHandleMax = dojo.animateProperty({node: this.sliderHandleMax,duration: duration, properties: propsHandleMax});
|
||
|
|
var animBar = dojo.animateProperty({node: this.progressBar,duration: duration, properties: propsBar});
|
||
|
|
var animCombine = dojo.fx.combine([animHandle, animHandleMax, animBar]);
|
||
|
|
animCombine.play();
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
this.sliderHandle.style[this._handleOffsetCoord] = sliderHandleVal + "%";
|
||
|
|
this.sliderHandleMax.style[this._handleOffsetCoord] = sliderHandleMaxVal + "%";
|
||
|
|
this.progressBar.style[this._handleOffsetCoord] = progressBarVal + "%";
|
||
|
|
this.progressBar.style[this._progressPixelSize] = ((percentMax - percentMin) * 100) + "%";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
dojo.declare("dijit.form._SliderMoverMax",
|
||
|
|
dijit.form._SliderMover,
|
||
|
|
{
|
||
|
|
onMouseMove: function(e){
|
||
|
|
var widget = this.widget;
|
||
|
|
var abspos = widget._abspos;
|
||
|
|
if(!abspos){
|
||
|
|
abspos = widget._abspos = dojo.coords(widget.sliderBarContainer, true);
|
||
|
|
widget._setPixelValue_ = dojo.hitch(widget, "_setPixelValue");
|
||
|
|
widget._isReversed_ = widget._isReversed();
|
||
|
|
}
|
||
|
|
var pixelValue = e[widget._mousePixelCoord] - abspos[widget._startingPixelCoord];
|
||
|
|
widget._setPixelValue_(widget._isReversed_ ? (abspos[widget._pixelCount]-pixelValue) : pixelValue, abspos[widget._pixelCount], false, true);
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function(e){
|
||
|
|
dojo.dnd.Mover.prototype.destroy.apply(this, arguments);
|
||
|
|
var widget = this.widget;
|
||
|
|
widget._abspos = null;
|
||
|
|
widget._setValueAttr(widget.value, true);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
dojo.declare("dijit.form._SliderBarMover",
|
||
|
|
dojo.dnd.Mover,
|
||
|
|
{
|
||
|
|
onMouseMove: function(e){
|
||
|
|
var widget = this.widget;
|
||
|
|
if(widget.disabled || widget.readOnly){ return; }
|
||
|
|
var abspos = widget._abspos;
|
||
|
|
var bar = widget._bar;
|
||
|
|
var mouseOffset = widget._mouseOffset;
|
||
|
|
if(!abspos){
|
||
|
|
abspos = widget._abspos = dojo.coords(widget.sliderBarContainer, true);
|
||
|
|
widget._setPixelValue_ = dojo.hitch(widget, "_setPixelValue");
|
||
|
|
widget._getValueByPixelValue_ = dojo.hitch(widget, "_getValueByPixelValue");
|
||
|
|
widget._isReversed_ = widget._isReversed();
|
||
|
|
}
|
||
|
|
if(!bar){
|
||
|
|
bar = widget._bar = dojo.coords(widget.progressBar, true);
|
||
|
|
}
|
||
|
|
if(!mouseOffset){
|
||
|
|
mouseOffset = widget._mouseOffset = e[widget._mousePixelCoord] - abspos[widget._startingPixelCoord] - bar[widget._startingPixelCount];
|
||
|
|
}
|
||
|
|
var pixelValueMin = e[widget._mousePixelCoord] - abspos[widget._startingPixelCoord] - mouseOffset;
|
||
|
|
var pixelValueMax = e[widget._mousePixelCoord] - abspos[widget._startingPixelCoord] - mouseOffset + bar[widget._pixelCount];
|
||
|
|
// we don't narrow the slider when it reaches the bumper!
|
||
|
|
// maybe there is a simpler way
|
||
|
|
var pixelValues = [pixelValueMin, pixelValueMax];
|
||
|
|
pixelValues.sort(function(a, b){
|
||
|
|
return a-b;
|
||
|
|
});
|
||
|
|
if(pixelValues[0] <= 0){
|
||
|
|
pixelValues[0] = 0;
|
||
|
|
pixelValues[1] = bar[widget._pixelCount];
|
||
|
|
}
|
||
|
|
if(pixelValues[1] >= abspos[widget._pixelCount]){
|
||
|
|
pixelValues[1] = abspos[widget._pixelCount];
|
||
|
|
pixelValues[0] = abspos[widget._pixelCount] - bar[widget._pixelCount];
|
||
|
|
}
|
||
|
|
// getting the real values by pixel
|
||
|
|
var myValues = [widget._getValueByPixelValue(widget._isReversed_ ? (abspos[widget._pixelCount] - pixelValues[0]) : pixelValues[0], abspos[widget._pixelCount]),
|
||
|
|
widget._getValueByPixelValue(widget._isReversed_ ? (abspos[widget._pixelCount] - pixelValues[1]) : pixelValues[1], abspos[widget._pixelCount])];
|
||
|
|
// and setting the value of the widget
|
||
|
|
widget._setValueAttr(myValues, false, false);
|
||
|
|
},
|
||
|
|
|
||
|
|
destroy: function(e){
|
||
|
|
dojo.dnd.Mover.prototype.destroy.apply(this, arguments);
|
||
|
|
var widget = this.widget;
|
||
|
|
widget._abspos = null;
|
||
|
|
widget._bar = null;
|
||
|
|
widget._mouseOffset = null;
|
||
|
|
widget._setValueAttr(widget.value, true);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
dojo.declare(
|
||
|
|
"dojox.form.HorizontalRangeSlider",
|
||
|
|
[dijit.form.HorizontalSlider, dojox.form._RangeSliderMixin],
|
||
|
|
{
|
||
|
|
templatePath: dojo.moduleUrl('dojox.form','resources/HorizontalRangeSlider.html')
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
dojo.declare(
|
||
|
|
"dojox.form.VerticalRangeSlider",
|
||
|
|
[dijit.form.VerticalSlider, dojox.form._RangeSliderMixin],
|
||
|
|
{
|
||
|
|
// summary
|
||
|
|
// A form widget that allows one to select a range with two vertically draggable images
|
||
|
|
templatePath: dojo.moduleUrl('dojox.form','resources/VerticalRangeSlider.html')
|
||
|
|
}
|
||
|
|
);
|