PageRenderTime 54ms CodeModel.GetById 22ms RepoModel.GetById 0ms app.codeStats 0ms

/hippo/src/main/webapp/yui/slider/slider-debug.js

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