2 Copyright (c) 2007, Yahoo! Inc. All rights reserved.
3 Code licensed under the BSD License:
4 http://developer.yahoo.net/yui/license.txt
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.
16 * @title Slider Widget
17 * @namespace YAHOO.widget
18 * @requires yahoo,dom,dragdrop,event
23 * A DragDrop implementation that can be used as a background for a
24 * slider. It takes a reference to the thumb instance
25 * so it can delegate some of the events to it. The goal is to make the
26 * thumb jump to the location on the background when the background is
30 * @extends YAHOO.util.DragDrop
31 * @uses YAHOO.util.EventProvider
33 * @param {String} id The id of the element linked to this instance
34 * @param {String} sGroup The group of related DragDrop items
35 * @param {SliderThumb} oThumb The thumb for this slider
36 * @param {String} sType The type of slider (horiz, vert, region)
38 YAHOO
.widget
.Slider = function(sElementId
, sGroup
, oThumb
, sType
) {
40 this.init(sElementId
, sGroup
, true);
41 this.initSlider(sType
);
42 this.initThumb(oThumb
);
47 * Factory method for creating a horizontal slider
48 * @method YAHOO.widget.Slider.getHorizSlider
50 * @param {String} sBGElId the id of the slider's background element
51 * @param {String} sHandleElId the id of the thumb element
52 * @param {int} iLeft the number of pixels the element can move left
53 * @param {int} iRight the number of pixels the element can move right
54 * @param {int} iTickSize optional parameter for specifying that the element
55 * should move a certain number pixels at a time.
56 * @return {Slider} a horizontal slider control
58 YAHOO
.widget
.Slider
.getHorizSlider
=
59 function (sBGElId
, sHandleElId
, iLeft
, iRight
, iTickSize
) {
60 return new YAHOO
.widget
.Slider(sBGElId
, sBGElId
,
61 new YAHOO
.widget
.SliderThumb(sHandleElId
, sBGElId
,
62 iLeft
, iRight
, 0, 0, iTickSize
), "horiz");
66 * Factory method for creating a vertical slider
67 * @method YAHOO.widget.Slider.getVertSlider
69 * @param {String} sBGElId the id of the slider's background element
70 * @param {String} sHandleElId the id of the thumb element
71 * @param {int} iUp the number of pixels the element can move up
72 * @param {int} iDown the number of pixels the element can move down
73 * @param {int} iTickSize optional parameter for specifying that the element
74 * should move a certain number pixels at a time.
75 * @return {Slider} a vertical slider control
77 YAHOO
.widget
.Slider
.getVertSlider
=
78 function (sBGElId
, sHandleElId
, iUp
, iDown
, iTickSize
) {
79 return new YAHOO
.widget
.Slider(sBGElId
, sBGElId
,
80 new YAHOO
.widget
.SliderThumb(sHandleElId
, sBGElId
, 0, 0,
81 iUp
, iDown
, iTickSize
), "vert");
85 * Factory method for creating a slider region like the one in the color
87 * @method YAHOO.widget.Slider.getSliderRegion
89 * @param {String} sBGElId the id of the slider's background element
90 * @param {String} sHandleElId the id of the thumb element
91 * @param {int} iLeft the number of pixels the element can move left
92 * @param {int} iRight the number of pixels the element can move right
93 * @param {int} iUp the number of pixels the element can move up
94 * @param {int} iDown the number of pixels the element can move down
95 * @param {int} iTickSize optional parameter for specifying that the element
96 * should move a certain number pixels at a time.
97 * @return {Slider} a slider region control
99 YAHOO
.widget
.Slider
.getSliderRegion
=
100 function (sBGElId
, sHandleElId
, iLeft
, iRight
, iUp
, iDown
, iTickSize
) {
101 return new YAHOO
.widget
.Slider(sBGElId
, sBGElId
,
102 new YAHOO
.widget
.SliderThumb(sHandleElId
, sBGElId
, iLeft
, iRight
,
103 iUp
, iDown
, iTickSize
), "region");
107 * By default, animation is available if the animation library is detected.
108 * @property YAHOO.widget.Slider.ANIM_AVAIL
112 YAHOO
.widget
.Slider
.ANIM_AVAIL
= true;
115 YAHOO
.extend(YAHOO
.widget
.Slider
, YAHOO
.util
.DragDrop
, {
118 * Initializes the slider. Executed in the constructor
120 * @param {string} sType the type of slider (horiz, vert, region)
122 initSlider: function(sType
) {
125 * The type of the slider (horiz, vert, region)
131 //this.removeInvalidHandleType("A");
135 * Event the fires when the value of the control changes. If
136 * the control is animated the event will fire every point
139 * @param {int} newOffset|x the new offset for normal sliders, or the new
140 * x offset for region sliders
141 * @param {int} y the number of pixels the thumb has moved on the y axis
142 * (region sliders only)
144 this.createEvent("change", this);
147 * Event that fires at the beginning of a slider thumb move.
150 this.createEvent("slideStart", this);
153 * Event that fires at the end of a slider thumb move
156 this.createEvent("slideEnd", this);
159 * Overrides the isTarget property in YAHOO.util.DragDrop
163 this.isTarget
= false;
166 * Flag that determines if the thumb will animate when moved
170 this.animate
= YAHOO
.widget
.Slider
.ANIM_AVAIL
;
173 * Set to false to disable a background click thumb move
174 * @property backgroundEnabled
177 this.backgroundEnabled
= true;
180 * Adjustment factor for tick animation, the more ticks, the
181 * faster the animation (by default)
182 * @property tickPause
188 * Enables the arrow, home and end keys, defaults to true.
189 * @property enableKeys
192 this.enableKeys
= true;
195 * Specifies the number of pixels the arrow keys will move the slider.
197 * @property keyIncrement
200 this.keyIncrement
= 20;
203 * moveComplete is set to true when the slider has moved to its final
204 * destination. For animated slider, this value can be checked in
205 * the onChange handler to make it possible to execute logic only
206 * when the move is complete rather than at all points along the way.
207 * Deprecated because this flag is only useful when the background is
208 * clicked and the slider is animated. If the user drags the thumb,
209 * the flag is updated when the drag is over ... the final onDrag event
210 * fires before the mouseup the ends the drag, so the implementer will
213 * @property moveComplete
215 * @deprecated use the slideEnd event instead
217 this.moveComplete
= true;
220 * If animation is configured, specifies the length of the animation
222 * @property animationDuration
226 this.animationDuration
= 0.2;
229 * Constant for valueChangeSource, indicating that the user clicked or
230 * dragged the slider to change the value.
231 * @property SOURCE_UI_EVENT
235 this.SOURCE_UI_EVENT
= 1;
238 * Constant for valueChangeSource, indicating that the value was altered
239 * by a programmatic call to setValue/setRegionValue.
240 * @property SOURCE_SET_VALUE
244 this.SOURCE_SET_VALUE
= 2;
247 * When the slider value changes, this property is set to identify where
248 * the update came from. This will be either 1, meaning the slider was
249 * clicked or dragged, or 2, meaning that it was set via a setValue() call.
250 * This can be used within event handlers to apply some of the logic only
251 * when dealing with one source or another.
252 * @property valueChangeSource
256 this.valueChangeSource
= 0;
260 * Initializes the slider's thumb. Executed in the constructor.
262 * @param {YAHOO.widget.SliderThumb} t the slider thumb
264 initThumb: function(t
) {
269 * A YAHOO.widget.SliderThumb instance that we will use to
270 * reposition the thumb when the background is clicked
272 * @type YAHOO.widget.SliderThumb
275 t
.cacheBetweenDrags
= true;
277 // add handler for the handle onchange event
278 t
.onChange = function() {
279 self
.handleThumbChange();
282 if (t
._isHoriz
&& t
.xTicks
&& t
.xTicks
.length
) {
283 this.tickPause
= Math
.round(360 / t
.xTicks
.length
);
284 } else if (t
.yTicks
&& t
.yTicks
.length
) {
285 this.tickPause
= Math
.round(360 / t
.yTicks
.length
);
289 // delegate thumb methods
290 t
.onMouseDown = function () { return self
.focus(); };
291 t
.onMouseUp = function() { self
.thumbMouseUp(); };
292 t
.onDrag = function() { self
.fireEvents(true); };
293 t
.onAvailable = function() { return self
.setStartSliderState(); };
298 * Executed when the slider element is available
299 * @method onAvailable
301 onAvailable: function() {
302 var Event
= YAHOO
.util
.Event
;
303 Event
.on(this.id
, "keydown", this.handleKeyDown
, this, true);
304 Event
.on(this.id
, "keypress", this.handleKeyPress
, this, true);
308 * Executed when a keypress event happens with the control focused.
309 * Prevents the default behavior for navigation keys. The actual
310 * logic for moving the slider thumb in response to a key event
311 * happens in handleKeyDown.
312 * @param {Event} e the keypress event
314 handleKeyPress: function(e
) {
315 if (this.enableKeys
) {
316 var Event
= YAHOO
.util
.Event
;
317 var kc
= Event
.getCharCode(e
);
325 Event
.preventDefault(e
);
333 * Executed when a keydown event happens with the control focused.
334 * Updates the slider value and display when the keypress is an
335 * arrow key, home, or end as long as enableKeys is set to true.
336 * @param {Event} e the keydown event
338 handleKeyDown: function(e
) {
339 if (this.enableKeys
) {
340 var Event
= YAHOO
.util
.Event
;
342 var kc
= Event
.getCharCode(e
), t
=this.thumb
;
343 var h
=this.getXValue(),v
=this.getYValue();
346 var changeValue
= true;
350 case 0x25: h
-= this.keyIncrement
; break;
353 case 0x26: v
-= this.keyIncrement
; break;
356 case 0x27: h
+= this.keyIncrement
; break;
359 case 0x28: v
+= this.keyIncrement
; break;
362 case 0x24: h
= t
.leftConstraint
;
367 case 0x23: h
= t
.rightConstraint
;
368 v
= t
.bottomConstraint
;
371 default: changeValue
= false;
376 this.setRegionValue(h
, v
, true);
378 var newVal
= (t
._isHoriz
) ? h
: v
;
379 this.setValue(newVal
, true);
388 * Initialization that sets up the value offsets once the elements are ready
389 * @method setStartSliderState
391 setStartSliderState: function() {
394 this.setThumbCenterPoint();
397 * The basline position of the background element, used
398 * to determine if the background has moved since the last
400 * @property baselinePos
403 this.baselinePos
= YAHOO
.util
.Dom
.getXY(this.getEl());
405 this.thumb
.startOffset
= this.thumb
.getOffsetFromParent(this.baselinePos
);
407 if (this.thumb
._isRegion
) {
408 if (this.deferredSetRegionValue
) {
409 this.setRegionValue
.apply(this, this.deferredSetRegionValue
, true);
410 this.deferredSetRegionValue
= null;
412 this.setRegionValue(0, 0, true, true);
415 if (this.deferredSetValue
) {
416 this.setValue
.apply(this, this.deferredSetValue
, true);
417 this.deferredSetValue
= null;
419 this.setValue(0, true, true);
425 * When the thumb is available, we cache the centerpoint of the element so
426 * we can position the element correctly when the background is clicked
427 * @method setThumbCenterPoint
429 setThumbCenterPoint: function() {
431 var el
= this.thumb
.getEl();
435 * The center of the slider element is stored so we can
436 * place it in the correct position when the background is clicked.
437 * @property thumbCenterPoint
438 * @type {"x": int, "y": int}
440 this.thumbCenterPoint
= {
441 x
: parseInt(el
.offsetWidth
/2, 10),
442 y
: parseInt(el
.offsetHeight
/2, 10)
449 * Locks the slider, overrides YAHOO.util.DragDrop
458 * Unlocks the slider, overrides YAHOO.util.DragDrop
467 * Handles mouseup event on the slider background
468 * @method thumbMouseUp
471 thumbMouseUp: function() {
472 if (!this.isLocked() && !this.moveComplete
) {
479 * Returns a reference to this slider's thumb
481 * @return {SliderThumb} this slider's thumb
483 getThumb: function() {
488 * Try to focus the element when clicked so we can add
489 * accessibility features
494 this.valueChangeSource
= this.SOURCE_UI_EVENT
;
496 // Focus the background element if possible
497 var el
= this.getEl();
503 // Prevent permission denied unhandled exception in FF that can
504 // happen when setting focus while another element is handling
505 // the blur. @TODO this is still writing to the error log
506 // (unhandled error) in FF1.5 with strict error checking on.
512 if (this.isLocked()) {
521 * Event that fires when the value of the slider has changed
523 * @param {int} firstOffset the number of pixels the thumb has moved
524 * from its start position. Normal horizontal and vertical sliders will only
525 * have the firstOffset. Regions will have both, the first is the horizontal
526 * offset, the second the vertical.
527 * @param {int} secondOffset the y offset for region sliders
528 * @deprecated use instance.subscribe("change") instead
530 onChange: function (firstOffset
, secondOffset
) {
535 * Event that fires when the at the beginning of the slider thumb move
536 * @method onSlideStart
537 * @deprecated use instance.subscribe("slideStart") instead
539 onSlideStart: function () {
544 * Event that fires at the end of a slider thumb move
545 * @method onSliderEnd
546 * @deprecated use instance.subscribe("slideEnd") instead
548 onSlideEnd: function () {
553 * Returns the slider's thumb offset from the start position
555 * @return {int} the current value
557 getValue: function () {
558 return this.thumb
.getValue();
562 * Returns the slider's thumb X offset from the start position
564 * @return {int} the current horizontal offset
566 getXValue: function () {
567 return this.thumb
.getXValue();
571 * Returns the slider's thumb Y offset from the start position
573 * @return {int} the current vertical offset
575 getYValue: function () {
576 return this.thumb
.getYValue();
580 * Internal handler for the slider thumb's onChange event
581 * @method handleThumbChange
584 handleThumbChange: function () {
587 t
.onChange(t
.getXValue(), t
.getYValue());
588 this.fireEvent("change", { x
: t
.getXValue(), y
: t
.getYValue() } );
590 t
.onChange(t
.getValue());
591 this.fireEvent("change", t
.getValue());
597 * Provides a way to set the value of the slider in code.
599 * @param {int} newOffset the number of pixels the thumb should be
600 * positioned away from the initial start point
601 * @param {boolean} skipAnim set to true to disable the animation
602 * for this move action (but not others).
603 * @param {boolean} force ignore the locked setting and set value anyway
604 * @return {boolean} true if the move was performed, false if it failed
606 setValue: function(newOffset
, skipAnim
, force
) {
608 this.valueChangeSource
= this.SOURCE_SET_VALUE
;
610 if (!this.thumb
.available
) {
611 this.deferredSetValue
= arguments
;
615 if (this.isLocked() && !force
) {
619 if ( isNaN(newOffset
) ) {
625 this.verifyOffset(true);
628 } else if (t
._isHoriz
) {
630 // this.fireEvent("slideStart");
631 newX
= t
.initPageX
+ newOffset
+ this.thumbCenterPoint
.x
;
632 this.moveThumb(newX
, t
.initPageY
, skipAnim
);
635 // this.fireEvent("slideStart");
636 newY
= t
.initPageY
+ newOffset
+ this.thumbCenterPoint
.y
;
637 this.moveThumb(t
.initPageX
, newY
, skipAnim
);
644 * Provides a way to set the value of the region slider in code.
645 * @method setRegionValue
646 * @param {int} newOffset the number of pixels the thumb should be
647 * positioned away from the initial start point (x axis for region)
648 * @param {int} newOffset2 the number of pixels the thumb should be
649 * positioned away from the initial start point (y axis for region)
650 * @param {boolean} skipAnim set to true to disable the animation
651 * for this move action (but not others).
652 * @param {boolean} force ignore the locked setting and set value anyway
653 * @return {boolean} true if the move was performed, false if it failed
655 setRegionValue: function(newOffset
, newOffset2
, skipAnim
, force
) {
657 this.valueChangeSource
= this.SOURCE_SET_VALUE
;
659 if (!this.thumb
.available
) {
660 this.deferredSetRegionValue
= arguments
;
664 if (this.isLocked() && !force
) {
668 if ( isNaN(newOffset
) ) {
675 var newX
= t
.initPageX
+ newOffset
+ this.thumbCenterPoint
.x
;
676 var newY
= t
.initPageY
+ newOffset2
+ this.thumbCenterPoint
.y
;
677 this.moveThumb(newX
, newY
, skipAnim
);
686 * Checks the background position element position. If it has moved from the
687 * baseline position, the constraints for the thumb are reset
688 * @param checkPos {boolean} check the position instead of using cached value
689 * @method verifyOffset
690 * @return {boolean} True if the offset is the same as the baseline.
692 verifyOffset: function(checkPos
) {
694 var newPos
= YAHOO
.util
.Dom
.getXY(this.getEl());
695 //var newPos = [this.initPageX, this.initPageY];
698 if (newPos
[0] != this.baselinePos
[0] || newPos
[1] != this.baselinePos
[1]) {
699 this.thumb
.resetConstraints();
700 this.baselinePos
= newPos
;
708 * Move the associated slider moved to a timeout to try to get around the
709 * mousedown stealing moz does when I move the slider element between the
710 * cursor and the background during the mouseup event
712 * @param {int} x the X coordinate of the click
713 * @param {int} y the Y coordinate of the click
714 * @param {boolean} skipAnim don't animate if the move happend onDrag
717 moveThumb: function(x
, y
, skipAnim
) {
728 // this.verifyOffset();
730 t
.setDelta(this.thumbCenterPoint
.x
, this.thumbCenterPoint
.y
);
732 var _p
= t
.getTargetCoord(x
, y
);
733 var p
= [_p
.x
, _p
.y
];
736 this.fireEvent("slideStart");
738 if (this.animate
&& YAHOO
.widget
.Slider
.ANIM_AVAIL
&& t
._graduated
&& !skipAnim
) {
739 // this.thumb._animating = true;
742 // cache the current thumb pos
743 this.curCoord
= YAHOO
.util
.Dom
.getXY(this.thumb
.getEl());
745 setTimeout( function() { self
.moveOneTick(p
); }, this.tickPause
);
747 } else if (this.animate
&& YAHOO
.widget
.Slider
.ANIM_AVAIL
&& !skipAnim
) {
749 // this.thumb._animating = true;
752 var oAnim
= new YAHOO
.util
.Motion(
753 t
.id
, { points
: { to
: p
} },
754 this.animationDuration
,
755 YAHOO
.util
.Easing
.easeOut
);
757 oAnim
.onComplete
.subscribe( function() { self
.endMove(); } );
760 t
.setDragElPos(x
, y
);
761 // this.fireEvents();
767 * Move the slider one tick mark towards its final coordinate. Used
768 * for the animation when tick marks are defined
769 * @method moveOneTick
770 * @param {int[]} the destination coordinate
773 moveOneTick: function(finalCoord
) {
775 var t
= this.thumb
, tmp
;
778 // redundant call to getXY since we set the position most of time prior
779 // to getting here. Moved to this.curCoord
780 //var curCoord = YAHOO.util.Dom.getXY(t.getEl());
782 // alignElWithMouse caches position in lastPageX, lastPageY .. doesn't work
783 //var curCoord = [this.lastPageX, this.lastPageY];
785 // var thresh = Math.min(t.tickSize + (Math.floor(t.tickSize/2)), 10);
787 // var thresh = t.tickSize + (Math.floor(t.tickSize/2));
789 var nextCoord
= null;
792 nextCoord
= this._getNextX(this.curCoord
, finalCoord
);
793 var tmpX
= (nextCoord
) ? nextCoord
[0] : this.curCoord
[0];
794 nextCoord
= this._getNextY([tmpX
, this.curCoord
[1]], finalCoord
);
796 } else if (t
._isHoriz
) {
797 nextCoord
= this._getNextX(this.curCoord
, finalCoord
);
799 nextCoord
= this._getNextY(this.curCoord
, finalCoord
);
805 // cache the position
806 this.curCoord
= nextCoord
;
808 // move to the next coord
809 // YAHOO.util.Dom.setXY(t.getEl(), nextCoord);
811 // var el = t.getEl();
812 // YAHOO.util.Dom.setStyle(el, "left", (nextCoord[0] + this.thumb.deltaSetXY[0]) + "px");
813 // YAHOO.util.Dom.setStyle(el, "top", (nextCoord[1] + this.thumb.deltaSetXY[1]) + "px");
815 this.thumb
.alignElWithMouse(t
.getEl(), nextCoord
[0], nextCoord
[1]);
817 // check if we are in the final position, if not make a recursive call
818 if (!(nextCoord
[0] == finalCoord
[0] && nextCoord
[1] == finalCoord
[1])) {
820 setTimeout(function() { self
.moveOneTick(finalCoord
); },
829 //this.tickPause = Math.round(this.tickPause/2);
833 * Returns the next X tick value based on the current coord and the target coord.
837 _getNextX: function(curCoord
, finalCoord
) {
841 var nextCoord
= null;
842 if (curCoord
[0] > finalCoord
[0]) {
843 thresh
= t
.tickSize
- this.thumbCenterPoint
.x
;
844 tmp
= t
.getTargetCoord( curCoord
[0] - thresh
, curCoord
[1] );
845 nextCoord
= [tmp
.x
, tmp
.y
];
846 } else if (curCoord
[0] < finalCoord
[0]) {
847 thresh
= t
.tickSize
+ this.thumbCenterPoint
.x
;
848 tmp
= t
.getTargetCoord( curCoord
[0] + thresh
, curCoord
[1] );
849 nextCoord
= [tmp
.x
, tmp
.y
];
858 * Returns the next Y tick value based on the current coord and the target coord.
862 _getNextY: function(curCoord
, finalCoord
) {
866 var nextCoord
= null;
868 if (curCoord
[1] > finalCoord
[1]) {
869 thresh
= t
.tickSize
- this.thumbCenterPoint
.y
;
870 tmp
= t
.getTargetCoord( curCoord
[0], curCoord
[1] - thresh
);
871 nextCoord
= [tmp
.x
, tmp
.y
];
872 } else if (curCoord
[1] < finalCoord
[1]) {
873 thresh
= t
.tickSize
+ this.thumbCenterPoint
.y
;
874 tmp
= t
.getTargetCoord( curCoord
[0], curCoord
[1] + thresh
);
875 nextCoord
= [tmp
.x
, tmp
.y
];
884 * Resets the constraints before moving the thumb.
885 * @method b4MouseDown
888 b4MouseDown: function(e
) {
889 this.thumb
.autoOffset();
890 this.thumb
.resetConstraints();
895 * Handles the mousedown event for the slider background
896 * @method onMouseDown
899 onMouseDown: function(e
) {
900 // this.resetConstraints(true);
901 // this.thumb.resetConstraints(true);
903 if (! this.isLocked() && this.backgroundEnabled
) {
904 var x
= YAHOO
.util
.Event
.getPageX(e
);
905 var y
= YAHOO
.util
.Event
.getPageY(e
);
908 this.moveThumb(x
, y
);
914 * Handles the onDrag event for the slider background
918 onDrag: function(e
) {
919 if (! this.isLocked()) {
920 var x
= YAHOO
.util
.Event
.getPageX(e
);
921 var y
= YAHOO
.util
.Event
.getPageY(e
);
922 this.moveThumb(x
, y
, true);
927 * Fired when the slider movement ends
931 endMove: function () {
932 // this._animating = false;
934 this.moveComplete
= true;
939 * Fires the change event if the value has been changed. Ignored if we are in
940 * the middle of an animation as the event will fire when the animation is
943 * @param {boolean} thumbEvent set to true if this event is fired from an event
944 * that occurred on the thumb. If it is, the state of the
945 * thumb dd object should be correct. Otherwise, the event
946 * originated on the background, so the thumb state needs to
947 * be refreshed before proceeding.
950 fireEvents: function (thumbEvent
) {
958 if (! this.isLocked()) {
960 var newX
= t
.getXValue();
961 var newY
= t
.getYValue();
963 if (newX
!= this.previousX
|| newY
!= this.previousY
) {
964 this.onChange(newX
, newY
);
965 this.fireEvent("change", { x
: newX
, y
: newY
});
968 this.previousX
= newX
;
969 this.previousY
= newY
;
972 var newVal
= t
.getValue();
973 if (newVal
!= this.previousVal
) {
974 this.onChange( newVal
);
975 this.fireEvent("change", newVal
);
977 this.previousVal
= newVal
;
980 if (this.moveComplete
) {
982 this.fireEvent("slideEnd");
983 this.moveComplete
= false;
992 * @return {string} string representation of the instance
994 toString: function () {
995 return ("Slider (" + this.type
+") " + this.id
);
1000 YAHOO
.augment(YAHOO
.widget
.Slider
, YAHOO
.util
.EventProvider
);
1003 * A drag and drop implementation to be used as the thumb of a slider.
1004 * @class SliderThumb
1005 * @extends YAHOO.util.DD
1007 * @param {String} id the id of the slider html element
1008 * @param {String} sGroup the group of related DragDrop items
1009 * @param {int} iLeft the number of pixels the element can move left
1010 * @param {int} iRight the number of pixels the element can move right
1011 * @param {int} iUp the number of pixels the element can move up
1012 * @param {int} iDown the number of pixels the element can move down
1013 * @param {int} iTickSize optional parameter for specifying that the element
1014 * should move a certain number pixels at a time.
1016 YAHOO
.widget
.SliderThumb = function(id
, sGroup
, iLeft
, iRight
, iUp
, iDown
, iTickSize
) {
1019 //this.init(id, sGroup);
1020 YAHOO
.widget
.SliderThumb
.superclass
.constructor.call(this, id
, sGroup
);
1023 * The id of the thumbs parent HTML element (the slider background
1025 * @property parentElId
1028 this.parentElId
= sGroup
;
1032 //this.removeInvalidHandleType("A");
1036 * Overrides the isTarget property in YAHOO.util.DragDrop
1037 * @property isTarget
1040 this.isTarget
= false;
1043 * The tick size for this slider
1044 * @property tickSize
1048 this.tickSize
= iTickSize
;
1051 * Informs the drag and drop util that the offsets should remain when
1052 * resetting the constraints. This preserves the slider value when
1053 * the constraints are reset
1054 * @property maintainOffset
1058 this.maintainOffset
= true;
1060 this.initSlider(iLeft
, iRight
, iUp
, iDown
, iTickSize
);
1063 * Turns off the autoscroll feature in drag and drop
1067 this.scroll
= false;
1071 YAHOO
.extend(YAHOO
.widget
.SliderThumb
, YAHOO
.util
.DD
, {
1074 * The (X and Y) difference between the thumb location and its parent
1075 * (the slider background) when the control is instantiated.
1076 * @property startOffset
1082 * Flag used to figure out if this is a horizontal or vertical slider
1083 * @property _isHoriz
1090 * Cache the last value so we can check for change
1091 * @property _prevVal
1098 * The slider is _graduated if there is a tick interval defined
1099 * @property _graduated
1107 * Returns the difference between the location of the thumb and its parent.
1108 * @method getOffsetFromParent
1109 * @param {[int, int]} parentPos Optionally accepts the position of the parent
1112 getOffsetFromParent0: function(parentPos
) {
1113 var myPos
= YAHOO
.util
.Dom
.getXY(this.getEl());
1114 var ppos
= parentPos
|| YAHOO
.util
.Dom
.getXY(this.parentElId
);
1116 return [ (myPos
[0] - ppos
[0]), (myPos
[1] - ppos
[1]) ];
1119 getOffsetFromParent: function(parentPos
) {
1121 var el
= this.getEl();
1123 if (!this.deltaOffset
) {
1125 var myPos
= YAHOO
.util
.Dom
.getXY(el
);
1126 var ppos
= parentPos
|| YAHOO
.util
.Dom
.getXY(this.parentElId
);
1128 var newOffset
= [ (myPos
[0] - ppos
[0]), (myPos
[1] - ppos
[1]) ];
1130 var l
= parseInt( YAHOO
.util
.Dom
.getStyle(el
, "left"), 10 );
1131 var t
= parseInt( YAHOO
.util
.Dom
.getStyle(el
, "top" ), 10 );
1133 var deltaX
= l
- newOffset
[0];
1134 var deltaY
= t
- newOffset
[1];
1136 if (isNaN(deltaX
) || isNaN(deltaY
)) {
1138 this.deltaOffset
= [deltaX
, deltaY
];
1142 var newLeft
= parseInt( YAHOO
.util
.Dom
.getStyle(el
, "left"), 10 );
1143 var newTop
= parseInt( YAHOO
.util
.Dom
.getStyle(el
, "top" ), 10 );
1145 newOffset
= [newLeft
+ this.deltaOffset
[0], newTop
+ this.deltaOffset
[1]];
1150 //return [ (myPos[0] - ppos[0]), (myPos[1] - ppos[1]) ];
1154 * Set up the slider, must be called in the constructor of all subclasses
1155 * @method initSlider
1156 * @param {int} iLeft the number of pixels the element can move left
1157 * @param {int} iRight the number of pixels the element can move right
1158 * @param {int} iUp the number of pixels the element can move up
1159 * @param {int} iDown the number of pixels the element can move down
1160 * @param {int} iTickSize the width of the tick interval.
1162 initSlider: function (iLeft
, iRight
, iUp
, iDown
, iTickSize
) {
1165 //document these. new for 0.12.1
1166 this.initLeft
= iLeft
;
1167 this.initRight
= iRight
;
1169 this.initDown
= iDown
;
1171 this.setXConstraint(iLeft
, iRight
, iTickSize
);
1172 this.setYConstraint(iUp
, iDown
, iTickSize
);
1174 if (iTickSize
&& iTickSize
> 1) {
1175 this._graduated
= true;
1178 this._isHoriz
= (iLeft
|| iRight
);
1179 this._isVert
= (iUp
|| iDown
);
1180 this._isRegion
= (this._isHoriz
&& this._isVert
);
1185 * Clear's the slider's ticks
1186 * @method clearTicks
1188 clearTicks: function () {
1189 YAHOO
.widget
.SliderThumb
.superclass
.clearTicks
.call(this);
1191 this._graduated
= false;
1196 * Gets the current offset from the element's start position in
1199 * @return {int} the number of pixels (positive or negative) the
1200 * slider has moved from the start position.
1202 getValue: function () {
1203 if (!this.available
) { return 0; }
1204 var val
= (this._isHoriz
) ? this.getXValue() : this.getYValue();
1209 * Gets the current X offset from the element's start position in
1212 * @return {int} the number of pixels (positive or negative) the
1213 * slider has moved horizontally from the start position.
1215 getXValue: function () {
1216 if (!this.available
) { return 0; }
1217 var newOffset
= this.getOffsetFromParent();
1218 return (newOffset
[0] - this.startOffset
[0]);
1222 * Gets the current Y offset from the element's start position in
1225 * @return {int} the number of pixels (positive or negative) the
1226 * slider has moved vertically from the start position.
1228 getYValue: function () {
1229 if (!this.available
) { return 0; }
1230 var newOffset
= this.getOffsetFromParent();
1231 return (newOffset
[1] - this.startOffset
[1]);
1237 * @return {string} string representation of the instance
1239 toString: function () {
1240 return "SliderThumb " + this.id
;
1244 * The onchange event for the handle/thumb is delegated to the YAHOO.widget.Slider
1245 * instance it belongs to.
1249 onChange: function (x
, y
) {
1254 if ("undefined" == typeof YAHOO
.util
.Anim
) {
1255 YAHOO
.widget
.Slider
.ANIM_AVAIL
= false;
1258 YAHOO
.register("slider", YAHOO
.widget
.Slider
, {version
: "2.3.0", build
: "442"});