lib/yui/slider/slider.js

   1 /*
   2 Copyright (c) 2007, Yahoo! Inc. All rights reserved.
   3 Code licensed under the BSD License:
   4 http://developer.yahoo.net/yui/license.txt
   5 version: 2.3.0
   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
  22 /**
  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
  27  * clicked.
  28  *
  29  * @class Slider
  30  * @extends YAHOO.util.DragDrop
  31  * @uses YAHOO.util.EventProvider
  32  * @constructor
  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)
  37  */
  38 YAHOO.widget.Slider = function(sElementId, sGroup, oThumb, sType) {
  39     if (sElementId) {
  40         this.init(sElementId, sGroup, true);
  41         this.initSlider(sType);
  42         this.initThumb(oThumb);
  43     }
  44 };
  45
  46 /**
  47  * Factory method for creating a horizontal slider
  48  * @method YAHOO.widget.Slider.getHorizSlider
  49  * @static
  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
  57  */
  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");
  63 };
  64
  65 /**
  66  * Factory method for creating a vertical slider
  67  * @method YAHOO.widget.Slider.getVertSlider
  68  * @static
  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
  76  */
  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");
  82 };
  83
  84 /**
  85  * Factory method for creating a slider region like the one in the color
  86  * picker example
  87  * @method YAHOO.widget.Slider.getSliderRegion
  88  * @static
  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
  98  */
  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");
 104 };
 105
 106 /**
 107  * By default, animation is available if the animation library is detected.
 108  * @property YAHOO.widget.Slider.ANIM_AVAIL
 109  * @static
 110  * @type boolean
 111  */
 112 YAHOO.widget.Slider.ANIM_AVAIL = true;
 113
 114
 115 YAHOO.extend(YAHOO.widget.Slider, YAHOO.util.DragDrop, {
 116
 117     /**
 118      * Initializes the slider.  Executed in the constructor
 119      * @method initSlider
 120      * @param {string} sType the type of slider (horiz, vert, region)
 121      */
 122     initSlider: function(sType) {
 123
 124         /**
 125          * The type of the slider (horiz, vert, region)
 126          * @property type
 127          * @type string
 128          */
 129         this.type = sType;
 130
 131         //this.removeInvalidHandleType("A");
 132
 133
 134         /**
 135          * Event the fires when the value of the control changes.  If
 136          * the control is animated the event will fire every point
 137          * along the way.
 138          * @event change
 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)
 143          */
 144         this.createEvent("change", this);
 145
 146         /**
 147          * Event that fires at the beginning of a slider thumb move.
 148          * @event slideStart
 149          */
 150         this.createEvent("slideStart", this);
 151
 152         /**
 153          * Event that fires at the end of a slider thumb move
 154          * @event slideEnd
 155          */
 156         this.createEvent("slideEnd", this);
 157
 158         /**
 159          * Overrides the isTarget property in YAHOO.util.DragDrop
 160          * @property isTarget
 161          * @private
 162          */
 163         this.isTarget = false;
 164
 165         /**
 166          * Flag that determines if the thumb will animate when moved
 167          * @property animate
 168          * @type boolean
 169          */
 170         this.animate = YAHOO.widget.Slider.ANIM_AVAIL;
 171
 172         /**
 173          * Set to false to disable a background click thumb move
 174          * @property backgroundEnabled
 175          * @type boolean
 176          */
 177         this.backgroundEnabled = true;
 178
 179         /**
 180          * Adjustment factor for tick animation, the more ticks, the
 181          * faster the animation (by default)
 182          * @property tickPause
 183          * @type int
 184          */
 185         this.tickPause = 40;
 186
 187         /**
 188          * Enables the arrow, home and end keys, defaults to true.
 189          * @property enableKeys
 190          * @type boolean
 191          */
 192         this.enableKeys = true;
 193
 194         /**
 195          * Specifies the number of pixels the arrow keys will move the slider.
 196          * Default is 25.
 197          * @property keyIncrement
 198          * @type int
 199          */
 200         this.keyIncrement = 20;
 201
 202         /**
 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
 211          * never see it.
 212          *
 213          * @property moveComplete
 214          * @type Boolean
 215          * @deprecated use the slideEnd event instead
 216          */
 217         this.moveComplete = true;
 218
 219         /**
 220          * If animation is configured, specifies the length of the animation
 221          * in seconds.
 222          * @property animationDuration
 223          * @type int
 224          * @default 0.2
 225          */
 226         this.animationDuration = 0.2;
 227
 228         /**
 229          * Constant for valueChangeSource, indicating that the user clicked or
 230          * dragged the slider to change the value.
 231          * @property SOURCE_UI_EVENT
 232          * @final
 233          * @default 1
 234          */
 235         this.SOURCE_UI_EVENT = 1;
 236
 237         /**
 238          * Constant for valueChangeSource, indicating that the value was altered
 239          * by a programmatic call to setValue/setRegionValue.
 240          * @property SOURCE_SET_VALUE
 241          * @final
 242          * @default 2
 243          */
 244         this.SOURCE_SET_VALUE = 2;
 245
 246         /**
 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
 253          * @type int
 254          * @since 2.3.0
 255          */
 256         this.valueChangeSource = 0;
 257     },
 258
 259     /**
 260      * Initializes the slider's thumb. Executed in the constructor.
 261      * @method initThumb
 262      * @param {YAHOO.widget.SliderThumb} t the slider thumb
 263      */
 264     initThumb: function(t) {
 265
 266         var self = this;
 267
 268         /**
 269          * A YAHOO.widget.SliderThumb instance that we will use to
 270          * reposition the thumb when the background is clicked
 271          * @property thumb
 272          * @type YAHOO.widget.SliderThumb
 273          */
 274         this.thumb = t;
 275         t.cacheBetweenDrags = true;
 276
 277         // add handler for the handle onchange event
 278         t.onChange = function() {
 279             self.handleThumbChange();
 280         };
 281
 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);
 286         }
 287
 288
 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(); };
 294
 295     },
 296
 297     /**
 298      * Executed when the slider element is available
 299      * @method onAvailable
 300      */
 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);
 305     },
 306
 307     /**
 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
 313      */
 314     handleKeyPress: function(e) {
 315         if (this.enableKeys) {
 316             var Event = YAHOO.util.Event;
 317             var kc = Event.getCharCode(e);
 318             switch (kc) {
 319                 case 0x25: // left
 320                 case 0x26: // up
 321                 case 0x27: // right
 322                 case 0x28: // down
 323                 case 0x24: // home
 324                 case 0x23: // end
 325                     Event.preventDefault(e);
 326                     break;
 327                 default:
 328             }
 329         }
 330     },
 331
 332     /**
 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
 337      */
 338     handleKeyDown: function(e) {
 339         if (this.enableKeys) {
 340             var Event = YAHOO.util.Event;
 341
 342             var kc = Event.getCharCode(e), t=this.thumb;
 343             var h=this.getXValue(),v=this.getYValue();
 344
 345             var horiz = false;
 346             var changeValue = true;
 347             switch (kc) {
 348
 349                 // left
 350                 case 0x25: h -= this.keyIncrement; break;
 351
 352                 // up
 353                 case 0x26: v -= this.keyIncrement; break;
 354
 355                 // right
 356                 case 0x27: h += this.keyIncrement; break;
 357
 358                 // down
 359                 case 0x28: v += this.keyIncrement; break;
 360
 361                 // home
 362                 case 0x24: h = t.leftConstraint;
 363                            v = t.topConstraint;
 364                            break;
 365
 366                 // end
 367                 case 0x23: h = t.rightConstraint;
 368                            v = t.bottomConstraint;
 369                            break;
 370
 371                 default:   changeValue = false;
 372             }
 373
 374             if (changeValue) {
 375                 if (t._isRegion) {
 376                     this.setRegionValue(h, v, true);
 377                 } else {
 378                     var newVal = (t._isHoriz) ? h : v;
 379                     this.setValue(newVal, true);
 380                 }
 381                 Event.stopEvent(e);
 382             }
 383
 384         }
 385     },
 386
 387     /**
 388      * Initialization that sets up the value offsets once the elements are ready
 389      * @method setStartSliderState
 390      */
 391     setStartSliderState: function() {
 392
 393
 394         this.setThumbCenterPoint();
 395
 396         /**
 397          * The basline position of the background element, used
 398          * to determine if the background has moved since the last
 399          * operation.
 400          * @property baselinePos
 401          * @type [int, int]
 402          */
 403         this.baselinePos = YAHOO.util.Dom.getXY(this.getEl());
 404
 405         this.thumb.startOffset = this.thumb.getOffsetFromParent(this.baselinePos);
 406
 407         if (this.thumb._isRegion) {
 408             if (this.deferredSetRegionValue) {
 409                 this.setRegionValue.apply(this, this.deferredSetRegionValue, true);
 410                 this.deferredSetRegionValue = null;
 411             } else {
 412                 this.setRegionValue(0, 0, true, true);
 413             }
 414         } else {
 415             if (this.deferredSetValue) {
 416                 this.setValue.apply(this, this.deferredSetValue, true);
 417                 this.deferredSetValue = null;
 418             } else {
 419                 this.setValue(0, true, true);
 420             }
 421         }
 422     },
 423
 424     /**
 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
 428      */
 429     setThumbCenterPoint: function() {
 430
 431         var el = this.thumb.getEl();
 432
 433         if (el) {
 434             /**
 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}
 439              */
 440             this.thumbCenterPoint = {
 441                     x: parseInt(el.offsetWidth/2, 10),
 442                     y: parseInt(el.offsetHeight/2, 10)
 443             };
 444         }
 445
 446     },
 447
 448     /**
 449      * Locks the slider, overrides YAHOO.util.DragDrop
 450      * @method lock
 451      */
 452     lock: function() {
 453         this.thumb.lock();
 454         this.locked = true;
 455     },
 456
 457     /**
 458      * Unlocks the slider, overrides YAHOO.util.DragDrop
 459      * @method unlock
 460      */
 461     unlock: function() {
 462         this.thumb.unlock();
 463         this.locked = false;
 464     },
 465
 466     /**
 467      * Handles mouseup event on the slider background
 468      * @method thumbMouseUp
 469      * @private
 470      */
 471     thumbMouseUp: function() {
 472         if (!this.isLocked() && !this.moveComplete) {
 473             this.endMove();
 474         }
 475
 476     },
 477
 478     /**
 479      * Returns a reference to this slider's thumb
 480      * @method getThumb
 481      * @return {SliderThumb} this slider's thumb
 482      */
 483     getThumb: function() {
 484         return this.thumb;
 485     },
 486
 487     /**
 488      * Try to focus the element when clicked so we can add
 489      * accessibility features
 490      * @method focus
 491      * @private
 492      */
 493     focus: function() {
 494         this.valueChangeSource = this.SOURCE_UI_EVENT;
 495
 496         // Focus the background element if possible
 497         var el = this.getEl();
 498
 499         if (el.focus) {
 500             try {
 501                 el.focus();
 502             } catch(e) {
 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.
 507             }
 508         }
 509
 510         this.verifyOffset();
 511
 512         if (this.isLocked()) {
 513             return false;
 514         } else {
 515             this.onSlideStart();
 516             return true;
 517         }
 518     },
 519
 520     /**
 521      * Event that fires when the value of the slider has changed
 522      * @method onChange
 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
 529      */
 530     onChange: function (firstOffset, secondOffset) {
 531         /* override me */
 532     },
 533
 534     /**
 535      * Event that fires when the at the beginning of the slider thumb move
 536      * @method onSlideStart
 537      * @deprecated use instance.subscribe("slideStart") instead
 538      */
 539     onSlideStart: function () {
 540         /* override me */
 541     },
 542
 543     /**
 544      * Event that fires at the end of a slider thumb move
 545      * @method onSliderEnd
 546      * @deprecated use instance.subscribe("slideEnd") instead
 547      */
 548     onSlideEnd: function () {
 549         /* override me */
 550     },
 551
 552     /**
 553      * Returns the slider's thumb offset from the start position
 554      * @method getValue
 555      * @return {int} the current value
 556      */
 557     getValue: function () {
 558         return this.thumb.getValue();
 559     },
 560
 561     /**
 562      * Returns the slider's thumb X offset from the start position
 563      * @method getXValue
 564      * @return {int} the current horizontal offset
 565      */
 566     getXValue: function () {
 567         return this.thumb.getXValue();
 568     },
 569
 570     /**
 571      * Returns the slider's thumb Y offset from the start position
 572      * @method getYValue
 573      * @return {int} the current vertical offset
 574      */
 575     getYValue: function () {
 576         return this.thumb.getYValue();
 577     },
 578
 579     /**
 580      * Internal handler for the slider thumb's onChange event
 581      * @method handleThumbChange
 582      * @private
 583      */
 584     handleThumbChange: function () {
 585         var t = this.thumb;
 586         if (t._isRegion) {
 587             t.onChange(t.getXValue(), t.getYValue());
 588             this.fireEvent("change", { x: t.getXValue(), y: t.getYValue() } );
 589         } else {
 590             t.onChange(t.getValue());
 591             this.fireEvent("change", t.getValue());
 592         }
 593
 594     },
 595
 596     /**
 597      * Provides a way to set the value of the slider in code.
 598      * @method setValue
 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
 605      */
 606     setValue: function(newOffset, skipAnim, force) {
 607
 608         this.valueChangeSource = this.SOURCE_SET_VALUE;
 609
 610         if (!this.thumb.available) {
 611             this.deferredSetValue = arguments;
 612             return false;
 613         }
 614
 615         if (this.isLocked() && !force) {
 616             return false;
 617         }
 618
 619         if ( isNaN(newOffset) ) {
 620             return false;
 621         }
 622
 623         var t = this.thumb;
 624         var newX, newY;
 625         this.verifyOffset(true);
 626         if (t._isRegion) {
 627             return false;
 628         } else if (t._isHoriz) {
 629             this.onSlideStart();
 630             // this.fireEvent("slideStart");
 631             newX = t.initPageX + newOffset + this.thumbCenterPoint.x;
 632             this.moveThumb(newX, t.initPageY, skipAnim);
 633         } else {
 634             this.onSlideStart();
 635             // this.fireEvent("slideStart");
 636             newY = t.initPageY + newOffset + this.thumbCenterPoint.y;
 637             this.moveThumb(t.initPageX, newY, skipAnim);
 638         }
 639
 640         return true;
 641     },
 642
 643     /**
 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
 654      */
 655     setRegionValue: function(newOffset, newOffset2, skipAnim, force) {
 656
 657         this.valueChangeSource = this.SOURCE_SET_VALUE;
 658
 659         if (!this.thumb.available) {
 660             this.deferredSetRegionValue = arguments;
 661             return false;
 662         }
 663
 664         if (this.isLocked() && !force) {
 665             return false;
 666         }
 667
 668         if ( isNaN(newOffset) ) {
 669             return false;
 670         }
 671
 672         var t = this.thumb;
 673         if (t._isRegion) {
 674             this.onSlideStart();
 675             var newX = t.initPageX + newOffset + this.thumbCenterPoint.x;
 676             var newY = t.initPageY + newOffset2 + this.thumbCenterPoint.y;
 677             this.moveThumb(newX, newY, skipAnim);
 678             return true;
 679         }
 680
 681         return false;
 682
 683     },
 684
 685     /**
 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.
 691      */
 692     verifyOffset: function(checkPos) {
 693
 694         var newPos = YAHOO.util.Dom.getXY(this.getEl());
 695         //var newPos = [this.initPageX, this.initPageY];
 696
 697
 698         if (newPos[0] != this.baselinePos[0] || newPos[1] != this.baselinePos[1]) {
 699             this.thumb.resetConstraints();
 700             this.baselinePos = newPos;
 701             return false;
 702         }
 703
 704         return true;
 705     },
 706
 707     /**
 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
 711      * @method moveThumb
 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
 715      * @private
 716      */
 717     moveThumb: function(x, y, skipAnim) {
 718
 719
 720         var t = this.thumb;
 721         var self = this;
 722
 723         if (!t.available) {
 724             return;
 725         }
 726
 727
 728         // this.verifyOffset();
 729
 730         t.setDelta(this.thumbCenterPoint.x, this.thumbCenterPoint.y);
 731
 732         var _p = t.getTargetCoord(x, y);
 733         var p = [_p.x, _p.y];
 734
 735
 736         this.fireEvent("slideStart");
 737
 738         if (this.animate && YAHOO.widget.Slider.ANIM_AVAIL && t._graduated && !skipAnim) {
 739             // this.thumb._animating = true;
 740             this.lock();
 741
 742             // cache the current thumb pos
 743             this.curCoord = YAHOO.util.Dom.getXY(this.thumb.getEl());
 744
 745             setTimeout( function() { self.moveOneTick(p); }, this.tickPause );
 746
 747         } else if (this.animate && YAHOO.widget.Slider.ANIM_AVAIL && !skipAnim) {
 748
 749             // this.thumb._animating = true;
 750             this.lock();
 751
 752             var oAnim = new YAHOO.util.Motion(
 753                     t.id, { points: { to: p } },
 754                     this.animationDuration,
 755                     YAHOO.util.Easing.easeOut );
 756
 757             oAnim.onComplete.subscribe( function() { self.endMove(); } );
 758             oAnim.animate();
 759         } else {
 760             t.setDragElPos(x, y);
 761             // this.fireEvents();
 762             this.endMove();
 763         }
 764     },
 765
 766     /**
 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
 771      * @private
 772      */
 773     moveOneTick: function(finalCoord) {
 774
 775         var t = this.thumb, tmp;
 776
 777
 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());
 781
 782         // alignElWithMouse caches position in lastPageX, lastPageY .. doesn't work
 783         //var curCoord = [this.lastPageX, this.lastPageY];
 784
 785         // var thresh = Math.min(t.tickSize + (Math.floor(t.tickSize/2)), 10);
 786         // var thresh = 10;
 787         // var thresh = t.tickSize + (Math.floor(t.tickSize/2));
 788
 789         var nextCoord = null;
 790
 791         if (t._isRegion) {
 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);
 795
 796         } else if (t._isHoriz) {
 797             nextCoord = this._getNextX(this.curCoord, finalCoord);
 798         } else {
 799             nextCoord = this._getNextY(this.curCoord, finalCoord);
 800         }
 801
 802
 803         if (nextCoord) {
 804
 805             // cache the position
 806             this.curCoord = nextCoord;
 807
 808             // move to the next coord
 809             // YAHOO.util.Dom.setXY(t.getEl(), nextCoord);
 810
 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");
 814
 815             this.thumb.alignElWithMouse(t.getEl(), nextCoord[0], nextCoord[1]);
 816
 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])) {
 819                 var self = this;
 820                 setTimeout(function() { self.moveOneTick(finalCoord); },
 821                         this.tickPause);
 822             } else {
 823                 this.endMove();
 824             }
 825         } else {
 826             this.endMove();
 827         }
 828
 829         //this.tickPause = Math.round(this.tickPause/2);
 830     },
 831
 832     /**
 833      * Returns the next X tick value based on the current coord and the target coord.
 834      * @method _getNextX
 835      * @private
 836      */
 837     _getNextX: function(curCoord, finalCoord) {
 838         var t = this.thumb;
 839         var thresh;
 840         var tmp = [];
 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];
 850         } else {
 851             // equal, do nothing
 852         }
 853
 854         return nextCoord;
 855     },
 856
 857     /**
 858      * Returns the next Y tick value based on the current coord and the target coord.
 859      * @method _getNextY
 860      * @private
 861      */
 862     _getNextY: function(curCoord, finalCoord) {
 863         var t = this.thumb;
 864         var thresh;
 865         var tmp = [];
 866         var nextCoord = null;
 867
 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];
 876         } else {
 877             // equal, do nothing
 878         }
 879
 880         return nextCoord;
 881     },
 882
 883     /**
 884      * Resets the constraints before moving the thumb.
 885      * @method b4MouseDown
 886      * @private
 887      */
 888     b4MouseDown: function(e) {
 889         this.thumb.autoOffset();
 890         this.thumb.resetConstraints();
 891     },
 892
 893
 894     /**
 895      * Handles the mousedown event for the slider background
 896      * @method onMouseDown
 897      * @private
 898      */
 899     onMouseDown: function(e) {
 900         // this.resetConstraints(true);
 901         // this.thumb.resetConstraints(true);
 902
 903         if (! this.isLocked() && this.backgroundEnabled) {
 904             var x = YAHOO.util.Event.getPageX(e);
 905             var y = YAHOO.util.Event.getPageY(e);
 906
 907             this.focus();
 908             this.moveThumb(x, y);
 909         }
 910
 911     },
 912
 913     /**
 914      * Handles the onDrag event for the slider background
 915      * @method onDrag
 916      * @private
 917      */
 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);
 923         }
 924     },
 925
 926     /**
 927      * Fired when the slider movement ends
 928      * @method endMove
 929      * @private
 930      */
 931     endMove: function () {
 932         // this._animating = false;
 933         this.unlock();
 934         this.moveComplete = true;
 935         this.fireEvents();
 936     },
 937
 938     /**
 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
 941      * complete
 942      * @method fireEvents
 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.
 948      * @private
 949      */
 950     fireEvents: function (thumbEvent) {
 951
 952         var t = this.thumb;
 953
 954         if (!thumbEvent) {
 955             t.cachePosition();
 956         }
 957
 958         if (! this.isLocked()) {
 959             if (t._isRegion) {
 960                 var newX = t.getXValue();
 961                 var newY = t.getYValue();
 962
 963                 if (newX != this.previousX || newY != this.previousY) {
 964                     this.onChange(newX, newY);
 965                     this.fireEvent("change", { x: newX, y: newY });
 966                 }
 967
 968                 this.previousX = newX;
 969                 this.previousY = newY;
 970
 971             } else {
 972                 var newVal = t.getValue();
 973                 if (newVal != this.previousVal) {
 974                     this.onChange( newVal );
 975                     this.fireEvent("change", newVal);
 976                 }
 977                 this.previousVal = newVal;
 978             }
 979
 980             if (this.moveComplete) {
 981                 this.onSlideEnd();
 982                 this.fireEvent("slideEnd");
 983                 this.moveComplete = false;
 984             }
 985
 986         }
 987     },
 988
 989     /**
 990      * Slider toString
 991      * @method toString
 992      * @return {string} string representation of the instance
 993      */
 994     toString: function () {
 995         return ("Slider (" + this.type +") " + this.id);
 996     }
 997
 998 });
 999
