Mercurial > kallithea

comparison rhodecode/public/js/yui/slider/slider.js @ 547:1e757ac98988

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