| 1 |
efrain |
1 |
YUI.add('yui2-slider', function(Y) {
|
|
|
2 |
var YAHOO = Y.YUI2;
|
|
|
3 |
/*
|
|
|
4 |
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
|
|
|
5 |
Code licensed under the BSD License:
|
|
|
6 |
http://developer.yahoo.com/yui/license.html
|
|
|
7 |
version: 2.9.0
|
|
|
8 |
*/
|
|
|
9 |
/**
|
|
|
10 |
* The Slider component is a UI control that enables the user to adjust
|
|
|
11 |
* values in a finite range along one or two axes. Typically, the Slider
|
|
|
12 |
* control is used in a web application as a rich, visual replacement
|
|
|
13 |
* for an input box that takes a number as input. The Slider control can
|
|
|
14 |
* also easily accommodate a second dimension, providing x,y output for
|
|
|
15 |
* a selection point chosen from a rectangular region.
|
|
|
16 |
*
|
|
|
17 |
* @module slider
|
|
|
18 |
* @title Slider Widget
|
|
|
19 |
* @namespace YAHOO.widget
|
|
|
20 |
* @requires yahoo,dom,dragdrop,event
|
|
|
21 |
* @optional animation
|
|
|
22 |
*/
|
|
|
23 |
(function () {
|
|
|
24 |
|
|
|
25 |
var getXY = YAHOO.util.Dom.getXY,
|
|
|
26 |
Event = YAHOO.util.Event,
|
|
|
27 |
_AS = Array.prototype.slice;
|
|
|
28 |
|
|
|
29 |
/**
|
|
|
30 |
* A DragDrop implementation that can be used as a background for a
|
|
|
31 |
* slider. It takes a reference to the thumb instance
|
|
|
32 |
* so it can delegate some of the events to it. The goal is to make the
|
|
|
33 |
* thumb jump to the location on the background when the background is
|
|
|
34 |
* clicked.
|
|
|
35 |
*
|
|
|
36 |
* @class Slider
|
|
|
37 |
* @extends YAHOO.util.DragDrop
|
|
|
38 |
* @uses YAHOO.util.EventProvider
|
|
|
39 |
* @constructor
|
|
|
40 |
* @param {String} id The id of the element linked to this instance
|
|
|
41 |
* @param {String} sGroup The group of related DragDrop items
|
|
|
42 |
* @param {SliderThumb} oThumb The thumb for this slider
|
|
|
43 |
* @param {String} sType The type of slider (horiz, vert, region)
|
|
|
44 |
*/
|
|
|
45 |
function Slider(sElementId, sGroup, oThumb, sType) {
|
|
|
46 |
|
|
|
47 |
Slider.ANIM_AVAIL = (!YAHOO.lang.isUndefined(YAHOO.util.Anim));
|
|
|
48 |
|
|
|
49 |
if (sElementId) {
|
|
|
50 |
this.init(sElementId, sGroup, true);
|
|
|
51 |
this.initSlider(sType);
|
|
|
52 |
this.initThumb(oThumb);
|
|
|
53 |
}
|
|
|
54 |
}
|
|
|
55 |
|
|
|
56 |
YAHOO.lang.augmentObject(Slider,{
|
|
|
57 |
/**
|
|
|
58 |
* Factory method for creating a horizontal slider
|
|
|
59 |
* @method YAHOO.widget.Slider.getHorizSlider
|
|
|
60 |
* @static
|
|
|
61 |
* @param {String} sBGElId the id of the slider's background element
|
|
|
62 |
* @param {String} sHandleElId the id of the thumb element
|
|
|
63 |
* @param {int} iLeft the number of pixels the element can move left
|
|
|
64 |
* @param {int} iRight the number of pixels the element can move right
|
|
|
65 |
* @param {int} iTickSize optional parameter for specifying that the element
|
|
|
66 |
* should move a certain number pixels at a time.
|
|
|
67 |
* @return {Slider} a horizontal slider control
|
|
|
68 |
*/
|
|
|
69 |
getHorizSlider :
|
|
|
70 |
function (sBGElId, sHandleElId, iLeft, iRight, iTickSize) {
|
|
|
71 |
return new Slider(sBGElId, sBGElId,
|
|
|
72 |
new YAHOO.widget.SliderThumb(sHandleElId, sBGElId,
|
|
|
73 |
iLeft, iRight, 0, 0, iTickSize), "horiz");
|
|
|
74 |
},
|
|
|
75 |
|
|
|
76 |
/**
|
|
|
77 |
* Factory method for creating a vertical slider
|
|
|
78 |
* @method YAHOO.widget.Slider.getVertSlider
|
|
|
79 |
* @static
|
|
|
80 |
* @param {String} sBGElId the id of the slider's background element
|
|
|
81 |
* @param {String} sHandleElId the id of the thumb element
|
|
|
82 |
* @param {int} iUp the number of pixels the element can move up
|
|
|
83 |
* @param {int} iDown the number of pixels the element can move down
|
|
|
84 |
* @param {int} iTickSize optional parameter for specifying that the element
|
|
|
85 |
* should move a certain number pixels at a time.
|
|
|
86 |
* @return {Slider} a vertical slider control
|
|
|
87 |
*/
|
|
|
88 |
getVertSlider :
|
|
|
89 |
function (sBGElId, sHandleElId, iUp, iDown, iTickSize) {
|
|
|
90 |
return new Slider(sBGElId, sBGElId,
|
|
|
91 |
new YAHOO.widget.SliderThumb(sHandleElId, sBGElId, 0, 0,
|
|
|
92 |
iUp, iDown, iTickSize), "vert");
|
|
|
93 |
},
|
|
|
94 |
|
|
|
95 |
/**
|
|
|
96 |
* Factory method for creating a slider region like the one in the color
|
|
|
97 |
* picker example
|
|
|
98 |
* @method YAHOO.widget.Slider.getSliderRegion
|
|
|
99 |
* @static
|
|
|
100 |
* @param {String} sBGElId the id of the slider's background element
|
|
|
101 |
* @param {String} sHandleElId the id of the thumb element
|
|
|
102 |
* @param {int} iLeft the number of pixels the element can move left
|
|
|
103 |
* @param {int} iRight the number of pixels the element can move right
|
|
|
104 |
* @param {int} iUp the number of pixels the element can move up
|
|
|
105 |
* @param {int} iDown the number of pixels the element can move down
|
|
|
106 |
* @param {int} iTickSize optional parameter for specifying that the element
|
|
|
107 |
* should move a certain number pixels at a time.
|
|
|
108 |
* @return {Slider} a slider region control
|
|
|
109 |
*/
|
|
|
110 |
getSliderRegion :
|
|
|
111 |
function (sBGElId, sHandleElId, iLeft, iRight, iUp, iDown, iTickSize) {
|
|
|
112 |
return new Slider(sBGElId, sBGElId,
|
|
|
113 |
new YAHOO.widget.SliderThumb(sHandleElId, sBGElId, iLeft, iRight,
|
|
|
114 |
iUp, iDown, iTickSize), "region");
|
|
|
115 |
},
|
|
|
116 |
|
|
|
117 |
/**
|
|
|
118 |
* Constant for valueChangeSource, indicating that the user clicked or
|
|
|
119 |
* dragged the slider to change the value.
|
|
|
120 |
* @property Slider.SOURCE_UI_EVENT
|
|
|
121 |
* @final
|
|
|
122 |
* @static
|
|
|
123 |
* @default 1
|
|
|
124 |
*/
|
|
|
125 |
SOURCE_UI_EVENT : 1,
|
|
|
126 |
|
|
|
127 |
/**
|
|
|
128 |
* Constant for valueChangeSource, indicating that the value was altered
|
|
|
129 |
* by a programmatic call to setValue/setRegionValue.
|
|
|
130 |
* @property Slider.SOURCE_SET_VALUE
|
|
|
131 |
* @final
|
|
|
132 |
* @static
|
|
|
133 |
* @default 2
|
|
|
134 |
*/
|
|
|
135 |
SOURCE_SET_VALUE : 2,
|
|
|
136 |
|
|
|
137 |
/**
|
|
|
138 |
* Constant for valueChangeSource, indicating that the value was altered
|
|
|
139 |
* by hitting any of the supported keyboard characters.
|
|
|
140 |
* @property Slider.SOURCE_KEY_EVENT
|
|
|
141 |
* @final
|
|
|
142 |
* @static
|
|
|
143 |
* @default 2
|
|
|
144 |
*/
|
|
|
145 |
SOURCE_KEY_EVENT : 3,
|
|
|
146 |
|
|
|
147 |
/**
|
|
|
148 |
* By default, animation is available if the animation utility is detected.
|
|
|
149 |
* @property Slider.ANIM_AVAIL
|
|
|
150 |
* @static
|
|
|
151 |
* @type boolean
|
|
|
152 |
*/
|
|
|
153 |
ANIM_AVAIL : false
|
|
|
154 |
},true);
|
|
|
155 |
|
|
|
156 |
YAHOO.extend(Slider, YAHOO.util.DragDrop, {
|
|
|
157 |
|
|
|
158 |
/**
|
|
|
159 |
* Tracks the state of the mouse button to aid in when events are fired.
|
|
|
160 |
*
|
|
|
161 |
* @property _mouseDown
|
|
|
162 |
* @type boolean
|
|
|
163 |
* @default false
|
|
|
164 |
* @private
|
|
|
165 |
*/
|
|
|
166 |
_mouseDown : false,
|
|
|
167 |
|
|
|
168 |
/**
|
|
|
169 |
* Override the default setting of dragOnly to true.
|
|
|
170 |
* @property dragOnly
|
|
|
171 |
* @type boolean
|
|
|
172 |
* @default true
|
|
|
173 |
*/
|
|
|
174 |
dragOnly : true,
|
|
|
175 |
|
|
|
176 |
/**
|
|
|
177 |
* Initializes the slider. Executed in the constructor
|
|
|
178 |
* @method initSlider
|
|
|
179 |
* @param {string} sType the type of slider (horiz, vert, region)
|
|
|
180 |
*/
|
|
|
181 |
initSlider: function(sType) {
|
|
|
182 |
|
|
|
183 |
/**
|
|
|
184 |
* The type of the slider (horiz, vert, region)
|
|
|
185 |
* @property type
|
|
|
186 |
* @type string
|
|
|
187 |
*/
|
|
|
188 |
this.type = sType;
|
|
|
189 |
|
|
|
190 |
//this.removeInvalidHandleType("A");
|
|
|
191 |
|
|
|
192 |
this.logger = new YAHOO.widget.LogWriter(this.toString());
|
|
|
193 |
|
|
|
194 |
/**
|
|
|
195 |
* Event the fires when the value of the control changes. If
|
|
|
196 |
* the control is animated the event will fire every point
|
|
|
197 |
* along the way.
|
|
|
198 |
* @event change
|
|
|
199 |
* @param {int} newOffset|x the new offset for normal sliders, or the new
|
|
|
200 |
* x offset for region sliders
|
|
|
201 |
* @param {int} y the number of pixels the thumb has moved on the y axis
|
|
|
202 |
* (region sliders only)
|
|
|
203 |
*/
|
|
|
204 |
this.createEvent("change", this);
|
|
|
205 |
|
|
|
206 |
/**
|
|
|
207 |
* Event that fires at the beginning of a slider thumb move.
|
|
|
208 |
* @event slideStart
|
|
|
209 |
*/
|
|
|
210 |
this.createEvent("slideStart", this);
|
|
|
211 |
|
|
|
212 |
/**
|
|
|
213 |
* Event that fires at the end of a slider thumb move
|
|
|
214 |
* @event slideEnd
|
|
|
215 |
*/
|
|
|
216 |
this.createEvent("slideEnd", this);
|
|
|
217 |
|
|
|
218 |
/**
|
|
|
219 |
* Overrides the isTarget property in YAHOO.util.DragDrop
|
|
|
220 |
* @property isTarget
|
|
|
221 |
* @private
|
|
|
222 |
*/
|
|
|
223 |
this.isTarget = false;
|
|
|
224 |
|
|
|
225 |
/**
|
|
|
226 |
* Flag that determines if the thumb will animate when moved
|
|
|
227 |
* @property animate
|
|
|
228 |
* @type boolean
|
|
|
229 |
*/
|
|
|
230 |
this.animate = Slider.ANIM_AVAIL;
|
|
|
231 |
|
|
|
232 |
/**
|
|
|
233 |
* Set to false to disable a background click thumb move
|
|
|
234 |
* @property backgroundEnabled
|
|
|
235 |
* @type boolean
|
|
|
236 |
*/
|
|
|
237 |
this.backgroundEnabled = true;
|
|
|
238 |
|
|
|
239 |
/**
|
|
|
240 |
* Adjustment factor for tick animation, the more ticks, the
|
|
|
241 |
* faster the animation (by default)
|
|
|
242 |
* @property tickPause
|
|
|
243 |
* @type int
|
|
|
244 |
*/
|
|
|
245 |
this.tickPause = 40;
|
|
|
246 |
|
|
|
247 |
/**
|
|
|
248 |
* Enables the arrow, home and end keys, defaults to true.
|
|
|
249 |
* @property enableKeys
|
|
|
250 |
* @type boolean
|
|
|
251 |
*/
|
|
|
252 |
this.enableKeys = true;
|
|
|
253 |
|
|
|
254 |
/**
|
|
|
255 |
* Specifies the number of pixels the arrow keys will move the slider.
|
|
|
256 |
* Default is 20.
|
|
|
257 |
* @property keyIncrement
|
|
|
258 |
* @type int
|
|
|
259 |
*/
|
|
|
260 |
this.keyIncrement = 20;
|
|
|
261 |
|
|
|
262 |
/**
|
|
|
263 |
* moveComplete is set to true when the slider has moved to its final
|
|
|
264 |
* destination. For animated slider, this value can be checked in
|
|
|
265 |
* the onChange handler to make it possible to execute logic only
|
|
|
266 |
* when the move is complete rather than at all points along the way.
|
|
|
267 |
* Deprecated because this flag is only useful when the background is
|
|
|
268 |
* clicked and the slider is animated. If the user drags the thumb,
|
|
|
269 |
* the flag is updated when the drag is over ... the final onDrag event
|
|
|
270 |
* fires before the mouseup the ends the drag, so the implementer will
|
|
|
271 |
* never see it.
|
|
|
272 |
*
|
|
|
273 |
* @property moveComplete
|
|
|
274 |
* @type Boolean
|
|
|
275 |
* @deprecated use the slideEnd event instead
|
|
|
276 |
*/
|
|
|
277 |
this.moveComplete = true;
|
|
|
278 |
|
|
|
279 |
/**
|
|
|
280 |
* If animation is configured, specifies the length of the animation
|
|
|
281 |
* in seconds.
|
|
|
282 |
* @property animationDuration
|
|
|
283 |
* @type int
|
|
|
284 |
* @default 0.2
|
|
|
285 |
*/
|
|
|
286 |
this.animationDuration = 0.2;
|
|
|
287 |
|
|
|
288 |
/**
|
|
|
289 |
* Constant for valueChangeSource, indicating that the user clicked or
|
|
|
290 |
* dragged the slider to change the value.
|
|
|
291 |
* @property SOURCE_UI_EVENT
|
|
|
292 |
* @final
|
|
|
293 |
* @default 1
|
|
|
294 |
* @deprecated use static Slider.SOURCE_UI_EVENT
|
|
|
295 |
*/
|
|
|
296 |
this.SOURCE_UI_EVENT = 1;
|
|
|
297 |
|
|
|
298 |
/**
|
|
|
299 |
* Constant for valueChangeSource, indicating that the value was altered
|
|
|
300 |
* by a programmatic call to setValue/setRegionValue.
|
|
|
301 |
* @property SOURCE_SET_VALUE
|
|
|
302 |
* @final
|
|
|
303 |
* @default 2
|
|
|
304 |
* @deprecated use static Slider.SOURCE_SET_VALUE
|
|
|
305 |
*/
|
|
|
306 |
this.SOURCE_SET_VALUE = 2;
|
|
|
307 |
|
|
|
308 |
/**
|
|
|
309 |
* When the slider value changes, this property is set to identify where
|
|
|
310 |
* the update came from. This will be either 1, meaning the slider was
|
|
|
311 |
* clicked or dragged, or 2, meaning that it was set via a setValue() call.
|
|
|
312 |
* This can be used within event handlers to apply some of the logic only
|
|
|
313 |
* when dealing with one source or another.
|
|
|
314 |
* @property valueChangeSource
|
|
|
315 |
* @type int
|
|
|
316 |
* @since 2.3.0
|
|
|
317 |
*/
|
|
|
318 |
this.valueChangeSource = 0;
|
|
|
319 |
|
|
|
320 |
/**
|
|
|
321 |
* Indicates whether or not events will be supressed for the current
|
|
|
322 |
* slide operation
|
|
|
323 |
* @property _silent
|
|
|
324 |
* @type boolean
|
|
|
325 |
* @private
|
|
|
326 |
*/
|
|
|
327 |
this._silent = false;
|
|
|
328 |
|
|
|
329 |
/**
|
|
|
330 |
* Saved offset used to protect against NaN problems when slider is
|
|
|
331 |
* set to display:none
|
|
|
332 |
* @property lastOffset
|
|
|
333 |
* @type [int, int]
|
|
|
334 |
*/
|
|
|
335 |
this.lastOffset = [0,0];
|
|
|
336 |
},
|
|
|
337 |
|
|
|
338 |
/**
|
|
|
339 |
* Initializes the slider's thumb. Executed in the constructor.
|
|
|
340 |
* @method initThumb
|
|
|
341 |
* @param {YAHOO.widget.SliderThumb} t the slider thumb
|
|
|
342 |
*/
|
|
|
343 |
initThumb: function(t) {
|
|
|
344 |
|
|
|
345 |
var self = this;
|
|
|
346 |
|
|
|
347 |
/**
|
|
|
348 |
* A YAHOO.widget.SliderThumb instance that we will use to
|
|
|
349 |
* reposition the thumb when the background is clicked
|
|
|
350 |
* @property thumb
|
|
|
351 |
* @type YAHOO.widget.SliderThumb
|
|
|
352 |
*/
|
|
|
353 |
this.thumb = t;
|
|
|
354 |
|
|
|
355 |
t.cacheBetweenDrags = true;
|
|
|
356 |
|
|
|
357 |
if (t._isHoriz && t.xTicks && t.xTicks.length) {
|
|
|
358 |
this.tickPause = Math.round(360 / t.xTicks.length);
|
|
|
359 |
} else if (t.yTicks && t.yTicks.length) {
|
|
|
360 |
this.tickPause = Math.round(360 / t.yTicks.length);
|
|
|
361 |
}
|
|
|
362 |
|
|
|
363 |
this.logger.log("tickPause: " + this.tickPause);
|
|
|
364 |
|
|
|
365 |
// delegate thumb methods
|
|
|
366 |
t.onAvailable = function() {
|
|
|
367 |
return self.setStartSliderState();
|
|
|
368 |
};
|
|
|
369 |
t.onMouseDown = function () {
|
|
|
370 |
self._mouseDown = true;
|
|
|
371 |
self.logger.log('thumb mousedown');
|
|
|
372 |
return self.focus();
|
|
|
373 |
};
|
|
|
374 |
t.startDrag = function() {
|
|
|
375 |
self.logger.log('thumb startDrag');
|
|
|
376 |
self._slideStart();
|
|
|
377 |
};
|
|
|
378 |
t.onDrag = function() {
|
|
|
379 |
self.logger.log('thumb drag');
|
|
|
380 |
self.fireEvents(true);
|
|
|
381 |
};
|
|
|
382 |
t.onMouseUp = function() {
|
|
|
383 |
self.thumbMouseUp();
|
|
|
384 |
};
|
|
|
385 |
|
|
|
386 |
},
|
|
|
387 |
|
|
|
388 |
/**
|
|
|
389 |
* Executed when the slider element is available
|
|
|
390 |
* @method onAvailable
|
|
|
391 |
*/
|
|
|
392 |
onAvailable: function() {
|
|
|
393 |
this._bindKeyEvents();
|
|
|
394 |
},
|
|
|
395 |
|
|
|
396 |
/**
|
|
|
397 |
* Sets up the listeners for keydown and key press events.
|
|
|
398 |
*
|
|
|
399 |
* @method _bindKeyEvents
|
|
|
400 |
* @protected
|
|
|
401 |
*/
|
|
|
402 |
_bindKeyEvents : function () {
|
|
|
403 |
Event.on(this.id, "keydown", this.handleKeyDown, this, true);
|
|
|
404 |
Event.on(this.id, "keypress", this.handleKeyPress, this, true);
|
|
|
405 |
},
|
|
|
406 |
|
|
|
407 |
/**
|
|
|
408 |
* Executed when a keypress event happens with the control focused.
|
|
|
409 |
* Prevents the default behavior for navigation keys. The actual
|
|
|
410 |
* logic for moving the slider thumb in response to a key event
|
|
|
411 |
* happens in handleKeyDown.
|
|
|
412 |
* @param {Event} e the keypress event
|
|
|
413 |
*/
|
|
|
414 |
handleKeyPress: function(e) {
|
|
|
415 |
if (this.enableKeys) {
|
|
|
416 |
var kc = Event.getCharCode(e);
|
|
|
417 |
|
|
|
418 |
switch (kc) {
|
|
|
419 |
case 0x25: // left
|
|
|
420 |
case 0x26: // up
|
|
|
421 |
case 0x27: // right
|
|
|
422 |
case 0x28: // down
|
|
|
423 |
case 0x24: // home
|
|
|
424 |
case 0x23: // end
|
|
|
425 |
Event.preventDefault(e);
|
|
|
426 |
break;
|
|
|
427 |
default:
|
|
|
428 |
}
|
|
|
429 |
}
|
|
|
430 |
},
|
|
|
431 |
|
|
|
432 |
/**
|
|
|
433 |
* Executed when a keydown event happens with the control focused.
|
|
|
434 |
* Updates the slider value and display when the keypress is an
|
|
|
435 |
* arrow key, home, or end as long as enableKeys is set to true.
|
|
|
436 |
* @param {Event} e the keydown event
|
|
|
437 |
*/
|
|
|
438 |
handleKeyDown: function(e) {
|
|
|
439 |
if (this.enableKeys) {
|
|
|
440 |
var kc = Event.getCharCode(e),
|
|
|
441 |
t = this.thumb,
|
|
|
442 |
h = this.getXValue(),
|
|
|
443 |
v = this.getYValue(),
|
|
|
444 |
changeValue = true;
|
|
|
445 |
|
|
|
446 |
switch (kc) {
|
|
|
447 |
|
|
|
448 |
// left
|
|
|
449 |
case 0x25: h -= this.keyIncrement; break;
|
|
|
450 |
|
|
|
451 |
// up
|
|
|
452 |
case 0x26: v -= this.keyIncrement; break;
|
|
|
453 |
|
|
|
454 |
// right
|
|
|
455 |
case 0x27: h += this.keyIncrement; break;
|
|
|
456 |
|
|
|
457 |
// down
|
|
|
458 |
case 0x28: v += this.keyIncrement; break;
|
|
|
459 |
|
|
|
460 |
// home
|
|
|
461 |
case 0x24: h = t.leftConstraint;
|
|
|
462 |
v = t.topConstraint;
|
|
|
463 |
break;
|
|
|
464 |
|
|
|
465 |
// end
|
|
|
466 |
case 0x23: h = t.rightConstraint;
|
|
|
467 |
v = t.bottomConstraint;
|
|
|
468 |
break;
|
|
|
469 |
|
|
|
470 |
default: changeValue = false;
|
|
|
471 |
}
|
|
|
472 |
|
|
|
473 |
if (changeValue) {
|
|
|
474 |
if (t._isRegion) {
|
|
|
475 |
this._setRegionValue(Slider.SOURCE_KEY_EVENT, h, v, true);
|
|
|
476 |
} else {
|
|
|
477 |
this._setValue(Slider.SOURCE_KEY_EVENT,
|
|
|
478 |
(t._isHoriz ? h : v), true);
|
|
|
479 |
}
|
|
|
480 |
Event.stopEvent(e);
|
|
|
481 |
}
|
|
|
482 |
|
|
|
483 |
}
|
|
|
484 |
},
|
|
|
485 |
|
|
|
486 |
/**
|
|
|
487 |
* Initialization that sets up the value offsets once the elements are ready
|
|
|
488 |
* @method setStartSliderState
|
|
|
489 |
*/
|
|
|
490 |
setStartSliderState: function() {
|
|
|
491 |
|
|
|
492 |
this.logger.log("Fixing state");
|
|
|
493 |
|
|
|
494 |
this.setThumbCenterPoint();
|
|
|
495 |
|
|
|
496 |
/**
|
|
|
497 |
* The basline position of the background element, used
|
|
|
498 |
* to determine if the background has moved since the last
|
|
|
499 |
* operation.
|
|
|
500 |
* @property baselinePos
|
|
|
501 |
* @type [int, int]
|
|
|
502 |
*/
|
|
|
503 |
this.baselinePos = getXY(this.getEl());
|
|
|
504 |
|
|
|
505 |
this.thumb.startOffset = this.thumb.getOffsetFromParent(this.baselinePos);
|
|
|
506 |
|
|
|
507 |
if (this.thumb._isRegion) {
|
|
|
508 |
if (this.deferredSetRegionValue) {
|
|
|
509 |
this._setRegionValue.apply(this, this.deferredSetRegionValue);
|
|
|
510 |
this.deferredSetRegionValue = null;
|
|
|
511 |
} else {
|
|
|
512 |
this.setRegionValue(0, 0, true, true, true);
|
|
|
513 |
}
|
|
|
514 |
} else {
|
|
|
515 |
if (this.deferredSetValue) {
|
|
|
516 |
this._setValue.apply(this, this.deferredSetValue);
|
|
|
517 |
this.deferredSetValue = null;
|
|
|
518 |
} else {
|
|
|
519 |
this.setValue(0, true, true, true);
|
|
|
520 |
}
|
|
|
521 |
}
|
|
|
522 |
},
|
|
|
523 |
|
|
|
524 |
/**
|
|
|
525 |
* When the thumb is available, we cache the centerpoint of the element so
|
|
|
526 |
* we can position the element correctly when the background is clicked
|
|
|
527 |
* @method setThumbCenterPoint
|
|
|
528 |
*/
|
|
|
529 |
setThumbCenterPoint: function() {
|
|
|
530 |
|
|
|
531 |
var el = this.thumb.getEl();
|
|
|
532 |
|
|
|
533 |
if (el) {
|
|
|
534 |
/**
|
|
|
535 |
* The center of the slider element is stored so we can
|
|
|
536 |
* place it in the correct position when the background is clicked.
|
|
|
537 |
* @property thumbCenterPoint
|
|
|
538 |
* @type {"x": int, "y": int}
|
|
|
539 |
*/
|
|
|
540 |
this.thumbCenterPoint = {
|
|
|
541 |
x: parseInt(el.offsetWidth/2, 10),
|
|
|
542 |
y: parseInt(el.offsetHeight/2, 10)
|
|
|
543 |
};
|
|
|
544 |
}
|
|
|
545 |
|
|
|
546 |
},
|
|
|
547 |
|
|
|
548 |
/**
|
|
|
549 |
* Locks the slider, overrides YAHOO.util.DragDrop
|
|
|
550 |
* @method lock
|
|
|
551 |
*/
|
|
|
552 |
lock: function() {
|
|
|
553 |
this.logger.log("locking");
|
|
|
554 |
this.thumb.lock();
|
|
|
555 |
this.locked = true;
|
|
|
556 |
},
|
|
|
557 |
|
|
|
558 |
/**
|
|
|
559 |
* Unlocks the slider, overrides YAHOO.util.DragDrop
|
|
|
560 |
* @method unlock
|
|
|
561 |
*/
|
|
|
562 |
unlock: function() {
|
|
|
563 |
this.logger.log("unlocking");
|
|
|
564 |
this.thumb.unlock();
|
|
|
565 |
this.locked = false;
|
|
|
566 |
},
|
|
|
567 |
|
|
|
568 |
/**
|
|
|
569 |
* Handles mouseup event on the thumb
|
|
|
570 |
* @method thumbMouseUp
|
|
|
571 |
* @private
|
|
|
572 |
*/
|
|
|
573 |
thumbMouseUp: function() {
|
|
|
574 |
this._mouseDown = false;
|
|
|
575 |
this.logger.log("thumb mouseup");
|
|
|
576 |
if (!this.isLocked()) {
|
|
|
577 |
this.endMove();
|
|
|
578 |
}
|
|
|
579 |
|
|
|
580 |
},
|
|
|
581 |
|
|
|
582 |
onMouseUp: function() {
|
|
|
583 |
this._mouseDown = false;
|
|
|
584 |
this.logger.log("background mouseup");
|
|
|
585 |
if (this.backgroundEnabled && !this.isLocked()) {
|
|
|
586 |
this.endMove();
|
|
|
587 |
}
|
|
|
588 |
},
|
|
|
589 |
|
|
|
590 |
/**
|
|
|
591 |
* Returns a reference to this slider's thumb
|
|
|
592 |
* @method getThumb
|
|
|
593 |
* @return {SliderThumb} this slider's thumb
|
|
|
594 |
*/
|
|
|
595 |
getThumb: function() {
|
|
|
596 |
return this.thumb;
|
|
|
597 |
},
|
|
|
598 |
|
|
|
599 |
/**
|
|
|
600 |
* Try to focus the element when clicked so we can add
|
|
|
601 |
* accessibility features
|
|
|
602 |
* @method focus
|
|
|
603 |
* @private
|
|
|
604 |
*/
|
|
|
605 |
focus: function() {
|
|
|
606 |
this.logger.log("focus");
|
|
|
607 |
this.valueChangeSource = Slider.SOURCE_UI_EVENT;
|
|
|
608 |
|
|
|
609 |
// Focus the background element if possible
|
|
|
610 |
var el = this.getEl();
|
|
|
611 |
|
|
|
612 |
if (el.focus) {
|
|
|
613 |
try {
|
|
|
614 |
el.focus();
|
|
|
615 |
} catch(e) {
|
|
|
616 |
// Prevent permission denied unhandled exception in FF that can
|
|
|
617 |
// happen when setting focus while another element is handling
|
|
|
618 |
// the blur. @TODO this is still writing to the error log
|
|
|
619 |
// (unhandled error) in FF1.5 with strict error checking on.
|
|
|
620 |
}
|
|
|
621 |
}
|
|
|
622 |
|
|
|
623 |
this.verifyOffset();
|
|
|
624 |
|
|
|
625 |
return !this.isLocked();
|
|
|
626 |
},
|
|
|
627 |
|
|
|
628 |
/**
|
|
|
629 |
* Event that fires when the value of the slider has changed
|
|
|
630 |
* @method onChange
|
|
|
631 |
* @param {int} firstOffset the number of pixels the thumb has moved
|
|
|
632 |
* from its start position. Normal horizontal and vertical sliders will only
|
|
|
633 |
* have the firstOffset. Regions will have both, the first is the horizontal
|
|
|
634 |
* offset, the second the vertical.
|
|
|
635 |
* @param {int} secondOffset the y offset for region sliders
|
|
|
636 |
* @deprecated use instance.subscribe("change") instead
|
|
|
637 |
*/
|
|
|
638 |
onChange: function (firstOffset, secondOffset) {
|
|
|
639 |
/* override me */
|
|
|
640 |
this.logger.log("onChange: " + firstOffset + ", " + secondOffset);
|
|
|
641 |
},
|
|
|
642 |
|
|
|
643 |
/**
|
|
|
644 |
* Event that fires when the at the beginning of the slider thumb move
|
|
|
645 |
* @method onSlideStart
|
|
|
646 |
* @deprecated use instance.subscribe("slideStart") instead
|
|
|
647 |
*/
|
|
|
648 |
onSlideStart: function () {
|
|
|
649 |
/* override me */
|
|
|
650 |
this.logger.log("onSlideStart");
|
|
|
651 |
},
|
|
|
652 |
|
|
|
653 |
/**
|
|
|
654 |
* Event that fires at the end of a slider thumb move
|
|
|
655 |
* @method onSliderEnd
|
|
|
656 |
* @deprecated use instance.subscribe("slideEnd") instead
|
|
|
657 |
*/
|
|
|
658 |
onSlideEnd: function () {
|
|
|
659 |
/* override me */
|
|
|
660 |
this.logger.log("onSlideEnd");
|
|
|
661 |
},
|
|
|
662 |
|
|
|
663 |
/**
|
|
|
664 |
* Returns the slider's thumb offset from the start position
|
|
|
665 |
* @method getValue
|
|
|
666 |
* @return {int} the current value
|
|
|
667 |
*/
|
|
|
668 |
getValue: function () {
|
|
|
669 |
return this.thumb.getValue();
|
|
|
670 |
},
|
|
|
671 |
|
|
|
672 |
/**
|
|
|
673 |
* Returns the slider's thumb X offset from the start position
|
|
|
674 |
* @method getXValue
|
|
|
675 |
* @return {int} the current horizontal offset
|
|
|
676 |
*/
|
|
|
677 |
getXValue: function () {
|
|
|
678 |
return this.thumb.getXValue();
|
|
|
679 |
},
|
|
|
680 |
|
|
|
681 |
/**
|
|
|
682 |
* Returns the slider's thumb Y offset from the start position
|
|
|
683 |
* @method getYValue
|
|
|
684 |
* @return {int} the current vertical offset
|
|
|
685 |
*/
|
|
|
686 |
getYValue: function () {
|
|
|
687 |
return this.thumb.getYValue();
|
|
|
688 |
},
|
|
|
689 |
|
|
|
690 |
/**
|
|
|
691 |
* Provides a way to set the value of the slider in code.
|
|
|
692 |
*
|
|
|
693 |
* @method setValue
|
|
|
694 |
* @param {int} newOffset the number of pixels the thumb should be
|
|
|
695 |
* positioned away from the initial start point
|
|
|
696 |
* @param {boolean} skipAnim set to true to disable the animation
|
|
|
697 |
* for this move action (but not others).
|
|
|
698 |
* @param {boolean} force ignore the locked setting and set value anyway
|
|
|
699 |
* @param {boolean} silent when true, do not fire events
|
|
|
700 |
* @return {boolean} true if the move was performed, false if it failed
|
|
|
701 |
*/
|
|
|
702 |
setValue: function() {
|
|
|
703 |
var args = _AS.call(arguments);
|
|
|
704 |
args.unshift(Slider.SOURCE_SET_VALUE);
|
|
|
705 |
return this._setValue.apply(this,args);
|
|
|
706 |
},
|
|
|
707 |
|
|
|
708 |
/**
|
|
|
709 |
* Worker function to execute the value set operation. Accepts type of
|
|
|
710 |
* set operation in addition to the usual setValue params.
|
|
|
711 |
*
|
|
|
712 |
* @method _setValue
|
|
|
713 |
* @param source {int} what triggered the set (e.g. Slider.SOURCE_SET_VALUE)
|
|
|
714 |
* @param {int} newOffset the number of pixels the thumb should be
|
|
|
715 |
* positioned away from the initial start point
|
|
|
716 |
* @param {boolean} skipAnim set to true to disable the animation
|
|
|
717 |
* for this move action (but not others).
|
|
|
718 |
* @param {boolean} force ignore the locked setting and set value anyway
|
|
|
719 |
* @param {boolean} silent when true, do not fire events
|
|
|
720 |
* @return {boolean} true if the move was performed, false if it failed
|
|
|
721 |
* @protected
|
|
|
722 |
*/
|
|
|
723 |
_setValue: function(source, newOffset, skipAnim, force, silent) {
|
|
|
724 |
var t = this.thumb, newX, newY;
|
|
|
725 |
|
|
|
726 |
if (!t.available) {
|
|
|
727 |
this.logger.log("defer setValue until after onAvailble");
|
|
|
728 |
this.deferredSetValue = arguments;
|
|
|
729 |
return false;
|
|
|
730 |
}
|
|
|
731 |
|
|
|
732 |
if (this.isLocked() && !force) {
|
|
|
733 |
this.logger.log("Can't set the value, the control is locked");
|
|
|
734 |
return false;
|
|
|
735 |
}
|
|
|
736 |
|
|
|
737 |
if ( isNaN(newOffset) ) {
|
|
|
738 |
this.logger.log("setValue, Illegal argument: " + newOffset);
|
|
|
739 |
return false;
|
|
|
740 |
}
|
|
|
741 |
|
|
|
742 |
if (t._isRegion) {
|
|
|
743 |
this.logger.log("Call to setValue for region Slider ignored. Use setRegionValue","warn");
|
|
|
744 |
return false;
|
|
|
745 |
}
|
|
|
746 |
|
|
|
747 |
this.logger.log("setValue " + newOffset);
|
|
|
748 |
|
|
|
749 |
this._silent = silent;
|
|
|
750 |
this.valueChangeSource = source || Slider.SOURCE_SET_VALUE;
|
|
|
751 |
|
|
|
752 |
t.lastOffset = [newOffset, newOffset];
|
|
|
753 |
this.verifyOffset();
|
|
|
754 |
|
|
|
755 |
this._slideStart();
|
|
|
756 |
|
|
|
757 |
if (t._isHoriz) {
|
|
|
758 |
newX = t.initPageX + newOffset + this.thumbCenterPoint.x;
|
|
|
759 |
this.moveThumb(newX, t.initPageY, skipAnim);
|
|
|
760 |
} else {
|
|
|
761 |
newY = t.initPageY + newOffset + this.thumbCenterPoint.y;
|
|
|
762 |
this.moveThumb(t.initPageX, newY, skipAnim);
|
|
|
763 |
}
|
|
|
764 |
|
|
|
765 |
return true;
|
|
|
766 |
},
|
|
|
767 |
|
|
|
768 |
/**
|
|
|
769 |
* Provides a way to set the value of the region slider in code.
|
|
|
770 |
* @method setRegionValue
|
|
|
771 |
* @param {int} newOffset the number of pixels the thumb should be
|
|
|
772 |
* positioned away from the initial start point (x axis for region)
|
|
|
773 |
* @param {int} newOffset2 the number of pixels the thumb should be
|
|
|
774 |
* positioned away from the initial start point (y axis for region)
|
|
|
775 |
* @param {boolean} skipAnim set to true to disable the animation
|
|
|
776 |
* for this move action (but not others).
|
|
|
777 |
* @param {boolean} force ignore the locked setting and set value anyway
|
|
|
778 |
* @param {boolean} silent when true, do not fire events
|
|
|
779 |
* @return {boolean} true if the move was performed, false if it failed
|
|
|
780 |
*/
|
|
|
781 |
setRegionValue : function () {
|
|
|
782 |
var args = _AS.call(arguments);
|
|
|
783 |
args.unshift(Slider.SOURCE_SET_VALUE);
|
|
|
784 |
return this._setRegionValue.apply(this,args);
|
|
|
785 |
},
|
|
|
786 |
|
|
|
787 |
/**
|
|
|
788 |
* Worker function to execute the value set operation. Accepts type of
|
|
|
789 |
* set operation in addition to the usual setValue params.
|
|
|
790 |
*
|
|
|
791 |
* @method _setRegionValue
|
|
|
792 |
* @param source {int} what triggered the set (e.g. Slider.SOURCE_SET_VALUE)
|
|
|
793 |
* @param {int} newOffset the number of pixels the thumb should be
|
|
|
794 |
* positioned away from the initial start point (x axis for region)
|
|
|
795 |
* @param {int} newOffset2 the number of pixels the thumb should be
|
|
|
796 |
* positioned away from the initial start point (y axis for region)
|
|
|
797 |
* @param {boolean} skipAnim set to true to disable the animation
|
|
|
798 |
* for this move action (but not others).
|
|
|
799 |
* @param {boolean} force ignore the locked setting and set value anyway
|
|
|
800 |
* @param {boolean} silent when true, do not fire events
|
|
|
801 |
* @return {boolean} true if the move was performed, false if it failed
|
|
|
802 |
* @protected
|
|
|
803 |
*/
|
|
|
804 |
_setRegionValue: function(source, newOffset, newOffset2, skipAnim, force, silent) {
|
|
|
805 |
var t = this.thumb, newX, newY;
|
|
|
806 |
|
|
|
807 |
if (!t.available) {
|
|
|
808 |
this.logger.log("defer setRegionValue until after onAvailble");
|
|
|
809 |
this.deferredSetRegionValue = arguments;
|
|
|
810 |
return false;
|
|
|
811 |
}
|
|
|
812 |
|
|
|
813 |
if (this.isLocked() && !force) {
|
|
|
814 |
this.logger.log("Can't set the value, the control is locked");
|
|
|
815 |
return false;
|
|
|
816 |
}
|
|
|
817 |
|
|
|
818 |
if ( isNaN(newOffset) ) {
|
|
|
819 |
this.logger.log("setRegionValue, Illegal argument: " + newOffset);
|
|
|
820 |
return false;
|
|
|
821 |
}
|
|
|
822 |
|
|
|
823 |
if (!t._isRegion) {
|
|
|
824 |
this.logger.log("Call to setRegionValue for non-region Slider ignored. Use setValue","warn");
|
|
|
825 |
return false;
|
|
|
826 |
}
|
|
|
827 |
|
|
|
828 |
this._silent = silent;
|
|
|
829 |
|
|
|
830 |
this.valueChangeSource = source || Slider.SOURCE_SET_VALUE;
|
|
|
831 |
|
|
|
832 |
t.lastOffset = [newOffset, newOffset2];
|
|
|
833 |
this.verifyOffset();
|
|
|
834 |
|
|
|
835 |
this._slideStart();
|
|
|
836 |
|
|
|
837 |
newX = t.initPageX + newOffset + this.thumbCenterPoint.x;
|
|
|
838 |
newY = t.initPageY + newOffset2 + this.thumbCenterPoint.y;
|
|
|
839 |
this.moveThumb(newX, newY, skipAnim);
|
|
|
840 |
|
|
|
841 |
return true;
|
|
|
842 |
},
|
|
|
843 |
|
|
|
844 |
/**
|
|
|
845 |
* Checks the background position element position. If it has moved from the
|
|
|
846 |
* baseline position, the constraints for the thumb are reset
|
|
|
847 |
* @method verifyOffset
|
|
|
848 |
* @return {boolean} True if the offset is the same as the baseline.
|
|
|
849 |
*/
|
|
|
850 |
verifyOffset: function() {
|
|
|
851 |
|
|
|
852 |
var xy = getXY(this.getEl()),
|
|
|
853 |
t = this.thumb;
|
|
|
854 |
|
|
|
855 |
if (!this.thumbCenterPoint || !this.thumbCenterPoint.x) {
|
|
|
856 |
this.setThumbCenterPoint();
|
|
|
857 |
}
|
|
|
858 |
|
|
|
859 |
if (xy) {
|
|
|
860 |
|
|
|
861 |
this.logger.log("newPos: " + xy);
|
|
|
862 |
|
|
|
863 |
if (xy[0] != this.baselinePos[0] || xy[1] != this.baselinePos[1]) {
|
|
|
864 |
this.logger.log("background moved, resetting constraints");
|
|
|
865 |
|
|
|
866 |
// Reset background
|
|
|
867 |
this.setInitPosition();
|
|
|
868 |
this.baselinePos = xy;
|
|
|
869 |
|
|
|
870 |
// Reset thumb
|
|
|
871 |
t.initPageX = this.initPageX + t.startOffset[0];
|
|
|
872 |
t.initPageY = this.initPageY + t.startOffset[1];
|
|
|
873 |
t.deltaSetXY = null;
|
|
|
874 |
this.resetThumbConstraints();
|
|
|
875 |
|
|
|
876 |
return false;
|
|
|
877 |
}
|
|
|
878 |
}
|
|
|
879 |
|
|
|
880 |
return true;
|
|
|
881 |
},
|
|
|
882 |
|
|
|
883 |
/**
|
|
|
884 |
* Move the associated slider moved to a timeout to try to get around the
|
|
|
885 |
* mousedown stealing moz does when I move the slider element between the
|
|
|
886 |
* cursor and the background during the mouseup event
|
|
|
887 |
* @method moveThumb
|
|
|
888 |
* @param {int} x the X coordinate of the click
|
|
|
889 |
* @param {int} y the Y coordinate of the click
|
|
|
890 |
* @param {boolean} skipAnim don't animate if the move happend onDrag
|
|
|
891 |
* @param {boolean} midMove set to true if this is not terminating
|
|
|
892 |
* the slider movement
|
|
|
893 |
* @private
|
|
|
894 |
*/
|
|
|
895 |
moveThumb: function(x, y, skipAnim, midMove) {
|
|
|
896 |
|
|
|
897 |
var t = this.thumb,
|
|
|
898 |
self = this,
|
|
|
899 |
p,_p,anim;
|
|
|
900 |
|
|
|
901 |
if (!t.available) {
|
|
|
902 |
this.logger.log("thumb is not available yet, aborting move");
|
|
|
903 |
return;
|
|
|
904 |
}
|
|
|
905 |
|
|
|
906 |
this.logger.log("move thumb, x: " + x + ", y: " + y);
|
|
|
907 |
|
|
|
908 |
t.setDelta(this.thumbCenterPoint.x, this.thumbCenterPoint.y);
|
|
|
909 |
|
|
|
910 |
_p = t.getTargetCoord(x, y);
|
|
|
911 |
p = [Math.round(_p.x), Math.round(_p.y)];
|
|
|
912 |
|
|
|
913 |
if (this.animate && t._graduated && !skipAnim) {
|
|
|
914 |
this.logger.log("graduated");
|
|
|
915 |
this.lock();
|
|
|
916 |
|
|
|
917 |
// cache the current thumb pos
|
|
|
918 |
this.curCoord = getXY(this.thumb.getEl());
|
|
|
919 |
this.curCoord = [Math.round(this.curCoord[0]), Math.round(this.curCoord[1])];
|
|
|
920 |
|
|
|
921 |
setTimeout( function() { self.moveOneTick(p); }, this.tickPause );
|
|
|
922 |
|
|
|
923 |
} else if (this.animate && Slider.ANIM_AVAIL && !skipAnim) {
|
|
|
924 |
this.logger.log("animating to " + p);
|
|
|
925 |
|
|
|
926 |
this.lock();
|
|
|
927 |
|
|
|
928 |
anim = new YAHOO.util.Motion(
|
|
|
929 |
t.id, { points: { to: p } },
|
|
|
930 |
this.animationDuration,
|
|
|
931 |
YAHOO.util.Easing.easeOut );
|
|
|
932 |
|
|
|
933 |
anim.onComplete.subscribe( function() {
|
|
|
934 |
self.logger.log("Animation completed _mouseDown:" + self._mouseDown);
|
|
|
935 |
self.unlock();
|
|
|
936 |
if (!self._mouseDown) {
|
|
|
937 |
self.endMove();
|
|
|
938 |
}
|
|
|
939 |
});
|
|
|
940 |
anim.animate();
|
|
|
941 |
|
|
|
942 |
} else {
|
|
|
943 |
t.setDragElPos(x, y);
|
|
|
944 |
if (!midMove && !this._mouseDown) {
|
|
|
945 |
this.endMove();
|
|
|
946 |
}
|
|
|
947 |
}
|
|
|
948 |
},
|
|
|
949 |
|
|
|
950 |
_slideStart: function() {
|
|
|
951 |
if (!this._sliding) {
|
|
|
952 |
if (!this._silent) {
|
|
|
953 |
this.onSlideStart();
|
|
|
954 |
this.fireEvent("slideStart");
|
|
|
955 |
}
|
|
|
956 |
this._sliding = true;
|
|
|
957 |
this.moveComplete = false; // for backward compatibility. Deprecated
|
|
|
958 |
}
|
|
|
959 |
},
|
|
|
960 |
|
|
|
961 |
_slideEnd: function() {
|
|
|
962 |
if (this._sliding) {
|
|
|
963 |
// Reset state before firing slideEnd
|
|
|
964 |
var silent = this._silent;
|
|
|
965 |
this._sliding = false;
|
|
|
966 |
this.moveComplete = true; // for backward compatibility. Deprecated
|
|
|
967 |
this._silent = false;
|
|
|
968 |
if (!silent) {
|
|
|
969 |
this.onSlideEnd();
|
|
|
970 |
this.fireEvent("slideEnd");
|
|
|
971 |
}
|
|
|
972 |
}
|
|
|
973 |
},
|
|
|
974 |
|
|
|
975 |
/**
|
|
|
976 |
* Move the slider one tick mark towards its final coordinate. Used
|
|
|
977 |
* for the animation when tick marks are defined
|
|
|
978 |
* @method moveOneTick
|
|
|
979 |
* @param {int[]} the destination coordinate
|
|
|
980 |
* @private
|
|
|
981 |
*/
|
|
|
982 |
moveOneTick: function(finalCoord) {
|
|
|
983 |
|
|
|
984 |
var t = this.thumb,
|
|
|
985 |
self = this,
|
|
|
986 |
nextCoord = null,
|
|
|
987 |
tmpX, tmpY;
|
|
|
988 |
|
|
|
989 |
if (t._isRegion) {
|
|
|
990 |
nextCoord = this._getNextX(this.curCoord, finalCoord);
|
|
|
991 |
tmpX = (nextCoord !== null) ? nextCoord[0] : this.curCoord[0];
|
|
|
992 |
nextCoord = this._getNextY(this.curCoord, finalCoord);
|
|
|
993 |
tmpY = (nextCoord !== null) ? nextCoord[1] : this.curCoord[1];
|
|
|
994 |
|
|
|
995 |
nextCoord = tmpX !== this.curCoord[0] || tmpY !== this.curCoord[1] ?
|
|
|
996 |
[ tmpX, tmpY ] : null;
|
|
|
997 |
} else if (t._isHoriz) {
|
|
|
998 |
nextCoord = this._getNextX(this.curCoord, finalCoord);
|
|
|
999 |
} else {
|
|
|
1000 |
nextCoord = this._getNextY(this.curCoord, finalCoord);
|
|
|
1001 |
}
|
|
|
1002 |
|
|
|
1003 |
this.logger.log("moveOneTick: " +
|
|
|
1004 |
" finalCoord: " + finalCoord +
|
|
|
1005 |
" this.curCoord: " + this.curCoord +
|
|
|
1006 |
" nextCoord: " + nextCoord);
|
|
|
1007 |
|
|
|
1008 |
if (nextCoord) {
|
|
|
1009 |
|
|
|
1010 |
// cache the position
|
|
|
1011 |
this.curCoord = nextCoord;
|
|
|
1012 |
|
|
|
1013 |
// move to the next coord
|
|
|
1014 |
this.thumb.alignElWithMouse(t.getEl(), nextCoord[0] + this.thumbCenterPoint.x, nextCoord[1] + this.thumbCenterPoint.y);
|
|
|
1015 |
|
|
|
1016 |
// check if we are in the final position, if not make a recursive call
|
|
|
1017 |
if (!(nextCoord[0] == finalCoord[0] && nextCoord[1] == finalCoord[1])) {
|
|
|
1018 |
setTimeout(function() { self.moveOneTick(finalCoord); },
|
|
|
1019 |
this.tickPause);
|
|
|
1020 |
} else {
|
|
|
1021 |
this.unlock();
|
|
|
1022 |
if (!this._mouseDown) {
|
|
|
1023 |
this.endMove();
|
|
|
1024 |
}
|
|
|
1025 |
}
|
|
|
1026 |
} else {
|
|
|
1027 |
this.unlock();
|
|
|
1028 |
if (!this._mouseDown) {
|
|
|
1029 |
this.endMove();
|
|
|
1030 |
}
|
|
|
1031 |
}
|
|
|
1032 |
},
|
|
|
1033 |
|
|
|
1034 |
/**
|
|
|
1035 |
* Returns the next X tick value based on the current coord and the target coord.
|
|
|
1036 |
* @method _getNextX
|
|
|
1037 |
* @private
|
|
|
1038 |
*/
|
|
|
1039 |
_getNextX: function(curCoord, finalCoord) {
|
|
|
1040 |
this.logger.log("getNextX: " + curCoord + ", " + finalCoord);
|
|
|
1041 |
var t = this.thumb,
|
|
|
1042 |
thresh,
|
|
|
1043 |
tmp = [],
|
|
|
1044 |
nextCoord = null;
|
|
|
1045 |
|
|
|
1046 |
if (curCoord[0] > finalCoord[0]) {
|
|
|
1047 |
thresh = t.tickSize - this.thumbCenterPoint.x;
|
|
|
1048 |
tmp = t.getTargetCoord( curCoord[0] - thresh, curCoord[1] );
|
|
|
1049 |
nextCoord = [tmp.x, tmp.y];
|
|
|
1050 |
} else if (curCoord[0] < finalCoord[0]) {
|
|
|
1051 |
thresh = t.tickSize + this.thumbCenterPoint.x;
|
|
|
1052 |
tmp = t.getTargetCoord( curCoord[0] + thresh, curCoord[1] );
|
|
|
1053 |
nextCoord = [tmp.x, tmp.y];
|
|
|
1054 |
} else {
|
|
|
1055 |
// equal, do nothing
|
|
|
1056 |
}
|
|
|
1057 |
|
|
|
1058 |
return nextCoord;
|
|
|
1059 |
},
|
|
|
1060 |
|
|
|
1061 |
/**
|
|
|
1062 |
* Returns the next Y tick value based on the current coord and the target coord.
|
|
|
1063 |
* @method _getNextY
|
|
|
1064 |
* @private
|
|
|
1065 |
*/
|
|
|
1066 |
_getNextY: function(curCoord, finalCoord) {
|
|
|
1067 |
var t = this.thumb,
|
|
|
1068 |
thresh,
|
|
|
1069 |
tmp = [],
|
|
|
1070 |
nextCoord = null;
|
|
|
1071 |
|
|
|
1072 |
if (curCoord[1] > finalCoord[1]) {
|
|
|
1073 |
thresh = t.tickSize - this.thumbCenterPoint.y;
|
|
|
1074 |
tmp = t.getTargetCoord( curCoord[0], curCoord[1] - thresh );
|
|
|
1075 |
nextCoord = [tmp.x, tmp.y];
|
|
|
1076 |
} else if (curCoord[1] < finalCoord[1]) {
|
|
|
1077 |
thresh = t.tickSize + this.thumbCenterPoint.y;
|
|
|
1078 |
tmp = t.getTargetCoord( curCoord[0], curCoord[1] + thresh );
|
|
|
1079 |
nextCoord = [tmp.x, tmp.y];
|
|
|
1080 |
} else {
|
|
|
1081 |
// equal, do nothing
|
|
|
1082 |
}
|
|
|
1083 |
|
|
|
1084 |
return nextCoord;
|
|
|
1085 |
},
|
|
|
1086 |
|
|
|
1087 |
/**
|
|
|
1088 |
* Resets the constraints before moving the thumb.
|
|
|
1089 |
* @method b4MouseDown
|
|
|
1090 |
* @private
|
|
|
1091 |
*/
|
|
|
1092 |
b4MouseDown: function(e) {
|
|
|
1093 |
if (!this.backgroundEnabled) {
|
|
|
1094 |
return false;
|
|
|
1095 |
}
|
|
|
1096 |
|
|
|
1097 |
this.thumb.autoOffset();
|
|
|
1098 |
this.baselinePos = [];
|
|
|
1099 |
},
|
|
|
1100 |
|
|
|
1101 |
/**
|
|
|
1102 |
* Handles the mousedown event for the slider background
|
|
|
1103 |
* @method onMouseDown
|
|
|
1104 |
* @private
|
|
|
1105 |
*/
|
|
|
1106 |
onMouseDown: function(e) {
|
|
|
1107 |
if (!this.backgroundEnabled || this.isLocked()) {
|
|
|
1108 |
return false;
|
|
|
1109 |
}
|
|
|
1110 |
|
|
|
1111 |
this._mouseDown = true;
|
|
|
1112 |
|
|
|
1113 |
var x = Event.getPageX(e),
|
|
|
1114 |
y = Event.getPageY(e);
|
|
|
1115 |
|
|
|
1116 |
this.logger.log("bg mousedown: " + x + "," + y);
|
|
|
1117 |
|
|
|
1118 |
this.focus();
|
|
|
1119 |
this._slideStart();
|
|
|
1120 |
this.moveThumb(x, y);
|
|
|
1121 |
},
|
|
|
1122 |
|
|
|
1123 |
/**
|
|
|
1124 |
* Handles the onDrag event for the slider background
|
|
|
1125 |
* @method onDrag
|
|
|
1126 |
* @private
|
|
|
1127 |
*/
|
|
|
1128 |
onDrag: function(e) {
|
|
|
1129 |
this.logger.log("background drag");
|
|
|
1130 |
if (this.backgroundEnabled && !this.isLocked()) {
|
|
|
1131 |
var x = Event.getPageX(e),
|
|
|
1132 |
y = Event.getPageY(e);
|
|
|
1133 |
this.moveThumb(x, y, true, true);
|
|
|
1134 |
this.fireEvents();
|
|
|
1135 |
}
|
|
|
1136 |
},
|
|
|
1137 |
|
|
|
1138 |
/**
|
|
|
1139 |
* Fired when the slider movement ends
|
|
|
1140 |
* @method endMove
|
|
|
1141 |
* @private
|
|
|
1142 |
*/
|
|
|
1143 |
endMove: function () {
|
|
|
1144 |
this.logger.log("endMove");
|
|
|
1145 |
this.unlock();
|
|
|
1146 |
this.fireEvents();
|
|
|
1147 |
this._slideEnd();
|
|
|
1148 |
},
|
|
|
1149 |
|
|
|
1150 |
/**
|
|
|
1151 |
* Resets the X and Y contraints for the thumb. Used in lieu of the thumb
|
|
|
1152 |
* instance's inherited resetConstraints because some logic was not
|
|
|
1153 |
* applicable.
|
|
|
1154 |
* @method resetThumbConstraints
|
|
|
1155 |
* @protected
|
|
|
1156 |
*/
|
|
|
1157 |
resetThumbConstraints: function () {
|
|
|
1158 |
var t = this.thumb;
|
|
|
1159 |
|
|
|
1160 |
t.setXConstraint(t.leftConstraint, t.rightConstraint, t.xTickSize);
|
|
|
1161 |
t.setYConstraint(t.topConstraint, t.bottomConstraint, t.xTickSize);
|
|
|
1162 |
},
|
|
|
1163 |
|
|
|
1164 |
/**
|
|
|
1165 |
* Fires the change event if the value has been changed. Ignored if we are in
|
|
|
1166 |
* the middle of an animation as the event will fire when the animation is
|
|
|
1167 |
* complete
|
|
|
1168 |
* @method fireEvents
|
|
|
1169 |
* @param {boolean} thumbEvent set to true if this event is fired from an event
|
|
|
1170 |
* that occurred on the thumb. If it is, the state of the
|
|
|
1171 |
* thumb dd object should be correct. Otherwise, the event
|
|
|
1172 |
* originated on the background, so the thumb state needs to
|
|
|
1173 |
* be refreshed before proceeding.
|
|
|
1174 |
* @private
|
|
|
1175 |
*/
|
|
|
1176 |
fireEvents: function (thumbEvent) {
|
|
|
1177 |
|
|
|
1178 |
var t = this.thumb, newX, newY, newVal;
|
|
|
1179 |
|
|
|
1180 |
if (!thumbEvent) {
|
|
|
1181 |
t.cachePosition();
|
|
|
1182 |
}
|
|
|
1183 |
|
|
|
1184 |
if (! this.isLocked()) {
|
|
|
1185 |
if (t._isRegion) {
|
|
|
1186 |
newX = t.getXValue();
|
|
|
1187 |
newY = t.getYValue();
|
|
|
1188 |
|
|
|
1189 |
if (newX != this.previousX || newY != this.previousY) {
|
|
|
1190 |
if (!this._silent) {
|
|
|
1191 |
this.onChange(newX, newY);
|
|
|
1192 |
this.fireEvent("change", { x: newX, y: newY });
|
|
|
1193 |
}
|
|
|
1194 |
}
|
|
|
1195 |
|
|
|
1196 |
this.previousX = newX;
|
|
|
1197 |
this.previousY = newY;
|
|
|
1198 |
|
|
|
1199 |
} else {
|
|
|
1200 |
newVal = t.getValue();
|
|
|
1201 |
if (newVal != this.previousVal) {
|
|
|
1202 |
this.logger.log("Firing onchange: " + newVal);
|
|
|
1203 |
if (!this._silent) {
|
|
|
1204 |
this.onChange( newVal );
|
|
|
1205 |
this.fireEvent("change", newVal);
|
|
|
1206 |
}
|
|
|
1207 |
}
|
|
|
1208 |
this.previousVal = newVal;
|
|
|
1209 |
}
|
|
|
1210 |
|
|
|
1211 |
}
|
|
|
1212 |
},
|
|
|
1213 |
|
|
|
1214 |
/**
|
|
|
1215 |
* Slider toString
|
|
|
1216 |
* @method toString
|
|
|
1217 |
* @return {string} string representation of the instance
|
|
|
1218 |
*/
|
|
|
1219 |
toString: function () {
|
|
|
1220 |
return ("Slider (" + this.type +") " + this.id);
|
|
|
1221 |
}
|
|
|
1222 |
|
|
|
1223 |
});
|
|
|
1224 |
|
|
|
1225 |
YAHOO.lang.augmentProto(Slider, YAHOO.util.EventProvider);
|
|
|
1226 |
|
|
|
1227 |
YAHOO.widget.Slider = Slider;
|
|
|
1228 |
})();
|
|
|
1229 |
/**
|
|
|
1230 |
* A drag and drop implementation to be used as the thumb of a slider.
|
|
|
1231 |
* @class SliderThumb
|
|
|
1232 |
* @extends YAHOO.util.DD
|
|
|
1233 |
* @constructor
|
|
|
1234 |
* @param {String} id the id of the slider html element
|
|
|
1235 |
* @param {String} sGroup the group of related DragDrop items
|
|
|
1236 |
* @param {int} iLeft the number of pixels the element can move left
|
|
|
1237 |
* @param {int} iRight the number of pixels the element can move right
|
|
|
1238 |
* @param {int} iUp the number of pixels the element can move up
|
|
|
1239 |
* @param {int} iDown the number of pixels the element can move down
|
|
|
1240 |
* @param {int} iTickSize optional parameter for specifying that the element
|
|
|
1241 |
* should move a certain number pixels at a time.
|
|
|
1242 |
*/
|
|
|
1243 |
YAHOO.widget.SliderThumb = function(id, sGroup, iLeft, iRight, iUp, iDown, iTickSize) {
|
|
|
1244 |
|
|
|
1245 |
if (id) {
|
|
|
1246 |
YAHOO.widget.SliderThumb.superclass.constructor.call(this, id, sGroup);
|
|
|
1247 |
|
|
|
1248 |
/**
|
|
|
1249 |
* The id of the thumbs parent HTML element (the slider background
|
|
|
1250 |
* element).
|
|
|
1251 |
* @property parentElId
|
|
|
1252 |
* @type string
|
|
|
1253 |
*/
|
|
|
1254 |
this.parentElId = sGroup;
|
|
|
1255 |
}
|
|
|
1256 |
|
|
|
1257 |
|
|
|
1258 |
this.logger = new YAHOO.widget.LogWriter(this.toString());
|
|
|
1259 |
|
|
|
1260 |
/**
|
|
|
1261 |
* Overrides the isTarget property in YAHOO.util.DragDrop
|
|
|
1262 |
* @property isTarget
|
|
|
1263 |
* @private
|
|
|
1264 |
*/
|
|
|
1265 |
this.isTarget = false;
|
|
|
1266 |
|
|
|
1267 |
/**
|
|
|
1268 |
* The tick size for this slider
|
|
|
1269 |
* @property tickSize
|
|
|
1270 |
* @type int
|
|
|
1271 |
* @private
|
|
|
1272 |
*/
|
|
|
1273 |
this.tickSize = iTickSize;
|
|
|
1274 |
|
|
|
1275 |
/**
|
|
|
1276 |
* Informs the drag and drop util that the offsets should remain when
|
|
|
1277 |
* resetting the constraints. This preserves the slider value when
|
|
|
1278 |
* the constraints are reset
|
|
|
1279 |
* @property maintainOffset
|
|
|
1280 |
* @type boolean
|
|
|
1281 |
* @private
|
|
|
1282 |
*/
|
|
|
1283 |
this.maintainOffset = true;
|
|
|
1284 |
|
|
|
1285 |
this.initSlider(iLeft, iRight, iUp, iDown, iTickSize);
|
|
|
1286 |
|
|
|
1287 |
/**
|
|
|
1288 |
* Turns off the autoscroll feature in drag and drop
|
|
|
1289 |
* @property scroll
|
|
|
1290 |
* @private
|
|
|
1291 |
*/
|
|
|
1292 |
this.scroll = false;
|
|
|
1293 |
|
|
|
1294 |
};
|
|
|
1295 |
|
|
|
1296 |
YAHOO.extend(YAHOO.widget.SliderThumb, YAHOO.util.DD, {
|
|
|
1297 |
|
|
|
1298 |
/**
|
|
|
1299 |
* The (X and Y) difference between the thumb location and its parent
|
|
|
1300 |
* (the slider background) when the control is instantiated.
|
|
|
1301 |
* @property startOffset
|
|
|
1302 |
* @type [int, int]
|
|
|
1303 |
*/
|
|
|
1304 |
startOffset: null,
|
|
|
1305 |
|
|
|
1306 |
/**
|
|
|
1307 |
* Override the default setting of dragOnly to true.
|
|
|
1308 |
* @property dragOnly
|
|
|
1309 |
* @type boolean
|
|
|
1310 |
* @default true
|
|
|
1311 |
*/
|
|
|
1312 |
dragOnly : true,
|
|
|
1313 |
|
|
|
1314 |
/**
|
|
|
1315 |
* Flag used to figure out if this is a horizontal or vertical slider
|
|
|
1316 |
* @property _isHoriz
|
|
|
1317 |
* @type boolean
|
|
|
1318 |
* @private
|
|
|
1319 |
*/
|
|
|
1320 |
_isHoriz: false,
|
|
|
1321 |
|
|
|
1322 |
/**
|
|
|
1323 |
* Cache the last value so we can check for change
|
|
|
1324 |
* @property _prevVal
|
|
|
1325 |
* @type int
|
|
|
1326 |
* @private
|
|
|
1327 |
*/
|
|
|
1328 |
_prevVal: 0,
|
|
|
1329 |
|
|
|
1330 |
/**
|
|
|
1331 |
* The slider is _graduated if there is a tick interval defined
|
|
|
1332 |
* @property _graduated
|
|
|
1333 |
* @type boolean
|
|
|
1334 |
* @private
|
|
|
1335 |
*/
|
|
|
1336 |
_graduated: false,
|
|
|
1337 |
|
|
|
1338 |
|
|
|
1339 |
/**
|
|
|
1340 |
* Returns the difference between the location of the thumb and its parent.
|
|
|
1341 |
* @method getOffsetFromParent
|
|
|
1342 |
* @param {[int, int]} parentPos Optionally accepts the position of the parent
|
|
|
1343 |
* @type [int, int]
|
|
|
1344 |
*/
|
|
|
1345 |
getOffsetFromParent0: function(parentPos) {
|
|
|
1346 |
var myPos = YAHOO.util.Dom.getXY(this.getEl()),
|
|
|
1347 |
ppos = parentPos || YAHOO.util.Dom.getXY(this.parentElId);
|
|
|
1348 |
|
|
|
1349 |
return [ (myPos[0] - ppos[0]), (myPos[1] - ppos[1]) ];
|
|
|
1350 |
},
|
|
|
1351 |
|
|
|
1352 |
getOffsetFromParent: function(parentPos) {
|
|
|
1353 |
|
|
|
1354 |
var el = this.getEl(), newOffset,
|
|
|
1355 |
myPos,ppos,l,t,deltaX,deltaY,newLeft,newTop;
|
|
|
1356 |
|
|
|
1357 |
if (!this.deltaOffset) {
|
|
|
1358 |
|
|
|
1359 |
myPos = YAHOO.util.Dom.getXY(el);
|
|
|
1360 |
ppos = parentPos || YAHOO.util.Dom.getXY(this.parentElId);
|
|
|
1361 |
|
|
|
1362 |
newOffset = [ (myPos[0] - ppos[0]), (myPos[1] - ppos[1]) ];
|
|
|
1363 |
|
|
|
1364 |
l = parseInt( YAHOO.util.Dom.getStyle(el, "left"), 10 );
|
|
|
1365 |
t = parseInt( YAHOO.util.Dom.getStyle(el, "top" ), 10 );
|
|
|
1366 |
|
|
|
1367 |
deltaX = l - newOffset[0];
|
|
|
1368 |
deltaY = t - newOffset[1];
|
|
|
1369 |
|
|
|
1370 |
if (isNaN(deltaX) || isNaN(deltaY)) {
|
|
|
1371 |
this.logger.log("element does not have a position style def yet");
|
|
|
1372 |
} else {
|
|
|
1373 |
this.deltaOffset = [deltaX, deltaY];
|
|
|
1374 |
}
|
|
|
1375 |
|
|
|
1376 |
} else {
|
|
|
1377 |
newLeft = parseInt( YAHOO.util.Dom.getStyle(el, "left"), 10 );
|
|
|
1378 |
newTop = parseInt( YAHOO.util.Dom.getStyle(el, "top" ), 10 );
|
|
|
1379 |
|
|
|
1380 |
newOffset = [newLeft + this.deltaOffset[0], newTop + this.deltaOffset[1]];
|
|
|
1381 |
}
|
|
|
1382 |
|
|
|
1383 |
return newOffset;
|
|
|
1384 |
},
|
|
|
1385 |
|
|
|
1386 |
/**
|
|
|
1387 |
* Set up the slider, must be called in the constructor of all subclasses
|
|
|
1388 |
* @method initSlider
|
|
|
1389 |
* @param {int} iLeft the number of pixels the element can move left
|
|
|
1390 |
* @param {int} iRight the number of pixels the element can move right
|
|
|
1391 |
* @param {int} iUp the number of pixels the element can move up
|
|
|
1392 |
* @param {int} iDown the number of pixels the element can move down
|
|
|
1393 |
* @param {int} iTickSize the width of the tick interval.
|
|
|
1394 |
*/
|
|
|
1395 |
initSlider: function (iLeft, iRight, iUp, iDown, iTickSize) {
|
|
|
1396 |
this.initLeft = iLeft;
|
|
|
1397 |
this.initRight = iRight;
|
|
|
1398 |
this.initUp = iUp;
|
|
|
1399 |
this.initDown = iDown;
|
|
|
1400 |
|
|
|
1401 |
this.setXConstraint(iLeft, iRight, iTickSize);
|
|
|
1402 |
this.setYConstraint(iUp, iDown, iTickSize);
|
|
|
1403 |
|
|
|
1404 |
if (iTickSize && iTickSize > 1) {
|
|
|
1405 |
this._graduated = true;
|
|
|
1406 |
}
|
|
|
1407 |
|
|
|
1408 |
this._isHoriz = (iLeft || iRight);
|
|
|
1409 |
this._isVert = (iUp || iDown);
|
|
|
1410 |
this._isRegion = (this._isHoriz && this._isVert);
|
|
|
1411 |
|
|
|
1412 |
},
|
|
|
1413 |
|
|
|
1414 |
/**
|
|
|
1415 |
* Clear's the slider's ticks
|
|
|
1416 |
* @method clearTicks
|
|
|
1417 |
*/
|
|
|
1418 |
clearTicks: function () {
|
|
|
1419 |
YAHOO.widget.SliderThumb.superclass.clearTicks.call(this);
|
|
|
1420 |
this.tickSize = 0;
|
|
|
1421 |
this._graduated = false;
|
|
|
1422 |
},
|
|
|
1423 |
|
|
|
1424 |
|
|
|
1425 |
/**
|
|
|
1426 |
* Gets the current offset from the element's start position in
|
|
|
1427 |
* pixels.
|
|
|
1428 |
* @method getValue
|
|
|
1429 |
* @return {int} the number of pixels (positive or negative) the
|
|
|
1430 |
* slider has moved from the start position.
|
|
|
1431 |
*/
|
|
|
1432 |
getValue: function () {
|
|
|
1433 |
return (this._isHoriz) ? this.getXValue() : this.getYValue();
|
|
|
1434 |
},
|
|
|
1435 |
|
|
|
1436 |
/**
|
|
|
1437 |
* Gets the current X offset from the element's start position in
|
|
|
1438 |
* pixels.
|
|
|
1439 |
* @method getXValue
|
|
|
1440 |
* @return {int} the number of pixels (positive or negative) the
|
|
|
1441 |
* slider has moved horizontally from the start position.
|
|
|
1442 |
*/
|
|
|
1443 |
getXValue: function () {
|
|
|
1444 |
if (!this.available) {
|
|
|
1445 |
return 0;
|
|
|
1446 |
}
|
|
|
1447 |
var newOffset = this.getOffsetFromParent();
|
|
|
1448 |
if (YAHOO.lang.isNumber(newOffset[0])) {
|
|
|
1449 |
this.lastOffset = newOffset;
|
|
|
1450 |
return (newOffset[0] - this.startOffset[0]);
|
|
|
1451 |
} else {
|
|
|
1452 |
this.logger.log("can't get offset, using old value: " +
|
|
|
1453 |
this.lastOffset[0]);
|
|
|
1454 |
return (this.lastOffset[0] - this.startOffset[0]);
|
|
|
1455 |
}
|
|
|
1456 |
},
|
|
|
1457 |
|
|
|
1458 |
/**
|
|
|
1459 |
* Gets the current Y offset from the element's start position in
|
|
|
1460 |
* pixels.
|
|
|
1461 |
* @method getYValue
|
|
|
1462 |
* @return {int} the number of pixels (positive or negative) the
|
|
|
1463 |
* slider has moved vertically from the start position.
|
|
|
1464 |
*/
|
|
|
1465 |
getYValue: function () {
|
|
|
1466 |
if (!this.available) {
|
|
|
1467 |
return 0;
|
|
|
1468 |
}
|
|
|
1469 |
var newOffset = this.getOffsetFromParent();
|
|
|
1470 |
if (YAHOO.lang.isNumber(newOffset[1])) {
|
|
|
1471 |
this.lastOffset = newOffset;
|
|
|
1472 |
return (newOffset[1] - this.startOffset[1]);
|
|
|
1473 |
} else {
|
|
|
1474 |
this.logger.log("can't get offset, using old value: " +
|
|
|
1475 |
this.lastOffset[1]);
|
|
|
1476 |
return (this.lastOffset[1] - this.startOffset[1]);
|
|
|
1477 |
}
|
|
|
1478 |
},
|
|
|
1479 |
|
|
|
1480 |
/**
|
|
|
1481 |
* Thumb toString
|
|
|
1482 |
* @method toString
|
|
|
1483 |
* @return {string} string representation of the instance
|
|
|
1484 |
*/
|
|
|
1485 |
toString: function () {
|
|
|
1486 |
return "SliderThumb " + this.id;
|
|
|
1487 |
},
|
|
|
1488 |
|
|
|
1489 |
/**
|
|
|
1490 |
* The onchange event for the handle/thumb is delegated to the YAHOO.widget.Slider
|
|
|
1491 |
* instance it belongs to.
|
|
|
1492 |
* @method onChange
|
|
|
1493 |
* @private
|
|
|
1494 |
*/
|
|
|
1495 |
onChange: function (x, y) {
|
|
|
1496 |
}
|
|
|
1497 |
|
|
|
1498 |
});
|
|
|
1499 |
/**
|
|
|
1500 |
* A slider with two thumbs, one that represents the min value and
|
|
|
1501 |
* the other the max. Actually a composition of two sliders, both with
|
|
|
1502 |
* the same background. The constraints for each slider are adjusted
|
|
|
1503 |
* dynamically so that the min value of the max slider is equal or greater
|
|
|
1504 |
* to the current value of the min slider, and the max value of the min
|
|
|
1505 |
* slider is the current value of the max slider.
|
|
|
1506 |
* Constructor assumes both thumbs are positioned absolutely at the 0 mark on
|
|
|
1507 |
* the background.
|
|
|
1508 |
*
|
|
|
1509 |
* @namespace YAHOO.widget
|
|
|
1510 |
* @class DualSlider
|
|
|
1511 |
* @uses YAHOO.util.EventProvider
|
|
|
1512 |
* @constructor
|
|
|
1513 |
* @param {Slider} minSlider The Slider instance used for the min value thumb
|
|
|
1514 |
* @param {Slider} maxSlider The Slider instance used for the max value thumb
|
|
|
1515 |
* @param {int} range The number of pixels the thumbs may move within
|
|
|
1516 |
* @param {Array} initVals (optional) [min,max] Initial thumb placement
|
|
|
1517 |
*/
|
|
|
1518 |
(function () {
|
|
|
1519 |
|
|
|
1520 |
var Event = YAHOO.util.Event,
|
|
|
1521 |
YW = YAHOO.widget;
|
|
|
1522 |
|
|
|
1523 |
function DualSlider(minSlider, maxSlider, range, initVals) {
|
|
|
1524 |
|
|
|
1525 |
var self = this,
|
|
|
1526 |
ready = { min : false, max : false },
|
|
|
1527 |
minThumbOnMouseDown, maxThumbOnMouseDown;
|
|
|
1528 |
|
|
|
1529 |
/**
|
|
|
1530 |
* A slider instance that keeps track of the lower value of the range.
|
|
|
1531 |
* <strong>read only</strong>
|
|
|
1532 |
* @property minSlider
|
|
|
1533 |
* @type Slider
|
|
|
1534 |
*/
|
|
|
1535 |
this.minSlider = minSlider;
|
|
|
1536 |
|
|
|
1537 |
/**
|
|
|
1538 |
* A slider instance that keeps track of the upper value of the range.
|
|
|
1539 |
* <strong>read only</strong>
|
|
|
1540 |
* @property maxSlider
|
|
|
1541 |
* @type Slider
|
|
|
1542 |
*/
|
|
|
1543 |
this.maxSlider = maxSlider;
|
|
|
1544 |
|
|
|
1545 |
/**
|
|
|
1546 |
* The currently active slider (min or max). <strong>read only</strong>
|
|
|
1547 |
* @property activeSlider
|
|
|
1548 |
* @type Slider
|
|
|
1549 |
*/
|
|
|
1550 |
this.activeSlider = minSlider;
|
|
|
1551 |
|
|
|
1552 |
/**
|
|
|
1553 |
* Is the DualSlider oriented horizontally or vertically?
|
|
|
1554 |
* <strong>read only</strong>
|
|
|
1555 |
* @property isHoriz
|
|
|
1556 |
* @type boolean
|
|
|
1557 |
*/
|
|
|
1558 |
this.isHoriz = minSlider.thumb._isHoriz;
|
|
|
1559 |
|
|
|
1560 |
//FIXME: this is horrible
|
|
|
1561 |
minThumbOnMouseDown = this.minSlider.thumb.onMouseDown;
|
|
|
1562 |
maxThumbOnMouseDown = this.maxSlider.thumb.onMouseDown;
|
|
|
1563 |
this.minSlider.thumb.onMouseDown = function() {
|
|
|
1564 |
self.activeSlider = self.minSlider;
|
|
|
1565 |
minThumbOnMouseDown.apply(this,arguments);
|
|
|
1566 |
};
|
|
|
1567 |
this.maxSlider.thumb.onMouseDown = function () {
|
|
|
1568 |
self.activeSlider = self.maxSlider;
|
|
|
1569 |
maxThumbOnMouseDown.apply(this,arguments);
|
|
|
1570 |
};
|
|
|
1571 |
|
|
|
1572 |
this.minSlider.thumb.onAvailable = function () {
|
|
|
1573 |
minSlider.setStartSliderState();
|
|
|
1574 |
ready.min = true;
|
|
|
1575 |
if (ready.max) {
|
|
|
1576 |
self.fireEvent('ready',self);
|
|
|
1577 |
}
|
|
|
1578 |
};
|
|
|
1579 |
this.maxSlider.thumb.onAvailable = function () {
|
|
|
1580 |
maxSlider.setStartSliderState();
|
|
|
1581 |
ready.max = true;
|
|
|
1582 |
if (ready.min) {
|
|
|
1583 |
self.fireEvent('ready',self);
|
|
|
1584 |
}
|
|
|
1585 |
};
|
|
|
1586 |
|
|
|
1587 |
// dispatch mousedowns to the active slider
|
|
|
1588 |
minSlider.onMouseDown =
|
|
|
1589 |
maxSlider.onMouseDown = function(e) {
|
|
|
1590 |
return this.backgroundEnabled && self._handleMouseDown(e);
|
|
|
1591 |
};
|
|
|
1592 |
|
|
|
1593 |
// Fix the drag behavior so that only the active slider
|
|
|
1594 |
// follows the drag
|
|
|
1595 |
minSlider.onDrag =
|
|
|
1596 |
maxSlider.onDrag = function(e) {
|
|
|
1597 |
self._handleDrag(e);
|
|
|
1598 |
};
|
|
|
1599 |
|
|
|
1600 |
// Likely only the minSlider's onMouseUp will be executed, but both are
|
|
|
1601 |
// overridden just to be safe
|
|
|
1602 |
minSlider.onMouseUp =
|
|
|
1603 |
maxSlider.onMouseUp = function (e) {
|
|
|
1604 |
self._handleMouseUp(e);
|
|
|
1605 |
};
|
|
|
1606 |
|
|
|
1607 |
// Replace the _bindKeyEvents for the minSlider and remove that for the
|
|
|
1608 |
// maxSlider since they share the same bg element.
|
|
|
1609 |
minSlider._bindKeyEvents = function () {
|
|
|
1610 |
self._bindKeyEvents(this);
|
|
|
1611 |
};
|
|
|
1612 |
maxSlider._bindKeyEvents = function () {};
|
|
|
1613 |
|
|
|
1614 |
// The core events for each slider are handled so we can expose a single
|
|
|
1615 |
// event for when the event happens on either slider
|
|
|
1616 |
minSlider.subscribe("change", this._handleMinChange, minSlider, this);
|
|
|
1617 |
minSlider.subscribe("slideStart", this._handleSlideStart, minSlider, this);
|
|
|
1618 |
minSlider.subscribe("slideEnd", this._handleSlideEnd, minSlider, this);
|
|
|
1619 |
|
|
|
1620 |
maxSlider.subscribe("change", this._handleMaxChange, maxSlider, this);
|
|
|
1621 |
maxSlider.subscribe("slideStart", this._handleSlideStart, maxSlider, this);
|
|
|
1622 |
maxSlider.subscribe("slideEnd", this._handleSlideEnd, maxSlider, this);
|
|
|
1623 |
|
|
|
1624 |
/**
|
|
|
1625 |
* Event that fires when the slider is finished setting up
|
|
|
1626 |
* @event ready
|
|
|
1627 |
* @param {DualSlider} dualslider the DualSlider instance
|
|
|
1628 |
*/
|
|
|
1629 |
this.createEvent("ready", this);
|
|
|
1630 |
|
|
|
1631 |
/**
|
|
|
1632 |
* Event that fires when either the min or max value changes
|
|
|
1633 |
* @event change
|
|
|
1634 |
* @param {DualSlider} dualslider the DualSlider instance
|
|
|
1635 |
*/
|
|
|
1636 |
this.createEvent("change", this);
|
|
|
1637 |
|
|
|
1638 |
/**
|
|
|
1639 |
* Event that fires when one of the thumbs begins to move
|
|
|
1640 |
* @event slideStart
|
|
|
1641 |
* @param {Slider} activeSlider the moving slider
|
|
|
1642 |
*/
|
|
|
1643 |
this.createEvent("slideStart", this);
|
|
|
1644 |
|
|
|
1645 |
/**
|
|
|
1646 |
* Event that fires when one of the thumbs finishes moving
|
|
|
1647 |
* @event slideEnd
|
|
|
1648 |
* @param {Slider} activeSlider the moving slider
|
|
|
1649 |
*/
|
|
|
1650 |
this.createEvent("slideEnd", this);
|
|
|
1651 |
|
|
|
1652 |
// Validate initial values
|
|
|
1653 |
initVals = YAHOO.lang.isArray(initVals) ? initVals : [0,range];
|
|
|
1654 |
initVals[0] = Math.min(Math.max(parseInt(initVals[0],10)|0,0),range);
|
|
|
1655 |
initVals[1] = Math.max(Math.min(parseInt(initVals[1],10)|0,range),0);
|
|
|
1656 |
// Swap initVals if min > max
|
|
|
1657 |
if (initVals[0] > initVals[1]) {
|
|
|
1658 |
initVals.splice(0,2,initVals[1],initVals[0]);
|
|
|
1659 |
}
|
|
|
1660 |
this.minVal = initVals[0];
|
|
|
1661 |
this.maxVal = initVals[1];
|
|
|
1662 |
|
|
|
1663 |
// Set values so initial assignment when the slider thumbs are ready will
|
|
|
1664 |
// use these values
|
|
|
1665 |
this.minSlider.setValue(this.minVal,true,true,true);
|
|
|
1666 |
this.maxSlider.setValue(this.maxVal,true,true,true);
|
|
|
1667 |
|
|
|
1668 |
YAHOO.log("Setting initial values " + this.minVal + ", " + this.maxVal,"info","DualSlider");
|
|
|
1669 |
}
|
|
|
1670 |
|
|
|
1671 |
DualSlider.prototype = {
|
|
|
1672 |
|
|
|
1673 |
/**
|
|
|
1674 |
* The current value of the min thumb. <strong>read only</strong>.
|
|
|
1675 |
* @property minVal
|
|
|
1676 |
* @type int
|
|
|
1677 |
*/
|
|
|
1678 |
minVal : -1,
|
|
|
1679 |
|
|
|
1680 |
/**
|
|
|
1681 |
* The current value of the max thumb. <strong>read only</strong>.
|
|
|
1682 |
* @property maxVal
|
|
|
1683 |
* @type int
|
|
|
1684 |
*/
|
|
|
1685 |
maxVal : -1,
|
|
|
1686 |
|
|
|
1687 |
/**
|
|
|
1688 |
* Pixel distance to maintain between thumbs.
|
|
|
1689 |
* @property minRange
|
|
|
1690 |
* @type int
|
|
|
1691 |
* @default 0
|
|
|
1692 |
*/
|
|
|
1693 |
minRange : 0,
|
|
|
1694 |
|
|
|
1695 |
/**
|
|
|
1696 |
* Executed when one of the sliders fires the slideStart event
|
|
|
1697 |
* @method _handleSlideStart
|
|
|
1698 |
* @private
|
|
|
1699 |
*/
|
|
|
1700 |
_handleSlideStart: function(data, slider) {
|
|
|
1701 |
this.fireEvent("slideStart", slider);
|
|
|
1702 |
},
|
|
|
1703 |
|
|
|
1704 |
/**
|
|
|
1705 |
* Executed when one of the sliders fires the slideEnd event
|
|
|
1706 |
* @method _handleSlideEnd
|
|
|
1707 |
* @private
|
|
|
1708 |
*/
|
|
|
1709 |
_handleSlideEnd: function(data, slider) {
|
|
|
1710 |
this.fireEvent("slideEnd", slider);
|
|
|
1711 |
},
|
|
|
1712 |
|
|
|
1713 |
/**
|
|
|
1714 |
* Overrides the onDrag method for both sliders
|
|
|
1715 |
* @method _handleDrag
|
|
|
1716 |
* @private
|
|
|
1717 |
*/
|
|
|
1718 |
_handleDrag: function(e) {
|
|
|
1719 |
YW.Slider.prototype.onDrag.call(this.activeSlider, e);
|
|
|
1720 |
},
|
|
|
1721 |
|
|
|
1722 |
/**
|
|
|
1723 |
* Executed when the min slider fires the change event
|
|
|
1724 |
* @method _handleMinChange
|
|
|
1725 |
* @private
|
|
|
1726 |
*/
|
|
|
1727 |
_handleMinChange: function() {
|
|
|
1728 |
this.activeSlider = this.minSlider;
|
|
|
1729 |
this.updateValue();
|
|
|
1730 |
},
|
|
|
1731 |
|
|
|
1732 |
/**
|
|
|
1733 |
* Executed when the max slider fires the change event
|
|
|
1734 |
* @method _handleMaxChange
|
|
|
1735 |
* @private
|
|
|
1736 |
*/
|
|
|
1737 |
_handleMaxChange: function() {
|
|
|
1738 |
this.activeSlider = this.maxSlider;
|
|
|
1739 |
this.updateValue();
|
|
|
1740 |
},
|
|
|
1741 |
|
|
|
1742 |
/**
|
|
|
1743 |
* Set up the listeners for the keydown and keypress events.
|
|
|
1744 |
*
|
|
|
1745 |
* @method _bindKeyEvents
|
|
|
1746 |
* @protected
|
|
|
1747 |
*/
|
|
|
1748 |
_bindKeyEvents : function (slider) {
|
|
|
1749 |
Event.on(slider.id,'keydown', this._handleKeyDown, this,true);
|
|
|
1750 |
Event.on(slider.id,'keypress',this._handleKeyPress,this,true);
|
|
|
1751 |
},
|
|
|
1752 |
|
|
|
1753 |
/**
|
|
|
1754 |
* Delegate event handling to the active Slider. See Slider.handleKeyDown.
|
|
|
1755 |
*
|
|
|
1756 |
* @method _handleKeyDown
|
|
|
1757 |
* @param e {Event} the mousedown DOM event
|
|
|
1758 |
* @protected
|
|
|
1759 |
*/
|
|
|
1760 |
_handleKeyDown : function (e) {
|
|
|
1761 |
this.activeSlider.handleKeyDown.apply(this.activeSlider,arguments);
|
|
|
1762 |
},
|
|
|
1763 |
|
|
|
1764 |
/**
|
|
|
1765 |
* Delegate event handling to the active Slider. See Slider.handleKeyPress.
|
|
|
1766 |
*
|
|
|
1767 |
* @method _handleKeyPress
|
|
|
1768 |
* @param e {Event} the mousedown DOM event
|
|
|
1769 |
* @protected
|
|
|
1770 |
*/
|
|
|
1771 |
_handleKeyPress : function (e) {
|
|
|
1772 |
this.activeSlider.handleKeyPress.apply(this.activeSlider,arguments);
|
|
|
1773 |
},
|
|
|
1774 |
|
|
|
1775 |
/**
|
|
|
1776 |
* Sets the min and max thumbs to new values.
|
|
|
1777 |
* @method setValues
|
|
|
1778 |
* @param min {int} Pixel offset to assign to the min thumb
|
|
|
1779 |
* @param max {int} Pixel offset to assign to the max thumb
|
|
|
1780 |
* @param skipAnim {boolean} (optional) Set to true to skip thumb animation.
|
|
|
1781 |
* Default false
|
|
|
1782 |
* @param force {boolean} (optional) ignore the locked setting and set
|
|
|
1783 |
* value anyway. Default false
|
|
|
1784 |
* @param silent {boolean} (optional) Set to true to skip firing change
|
|
|
1785 |
* events. Default false
|
|
|
1786 |
*/
|
|
|
1787 |
setValues : function (min, max, skipAnim, force, silent) {
|
|
|
1788 |
var mins = this.minSlider,
|
|
|
1789 |
maxs = this.maxSlider,
|
|
|
1790 |
mint = mins.thumb,
|
|
|
1791 |
maxt = maxs.thumb,
|
|
|
1792 |
self = this,
|
|
|
1793 |
done = { min : false, max : false };
|
|
|
1794 |
|
|
|
1795 |
// Clear constraints to prevent animated thumbs from prematurely
|
|
|
1796 |
// stopping when hitting a constraint that's moving with the other
|
|
|
1797 |
// thumb.
|
|
|
1798 |
if (mint._isHoriz) {
|
|
|
1799 |
mint.setXConstraint(mint.leftConstraint,maxt.rightConstraint,mint.tickSize);
|
|
|
1800 |
maxt.setXConstraint(mint.leftConstraint,maxt.rightConstraint,maxt.tickSize);
|
|
|
1801 |
} else {
|
|
|
1802 |
mint.setYConstraint(mint.topConstraint,maxt.bottomConstraint,mint.tickSize);
|
|
|
1803 |
maxt.setYConstraint(mint.topConstraint,maxt.bottomConstraint,maxt.tickSize);
|
|
|
1804 |
}
|
|
|
1805 |
|
|
|
1806 |
// Set up one-time slideEnd callbacks to call updateValue when both
|
|
|
1807 |
// thumbs have been set
|
|
|
1808 |
this._oneTimeCallback(mins,'slideEnd',function () {
|
|
|
1809 |
done.min = true;
|
|
|
1810 |
if (done.max) {
|
|
|
1811 |
self.updateValue(silent);
|
|
|
1812 |
// Clean the slider's slideEnd events on a timeout since this
|
|
|
1813 |
// will be executed from inside the event's fire
|
|
|
1814 |
setTimeout(function () {
|
|
|
1815 |
self._cleanEvent(mins,'slideEnd');
|
|
|
1816 |
self._cleanEvent(maxs,'slideEnd');
|
|
|
1817 |
},0);
|
|
|
1818 |
}
|
|
|
1819 |
});
|
|
|
1820 |
|
|
|
1821 |
this._oneTimeCallback(maxs,'slideEnd',function () {
|
|
|
1822 |
done.max = true;
|
|
|
1823 |
if (done.min) {
|
|
|
1824 |
self.updateValue(silent);
|
|
|
1825 |
// Clean both sliders' slideEnd events on a timeout since this
|
|
|
1826 |
// will be executed from inside one of the event's fire
|
|
|
1827 |
setTimeout(function () {
|
|
|
1828 |
self._cleanEvent(mins,'slideEnd');
|
|
|
1829 |
self._cleanEvent(maxs,'slideEnd');
|
|
|
1830 |
},0);
|
|
|
1831 |
}
|
|
|
1832 |
});
|
|
|
1833 |
|
|
|
1834 |
// Must emit Slider slideEnd event to propagate to updateValue
|
|
|
1835 |
mins.setValue(min,skipAnim,force,false);
|
|
|
1836 |
maxs.setValue(max,skipAnim,force,false);
|
|
|
1837 |
},
|
|
|
1838 |
|
|
|
1839 |
/**
|
|
|
1840 |
* Set the min thumb position to a new value.
|
|
|
1841 |
* @method setMinValue
|
|
|
1842 |
* @param min {int} Pixel offset for min thumb
|
|
|
1843 |
* @param skipAnim {boolean} (optional) Set to true to skip thumb animation.
|
|
|
1844 |
* Default false
|
|
|
1845 |
* @param force {boolean} (optional) ignore the locked setting and set
|
|
|
1846 |
* value anyway. Default false
|
|
|
1847 |
* @param silent {boolean} (optional) Set to true to skip firing change
|
|
|
1848 |
* events. Default false
|
|
|
1849 |
*/
|
|
|
1850 |
setMinValue : function (min, skipAnim, force, silent) {
|
|
|
1851 |
var mins = this.minSlider,
|
|
|
1852 |
self = this;
|
|
|
1853 |
|
|
|
1854 |
this.activeSlider = mins;
|
|
|
1855 |
|
|
|
1856 |
// Use a one-time event callback to delay the updateValue call
|
|
|
1857 |
// until after the slide operation is done
|
|
|
1858 |
self = this;
|
|
|
1859 |
this._oneTimeCallback(mins,'slideEnd',function () {
|
|
|
1860 |
self.updateValue(silent);
|
|
|
1861 |
// Clean the slideEnd event on a timeout since this
|
|
|
1862 |
// will be executed from inside the event's fire
|
|
|
1863 |
setTimeout(function () { self._cleanEvent(mins,'slideEnd'); }, 0);
|
|
|
1864 |
});
|
|
|
1865 |
|
|
|
1866 |
mins.setValue(min, skipAnim, force);
|
|
|
1867 |
},
|
|
|
1868 |
|
|
|
1869 |
/**
|
|
|
1870 |
* Set the max thumb position to a new value.
|
|
|
1871 |
* @method setMaxValue
|
|
|
1872 |
* @param max {int} Pixel offset for max thumb
|
|
|
1873 |
* @param skipAnim {boolean} (optional) Set to true to skip thumb animation.
|
|
|
1874 |
* Default false
|
|
|
1875 |
* @param force {boolean} (optional) ignore the locked setting and set
|
|
|
1876 |
* value anyway. Default false
|
|
|
1877 |
* @param silent {boolean} (optional) Set to true to skip firing change
|
|
|
1878 |
* events. Default false
|
|
|
1879 |
*/
|
|
|
1880 |
setMaxValue : function (max, skipAnim, force, silent) {
|
|
|
1881 |
var maxs = this.maxSlider,
|
|
|
1882 |
self = this;
|
|
|
1883 |
|
|
|
1884 |
this.activeSlider = maxs;
|
|
|
1885 |
|
|
|
1886 |
// Use a one-time event callback to delay the updateValue call
|
|
|
1887 |
// until after the slide operation is done
|
|
|
1888 |
this._oneTimeCallback(maxs,'slideEnd',function () {
|
|
|
1889 |
self.updateValue(silent);
|
|
|
1890 |
// Clean the slideEnd event on a timeout since this
|
|
|
1891 |
// will be executed from inside the event's fire
|
|
|
1892 |
setTimeout(function () { self._cleanEvent(maxs,'slideEnd'); }, 0);
|
|
|
1893 |
});
|
|
|
1894 |
|
|
|
1895 |
maxs.setValue(max, skipAnim, force);
|
|
|
1896 |
},
|
|
|
1897 |
|
|
|
1898 |
/**
|
|
|
1899 |
* Executed when one of the sliders is moved
|
|
|
1900 |
* @method updateValue
|
|
|
1901 |
* @param silent {boolean} (optional) Set to true to skip firing change
|
|
|
1902 |
* events. Default false
|
|
|
1903 |
* @private
|
|
|
1904 |
*/
|
|
|
1905 |
updateValue: function(silent) {
|
|
|
1906 |
var min = this.minSlider.getValue(),
|
|
|
1907 |
max = this.maxSlider.getValue(),
|
|
|
1908 |
changed = false,
|
|
|
1909 |
mint,maxt,dim,minConstraint,maxConstraint,thumbInnerWidth;
|
|
|
1910 |
|
|
|
1911 |
if (min != this.minVal || max != this.maxVal) {
|
|
|
1912 |
changed = true;
|
|
|
1913 |
|
|
|
1914 |
mint = this.minSlider.thumb;
|
|
|
1915 |
maxt = this.maxSlider.thumb;
|
|
|
1916 |
dim = this.isHoriz ? 'x' : 'y';
|
|
|
1917 |
|
|
|
1918 |
thumbInnerWidth = this.minSlider.thumbCenterPoint[dim] +
|
|
|
1919 |
this.maxSlider.thumbCenterPoint[dim];
|
|
|
1920 |
|
|
|
1921 |
// Establish barriers within the respective other thumb's edge, less
|
|
|
1922 |
// the minRange. Limit to the Slider's range in the case of
|
|
|
1923 |
// negative minRanges.
|
|
|
1924 |
minConstraint = Math.max(max-thumbInnerWidth-this.minRange,0);
|
|
|
1925 |
maxConstraint = Math.min(-min-thumbInnerWidth-this.minRange,0);
|
|
|
1926 |
|
|
|
1927 |
if (this.isHoriz) {
|
|
|
1928 |
minConstraint = Math.min(minConstraint,maxt.rightConstraint);
|
|
|
1929 |
|
|
|
1930 |
mint.setXConstraint(mint.leftConstraint,minConstraint, mint.tickSize);
|
|
|
1931 |
|
|
|
1932 |
maxt.setXConstraint(maxConstraint,maxt.rightConstraint, maxt.tickSize);
|
|
|
1933 |
} else {
|
|
|
1934 |
minConstraint = Math.min(minConstraint,maxt.bottomConstraint);
|
|
|
1935 |
mint.setYConstraint(mint.leftConstraint,minConstraint, mint.tickSize);
|
|
|
1936 |
|
|
|
1937 |
maxt.setYConstraint(maxConstraint,maxt.bottomConstraint, maxt.tickSize);
|
|
|
1938 |
}
|
|
|
1939 |
}
|
|
|
1940 |
|
|
|
1941 |
this.minVal = min;
|
|
|
1942 |
this.maxVal = max;
|
|
|
1943 |
|
|
|
1944 |
if (changed && !silent) {
|
|
|
1945 |
this.fireEvent("change", this);
|
|
|
1946 |
}
|
|
|
1947 |
},
|
|
|
1948 |
|
|
|
1949 |
/**
|
|
|
1950 |
* A background click will move the slider thumb nearest to the click.
|
|
|
1951 |
* Override if you need different behavior.
|
|
|
1952 |
* @method selectActiveSlider
|
|
|
1953 |
* @param e {Event} the mousedown event
|
|
|
1954 |
* @private
|
|
|
1955 |
*/
|
|
|
1956 |
selectActiveSlider: function(e) {
|
|
|
1957 |
var min = this.minSlider,
|
|
|
1958 |
max = this.maxSlider,
|
|
|
1959 |
minLocked = min.isLocked() || !min.backgroundEnabled,
|
|
|
1960 |
maxLocked = max.isLocked() || !min.backgroundEnabled,
|
|
|
1961 |
Ev = YAHOO.util.Event,
|
|
|
1962 |
d;
|
|
|
1963 |
|
|
|
1964 |
if (minLocked || maxLocked) {
|
|
|
1965 |
this.activeSlider = minLocked ? max : min;
|
|
|
1966 |
} else {
|
|
|
1967 |
if (this.isHoriz) {
|
|
|
1968 |
d = Ev.getPageX(e)-min.thumb.initPageX-min.thumbCenterPoint.x;
|
|
|
1969 |
} else {
|
|
|
1970 |
d = Ev.getPageY(e)-min.thumb.initPageY-min.thumbCenterPoint.y;
|
|
|
1971 |
}
|
|
|
1972 |
|
|
|
1973 |
this.activeSlider = d*2 > max.getValue()+min.getValue() ? max : min;
|
|
|
1974 |
}
|
|
|
1975 |
},
|
|
|
1976 |
|
|
|
1977 |
/**
|
|
|
1978 |
* Delegates the onMouseDown to the appropriate Slider
|
|
|
1979 |
*
|
|
|
1980 |
* @method _handleMouseDown
|
|
|
1981 |
* @param e {Event} mouseup event
|
|
|
1982 |
* @protected
|
|
|
1983 |
*/
|
|
|
1984 |
_handleMouseDown: function(e) {
|
|
|
1985 |
if (!e._handled && !this.minSlider._sliding && !this.maxSlider._sliding) {
|
|
|
1986 |
e._handled = true;
|
|
|
1987 |
this.selectActiveSlider(e);
|
|
|
1988 |
return YW.Slider.prototype.onMouseDown.call(this.activeSlider, e);
|
|
|
1989 |
} else {
|
|
|
1990 |
return false;
|
|
|
1991 |
}
|
|
|
1992 |
},
|
|
|
1993 |
|
|
|
1994 |
/**
|
|
|
1995 |
* Delegates the onMouseUp to the active Slider
|
|
|
1996 |
*
|
|
|
1997 |
* @method _handleMouseUp
|
|
|
1998 |
* @param e {Event} mouseup event
|
|
|
1999 |
* @protected
|
|
|
2000 |
*/
|
|
|
2001 |
_handleMouseUp : function (e) {
|
|
|
2002 |
YW.Slider.prototype.onMouseUp.apply(
|
|
|
2003 |
this.activeSlider, arguments);
|
|
|
2004 |
},
|
|
|
2005 |
|
|
|
2006 |
/**
|
|
|
2007 |
* Schedule an event callback that will execute once, then unsubscribe
|
|
|
2008 |
* itself.
|
|
|
2009 |
* @method _oneTimeCallback
|
|
|
2010 |
* @param o {EventProvider} Object to attach the event to
|
|
|
2011 |
* @param evt {string} Name of the event
|
|
|
2012 |
* @param fn {Function} function to execute once
|
|
|
2013 |
* @private
|
|
|
2014 |
*/
|
|
|
2015 |
_oneTimeCallback : function (o,evt,fn) {
|
|
|
2016 |
var sub = function () {
|
|
|
2017 |
// Unsubscribe myself
|
|
|
2018 |
o.unsubscribe(evt, sub);
|
|
|
2019 |
// Pass the event handler arguments to the one time callback
|
|
|
2020 |
fn.apply({},arguments);
|
|
|
2021 |
};
|
|
|
2022 |
o.subscribe(evt,sub);
|
|
|
2023 |
},
|
|
|
2024 |
|
|
|
2025 |
/**
|
|
|
2026 |
* Clean up the slideEnd event subscribers array, since each one-time
|
|
|
2027 |
* callback will be replaced in the event's subscribers property with
|
|
|
2028 |
* null. This will cause memory bloat and loss of performance.
|
|
|
2029 |
* @method _cleanEvent
|
|
|
2030 |
* @param o {EventProvider} object housing the CustomEvent
|
|
|
2031 |
* @param evt {string} name of the CustomEvent
|
|
|
2032 |
* @private
|
|
|
2033 |
*/
|
|
|
2034 |
_cleanEvent : function (o,evt) {
|
|
|
2035 |
var ce,i,len,j,subs,newSubs;
|
|
|
2036 |
|
|
|
2037 |
if (o.__yui_events && o.events[evt]) {
|
|
|
2038 |
for (i = o.__yui_events.length; i >= 0; --i) {
|
|
|
2039 |
if (o.__yui_events[i].type === evt) {
|
|
|
2040 |
ce = o.__yui_events[i];
|
|
|
2041 |
break;
|
|
|
2042 |
}
|
|
|
2043 |
}
|
|
|
2044 |
if (ce) {
|
|
|
2045 |
subs = ce.subscribers;
|
|
|
2046 |
newSubs = [];
|
|
|
2047 |
j = 0;
|
|
|
2048 |
for (i = 0, len = subs.length; i < len; ++i) {
|
|
|
2049 |
if (subs[i]) {
|
|
|
2050 |
newSubs[j++] = subs[i];
|
|
|
2051 |
}
|
|
|
2052 |
}
|
|
|
2053 |
ce.subscribers = newSubs;
|
|
|
2054 |
}
|
|
|
2055 |
}
|
|
|
2056 |
}
|
|
|
2057 |
|
|
|
2058 |
};
|
|
|
2059 |
|
|
|
2060 |
YAHOO.lang.augmentProto(DualSlider, YAHOO.util.EventProvider);
|
|
|
2061 |
|
|
|
2062 |
|
|
|
2063 |
/**
|
|
|
2064 |
* Factory method for creating a horizontal dual-thumb slider
|
|
|
2065 |
* @for YAHOO.widget.Slider
|
|
|
2066 |
* @method YAHOO.widget.Slider.getHorizDualSlider
|
|
|
2067 |
* @static
|
|
|
2068 |
* @param {String} bg the id of the slider's background element
|
|
|
2069 |
* @param {String} minthumb the id of the min thumb
|
|
|
2070 |
* @param {String} maxthumb the id of the thumb thumb
|
|
|
2071 |
* @param {int} range the number of pixels the thumbs can move within
|
|
|
2072 |
* @param {int} iTickSize (optional) the element should move this many pixels
|
|
|
2073 |
* at a time
|
|
|
2074 |
* @param {Array} initVals (optional) [min,max] Initial thumb placement
|
|
|
2075 |
* @return {DualSlider} a horizontal dual-thumb slider control
|
|
|
2076 |
*/
|
|
|
2077 |
YW.Slider.getHorizDualSlider =
|
|
|
2078 |
function (bg, minthumb, maxthumb, range, iTickSize, initVals) {
|
|
|
2079 |
var mint = new YW.SliderThumb(minthumb, bg, 0, range, 0, 0, iTickSize),
|
|
|
2080 |
maxt = new YW.SliderThumb(maxthumb, bg, 0, range, 0, 0, iTickSize);
|
|
|
2081 |
|
|
|
2082 |
return new DualSlider(
|
|
|
2083 |
new YW.Slider(bg, bg, mint, "horiz"),
|
|
|
2084 |
new YW.Slider(bg, bg, maxt, "horiz"),
|
|
|
2085 |
range, initVals);
|
|
|
2086 |
};
|
|
|
2087 |
|
|
|
2088 |
/**
|
|
|
2089 |
* Factory method for creating a vertical dual-thumb slider.
|
|
|
2090 |
* @for YAHOO.widget.Slider
|
|
|
2091 |
* @method YAHOO.widget.Slider.getVertDualSlider
|
|
|
2092 |
* @static
|
|
|
2093 |
* @param {String} bg the id of the slider's background element
|
|
|
2094 |
* @param {String} minthumb the id of the min thumb
|
|
|
2095 |
* @param {String} maxthumb the id of the thumb thumb
|
|
|
2096 |
* @param {int} range the number of pixels the thumbs can move within
|
|
|
2097 |
* @param {int} iTickSize (optional) the element should move this many pixels
|
|
|
2098 |
* at a time
|
|
|
2099 |
* @param {Array} initVals (optional) [min,max] Initial thumb placement
|
|
|
2100 |
* @return {DualSlider} a vertical dual-thumb slider control
|
|
|
2101 |
*/
|
|
|
2102 |
YW.Slider.getVertDualSlider =
|
|
|
2103 |
function (bg, minthumb, maxthumb, range, iTickSize, initVals) {
|
|
|
2104 |
var mint = new YW.SliderThumb(minthumb, bg, 0, 0, 0, range, iTickSize),
|
|
|
2105 |
maxt = new YW.SliderThumb(maxthumb, bg, 0, 0, 0, range, iTickSize);
|
|
|
2106 |
|
|
|
2107 |
return new YW.DualSlider(
|
|
|
2108 |
new YW.Slider(bg, bg, mint, "vert"),
|
|
|
2109 |
new YW.Slider(bg, bg, maxt, "vert"),
|
|
|
2110 |
range, initVals);
|
|
|
2111 |
};
|
|
|
2112 |
|
|
|
2113 |
YAHOO.widget.DualSlider = DualSlider;
|
|
|
2114 |
|
|
|
2115 |
})();
|
|
|
2116 |
YAHOO.register("slider", YAHOO.widget.Slider, {version: "2.9.0", build: "2800"});
|
|
|
2117 |
|
|
|
2118 |
}, '2.9.0' ,{"requires": ["yui2-yahoo", "yui2-dom", "yui2-skin-sam-slider", "yui2-event", "yui2-dragdrop"], "optional": ["yui2-animation"]});
|