]>
git.wh0rd.org - tt-rss.git/blob - lib/dijit/form/HorizontalSlider.js.uncompressed.js
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
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()
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
){
28 var Button = dijit.form.Button;
29 var _FormValueWidget = dijit.form._FormValueWidget;
30 var _Container = dijit._Container;
34 // dijit/form/HorizontalSlider
36 // A form widget that allows one to select a value with a horizontally draggable handle
39 var _SliderMover
= declare("dijit.form._SliderMover", Mover
, {
40 onMouseMove: function(e
){
41 var widget
= this.widget
;
42 var abspos
= widget
._abspos
;
44 abspos
= widget
._abspos
= domGeometry
.position(widget
.sliderBarContainer
, true);
45 widget
._setPixelValue_
= lang
.hitch(widget
, "_setPixelValue");
46 widget
._isReversed_
= widget
._isReversed();
48 var pixelValue
= e
[widget
._mousePixelCoord
] - abspos
[widget
._startingPixelCoord
];
49 widget
._setPixelValue_(widget
._isReversed_
? (abspos
[widget
._pixelCount
]-pixelValue
) : pixelValue
, abspos
[widget
._pixelCount
], false);
53 Mover
.prototype.destroy
.apply(this, arguments
);
54 var widget
= this.widget
;
55 widget
._abspos
= null;
56 widget
._setValueAttr(widget
.value
, true);
60 var HorizontalSlider
= declare("dijit.form.HorizontalSlider", [_FormValueWidget
, _Container
], {
62 // A form widget that allows one to select a value with a horizontally draggable handle
64 templateString
: template
,
66 // Overrides FormValueWidget.value to indicate numeric value
69 // showButtons: [const] Boolean
70 // Show increment/decrement buttons at the ends of the slider?
73 // minimum:: [const] Integer
74 // The minimum value the slider can be set to.
77 // maximum: [const] Integer
78 // The maximum value the slider can be set to.
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.
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.
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
,
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.
101 // clickSelect: Boolean
102 // If clicking the slider bar changes the value or not
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
,
110 // Map widget attributes to DOMNode attributes.
111 _setIdAttr
: "", // Override _FormWidget which sends id to focusNode
113 baseClass
: "dijitSlider",
115 // Apply CSS classes to up/down arrows and handle per mouse state
117 incrementButton
: "dijitSliderIncrementButton",
118 decrementButton
: "dijitSliderDecrementButton",
119 focusNode
: "dijitSliderThumb"
122 _mousePixelCoord
: "pageX",
124 _startingPixelCoord
: "x",
125 _handleOffsetCoord
: "left",
126 _progressPixelSize
: "width",
128 _onKeyUp: function(/*Event*/ e
){
129 if(this.disabled
|| this.readOnly
|| e
.altKey
|| e
.ctrlKey
|| e
.metaKey
){ return; }
130 this._setValueAttr(this.value
, true);
133 _onKeyPress: function(/*Event*/ e
){
134 if(this.disabled
|| this.readOnly
|| e
.altKey
|| e
.ctrlKey
|| e
.metaKey
){ return; }
135 switch(e
.charOrCode
){
137 this._setValueAttr(this.minimum
, false);
140 this._setValueAttr(this.maximum
, false);
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
):
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
):
160 _onHandleClick: function(e
){
161 if(this.disabled
|| this.readOnly
){ return; }
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
);
170 _isReversed: function(){
172 // Returns true if direction is from right to left
174 // protected extension
175 return !this.isLeftToRight();
178 _onBarClick: function(e
){
179 if(this.disabled
|| this.readOnly
|| !this.clickSelect
){ return; }
180 focus
.focus(this.sliderHandle
);
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
);
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
; }
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
);
198 _setValueAttr: function(/*Number*/ value
, /*Boolean?*/ priorityChange
){
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);
211 if(priorityChange
&& this.slideDuration
> 0 && progressBar
.style
[this._progressPixelSize
]){
212 // animate the slider
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
])) + "%";
225 delete _this
._inProgressAnim
;
229 this._inProgressAnim
.play();
231 progressBar
.style
[this._progressPixelSize
] = (percent
*100) + "%";
232 remainingBar
.style
[this._progressPixelSize
] = ((1-percent
)*100) + "%";
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
]; }
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
);
250 _onClkBumper: function(val
){
251 if(this.disabled
|| this.readOnly
|| !this.clickSelect
){ return; }
252 this._setValueAttr(val
, true);
255 _onClkIncBumper: function(){
256 this._onClkBumper(this._descending
=== false ? this.minimum
: this.maximum
);
259 _onClkDecBumper: function(){
260 this._onClkBumper(this._descending
=== false ? this.maximum
: this.minimum
);
263 decrement: function(/*Event*/ e
){
268 this._bumpValue(e
.charOrCode
== keys
.PAGE_DOWN
? -this.pageIncrement
: -1);
271 increment: function(/*Event*/ e
){
276 this._bumpValue(e
.charOrCode
== keys
.PAGE_UP
? this.pageIncrement
: 1);
279 _mouseWheeled: function(/*Event*/ evt
){
281 // Event handler for mousewheel where supported
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
289 if(this._started
){ return; }
291 array
.forEach(this.getChildren(), function(child
){
292 if(this[child
.container
] != this.containerNode
){
293 this[child
.container
].appendChild(child
.domNode
);
297 this.inherited(arguments
);
300 _typematicCallback: function(/*Number*/ count
, /*Object*/ button
, /*Event*/ e
){
302 this._setValueAttr(this.value
, true);
304 this[(button
== (this._descending
? this.incrementButton
: this.decrementButton
)) ? "decrement" : "increment"](e
);
308 buildRendering: function(){
309 this.inherited(arguments
);
310 if(this.showButtons
){
311 this.incrementButton
.style
.display
="";
312 this.decrementButton
.style
.display
="";
315 // find any associated label element and add to slider focusnode.
316 var label
= query('label[for="'+this.id
+'"]');
318 label
[0].id
= (this.id
+"_label");
319 this.focusNode
.setAttribute("aria-labelledby", label
[0].id
);
322 this.focusNode
.setAttribute("aria-valuemin", this.minimum
);
323 this.focusNode
.setAttribute("aria-valuemax", this.maximum
);
326 postCreate: function(){
327 this.inherited(arguments
);
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));
335 this.connect(this.domNode
, !has("mozilla") ? "onmousewheel" : "DOMMouseScroll", "_mouseWheeled");
337 // define a custom constructor for a SliderMover that points back to me
338 var mover
= declare(_SliderMover
, {
341 this._movable
= new Moveable(this.sliderHandle
, {mover
: mover
});
343 this._layoutHackIE7();
347 this._movable
.destroy();
348 if(this._inProgressAnim
&& this._inProgressAnim
.status
!= "stopped"){
349 this._inProgressAnim
.stop(true);
351 this._supportingWidgets
= registry
.findWidgets(this.domNode
); // tells destroy about pseudo-child widgets (ruler/labels)
352 this.inherited(arguments
);
356 HorizontalSlider
._Mover
= _SliderMover
; // for monkey patching
358 return HorizontalSlider
;