lib/dijit/form/HorizontalSlider.js.uncompressed.js

   1 require({cache:{
   2 'url:dijit/form/templates/HorizontalSlider.html':"<table class=\"dijit dijitReset dijitSlider dijitSliderH\" cellspacing=\"0\" cellpadding=\"0\" border=\"0\" rules=\"none\" data-dojo-attach-event=\"onkeypress:_onKeyPress,onkeyup:_onKeyUp\"\n\t><tr class=\"dijitReset\"\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t\t><td data-dojo-attach-point=\"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\" style=\"display:none\" data-dojo-attach-point=\"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\" data-dojo-attach-event=\"press:_onClkDecBumper\"></div\n\t\t></td\n\t\t><td class=\"dijitReset\"\n\t\t\t><input data-dojo-attach-point=\"valueNode\" type=\"hidden\" ${!nameAttrSetting}\n\t\t\t/><div class=\"dijitReset dijitSliderBarContainerH\" role=\"presentation\" data-dojo-attach-point=\"sliderBarContainer\"\n\t\t\t\t><div role=\"presentation\" data-dojo-attach-point=\"progressBar\" class=\"dijitSliderBar dijitSliderBarH dijitSliderProgressBar dijitSliderProgressBarH\" data-dojo-attach-event=\"press:_onBarClick\"\n\t\t\t\t\t><div class=\"dijitSliderMoveable dijitSliderMoveableH\"\n\t\t\t\t\t\t><div data-dojo-attach-point=\"sliderHandle,focusNode\" class=\"dijitSliderImageHandle dijitSliderImageHandleH\" data-dojo-attach-event=\"press:_onHandleClick\" role=\"slider\" valuemin=\"${minimum}\" valuemax=\"${maximum}\"></div\n\t\t\t\t\t></div\n\t\t\t\t></div\n\t\t\t\t><div role=\"presentation\" data-dojo-attach-point=\"remainingBar\" class=\"dijitSliderBar dijitSliderBarH dijitSliderRemainingBar dijitSliderRemainingBarH\" data-dojo-attach-event=\"press:_onBarClick\"></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\" data-dojo-attach-event=\"press:_onClkIncBumper\"></div\n\t\t></td\n\t\t><td class=\"dijitReset dijitSliderButtonContainer dijitSliderButtonContainerH\"\n\t\t\t><div class=\"dijitSliderIncrementIconH\" style=\"display:none\" data-dojo-attach-point=\"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 data-dojo-attach-point=\"containerNode,bottomDecoration\" class=\"dijitReset dijitSliderDecoration dijitSliderDecorationB dijitSliderDecorationH\"></td\n\t\t><td class=\"dijitReset\" colspan=\"2\"></td\n\t></tr\n></table>\n"}});
   3 define("dijit/form/HorizontalSlider", [
   4         "dojo/_base/array", // array.forEach
   5         "dojo/_base/declare", // declare
   6         "dojo/dnd/move",
   7         "dojo/_base/event", // event.stop
   8         "dojo/_base/fx", // fx.animateProperty
   9         "dojo/dom-geometry", // domGeometry.position
  10         "dojo/dom-style", // domStyle.getComputedStyle
  11         "dojo/keys", // keys.DOWN_ARROW keys.END keys.HOME keys.LEFT_ARROW keys.PAGE_DOWN keys.PAGE_UP keys.RIGHT_ARROW keys.UP_ARROW
  12         "dojo/_base/lang", // lang.hitch
  13         "dojo/_base/sniff", // has("ie") has("mozilla")
  14         "dojo/dnd/Moveable", // Moveable
  15         "dojo/dnd/Mover", // Mover Mover.prototype.destroy.apply
  16         "dojo/query", // query
  17         "../registry", // registry.findWidgets
  18         "../focus",             // focus.focus()
  19         "../typematic",
  20         "./Button",
  21         "./_FormValueWidget",
  22         "../_Container",
  23         "dojo/text!./templates/HorizontalSlider.html"
  24 ], function(array, declare, move, event, fx, domGeometry, domStyle, keys, lang, has, Moveable, Mover, query,
  25                         registry, focus, typematic, Button, _FormValueWidget, _Container, template){
  26
  27 /*=====
  28         var Button = dijit.form.Button;
  29         var _FormValueWidget = dijit.form._FormValueWidget;
  30         var _Container = dijit._Container;
  31 =====*/
  32
  33 // module:
  34 //              dijit/form/HorizontalSlider
  35 // summary:
  36 //              A form widget that allows one to select a value with a horizontally draggable handle
  37
  38
  39 var _SliderMover = declare("dijit.form._SliderMover", Mover, {
  40         onMouseMove: function(e){
  41                 var widget = this.widget;
  42                 var abspos = widget._abspos;
  43                 if(!abspos){
  44                         abspos = widget._abspos = domGeometry.position(widget.sliderBarContainer, true);
  45                         widget._setPixelValue_ = lang.hitch(widget, "_setPixelValue");
  46                         widget._isReversed_ = widget._isReversed();
  47                 }
  48                 var pixelValue = e[widget._mousePixelCoord] - abspos[widget._startingPixelCoord];
  49                 widget._setPixelValue_(widget._isReversed_ ? (abspos[widget._pixelCount]-pixelValue) : pixelValue, abspos[widget._pixelCount], false);
  50         },
  51
  52         destroy: function(e){
  53                 Mover.prototype.destroy.apply(this, arguments);
  54                 var widget = this.widget;
  55                 widget._abspos = null;
  56                 widget._setValueAttr(widget.value, true);
  57         }
  58 });
  59
  60 var HorizontalSlider = declare("dijit.form.HorizontalSlider", [_FormValueWidget, _Container], {
  61         // summary:
  62         //              A form widget that allows one to select a value with a horizontally draggable handle
  63
  64         templateString: template,
  65
  66         // Overrides FormValueWidget.value to indicate numeric value
  67         value: 0,
  68
  69         // showButtons: [const] Boolean
  70         //              Show increment/decrement buttons at the ends of the slider?
  71         showButtons: true,
  72
  73         // minimum:: [const] Integer
  74         //              The minimum value the slider can be set to.
  75         minimum: 0,
  76
  77         // maximum: [const] Integer
  78         //              The maximum value the slider can be set to.
  79         maximum: 100,
  80
  81         // discreteValues: Integer
  82         //              If specified, indicates that the slider handle has only 'discreteValues' possible positions,
  83         //              and that after dragging the handle, it will snap to the nearest possible position.
  84         //              Thus, the slider has only 'discreteValues' possible values.
  85         //
  86         //              For example, if minimum=10, maxiumum=30, and discreteValues=3, then the slider handle has
  87         //              three possible positions, representing values 10, 20, or 30.
  88         //
  89         //              If discreteValues is not specified or if it's value is higher than the number of pixels
  90         //              in the slider bar, then the slider handle can be moved freely, and the slider's value will be
  91         //              computed/reported based on pixel position (in this case it will likely be fractional,
  92         //              such as 123.456789).
  93         discreteValues: Infinity,
  94
  95         // pageIncrement: Integer
  96         //              If discreteValues is also specified, this indicates the amount of clicks (ie, snap positions)
  97         //              that the slider handle is moved via pageup/pagedown keys.
  98         //              If discreteValues is not specified, it indicates the number of pixels.
  99         pageIncrement: 2,
 100
 101         // clickSelect: Boolean
 102         //              If clicking the slider bar changes the value or not
 103         clickSelect: true,
 104
 105         // slideDuration: Number
 106         //              The time in ms to take to animate the slider handle from 0% to 100%,
 107         //              when clicking the slider bar to make the handle move.
 108         slideDuration: registry.defaultDuration,
 109
 110         // Map widget attributes to DOMNode attributes.
 111         _setIdAttr: "",         // Override _FormWidget which sends id to focusNode
 112
 113         baseClass: "dijitSlider",
 114
 115         // Apply CSS classes to up/down arrows and handle per mouse state
 116         cssStateNodes: {
 117                 incrementButton: "dijitSliderIncrementButton",
 118                 decrementButton: "dijitSliderDecrementButton",
 119                 focusNode: "dijitSliderThumb"
 120         },
 121
 122         _mousePixelCoord: "pageX",
 123         _pixelCount: "w",
 124         _startingPixelCoord: "x",
 125         _handleOffsetCoord: "left",
 126         _progressPixelSize: "width",
 127
 128         _onKeyUp: function(/*Event*/ e){
 129                 if(this.disabled || this.readOnly || e.altKey || e.ctrlKey || e.metaKey){ return; }
 130                 this._setValueAttr(this.value, true);
 131         },
 132
 133         _onKeyPress: function(/*Event*/ e){
 134                 if(this.disabled || this.readOnly || e.altKey || e.ctrlKey || e.metaKey){ return; }
 135                 switch(e.charOrCode){
 136                         case keys.HOME:
 137                                 this._setValueAttr(this.minimum, false);
 138                                 break;
 139                         case keys.END:
 140                                 this._setValueAttr(this.maximum, false);
 141                                 break;
 142                         // this._descending === false: if ascending vertical (min on top)
 143                         // (this._descending || this.isLeftToRight()): if left-to-right horizontal or descending vertical
 144                         case ((this._descending || this.isLeftToRight()) ? keys.RIGHT_ARROW : keys.LEFT_ARROW):
 145                         case (this._descending === false ? keys.DOWN_ARROW : keys.UP_ARROW):
 146                         case (this._descending === false ? keys.PAGE_DOWN : keys.PAGE_UP):
 147                                 this.increment(e);
 148                                 break;
 149                         case ((this._descending || this.isLeftToRight()) ? keys.LEFT_ARROW : keys.RIGHT_ARROW):
 150                         case (this._descending === false ? keys.UP_ARROW : keys.DOWN_ARROW):
 151                         case (this._descending === false ? keys.PAGE_UP : keys.PAGE_DOWN):
 152                                 this.decrement(e);
 153                                 break;
 154                         default:
 155                                 return;
 156                 }
 157                 event.stop(e);
 158         },
 159
 160         _onHandleClick: function(e){
 161                 if(this.disabled || this.readOnly){ return; }
 162                 if(!has("ie")){
 163                         // make sure you get focus when dragging the handle
 164                         // (but don't do on IE because it causes a flicker on mouse up (due to blur then focus)
 165                         focus.focus(this.sliderHandle);
 166                 }
 167                 event.stop(e);
 168         },
 169
 170         _isReversed: function(){
 171                 // summary:
 172                 //              Returns true if direction is from right to left
 173                 // tags:
 174                 //              protected extension
 175                 return !this.isLeftToRight();
 176         },
 177
 178         _onBarClick: function(e){
 179                 if(this.disabled || this.readOnly || !this.clickSelect){ return; }
 180                 focus.focus(this.sliderHandle);
 181                 event.stop(e);
 182                 var abspos = domGeometry.position(this.sliderBarContainer, true);
 183                 var pixelValue = e[this._mousePixelCoord] - abspos[this._startingPixelCoord];
 184                 this._setPixelValue(this._isReversed() ? (abspos[this._pixelCount] - pixelValue) : pixelValue, abspos[this._pixelCount], true);
 185                 this._movable.onMouseDown(e);
 186         },
 187
 188         _setPixelValue: function(/*Number*/ pixelValue, /*Number*/ maxPixels, /*Boolean?*/ priorityChange){
 189                 if(this.disabled || this.readOnly){ return; }
 190                 var count = this.discreteValues;
 191                 if(count <= 1 || count == Infinity){ count = maxPixels; }
 192                 count--;
 193                 var pixelsPerValue = maxPixels / count;
 194                 var wholeIncrements = Math.round(pixelValue / pixelsPerValue);
 195                 this._setValueAttr(Math.max(Math.min((this.maximum-this.minimum)*wholeIncrements/count + this.minimum, this.maximum), this.minimum), priorityChange);
 196         },
 197
 198         _setValueAttr: function(/*Number*/ value, /*Boolean?*/ priorityChange){
 199                 // summary:
 200                 //              Hook so set('value', value) works.
 201                 this._set("value", value);
 202                 this.valueNode.value = value;
 203                 this.focusNode.setAttribute("aria-valuenow", value);
 204                 this.inherited(arguments);
 205                 var percent = (value - this.minimum) / (this.maximum - this.minimum);
 206                 var progressBar = (this._descending === false) ? this.remainingBar : this.progressBar;
 207                 var remainingBar = (this._descending === false) ? this.progressBar : this.remainingBar;
 208                 if(this._inProgressAnim && this._inProgressAnim.status != "stopped"){
 209                         this._inProgressAnim.stop(true);
 210                 }
 211                 if(priorityChange && this.slideDuration > 0 && progressBar.style[this._progressPixelSize]){
 212                         // animate the slider
 213                         var _this = this;
 214                         var props = {};
 215                         var start = parseFloat(progressBar.style[this._progressPixelSize]);
 216                         var duration = this.slideDuration * (percent-start/100);
 217                         if(duration == 0){ return; }
 218                         if(duration < 0){ duration = 0 - duration; }
 219                         props[this._progressPixelSize] = { start: start, end: percent*100, units:"%" };
 220                         this._inProgressAnim = fx.animateProperty({ node: progressBar, duration: duration,
 221                                 onAnimate: function(v){
 222                                         remainingBar.style[_this._progressPixelSize] = (100 - parseFloat(v[_this._progressPixelSize])) + "%";
 223                                 },
 224                                 onEnd: function(){
 225                                         delete _this._inProgressAnim;
 226                                 },
 227                                 properties: props
 228                         });
 229                         this._inProgressAnim.play();
 230                 }else{
 231                         progressBar.style[this._progressPixelSize] = (percent*100) + "%";
 232                         remainingBar.style[this._progressPixelSize] = ((1-percent)*100) + "%";
 233                 }
 234         },
 235
 236         _bumpValue: function(signedChange, /*Boolean?*/ priorityChange){
 237                 if(this.disabled || this.readOnly){ return; }
 238                 var s = domStyle.getComputedStyle(this.sliderBarContainer);
 239                 var c = domGeometry.getContentBox(this.sliderBarContainer, s);
 240                 var count = this.discreteValues;
 241                 if(count <= 1 || count == Infinity){ count = c[this._pixelCount]; }
 242                 count--;
 243                 var value = (this.value - this.minimum) * count / (this.maximum - this.minimum) + signedChange;
 244                 if(value < 0){ value = 0; }
 245                 if(value > count){ value = count; }
 246                 value = value * (this.maximum - this.minimum) / count + this.minimum;
 247                 this._setValueAttr(value, priorityChange);
 248         },
 249
 250         _onClkBumper: function(val){
 251                 if(this.disabled || this.readOnly || !this.clickSelect){ return; }
 252                 this._setValueAttr(val, true);
 253         },
 254
 255         _onClkIncBumper: function(){
 256                 this._onClkBumper(this._descending === false ? this.minimum : this.maximum);
 257         },
 258
 259         _onClkDecBumper: function(){
 260                 this._onClkBumper(this._descending === false ? this.maximum : this.minimum);
 261         },
 262
 263         decrement: function(/*Event*/ e){
 264                 // summary:
 265                 //              Decrement slider
 266                 // tags:
 267                 //              private
 268                 this._bumpValue(e.charOrCode == keys.PAGE_DOWN ? -this.pageIncrement : -1);
 269         },
 270
 271         increment: function(/*Event*/ e){
 272                 // summary:
 273                 //              Increment slider
 274                 // tags:
 275                 //              private
 276                 this._bumpValue(e.charOrCode == keys.PAGE_UP ? this.pageIncrement : 1);
 277         },
 278
 279         _mouseWheeled: function(/*Event*/ evt){
 280                 // summary:
 281                 //              Event handler for mousewheel where supported
 282                 event.stop(evt);
 283                 var janky = !has("mozilla");
 284                 var scroll = evt[(janky ? "wheelDelta" : "detail")] * (janky ? 1 : -1);
 285                 this._bumpValue(scroll < 0 ? -1 : 1, true); // negative scroll acts like a decrement
 286         },
 287
 288         startup: function(){
 289                 if(this._started){ return; }
 290
 291                 array.forEach(this.getChildren(), function(child){
 292                         if(this[child.container] != this.containerNode){
 293                                 this[child.container].appendChild(child.domNode);
 294                         }
 295                 }, this);
 296
 297                 this.inherited(arguments);
 298         },
 299
 300         _typematicCallback: function(/*Number*/ count, /*Object*/ button, /*Event*/ e){
 301                 if(count == -1){
 302                         this._setValueAttr(this.value, true);
 303                 }else{
 304                         this[(button == (this._descending? this.incrementButton : this.decrementButton)) ? "decrement" : "increment"](e);
 305                 }
 306         },
 307
 308         buildRendering: function(){
 309                 this.inherited(arguments);
 310                 if(this.showButtons){
 311                         this.incrementButton.style.display="";
 312                         this.decrementButton.style.display="";
 313                 }
 314
 315                 // find any associated label element and add to slider focusnode.
 316                 var label = query('label[for="'+this.id+'"]');
 317                 if(label.length){
 318                         label[0].id = (this.id+"_label");
 319                         this.focusNode.setAttribute("aria-labelledby", label[0].id);
 320                 }
 321
 322                 this.focusNode.setAttribute("aria-valuemin", this.minimum);
 323                 this.focusNode.setAttribute("aria-valuemax", this.maximum);
 324         },
 325
 326         postCreate: function(){
 327                 this.inherited(arguments);
 328
 329                 if(this.showButtons){
 330                         this._connects.push(typematic.addMouseListener(
 331                                 this.decrementButton, this, "_typematicCallback", 25, 500));
 332                         this._connects.push(typematic.addMouseListener(
 333                                 this.incrementButton, this, "_typematicCallback", 25, 500));
 334                 }
 335                 this.connect(this.domNode, !has("mozilla") ? "onmousewheel" : "DOMMouseScroll", "_mouseWheeled");
 336
 337                 // define a custom constructor for a SliderMover that points back to me
 338                 var mover = declare(_SliderMover, {
 339                         widget: this
 340                 });
 341                 this._movable = new Moveable(this.sliderHandle, {mover: mover});
 342
 343                 this._layoutHackIE7();
 344         },
 345
 346         destroy: function(){
 347                 this._movable.destroy();
 348                 if(this._inProgressAnim && this._inProgressAnim.status != "stopped"){
 349                         this._inProgressAnim.stop(true);
 350                 }
 351                 this._supportingWidgets = registry.findWidgets(this.domNode); // tells destroy about pseudo-child widgets (ruler/labels)
 352                 this.inherited(arguments);
 353         }
 354 });
 355
 356 HorizontalSlider._Mover = _SliderMover; // for monkey patching
 357
 358 return HorizontalSlider;
 359 });