RangeSlider.js 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
  1. require({cache:{
  2. 'url:dojox/form/resources/HorizontalRangeSlider.html':"<table class=\"dijit dijitReset dijitSlider dijitSliderH dojoxRangeSlider\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" rules=\"none\" dojoAttachEvent=\"onkeypress:_onKeyPress,onkeyup:_onKeyUp\"\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t\t><td dojoAttachPoint=\"topDecoration\" class=\"dijitReset dijitSliderDecoration dijitSliderDecorationT dijitSliderDecorationH\"></td\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset dijitSliderButtonContainer dijitSliderButtonContainerH\"\n\t\t\t><div class=\"dijitSliderDecrementIconH\" tabIndex=\"-1\" style=\"display:none\" dojoAttachPoint=\"decrementButton\"><span class=\"dijitSliderButtonInner\">-</span></div\n\t\t></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><div class=\"dijitSliderBar dijitSliderBumper dijitSliderBumperH dijitSliderLeftBumper\" dojoAttachEvent=\"onmousedown:_onClkDecBumper\"></div\n\t\t></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><input dojoAttachPoint=\"valueNode\" type=\"hidden\" ${!nameAttrSetting}\n\t\t\t/><div role=\"presentation\" class=\"dojoxRangeSliderBarContainer\" dojoAttachPoint=\"sliderBarContainer\"\n\t\t\t\t><div dojoAttachPoint=\"sliderHandle\" tabIndex=\"${tabIndex}\" class=\"dijitSliderMoveable dijitSliderMoveableH\" dojoAttachEvent=\"onmousedown:_onHandleClick\" role=\"slider\" valuemin=\"${minimum}\" valuemax=\"${maximum}\"\n\t\t\t\t\t><div class=\"dijitSliderImageHandle dijitSliderImageHandleH\"></div\n\t\t\t\t></div\n\t\t\t\t><div role=\"presentation\" dojoAttachPoint=\"progressBar,focusNode\" class=\"dijitSliderBar dijitSliderBarH dijitSliderProgressBar dijitSliderProgressBarH\" dojoAttachEvent=\"onmousedown:_onBarClick\"></div\n\t\t\t\t><div dojoAttachPoint=\"sliderHandleMax,focusNodeMax\" tabIndex=\"${tabIndex}\" class=\"dijitSliderMoveable dijitSliderMoveableH\" dojoAttachEvent=\"onmousedown:_onHandleClickMax\" role=\"sliderMax\" valuemin=\"${minimum}\" valuemax=\"${maximum}\"\n\t\t\t\t\t><div class=\"dijitSliderImageHandle dijitSliderImageHandleH\"></div\n\t\t\t\t></div\n\t\t\t\t><div role=\"presentation\" dojoAttachPoint=\"remainingBar\" class=\"dijitSliderBar dijitSliderBarH dijitSliderRemainingBar dijitSliderRemainingBarH\" dojoAttachEvent=\"onmousedown:_onRemainingBarClick\"></div\n\t\t\t></div\n\t\t></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><div class=\"dijitSliderBar dijitSliderBumper dijitSliderBumperH dijitSliderRightBumper\" dojoAttachEvent=\"onmousedown:_onClkIncBumper\"></div\n\t\t></td\n\t\t><td class=\"dijitReset dijitSliderButtonContainer dijitSliderButtonContainerH\"\n\t\t\t><div class=\"dijitSliderIncrementIconH\" tabIndex=\"-1\" style=\"display:none\" dojoAttachPoint=\"incrementButton\"><span class=\"dijitSliderButtonInner\">+</span></div\n\t\t></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t\t><td dojoAttachPoint=\"containerNode,bottomDecoration\" class=\"dijitReset dijitSliderDecoration dijitSliderDecorationB dijitSliderDecorationH\"></td\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t></tr\n></table>\n",
  3. 'url:dojox/form/resources/VerticalRangeSlider.html':"<table class=\"dijitReset dijitSlider dijitSliderV dojoxRangeSlider\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" rules=\"none\"\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\"></td\n\t\t><td class=\"dijitReset dijitSliderButtonContainer dijitSliderButtonContainerV\"\n\t\t\t><div class=\"dijitSliderIncrementIconV\" tabIndex=\"-1\" style=\"display:none\" dojoAttachPoint=\"decrementButton\" dojoAttachEvent=\"onclick: increment\"><span class=\"dijitSliderButtonInner\">+</span></div\n\t\t></td\n\t\t><td class=\"dijitReset\"></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\"></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><center><div class=\"dijitSliderBar dijitSliderBumper dijitSliderBumperV dijitSliderTopBumper\" dojoAttachEvent=\"onclick:_onClkIncBumper\"></div></center\n\t\t></td\n\t\t><td class=\"dijitReset\"></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td dojoAttachPoint=\"leftDecoration\" class=\"dijitReset dijitSliderDecoration dijitSliderDecorationL dijitSliderDecorationV\" style=\"text-align:center;height:100%;\"></td\n\t\t><td class=\"dijitReset\" style=\"height:100%;\"\n\t\t\t><input dojoAttachPoint=\"valueNode\" type=\"hidden\" ${!nameAttrSetting}\n\t\t\t/><center role=\"presentation\" style=\"position:relative;height:100%;\" dojoAttachPoint=\"sliderBarContainer\"\n\t\t\t\t><div role=\"presentation\" dojoAttachPoint=\"remainingBar\" class=\"dijitSliderBar dijitSliderBarV dijitSliderRemainingBar dijitSliderRemainingBarV\" dojoAttachEvent=\"onmousedown:_onRemainingBarClick\"\n\t\t\t\t\t><div dojoAttachPoint=\"sliderHandle\" tabIndex=\"${tabIndex}\" class=\"dijitSliderMoveable dijitSliderMoveableV\" dojoAttachEvent=\"onkeypress:_onKeyPress,onmousedown:_onHandleClick\" style=\"vertical-align:top;\" role=\"slider\" valuemin=\"${minimum}\" valuemax=\"${maximum}\"\n\t\t\t\t\t\t><div class=\"dijitSliderImageHandle dijitSliderImageHandleV\"></div\n\t\t\t\t\t></div\n\t\t\t\t\t><div role=\"presentation\" dojoAttachPoint=\"progressBar,focusNode\" tabIndex=\"${tabIndex}\" class=\"dijitSliderBar dijitSliderBarV dijitSliderProgressBar dijitSliderProgressBarV\" dojoAttachEvent=\"onkeypress:_onKeyPress,onmousedown:_onBarClick\"\n\t\t\t\t\t></div\n\t\t\t\t\t><div dojoAttachPoint=\"sliderHandleMax,focusNodeMax\" tabIndex=\"${tabIndex}\" class=\"dijitSliderMoveable dijitSliderMoveableV\" dojoAttachEvent=\"onkeypress:_onKeyPress,onmousedown:_onHandleClickMax\" style=\"vertical-align:top;\" role=\"slider\" valuemin=\"${minimum}\" valuemax=\"${maximum}\"\n\t\t\t\t\t\t><div class=\"dijitSliderImageHandle dijitSliderImageHandleV\"></div\n\t\t\t\t\t></div\n\t\t\t\t></div\n\t\t\t></center\n\t\t></td\n\t\t><td dojoAttachPoint=\"containerNode,rightDecoration\" class=\"dijitReset dijitSliderDecoration dijitSliderDecorationR dijitSliderDecorationV\" style=\"text-align:center;height:100%;\"></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\"></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><center><div class=\"dijitSliderBar dijitSliderBumper dijitSliderBumperV dijitSliderBottomBumper\" dojoAttachEvent=\"onclick:_onClkDecBumper\"></div></center\n\t\t></td\n\t\t><td class=\"dijitReset\"></td\n\t></tr\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\"></td\n\t\t><td class=\"dijitReset dijitSliderButtonContainer dijitSliderButtonContainerV\"\n\t\t\t><div class=\"dijitSliderDecrementIconV\" tabIndex=\"-1\" style=\"display:none\" dojoAttachPoint=\"incrementButton\" dojoAttachEvent=\"onclick: decrement\"><span class=\"dijitSliderButtonInner\">-</span></div\n\t\t></td\n\t\t><td class=\"dijitReset\"></td\n\t></tr\n></table>\n"}});
  4. define("dojox/form/RangeSlider", [
  5. "dojo/_base/declare",
  6. "dojo/_base/lang",
  7. "dojo/_base/array",
  8. "dojo/_base/fx",
  9. "dojo/_base/event",
  10. "dojo/_base/sniff",
  11. "dojo/dom-style",
  12. "dojo/dom-geometry",
  13. "dojo/keys",
  14. "dijit",
  15. "dojo/dnd/Mover",
  16. "dojo/dnd/Moveable",
  17. "dojo/text!./resources/HorizontalRangeSlider.html",
  18. "dojo/text!./resources/VerticalRangeSlider.html",
  19. "dijit/form/HorizontalSlider",
  20. "dijit/form/VerticalSlider",
  21. "dijit/form/_FormValueWidget",
  22. "dijit/focus",
  23. "dojo/fx",
  24. "dojox/fx" // unused?
  25. ], function(declare, lang, array, fx, event, has, domStyle, domGeometry, keys, dijit, Mover, Moveable, hTemplate, vTemplate, HorizontalSlider, VerticalSlider, FormValueWidget, FocusManager, fxUtils){
  26. // make these functions once:
  27. var sortReversed = function(a, b){ return b - a; },
  28. sortForward = function(a, b){ return a - b; }
  29. ;
  30. lang.getObject("form", true, dojox);
  31. /*=====
  32. hTemplate = dijit.form.HorizontalSlider;
  33. vTemplate = dijit.form.VerticalSlider;
  34. =====*/
  35. var RangeSliderMixin = declare("dojox.form._RangeSliderMixin", null, {
  36. value: [0,100],
  37. postMixInProperties: function(){
  38. this.inherited(arguments);
  39. this.value = array.map(this.value, function(i){ return parseInt(i, 10); });
  40. },
  41. postCreate: function(){
  42. this.inherited(arguments);
  43. // we sort the values!
  44. // TODO: re-think, how to set the value
  45. this.value.sort(this._isReversed() ? sortReversed : sortForward);
  46. // define a custom constructor for a SliderMoverMax that points back to me
  47. var _self = this;
  48. var mover = declare(SliderMoverMax, {
  49. constructor: function(){
  50. this.widget = _self;
  51. }
  52. });
  53. this._movableMax = new Moveable(this.sliderHandleMax,{ mover: mover });
  54. this.focusNodeMax.setAttribute("aria-valuemin", this.minimum);
  55. this.focusNodeMax.setAttribute("aria-valuemax", this.maximum);
  56. // a dnd for the bar!
  57. var barMover = declare(SliderBarMover, {
  58. constructor: function(){
  59. this.widget = _self;
  60. }
  61. });
  62. this._movableBar = new Moveable(this.progressBar,{ mover: barMover });
  63. },
  64. destroy: function(){
  65. this.inherited(arguments);
  66. this._movableMax.destroy();
  67. this._movableBar.destroy();
  68. },
  69. _onKeyPress: function(/*Event*/ e){
  70. if(this.disabled || this.readOnly || e.altKey || e.ctrlKey){ return; }
  71. var useMaxValue = e.target === this.sliderHandleMax;
  72. var barFocus = e.target === this.progressBar;
  73. var k = lang.delegate(keys, this.isLeftToRight() ? {PREV_ARROW: keys.LEFT_ARROW, NEXT_ARROW: keys.RIGHT_ARROW}
  74. : {PREV_ARROW: keys.RIGHT_ARROW, NEXT_ARROW: keys.LEFT_ARROW});
  75. var delta = 0;
  76. var down = false;
  77. switch(e.keyCode){
  78. case k.HOME : this._setValueAttr(this.minimum, true, useMaxValue);event.stop(e);return;
  79. case k.END : this._setValueAttr(this.maximum, true, useMaxValue);event.stop(e);return;
  80. case k.PREV_ARROW :
  81. case k.DOWN_ARROW : down = true;
  82. case k.NEXT_ARROW :
  83. case k.UP_ARROW : delta = 1; break;
  84. case k.PAGE_DOWN : down = true;
  85. case k.PAGE_UP : delta = this.pageIncrement; break;
  86. default : this.inherited(arguments);return;
  87. }
  88. if(down){delta = -delta;}
  89. if(delta){
  90. if(barFocus){
  91. this._bumpValue([
  92. { change: delta, useMaxValue: false },
  93. { change: delta, useMaxValue: true }
  94. ]);
  95. }else{
  96. this._bumpValue(delta, useMaxValue);
  97. }
  98. event.stop(e);
  99. }
  100. },
  101. _onHandleClickMax: function(e){
  102. if(this.disabled || this.readOnly){ return; }
  103. if(!has("ie")){
  104. // make sure you get focus when dragging the handle
  105. // (but don't do on IE because it causes a flicker on mouse up (due to blur then focus)
  106. FocusManager.focus(this.sliderHandleMax);
  107. }
  108. event.stop(e);
  109. },
  110. _onClkIncBumper: function(){
  111. this._setValueAttr(this._descending === false ? this.minimum : this.maximum, true, true);
  112. },
  113. _bumpValue: function(signedChange, useMaxValue){
  114. // we pass an array to _setValueAttr when signedChange is an array
  115. var value = lang.isArray(signedChange) ? [
  116. this._getBumpValue(signedChange[0].change, signedChange[0].useMaxValue),
  117. this._getBumpValue(signedChange[1].change, signedChange[1].useMaxValue)
  118. ]
  119. : this._getBumpValue(signedChange, useMaxValue)
  120. this._setValueAttr(value, true, useMaxValue);
  121. },
  122. _getBumpValue: function(signedChange, useMaxValue){
  123. var idx = useMaxValue ? 1 : 0;
  124. if(this._isReversed()){
  125. idx = 1 - idx;
  126. }
  127. var s = domStyle.getComputedStyle(this.sliderBarContainer),
  128. c = domGeometry.getContentBox(this.sliderBarContainer, s),
  129. count = this.discreteValues,
  130. myValue = this.value[idx]
  131. ;
  132. if(count <= 1 || count == Infinity){ count = c[this._pixelCount]; }
  133. count--;
  134. var value = (myValue - this.minimum) * count / (this.maximum - this.minimum) + signedChange;
  135. if(value < 0){ value = 0; }
  136. if(value > count){ value = count; }
  137. return value * (this.maximum - this.minimum) / count + this.minimum;
  138. },
  139. _onBarClick: function(e){
  140. if(this.disabled || this.readOnly){ return; }
  141. if(!has("ie")){
  142. // make sure you get focus when dragging the handle
  143. // (but don't do on IE because it causes a flicker on mouse up (due to blur then focus)
  144. FocusManager.focus(this.progressBar);
  145. }
  146. event.stop(e);
  147. },
  148. _onRemainingBarClick: function(e){
  149. if(this.disabled || this.readOnly){ return; }
  150. if(!has("ie")){
  151. // make sure you get focus when dragging the handle
  152. // (but don't do on IE because it causes a flicker on mouse up (due to blur then focus)
  153. FocusManager.focus(this.progressBar);
  154. }
  155. // now we set the min/max-value of the slider!
  156. var abspos = domGeometry.position(this.sliderBarContainer, true),
  157. bar = domGeometry.position(this.progressBar, true),
  158. mousePos = e[this._mousePixelCoord],
  159. leftPos = bar[this._startingPixelCoord],
  160. rightPos = leftPos + bar[this._pixelCount],
  161. isMaxVal = this._isReversed() ? mousePos <= leftPos : mousePos >= rightPos,
  162. p = this._isReversed() ? (abspos[this._pixelCount] - mousePos + abspos[this._startingPixelCoord]) : (mousePos - abspos[this._startingPixelCoord])
  163. ;
  164. this._setPixelValue(p, abspos[this._pixelCount], true, isMaxVal);
  165. event.stop(e);
  166. },
  167. _setPixelValue: function(/*Number*/ pixelValue, /*Number*/ maxPixels, /*Boolean*/ priorityChange, /*Boolean*/ isMaxVal){
  168. if(this.disabled || this.readOnly){ return; }
  169. var myValue = this._getValueByPixelValue(pixelValue, maxPixels);
  170. this._setValueAttr(myValue, priorityChange, isMaxVal);
  171. },
  172. _getValueByPixelValue: function(/*Number*/ pixelValue, /*Number*/ maxPixels){
  173. pixelValue = pixelValue < 0 ? 0 : maxPixels < pixelValue ? maxPixels : pixelValue;
  174. var count = this.discreteValues;
  175. if(count <= 1 || count == Infinity){ count = maxPixels; }
  176. count--;
  177. var pixelsPerValue = maxPixels / count;
  178. var wholeIncrements = Math.round(pixelValue / pixelsPerValue);
  179. return (this.maximum-this.minimum)*wholeIncrements/count + this.minimum;
  180. },
  181. _setValueAttr: function(/*Array or Number*/ value, /*Boolean, optional*/ priorityChange, /*Boolean, optional*/ isMaxVal){
  182. // we pass an array, when we move the slider with the bar
  183. var actValue = this.value;
  184. if(!lang.isArray(value)){
  185. if(isMaxVal){
  186. if(this._isReversed()){
  187. actValue[0] = value;
  188. }else{
  189. actValue[1] = value;
  190. }
  191. }else{
  192. if(this._isReversed()){
  193. actValue[1] = value;
  194. }else{
  195. actValue[0] = value;
  196. }
  197. }
  198. }else{
  199. actValue = value;
  200. }
  201. // we have to reset this values. don't know the reason for that
  202. this._lastValueReported = "";
  203. this.valueNode.value = this.value = value = actValue;
  204. this.focusNode.setAttribute("aria-valuenow", actValue[0]);
  205. this.focusNodeMax.setAttribute("aria-valuenow", actValue[1]);
  206. this.value.sort(this._isReversed() ? sortReversed : sortForward);
  207. // not calling the _setValueAttr-function of Slider, but the super-super-class (needed for the onchange-event!)
  208. FormValueWidget.prototype._setValueAttr.apply(this, arguments);
  209. this._printSliderBar(priorityChange, isMaxVal);
  210. },
  211. _printSliderBar: function(priorityChange, isMaxVal){
  212. var percentMin = (this.value[0] - this.minimum) / (this.maximum - this.minimum);
  213. var percentMax = (this.value[1] - this.minimum) / (this.maximum - this.minimum);
  214. var percentMinSave = percentMin;
  215. if(percentMin > percentMax){
  216. percentMin = percentMax;
  217. percentMax = percentMinSave;
  218. }
  219. var sliderHandleVal = this._isReversed() ? ((1-percentMin)*100) : (percentMin * 100);
  220. var sliderHandleMaxVal = this._isReversed() ? ((1-percentMax)*100) : (percentMax * 100);
  221. var progressBarVal = this._isReversed() ? ((1-percentMax)*100) : (percentMin * 100);
  222. if(priorityChange && this.slideDuration > 0 && this.progressBar.style[this._progressPixelSize]){
  223. // animate the slider
  224. var percent = isMaxVal ? percentMax : percentMin;
  225. var _this = this;
  226. var props = {};
  227. var start = parseFloat(this.progressBar.style[this._handleOffsetCoord]);
  228. var duration = this.slideDuration / 10; // * (percent-start/100);
  229. if(duration === 0){ return; }
  230. if(duration < 0){ duration = 0 - duration; }
  231. var propsHandle = {};
  232. var propsHandleMax = {};
  233. var propsBar = {};
  234. // hui, a lot of animations :-)
  235. propsHandle[this._handleOffsetCoord] = { start: this.sliderHandle.style[this._handleOffsetCoord], end: sliderHandleVal, units:"%"};
  236. propsHandleMax[this._handleOffsetCoord] = { start: this.sliderHandleMax.style[this._handleOffsetCoord], end: sliderHandleMaxVal, units:"%"};
  237. propsBar[this._handleOffsetCoord] = { start: this.progressBar.style[this._handleOffsetCoord], end: progressBarVal, units:"%"};
  238. propsBar[this._progressPixelSize] = { start: this.progressBar.style[this._progressPixelSize], end: (percentMax - percentMin) * 100, units:"%"};
  239. var animHandle = fx.animateProperty({node: this.sliderHandle,duration: duration, properties: propsHandle});
  240. var animHandleMax = fx.animateProperty({node: this.sliderHandleMax,duration: duration, properties: propsHandleMax});
  241. var animBar = fx.animateProperty({node: this.progressBar,duration: duration, properties: propsBar});
  242. var animCombine = fxUtils.combine([animHandle, animHandleMax, animBar]);
  243. animCombine.play();
  244. }else{
  245. this.sliderHandle.style[this._handleOffsetCoord] = sliderHandleVal + "%";
  246. this.sliderHandleMax.style[this._handleOffsetCoord] = sliderHandleMaxVal + "%";
  247. this.progressBar.style[this._handleOffsetCoord] = progressBarVal + "%";
  248. this.progressBar.style[this._progressPixelSize] = ((percentMax - percentMin) * 100) + "%";
  249. }
  250. }
  251. });
  252. var SliderMoverMax = declare("dijit.form._SliderMoverMax", dijit.form._SliderMover, {
  253. onMouseMove: function(e){
  254. var widget = this.widget;
  255. var abspos = widget._abspos;
  256. if(!abspos){
  257. abspos = widget._abspos = domGeometry.position(widget.sliderBarContainer, true);
  258. widget._setPixelValue_ = lang.hitch(widget, "_setPixelValue");
  259. widget._isReversed_ = widget._isReversed();
  260. }
  261. var pixelValue = e[widget._mousePixelCoord] - abspos[widget._startingPixelCoord];
  262. widget._setPixelValue_(widget._isReversed_ ? (abspos[widget._pixelCount]-pixelValue) : pixelValue, abspos[widget._pixelCount], false, true);
  263. },
  264. destroy: function(e){
  265. Mover.prototype.destroy.apply(this, arguments);
  266. var widget = this.widget;
  267. widget._abspos = null;
  268. widget._setValueAttr(widget.value, true);
  269. }
  270. });
  271. var SliderBarMover = declare("dijit.form._SliderBarMover", Mover, {
  272. onMouseMove: function(e){
  273. var widget = this.widget;
  274. if(widget.disabled || widget.readOnly){ return; }
  275. var abspos = widget._abspos;
  276. var bar = widget._bar;
  277. var mouseOffset = widget._mouseOffset;
  278. if(!abspos){
  279. abspos = widget._abspos = domGeometry.position(widget.sliderBarContainer, true);
  280. widget._setPixelValue_ = lang.hitch(widget, "_setPixelValue");
  281. widget._getValueByPixelValue_ = lang.hitch(widget, "_getValueByPixelValue");
  282. widget._isReversed_ = widget._isReversed();
  283. }
  284. if(!bar){
  285. bar = widget._bar = domGeometry.position(widget.progressBar, true);
  286. }
  287. if(!mouseOffset){
  288. mouseOffset = widget._mouseOffset = e[widget._mousePixelCoord] - bar[widget._startingPixelCoord];
  289. }
  290. var pixelValueMin = e[widget._mousePixelCoord] - abspos[widget._startingPixelCoord] - mouseOffset,
  291. pixelValueMax = pixelValueMin + bar[widget._pixelCount];
  292. // we don't narrow the slider when it reaches the bumper!
  293. // maybe there is a simpler way
  294. pixelValues = [pixelValueMin, pixelValueMax]
  295. ;
  296. pixelValues.sort(sortForward);
  297. if(pixelValues[0] <= 0){
  298. pixelValues[0] = 0;
  299. pixelValues[1] = bar[widget._pixelCount];
  300. }
  301. if(pixelValues[1] >= abspos[widget._pixelCount]){
  302. pixelValues[1] = abspos[widget._pixelCount];
  303. pixelValues[0] = abspos[widget._pixelCount] - bar[widget._pixelCount];
  304. }
  305. // getting the real values by pixel
  306. var myValues = [
  307. widget._getValueByPixelValue(widget._isReversed_ ? (abspos[widget._pixelCount] - pixelValues[0]) : pixelValues[0], abspos[widget._pixelCount]),
  308. widget._getValueByPixelValue(widget._isReversed_ ? (abspos[widget._pixelCount] - pixelValues[1]) : pixelValues[1], abspos[widget._pixelCount])
  309. ];
  310. // and setting the value of the widget
  311. widget._setValueAttr(myValues, false, false);
  312. },
  313. destroy: function(){
  314. Mover.prototype.destroy.apply(this, arguments);
  315. var widget = this.widget;
  316. widget._abspos = null;
  317. widget._bar = null;
  318. widget._mouseOffset = null;
  319. widget._setValueAttr(widget.value, true);
  320. }
  321. });
  322. declare("dojox.form.HorizontalRangeSlider", [HorizontalSlider, RangeSliderMixin], {
  323. // summary:
  324. // A form widget that allows one to select a range with two horizontally draggable images
  325. templateString: hTemplate
  326. });
  327. declare("dojox.form.VerticalRangeSlider", [VerticalSlider, RangeSliderMixin], {
  328. // summary:
  329. // A form widget that allows one to select a range with two vertically draggable images
  330. templateString: vTemplate
  331. });
  332. return RangeSliderMixin;
  333. });