1000 YAHOO.augment(YAHOO.widget.Slider, YAHOO.util.EventProvider);
1001
1002 /**
1003  * A drag and drop implementation to be used as the thumb of a slider.
1004  * @class SliderThumb
1005  * @extends YAHOO.util.DD
1006  * @constructor
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.
1015  */
1016 YAHOO.widget.SliderThumb = function(id, sGroup, iLeft, iRight, iUp, iDown, iTickSize) {
1017
1018     if (id) {
1019         //this.init(id, sGroup);
1020         YAHOO.widget.SliderThumb.superclass.constructor.call(this, id, sGroup);
1021
1022         /**
1023          * The id of the thumbs parent HTML element (the slider background
1024          * element).
1025          * @property parentElId
1026          * @type string
1027          */
1028         this.parentElId = sGroup;
1029     }
1030
1031
1032     //this.removeInvalidHandleType("A");
1033
1034
1035     /**
1036      * Overrides the isTarget property in YAHOO.util.DragDrop
1037      * @property isTarget
1038      * @private
1039      */
1040     this.isTarget = false;
1041
1042     /**
1043      * The tick size for this slider
1044      * @property tickSize
1045      * @type int
1046      * @private
1047      */
1048     this.tickSize = iTickSize;
1049
1050     /**
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
1055      * @type boolean
1056      * @private
1057      */
1058     this.maintainOffset = true;
1059
1060     this.initSlider(iLeft, iRight, iUp, iDown, iTickSize);
1061
1062     /**
1063      * Turns off the autoscroll feature in drag and drop
1064      * @property scroll
1065      * @private
1066      */
1067     this.scroll = false;
1068
1069 };
1070
1071 YAHOO.extend(YAHOO.widget.SliderThumb, YAHOO.util.DD, {
1072
1073     /**
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
1077      * @type [int, int]
1078      */
1079     startOffset: null,
1080
1081     /**
1082      * Flag used to figure out if this is a horizontal or vertical slider
1083      * @property _isHoriz
1084      * @type boolean
1085      * @private
1086      */
1087     _isHoriz: false,
1088
1089     /**
1090      * Cache the last value so we can check for change
1091      * @property _prevVal
1092      * @type int
1093      * @private
1094      */
1095     _prevVal: 0,
1096
1097     /**
1098      * The slider is _graduated if there is a tick interval defined
1099      * @property _graduated
1100      * @type boolean
1101      * @private
1102      */
1103     _graduated: false,
1104
1105
1106     /**
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
1110      * @type [int, int]
1111      */
1112     getOffsetFromParent0: function(parentPos) {
1113         var myPos = YAHOO.util.Dom.getXY(this.getEl());
1114         var ppos  = parentPos || YAHOO.util.Dom.getXY(this.parentElId);
1115
1116         return [ (myPos[0] - ppos[0]), (myPos[1] - ppos[1]) ];
1117     },
1118
1119     getOffsetFromParent: function(parentPos) {
1120
1121         var el = this.getEl();
1122
1123         if (!this.deltaOffset) {
1124
1125             var myPos = YAHOO.util.Dom.getXY(el);
1126             var ppos  = parentPos || YAHOO.util.Dom.getXY(this.parentElId);
1127
1128             var newOffset = [ (myPos[0] - ppos[0]), (myPos[1] - ppos[1]) ];
1129
1130             var l = parseInt( YAHOO.util.Dom.getStyle(el, "left"), 10 );
1131             var t = parseInt( YAHOO.util.Dom.getStyle(el, "top" ), 10 );
1132
1133             var deltaX = l - newOffset[0];
1134             var deltaY = t - newOffset[1];
1135
1136             if (isNaN(deltaX) || isNaN(deltaY)) {
1137             } else {
1138                 this.deltaOffset = [deltaX, deltaY];
1139             }
1140
1141         } else {
1142             var newLeft = parseInt( YAHOO.util.Dom.getStyle(el, "left"), 10 );
1143             var newTop  = parseInt( YAHOO.util.Dom.getStyle(el, "top" ), 10 );
1144
1145             newOffset  = [newLeft + this.deltaOffset[0], newTop + this.deltaOffset[1]];
1146         }
1147
1148         return newOffset;
1149
1150         //return [ (myPos[0] - ppos[0]), (myPos[1] - ppos[1]) ];
1151     },
1152
1153     /**
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.
1161      */
1162     initSlider: function (iLeft, iRight, iUp, iDown, iTickSize) {
1163
1164
1165         //document these.  new for 0.12.1
1166         this.initLeft = iLeft;
1167         this.initRight = iRight;
1168         this.initUp = iUp;
1169         this.initDown = iDown;
1170
1171         this.setXConstraint(iLeft, iRight, iTickSize);
1172         this.setYConstraint(iUp, iDown, iTickSize);
1173
1174         if (iTickSize && iTickSize > 1) {
1175             this._graduated = true;
1176         }
1177
1178         this._isHoriz  = (iLeft || iRight);
1179         this._isVert   = (iUp   || iDown);
1180         this._isRegion = (this._isHoriz && this._isVert);
1181
1182     },
1183
1184     /**
1185      * Clear's the slider's ticks
1186      * @method clearTicks
1187      */
1188     clearTicks: function () {
1189         YAHOO.widget.SliderThumb.superclass.clearTicks.call(this);
1190         this.tickSize = 0;
1191         this._graduated = false;
1192     },
1193
1194
1195     /**
1196      * Gets the current offset from the element's start position in
1197      * pixels.
1198      * @method getValue
1199      * @return {int} the number of pixels (positive or negative) the
1200      * slider has moved from the start position.
1201      */
1202     getValue: function () {
1203         if (!this.available) { return 0; }
1204         var val = (this._isHoriz) ? this.getXValue() : this.getYValue();
1205         return val;
1206     },
1207
1208     /**
1209      * Gets the current X offset from the element's start position in
1210      * pixels.
1211      * @method getXValue
1212      * @return {int} the number of pixels (positive or negative) the
1213      * slider has moved horizontally from the start position.
1214      */
1215     getXValue: function () {
1216         if (!this.available) { return 0; }
1217         var newOffset = this.getOffsetFromParent();
1218         return (newOffset[0] - this.startOffset[0]);
1219     },
1220
1221     /**
1222      * Gets the current Y offset from the element's start position in
1223      * pixels.
1224      * @method getYValue
1225      * @return {int} the number of pixels (positive or negative) the
1226      * slider has moved vertically from the start position.
1227      */
1228     getYValue: function () {
1229         if (!this.available) { return 0; }
1230         var newOffset = this.getOffsetFromParent();
1231         return (newOffset[1] - this.startOffset[1]);
1232     },
1233
1234     /**
1235      * Thumb toString
1236      * @method toString
1237      * @return {string} string representation of the instance
1238      */
1239     toString: function () {
1240         return "SliderThumb " + this.id;
1241     },
1242
1243     /**
1244      * The onchange event for the handle/thumb is delegated to the YAHOO.widget.Slider
1245      * instance it belongs to.
1246      * @method onChange
1247      * @private
1248      */
1249     onChange: function (x, y) {
1250     }
1251
1252 });
1253
1254 if ("undefined" == typeof YAHOO.util.Anim) {
1255     YAHOO.widget.Slider.ANIM_AVAIL = false;
1256 }
1257
1258 YAHOO.register("slider", YAHOO.widget.Slider, {version: "2.3.0", build: "442"});