Index: openacs-4/packages/ajaxhelper/www/resources/yui/slider/slider.js
===================================================================
RCS file: /usr/local/cvsroot/openacs-4/packages/ajaxhelper/www/resources/yui/slider/slider.js,v
diff -u -r1.3 -r1.4
--- openacs-4/packages/ajaxhelper/www/resources/yui/slider/slider.js 8 Sep 2007 14:22:08 -0000 1.3
+++ openacs-4/packages/ajaxhelper/www/resources/yui/slider/slider.js 9 Apr 2009 23:15:49 -0000 1.4
@@ -1,8 +1,8 @@
/*
-Copyright (c) 2007, Yahoo! Inc. All rights reserved.
+Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
-version: 2.3.0
+version: 2.7.0
*/
/**
* The Slider component is a UI control that enables the user to adjust
@@ -18,7 +18,12 @@
* @requires yahoo,dom,dragdrop,event
* @optional animation
*/
+ (function () {
+var getXY = YAHOO.util.Dom.getXY,
+ Event = YAHOO.util.Event,
+ _AS = Array.prototype.slice;
+
/**
* A DragDrop implementation that can be used as a background for a
* slider. It takes a reference to the thumb instance
@@ -35,86 +40,138 @@
* @param {SliderThumb} oThumb The thumb for this slider
* @param {String} sType The type of slider (horiz, vert, region)
*/
-YAHOO.widget.Slider = function(sElementId, sGroup, oThumb, sType) {
+function Slider(sElementId, sGroup, oThumb, sType) {
+
+ Slider.ANIM_AVAIL = (!YAHOO.lang.isUndefined(YAHOO.util.Anim));
+
if (sElementId) {
this.init(sElementId, sGroup, true);
this.initSlider(sType);
this.initThumb(oThumb);
}
-};
+}
-/**
- * Factory method for creating a horizontal slider
- * @method YAHOO.widget.Slider.getHorizSlider
- * @static
- * @param {String} sBGElId the id of the slider's background element
- * @param {String} sHandleElId the id of the thumb element
- * @param {int} iLeft the number of pixels the element can move left
- * @param {int} iRight the number of pixels the element can move right
- * @param {int} iTickSize optional parameter for specifying that the element
- * should move a certain number pixels at a time.
- * @return {Slider} a horizontal slider control
- */
-YAHOO.widget.Slider.getHorizSlider =
- function (sBGElId, sHandleElId, iLeft, iRight, iTickSize) {
- return new YAHOO.widget.Slider(sBGElId, sBGElId,
- new YAHOO.widget.SliderThumb(sHandleElId, sBGElId,
- iLeft, iRight, 0, 0, iTickSize), "horiz");
-};
+YAHOO.lang.augmentObject(Slider,{
+ /**
+ * Factory method for creating a horizontal slider
+ * @method YAHOO.widget.Slider.getHorizSlider
+ * @static
+ * @param {String} sBGElId the id of the slider's background element
+ * @param {String} sHandleElId the id of the thumb element
+ * @param {int} iLeft the number of pixels the element can move left
+ * @param {int} iRight the number of pixels the element can move right
+ * @param {int} iTickSize optional parameter for specifying that the element
+ * should move a certain number pixels at a time.
+ * @return {Slider} a horizontal slider control
+ */
+ getHorizSlider :
+ function (sBGElId, sHandleElId, iLeft, iRight, iTickSize) {
+ return new Slider(sBGElId, sBGElId,
+ new YAHOO.widget.SliderThumb(sHandleElId, sBGElId,
+ iLeft, iRight, 0, 0, iTickSize), "horiz");
+ },
-/**
- * Factory method for creating a vertical slider
- * @method YAHOO.widget.Slider.getVertSlider
- * @static
- * @param {String} sBGElId the id of the slider's background element
- * @param {String} sHandleElId the id of the thumb element
- * @param {int} iUp the number of pixels the element can move up
- * @param {int} iDown the number of pixels the element can move down
- * @param {int} iTickSize optional parameter for specifying that the element
- * should move a certain number pixels at a time.
- * @return {Slider} a vertical slider control
- */
-YAHOO.widget.Slider.getVertSlider =
- function (sBGElId, sHandleElId, iUp, iDown, iTickSize) {
- return new YAHOO.widget.Slider(sBGElId, sBGElId,
- new YAHOO.widget.SliderThumb(sHandleElId, sBGElId, 0, 0,
- iUp, iDown, iTickSize), "vert");
-};
+ /**
+ * Factory method for creating a vertical slider
+ * @method YAHOO.widget.Slider.getVertSlider
+ * @static
+ * @param {String} sBGElId the id of the slider's background element
+ * @param {String} sHandleElId the id of the thumb element
+ * @param {int} iUp the number of pixels the element can move up
+ * @param {int} iDown the number of pixels the element can move down
+ * @param {int} iTickSize optional parameter for specifying that the element
+ * should move a certain number pixels at a time.
+ * @return {Slider} a vertical slider control
+ */
+ getVertSlider :
+ function (sBGElId, sHandleElId, iUp, iDown, iTickSize) {
+ return new Slider(sBGElId, sBGElId,
+ new YAHOO.widget.SliderThumb(sHandleElId, sBGElId, 0, 0,
+ iUp, iDown, iTickSize), "vert");
+ },
-/**
- * Factory method for creating a slider region like the one in the color
- * picker example
- * @method YAHOO.widget.Slider.getSliderRegion
- * @static
- * @param {String} sBGElId the id of the slider's background element
- * @param {String} sHandleElId the id of the thumb element
- * @param {int} iLeft the number of pixels the element can move left
- * @param {int} iRight the number of pixels the element can move right
- * @param {int} iUp the number of pixels the element can move up
- * @param {int} iDown the number of pixels the element can move down
- * @param {int} iTickSize optional parameter for specifying that the element
- * should move a certain number pixels at a time.
- * @return {Slider} a slider region control
- */
-YAHOO.widget.Slider.getSliderRegion =
- function (sBGElId, sHandleElId, iLeft, iRight, iUp, iDown, iTickSize) {
- return new YAHOO.widget.Slider(sBGElId, sBGElId,
- new YAHOO.widget.SliderThumb(sHandleElId, sBGElId, iLeft, iRight,
- iUp, iDown, iTickSize), "region");
-};
+ /**
+ * Factory method for creating a slider region like the one in the color
+ * picker example
+ * @method YAHOO.widget.Slider.getSliderRegion
+ * @static
+ * @param {String} sBGElId the id of the slider's background element
+ * @param {String} sHandleElId the id of the thumb element
+ * @param {int} iLeft the number of pixels the element can move left
+ * @param {int} iRight the number of pixels the element can move right
+ * @param {int} iUp the number of pixels the element can move up
+ * @param {int} iDown the number of pixels the element can move down
+ * @param {int} iTickSize optional parameter for specifying that the element
+ * should move a certain number pixels at a time.
+ * @return {Slider} a slider region control
+ */
+ getSliderRegion :
+ function (sBGElId, sHandleElId, iLeft, iRight, iUp, iDown, iTickSize) {
+ return new Slider(sBGElId, sBGElId,
+ new YAHOO.widget.SliderThumb(sHandleElId, sBGElId, iLeft, iRight,
+ iUp, iDown, iTickSize), "region");
+ },
-/**
- * By default, animation is available if the animation library is detected.
- * @property YAHOO.widget.Slider.ANIM_AVAIL
- * @static
- * @type boolean
- */
-YAHOO.widget.Slider.ANIM_AVAIL = true;
+ /**
+ * Constant for valueChangeSource, indicating that the user clicked or
+ * dragged the slider to change the value.
+ * @property Slider.SOURCE_UI_EVENT
+ * @final
+ * @static
+ * @default 1
+ */
+ SOURCE_UI_EVENT : 1,
+ /**
+ * Constant for valueChangeSource, indicating that the value was altered
+ * by a programmatic call to setValue/setRegionValue.
+ * @property Slider.SOURCE_SET_VALUE
+ * @final
+ * @static
+ * @default 2
+ */
+ SOURCE_SET_VALUE : 2,
-YAHOO.extend(YAHOO.widget.Slider, YAHOO.util.DragDrop, {
+ /**
+ * Constant for valueChangeSource, indicating that the value was altered
+ * by hitting any of the supported keyboard characters.
+ * @property Slider.SOURCE_KEY_EVENT
+ * @final
+ * @static
+ * @default 2
+ */
+ SOURCE_KEY_EVENT : 3,
/**
+ * By default, animation is available if the animation utility is detected.
+ * @property Slider.ANIM_AVAIL
+ * @static
+ * @type boolean
+ */
+ ANIM_AVAIL : false
+},true);
+
+YAHOO.extend(Slider, YAHOO.util.DragDrop, {
+
+ /**
+ * Tracks the state of the mouse button to aid in when events are fired.
+ *
+ * @property _mouseDown
+ * @type boolean
+ * @default false
+ * @private
+ */
+ _mouseDown : false,
+
+ /**
+ * Override the default setting of dragOnly to true.
+ * @property dragOnly
+ * @type boolean
+ * @default true
+ */
+ dragOnly : true,
+
+ /**
* Initializes the slider. Executed in the constructor
* @method initSlider
* @param {string} sType the type of slider (horiz, vert, region)
@@ -167,7 +224,7 @@
* @property animate
* @type boolean
*/
- this.animate = YAHOO.widget.Slider.ANIM_AVAIL;
+ this.animate = Slider.ANIM_AVAIL;
/**
* Set to false to disable a background click thumb move
@@ -193,7 +250,7 @@
/**
* Specifies the number of pixels the arrow keys will move the slider.
- * Default is 25.
+ * Default is 20.
* @property keyIncrement
* @type int
*/
@@ -231,6 +288,7 @@
* @property SOURCE_UI_EVENT
* @final
* @default 1
+ * @deprecated use static Slider.SOURCE_UI_EVENT
*/
this.SOURCE_UI_EVENT = 1;
@@ -240,6 +298,7 @@
* @property SOURCE_SET_VALUE
* @final
* @default 2
+ * @deprecated use static Slider.SOURCE_SET_VALUE
*/
this.SOURCE_SET_VALUE = 2;
@@ -254,6 +313,23 @@
* @since 2.3.0
*/
this.valueChangeSource = 0;
+
+ /**
+ * Indicates whether or not events will be supressed for the current
+ * slide operation
+ * @property _silent
+ * @type boolean
+ * @private
+ */
+ this._silent = false;
+
+ /**
+ * Saved offset used to protect against NaN problems when slider is
+ * set to display:none
+ * @property lastOffset
+ * @type [int, int]
+ */
+ this.lastOffset = [0,0];
},
/**
@@ -272,13 +348,9 @@
* @type YAHOO.widget.SliderThumb
*/
this.thumb = t;
+
t.cacheBetweenDrags = true;
- // add handler for the handle onchange event
- t.onChange = function() {
- self.handleThumbChange();
- };
-
if (t._isHoriz && t.xTicks && t.xTicks.length) {
this.tickPause = Math.round(360 / t.xTicks.length);
} else if (t.yTicks && t.yTicks.length) {
@@ -287,10 +359,22 @@
// delegate thumb methods
- t.onMouseDown = function () { return self.focus(); };
- t.onMouseUp = function() { self.thumbMouseUp(); };
- t.onDrag = function() { self.fireEvents(true); };
- t.onAvailable = function() { return self.setStartSliderState(); };
+ t.onAvailable = function() {
+ return self.setStartSliderState();
+ };
+ t.onMouseDown = function () {
+ self._mouseDown = true;
+ return self.focus();
+ };
+ t.startDrag = function() {
+ self._slideStart();
+ };
+ t.onDrag = function() {
+ self.fireEvents(true);
+ };
+ t.onMouseUp = function() {
+ self.thumbMouseUp();
+ };
},
@@ -299,11 +383,20 @@
* @method onAvailable
*/
onAvailable: function() {
- var Event = YAHOO.util.Event;
+ this._bindKeyEvents();
+ },
+
+ /**
+ * Sets up the listeners for keydown and key press events.
+ *
+ * @method _bindKeyEvents
+ * @protected
+ */
+ _bindKeyEvents : function () {
Event.on(this.id, "keydown", this.handleKeyDown, this, true);
Event.on(this.id, "keypress", this.handleKeyPress, this, true);
},
-
+
/**
* Executed when a keypress event happens with the control focused.
* Prevents the default behavior for navigation keys. The actual
@@ -313,8 +406,8 @@
*/
handleKeyPress: function(e) {
if (this.enableKeys) {
- var Event = YAHOO.util.Event;
var kc = Event.getCharCode(e);
+
switch (kc) {
case 0x25: // left
case 0x26: // up
@@ -337,13 +430,12 @@
*/
handleKeyDown: function(e) {
if (this.enableKeys) {
- var Event = YAHOO.util.Event;
+ var kc = Event.getCharCode(e),
+ t = this.thumb,
+ h = this.getXValue(),
+ v = this.getYValue(),
+ changeValue = true;
- var kc = Event.getCharCode(e), t=this.thumb;
- var h=this.getXValue(),v=this.getYValue();
-
- var horiz = false;
- var changeValue = true;
switch (kc) {
// left
@@ -373,10 +465,10 @@
if (changeValue) {
if (t._isRegion) {
- this.setRegionValue(h, v, true);
+ this._setRegionValue(Slider.SOURCE_KEY_EVENT, h, v, true);
} else {
- var newVal = (t._isHoriz) ? h : v;
- this.setValue(newVal, true);
+ this._setValue(Slider.SOURCE_KEY_EVENT,
+ (t._isHoriz ? h : v), true);
}
Event.stopEvent(e);
}
@@ -400,23 +492,23 @@
* @property baselinePos
* @type [int, int]
*/
- this.baselinePos = YAHOO.util.Dom.getXY(this.getEl());
+ this.baselinePos = getXY(this.getEl());
this.thumb.startOffset = this.thumb.getOffsetFromParent(this.baselinePos);
if (this.thumb._isRegion) {
if (this.deferredSetRegionValue) {
- this.setRegionValue.apply(this, this.deferredSetRegionValue, true);
+ this._setRegionValue.apply(this, this.deferredSetRegionValue);
this.deferredSetRegionValue = null;
} else {
- this.setRegionValue(0, 0, true, true);
+ this.setRegionValue(0, 0, true, true, true);
}
} else {
if (this.deferredSetValue) {
- this.setValue.apply(this, this.deferredSetValue, true);
+ this._setValue.apply(this, this.deferredSetValue);
this.deferredSetValue = null;
} else {
- this.setValue(0, true, true);
+ this.setValue(0, true, true, true);
}
}
},
@@ -464,17 +556,25 @@
},
/**
- * Handles mouseup event on the slider background
+ * Handles mouseup event on the thumb
* @method thumbMouseUp
* @private
*/
thumbMouseUp: function() {
+ this._mouseDown = false;
if (!this.isLocked() && !this.moveComplete) {
this.endMove();
}
},
+ onMouseUp: function() {
+ this._mouseDown = false;
+ if (this.backgroundEnabled && !this.isLocked() && !this.moveComplete) {
+ this.endMove();
+ }
+ },
+
/**
* Returns a reference to this slider's thumb
* @method getThumb
@@ -491,7 +591,7 @@
* @private
*/
focus: function() {
- this.valueChangeSource = this.SOURCE_UI_EVENT;
+ this.valueChangeSource = Slider.SOURCE_UI_EVENT;
// Focus the background element if possible
var el = this.getEl();
@@ -509,12 +609,7 @@
this.verifyOffset();
- if (this.isLocked()) {
- return false;
- } else {
- this.onSlideStart();
- return true;
- }
+ return !this.isLocked();
},
/**
@@ -577,37 +672,42 @@
},
/**
- * Internal handler for the slider thumb's onChange event
- * @method handleThumbChange
- * @private
+ * Provides a way to set the value of the slider in code.
+ *
+ * @method setValue
+ * @param {int} newOffset the number of pixels the thumb should be
+ * positioned away from the initial start point
+ * @param {boolean} skipAnim set to true to disable the animation
+ * for this move action (but not others).
+ * @param {boolean} force ignore the locked setting and set value anyway
+ * @param {boolean} silent when true, do not fire events
+ * @return {boolean} true if the move was performed, false if it failed
*/
- handleThumbChange: function () {
- var t = this.thumb;
- if (t._isRegion) {
- t.onChange(t.getXValue(), t.getYValue());
- this.fireEvent("change", { x: t.getXValue(), y: t.getYValue() } );
- } else {
- t.onChange(t.getValue());
- this.fireEvent("change", t.getValue());
- }
-
+ setValue: function() {
+ var args = _AS.call(arguments);
+ args.unshift(Slider.SOURCE_SET_VALUE);
+ return this._setValue.apply(this,args);
},
/**
- * Provides a way to set the value of the slider in code.
- * @method setValue
+ * Worker function to execute the value set operation. Accepts type of
+ * set operation in addition to the usual setValue params.
+ *
+ * @method _setValue
+ * @param source {int} what triggered the set (e.g. Slider.SOURCE_SET_VALUE)
* @param {int} newOffset the number of pixels the thumb should be
* positioned away from the initial start point
* @param {boolean} skipAnim set to true to disable the animation
* for this move action (but not others).
* @param {boolean} force ignore the locked setting and set value anyway
+ * @param {boolean} silent when true, do not fire events
* @return {boolean} true if the move was performed, false if it failed
+ * @protected
*/
- setValue: function(newOffset, skipAnim, force) {
+ _setValue: function(source, newOffset, skipAnim, force, silent) {
+ var t = this.thumb, newX, newY;
- this.valueChangeSource = this.SOURCE_SET_VALUE;
-
- if (!this.thumb.available) {
+ if (!t.available) {
this.deferredSetValue = arguments;
return false;
}
@@ -620,19 +720,23 @@
return false;
}
- var t = this.thumb;
- var newX, newY;
- this.verifyOffset(true);
if (t._isRegion) {
return false;
- } else if (t._isHoriz) {
- this.onSlideStart();
- // this.fireEvent("slideStart");
+ }
+
+
+ this._silent = silent;
+ this.valueChangeSource = source || Slider.SOURCE_SET_VALUE;
+
+ t.lastOffset = [newOffset, newOffset];
+ this.verifyOffset(true);
+
+ this._slideStart();
+
+ if (t._isHoriz) {
newX = t.initPageX + newOffset + this.thumbCenterPoint.x;
this.moveThumb(newX, t.initPageY, skipAnim);
} else {
- this.onSlideStart();
- // this.fireEvent("slideStart");
newY = t.initPageY + newOffset + this.thumbCenterPoint.y;
this.moveThumb(t.initPageX, newY, skipAnim);
}
@@ -650,13 +754,36 @@
* @param {boolean} skipAnim set to true to disable the animation
* for this move action (but not others).
* @param {boolean} force ignore the locked setting and set value anyway
+ * @param {boolean} silent when true, do not fire events
* @return {boolean} true if the move was performed, false if it failed
*/
- setRegionValue: function(newOffset, newOffset2, skipAnim, force) {
+ setRegionValue : function () {
+ var args = _AS.call(arguments);
+ args.unshift(Slider.SOURCE_SET_VALUE);
+ return this._setRegionValue.apply(this,args);
+ },
- this.valueChangeSource = this.SOURCE_SET_VALUE;
+ /**
+ * Worker function to execute the value set operation. Accepts type of
+ * set operation in addition to the usual setValue params.
+ *
+ * @method _setRegionValue
+ * @param source {int} what triggered the set (e.g. Slider.SOURCE_SET_VALUE)
+ * @param {int} newOffset the number of pixels the thumb should be
+ * positioned away from the initial start point (x axis for region)
+ * @param {int} newOffset2 the number of pixels the thumb should be
+ * positioned away from the initial start point (y axis for region)
+ * @param {boolean} skipAnim set to true to disable the animation
+ * for this move action (but not others).
+ * @param {boolean} force ignore the locked setting and set value anyway
+ * @param {boolean} silent when true, do not fire events
+ * @return {boolean} true if the move was performed, false if it failed
+ * @protected
+ */
+ _setRegionValue: function(source, newOffset, newOffset2, skipAnim, force, silent) {
+ var t = this.thumb, newX, newY;
- if (!this.thumb.available) {
+ if (!t.available) {
this.deferredSetRegionValue = arguments;
return false;
}
@@ -669,17 +796,24 @@
return false;
}
- var t = this.thumb;
- if (t._isRegion) {
- this.onSlideStart();
- var newX = t.initPageX + newOffset + this.thumbCenterPoint.x;
- var newY = t.initPageY + newOffset2 + this.thumbCenterPoint.y;
- this.moveThumb(newX, newY, skipAnim);
- return true;
+ if (!t._isRegion) {
+ return false;
}
- return false;
+ this._silent = silent;
+ this.valueChangeSource = source || Slider.SOURCE_SET_VALUE;
+
+ t.lastOffset = [newOffset, newOffset2];
+ this.verifyOffset(true);
+
+ this._slideStart();
+
+ newX = t.initPageX + newOffset + this.thumbCenterPoint.x;
+ newY = t.initPageY + newOffset2 + this.thumbCenterPoint.y;
+ this.moveThumb(newX, newY, skipAnim);
+
+ return true;
},
/**
@@ -691,14 +825,30 @@
*/
verifyOffset: function(checkPos) {
- var newPos = YAHOO.util.Dom.getXY(this.getEl());
- //var newPos = [this.initPageX, this.initPageY];
+ var xy = getXY(this.getEl()),
+ t = this.thumb;
+ if (!this.thumbCenterPoint || !this.thumbCenterPoint.x) {
+ this.setThumbCenterPoint();
+ }
- if (newPos[0] != this.baselinePos[0] || newPos[1] != this.baselinePos[1]) {
- this.thumb.resetConstraints();
- this.baselinePos = newPos;
- return false;
+ if (xy) {
+
+
+ if (xy[0] != this.baselinePos[0] || xy[1] != this.baselinePos[1]) {
+
+ // Reset background
+ this.setInitPosition();
+ this.baselinePos = xy;
+
+ // Reset thumb
+ t.initPageX = this.initPageX + t.startOffset[0];
+ t.initPageY = this.initPageY + t.startOffset[1];
+ t.deltaSetXY = null;
+ this.resetThumbConstraints();
+
+ return false;
+ }
}
return true;
@@ -712,57 +862,84 @@
* @param {int} x the X coordinate of the click
* @param {int} y the Y coordinate of the click
* @param {boolean} skipAnim don't animate if the move happend onDrag
+ * @param {boolean} midMove set to true if this is not terminating
+ * the slider movement
* @private
*/
- moveThumb: function(x, y, skipAnim) {
+ moveThumb: function(x, y, skipAnim, midMove) {
+ var t = this.thumb,
+ self = this,
+ p,_p,anim;
- var t = this.thumb;
- var self = this;
-
if (!t.available) {
return;
}
- // this.verifyOffset();
-
t.setDelta(this.thumbCenterPoint.x, this.thumbCenterPoint.y);
- var _p = t.getTargetCoord(x, y);
- var p = [_p.x, _p.y];
+ _p = t.getTargetCoord(x, y);
+ p = [Math.round(_p.x), Math.round(_p.y)];
-
- this.fireEvent("slideStart");
-
- if (this.animate && YAHOO.widget.Slider.ANIM_AVAIL && t._graduated && !skipAnim) {
- // this.thumb._animating = true;
+ if (this.animate && t._graduated && !skipAnim) {
this.lock();
// cache the current thumb pos
- this.curCoord = YAHOO.util.Dom.getXY(this.thumb.getEl());
+ this.curCoord = getXY(this.thumb.getEl());
+ this.curCoord = [Math.round(this.curCoord[0]), Math.round(this.curCoord[1])];
setTimeout( function() { self.moveOneTick(p); }, this.tickPause );
- } else if (this.animate && YAHOO.widget.Slider.ANIM_AVAIL && !skipAnim) {
+ } else if (this.animate && Slider.ANIM_AVAIL && !skipAnim) {
- // this.thumb._animating = true;
this.lock();
- var oAnim = new YAHOO.util.Motion(
+ anim = new YAHOO.util.Motion(
t.id, { points: { to: p } },
this.animationDuration,
YAHOO.util.Easing.easeOut );
- oAnim.onComplete.subscribe( function() { self.endMove(); } );
- oAnim.animate();
+ anim.onComplete.subscribe( function() {
+ self.unlock();
+ if (!self._mouseDown) {
+ self.endMove();
+ }
+ });
+ anim.animate();
+
} else {
t.setDragElPos(x, y);
- // this.fireEvents();
- this.endMove();
+ if (!midMove && !this._mouseDown) {
+ this.endMove();
+ }
}
},
+ _slideStart: function() {
+ if (!this._sliding) {
+ if (!this._silent) {
+ this.onSlideStart();
+ this.fireEvent("slideStart");
+ }
+ this._sliding = true;
+ }
+ },
+
+ _slideEnd: function() {
+ if (this._sliding && this.moveComplete) {
+ // Reset state before firing slideEnd
+ var silent = this._silent;
+ this._sliding = false;
+ this._silent = false;
+ this.moveComplete = false;
+ if (!silent) {
+ this.onSlideEnd();
+ this.fireEvent("slideEnd");
+ }
+ }
+ },
+
/**
* Move the slider one tick mark towards its final coordinate. Used
* for the animation when tick marks are defined
@@ -772,27 +949,19 @@
*/
moveOneTick: function(finalCoord) {
- var t = this.thumb, tmp;
+ var t = this.thumb,
+ self = this,
+ nextCoord = null,
+ tmpX, tmpY;
-
- // redundant call to getXY since we set the position most of time prior
- // to getting here. Moved to this.curCoord
- //var curCoord = YAHOO.util.Dom.getXY(t.getEl());
-
- // alignElWithMouse caches position in lastPageX, lastPageY .. doesn't work
- //var curCoord = [this.lastPageX, this.lastPageY];
-
- // var thresh = Math.min(t.tickSize + (Math.floor(t.tickSize/2)), 10);
- // var thresh = 10;
- // var thresh = t.tickSize + (Math.floor(t.tickSize/2));
-
- var nextCoord = null;
-
if (t._isRegion) {
nextCoord = this._getNextX(this.curCoord, finalCoord);
- var tmpX = (nextCoord) ? nextCoord[0] : this.curCoord[0];
- nextCoord = this._getNextY([tmpX, this.curCoord[1]], finalCoord);
+ tmpX = (nextCoord !== null) ? nextCoord[0] : this.curCoord[0];
+ nextCoord = this._getNextY(this.curCoord, finalCoord);
+ tmpY = (nextCoord !== null) ? nextCoord[1] : this.curCoord[1];
+ nextCoord = tmpX !== this.curCoord[0] || tmpY !== this.curCoord[1] ?
+ [ tmpX, tmpY ] : null;
} else if (t._isHoriz) {
nextCoord = this._getNextX(this.curCoord, finalCoord);
} else {
@@ -806,27 +975,24 @@
this.curCoord = nextCoord;
// move to the next coord
- // YAHOO.util.Dom.setXY(t.getEl(), nextCoord);
-
- // var el = t.getEl();
- // YAHOO.util.Dom.setStyle(el, "left", (nextCoord[0] + this.thumb.deltaSetXY[0]) + "px");
- // YAHOO.util.Dom.setStyle(el, "top", (nextCoord[1] + this.thumb.deltaSetXY[1]) + "px");
-
- this.thumb.alignElWithMouse(t.getEl(), nextCoord[0], nextCoord[1]);
+ this.thumb.alignElWithMouse(t.getEl(), nextCoord[0] + this.thumbCenterPoint.x, nextCoord[1] + this.thumbCenterPoint.y);
// check if we are in the final position, if not make a recursive call
if (!(nextCoord[0] == finalCoord[0] && nextCoord[1] == finalCoord[1])) {
- var self = this;
setTimeout(function() { self.moveOneTick(finalCoord); },
this.tickPause);
} else {
- this.endMove();
+ this.unlock();
+ if (!this._mouseDown) {
+ this.endMove();
+ }
}
} else {
- this.endMove();
+ this.unlock();
+ if (!this._mouseDown) {
+ this.endMove();
+ }
}
-
- //this.tickPause = Math.round(this.tickPause/2);
},
/**
@@ -835,10 +1001,11 @@
* @private
*/
_getNextX: function(curCoord, finalCoord) {
- var t = this.thumb;
- var thresh;
- var tmp = [];
- var nextCoord = null;
+ var t = this.thumb,
+ thresh,
+ tmp = [],
+ nextCoord = null;
+
if (curCoord[0] > finalCoord[0]) {
thresh = t.tickSize - this.thumbCenterPoint.x;
tmp = t.getTargetCoord( curCoord[0] - thresh, curCoord[1] );
@@ -860,10 +1027,10 @@
* @private
*/
_getNextY: function(curCoord, finalCoord) {
- var t = this.thumb;
- var thresh;
- var tmp = [];
- var nextCoord = null;
+ var t = this.thumb,
+ thresh,
+ tmp = [],
+ nextCoord = null;
if (curCoord[1] > finalCoord[1]) {
thresh = t.tickSize - this.thumbCenterPoint.y;
@@ -886,28 +1053,33 @@
* @private
*/
b4MouseDown: function(e) {
+ if (!this.backgroundEnabled) {
+ return false;
+ }
+
this.thumb.autoOffset();
- this.thumb.resetConstraints();
+ this.resetThumbConstraints();
},
-
/**
* Handles the mousedown event for the slider background
* @method onMouseDown
* @private
*/
onMouseDown: function(e) {
- // this.resetConstraints(true);
- // this.thumb.resetConstraints(true);
+ if (!this.backgroundEnabled || this.isLocked()) {
+ return false;
+ }
- if (! this.isLocked() && this.backgroundEnabled) {
- var x = YAHOO.util.Event.getPageX(e);
- var y = YAHOO.util.Event.getPageY(e);
+ this._mouseDown = true;
- this.focus();
- this.moveThumb(x, y);
- }
-
+ var x = Event.getPageX(e),
+ y = Event.getPageY(e);
+
+
+ this.focus();
+ this._slideStart();
+ this.moveThumb(x, y);
},
/**
@@ -916,10 +1088,11 @@
* @private
*/
onDrag: function(e) {
- if (! this.isLocked()) {
- var x = YAHOO.util.Event.getPageX(e);
- var y = YAHOO.util.Event.getPageY(e);
- this.moveThumb(x, y, true);
+ if (this.backgroundEnabled && !this.isLocked()) {
+ var x = Event.getPageX(e),
+ y = Event.getPageY(e);
+ this.moveThumb(x, y, true, true);
+ this.fireEvents();
}
},
@@ -929,13 +1102,27 @@
* @private
*/
endMove: function () {
- // this._animating = false;
this.unlock();
- this.moveComplete = true;
this.fireEvents();
+ this.moveComplete = true;
+ this._slideEnd();
},
/**
+ * Resets the X and Y contraints for the thumb. Used in lieu of the thumb
+ * instance's inherited resetConstraints because some logic was not
+ * applicable.
+ * @method resetThumbConstraints
+ * @protected
+ */
+ resetThumbConstraints: function () {
+ var t = this.thumb;
+
+ t.setXConstraint(t.leftConstraint, t.rightConstraint, t.xTickSize);
+ t.setYConstraint(t.topConstraint, t.bottomConstraint, t.xTickSize);
+ },
+
+ /**
* Fires the change event if the value has been changed. Ignored if we are in
* the middle of an animation as the event will fire when the animation is
* complete
@@ -949,40 +1136,38 @@
*/
fireEvents: function (thumbEvent) {
- var t = this.thumb;
+ var t = this.thumb, newX, newY, newVal;
if (!thumbEvent) {
t.cachePosition();
}
if (! this.isLocked()) {
if (t._isRegion) {
- var newX = t.getXValue();
- var newY = t.getYValue();
+ newX = t.getXValue();
+ newY = t.getYValue();
if (newX != this.previousX || newY != this.previousY) {
- this.onChange(newX, newY);
- this.fireEvent("change", { x: newX, y: newY });
+ if (!this._silent) {
+ this.onChange(newX, newY);
+ this.fireEvent("change", { x: newX, y: newY });
+ }
}
this.previousX = newX;
this.previousY = newY;
} else {
- var newVal = t.getValue();
+ newVal = t.getValue();
if (newVal != this.previousVal) {
- this.onChange( newVal );
- this.fireEvent("change", newVal);
+ if (!this._silent) {
+ this.onChange( newVal );
+ this.fireEvent("change", newVal);
+ }
}
this.previousVal = newVal;
}
- if (this.moveComplete) {
- this.onSlideEnd();
- this.fireEvent("slideEnd");
- this.moveComplete = false;
- }
-
}
},
@@ -997,8 +1182,10 @@
});
-YAHOO.augment(YAHOO.widget.Slider, YAHOO.util.EventProvider);
+YAHOO.lang.augmentProto(Slider, YAHOO.util.EventProvider);
+YAHOO.widget.Slider = Slider;
+})();
/**
* A drag and drop implementation to be used as the thumb of a slider.
* @class SliderThumb
@@ -1016,7 +1203,6 @@
YAHOO.widget.SliderThumb = function(id, sGroup, iLeft, iRight, iUp, iDown, iTickSize) {
if (id) {
- //this.init(id, sGroup);
YAHOO.widget.SliderThumb.superclass.constructor.call(this, id, sGroup);
/**
@@ -1029,9 +1215,7 @@
}
- //this.removeInvalidHandleType("A");
-
/**
* Overrides the isTarget property in YAHOO.util.DragDrop
* @property isTarget
@@ -1079,6 +1263,14 @@
startOffset: null,
/**
+ * Override the default setting of dragOnly to true.
+ * @property dragOnly
+ * @type boolean
+ * @default true
+ */
+ dragOnly : true,
+
+ /**
* Flag used to figure out if this is a horizontal or vertical slider
* @property _isHoriz
* @type boolean
@@ -1110,44 +1302,43 @@
* @type [int, int]
*/
getOffsetFromParent0: function(parentPos) {
- var myPos = YAHOO.util.Dom.getXY(this.getEl());
- var ppos = parentPos || YAHOO.util.Dom.getXY(this.parentElId);
+ var myPos = YAHOO.util.Dom.getXY(this.getEl()),
+ ppos = parentPos || YAHOO.util.Dom.getXY(this.parentElId);
return [ (myPos[0] - ppos[0]), (myPos[1] - ppos[1]) ];
},
getOffsetFromParent: function(parentPos) {
- var el = this.getEl();
+ var el = this.getEl(), newOffset,
+ myPos,ppos,l,t,deltaX,deltaY,newLeft,newTop;
if (!this.deltaOffset) {
- var myPos = YAHOO.util.Dom.getXY(el);
- var ppos = parentPos || YAHOO.util.Dom.getXY(this.parentElId);
+ myPos = YAHOO.util.Dom.getXY(el);
+ ppos = parentPos || YAHOO.util.Dom.getXY(this.parentElId);
- var newOffset = [ (myPos[0] - ppos[0]), (myPos[1] - ppos[1]) ];
+ newOffset = [ (myPos[0] - ppos[0]), (myPos[1] - ppos[1]) ];
- var l = parseInt( YAHOO.util.Dom.getStyle(el, "left"), 10 );
- var t = parseInt( YAHOO.util.Dom.getStyle(el, "top" ), 10 );
+ l = parseInt( YAHOO.util.Dom.getStyle(el, "left"), 10 );
+ t = parseInt( YAHOO.util.Dom.getStyle(el, "top" ), 10 );
- var deltaX = l - newOffset[0];
- var deltaY = t - newOffset[1];
+ deltaX = l - newOffset[0];
+ deltaY = t - newOffset[1];
if (isNaN(deltaX) || isNaN(deltaY)) {
} else {
this.deltaOffset = [deltaX, deltaY];
}
} else {
- var newLeft = parseInt( YAHOO.util.Dom.getStyle(el, "left"), 10 );
- var newTop = parseInt( YAHOO.util.Dom.getStyle(el, "top" ), 10 );
+ newLeft = parseInt( YAHOO.util.Dom.getStyle(el, "left"), 10 );
+ newTop = parseInt( YAHOO.util.Dom.getStyle(el, "top" ), 10 );
newOffset = [newLeft + this.deltaOffset[0], newTop + this.deltaOffset[1]];
}
return newOffset;
-
- //return [ (myPos[0] - ppos[0]), (myPos[1] - ppos[1]) ];
},
/**
@@ -1160,9 +1351,6 @@
* @param {int} iTickSize the width of the tick interval.
*/
initSlider: function (iLeft, iRight, iUp, iDown, iTickSize) {
-
-
- //document these. new for 0.12.1
this.initLeft = iLeft;
this.initRight = iRight;
this.initUp = iUp;
@@ -1200,9 +1388,7 @@
* slider has moved from the start position.
*/
getValue: function () {
- if (!this.available) { return 0; }
- var val = (this._isHoriz) ? this.getXValue() : this.getYValue();
- return val;
+ return (this._isHoriz) ? this.getXValue() : this.getYValue();
},
/**
@@ -1213,9 +1399,16 @@
* slider has moved horizontally from the start position.
*/
getXValue: function () {
- if (!this.available) { return 0; }
+ if (!this.available) {
+ return 0;
+ }
var newOffset = this.getOffsetFromParent();
- return (newOffset[0] - this.startOffset[0]);
+ if (YAHOO.lang.isNumber(newOffset[0])) {
+ this.lastOffset = newOffset;
+ return (newOffset[0] - this.startOffset[0]);
+ } else {
+ return (this.lastOffset[0] - this.startOffset[0]);
+ }
},
/**
@@ -1226,9 +1419,16 @@
* slider has moved vertically from the start position.
*/
getYValue: function () {
- if (!this.available) { return 0; }
+ if (!this.available) {
+ return 0;
+ }
var newOffset = this.getOffsetFromParent();
- return (newOffset[1] - this.startOffset[1]);
+ if (YAHOO.lang.isNumber(newOffset[1])) {
+ this.lastOffset = newOffset;
+ return (newOffset[1] - this.startOffset[1]);
+ } else {
+ return (this.lastOffset[1] - this.startOffset[1]);
+ }
},
/**
@@ -1250,9 +1450,619 @@
}
});
+/**
+ * A slider with two thumbs, one that represents the min value and
+ * the other the max. Actually a composition of two sliders, both with
+ * the same background. The constraints for each slider are adjusted
+ * dynamically so that the min value of the max slider is equal or greater
+ * to the current value of the min slider, and the max value of the min
+ * slider is the current value of the max slider.
+ * Constructor assumes both thumbs are positioned absolutely at the 0 mark on
+ * the background.
+ *
+ * @namespace YAHOO.widget
+ * @class DualSlider
+ * @uses YAHOO.util.EventProvider
+ * @constructor
+ * @param {Slider} minSlider The Slider instance used for the min value thumb
+ * @param {Slider} maxSlider The Slider instance used for the max value thumb
+ * @param {int} range The number of pixels the thumbs may move within
+ * @param {Array} initVals (optional) [min,max] Initial thumb placement
+ */
+(function () {
-if ("undefined" == typeof YAHOO.util.Anim) {
- YAHOO.widget.Slider.ANIM_AVAIL = false;
+var Event = YAHOO.util.Event,
+ YW = YAHOO.widget;
+
+function DualSlider(minSlider, maxSlider, range, initVals) {
+
+ var self = this,
+ ready = { min : false, max : false },
+ minThumbOnMouseDown, maxThumbOnMouseDown;
+
+ /**
+ * A slider instance that keeps track of the lower value of the range.
+ * read only
+ * @property minSlider
+ * @type Slider
+ */
+ this.minSlider = minSlider;
+
+ /**
+ * A slider instance that keeps track of the upper value of the range.
+ * read only
+ * @property maxSlider
+ * @type Slider
+ */
+ this.maxSlider = maxSlider;
+
+ /**
+ * The currently active slider (min or max). read only
+ * @property activeSlider
+ * @type Slider
+ */
+ this.activeSlider = minSlider;
+
+ /**
+ * Is the DualSlider oriented horizontally or vertically?
+ * read only
+ * @property isHoriz
+ * @type boolean
+ */
+ this.isHoriz = minSlider.thumb._isHoriz;
+
+ //FIXME: this is horrible
+ minThumbOnMouseDown = this.minSlider.thumb.onMouseDown;
+ maxThumbOnMouseDown = this.maxSlider.thumb.onMouseDown;
+ this.minSlider.thumb.onMouseDown = function() {
+ self.activeSlider = self.minSlider;
+ minThumbOnMouseDown.apply(this,arguments);
+ };
+ this.maxSlider.thumb.onMouseDown = function () {
+ self.activeSlider = self.maxSlider;
+ maxThumbOnMouseDown.apply(this,arguments);
+ };
+
+ this.minSlider.thumb.onAvailable = function () {
+ minSlider.setStartSliderState();
+ ready.min = true;
+ if (ready.max) {
+ self.fireEvent('ready',self);
+ }
+ };
+ this.maxSlider.thumb.onAvailable = function () {
+ maxSlider.setStartSliderState();
+ ready.max = true;
+ if (ready.min) {
+ self.fireEvent('ready',self);
+ }
+ };
+
+ // dispatch mousedowns to the active slider
+ minSlider.onMouseDown =
+ maxSlider.onMouseDown = function(e) {
+ return this.backgroundEnabled && self._handleMouseDown(e);
+ };
+
+ // Fix the drag behavior so that only the active slider
+ // follows the drag
+ minSlider.onDrag =
+ maxSlider.onDrag = function(e) {
+ self._handleDrag(e);
+ };
+
+ // Likely only the minSlider's onMouseUp will be executed, but both are
+ // overridden just to be safe
+ minSlider.onMouseUp =
+ maxSlider.onMouseUp = function (e) {
+ self._handleMouseUp(e);
+ };
+
+ // Replace the _bindKeyEvents for the minSlider and remove that for the
+ // maxSlider since they share the same bg element.
+ minSlider._bindKeyEvents = function () {
+ self._bindKeyEvents(this);
+ };
+ maxSlider._bindKeyEvents = function () {};
+
+ // The core events for each slider are handled so we can expose a single
+ // event for when the event happens on either slider
+ minSlider.subscribe("change", this._handleMinChange, minSlider, this);
+ minSlider.subscribe("slideStart", this._handleSlideStart, minSlider, this);
+ minSlider.subscribe("slideEnd", this._handleSlideEnd, minSlider, this);
+
+ maxSlider.subscribe("change", this._handleMaxChange, maxSlider, this);
+ maxSlider.subscribe("slideStart", this._handleSlideStart, maxSlider, this);
+ maxSlider.subscribe("slideEnd", this._handleSlideEnd, maxSlider, this);
+
+ /**
+ * Event that fires when the slider is finished setting up
+ * @event ready
+ * @param {DualSlider} dualslider the DualSlider instance
+ */
+ this.createEvent("ready", this);
+
+ /**
+ * Event that fires when either the min or max value changes
+ * @event change
+ * @param {DualSlider} dualslider the DualSlider instance
+ */
+ this.createEvent("change", this);
+
+ /**
+ * Event that fires when one of the thumbs begins to move
+ * @event slideStart
+ * @param {Slider} activeSlider the moving slider
+ */
+ this.createEvent("slideStart", this);
+
+ /**
+ * Event that fires when one of the thumbs finishes moving
+ * @event slideEnd
+ * @param {Slider} activeSlider the moving slider
+ */
+ this.createEvent("slideEnd", this);
+
+ // Validate initial values
+ initVals = YAHOO.lang.isArray(initVals) ? initVals : [0,range];
+ initVals[0] = Math.min(Math.max(parseInt(initVals[0],10)|0,0),range);
+ initVals[1] = Math.max(Math.min(parseInt(initVals[1],10)|0,range),0);
+ // Swap initVals if min > max
+ if (initVals[0] > initVals[1]) {
+ initVals.splice(0,2,initVals[1],initVals[0]);
+ }
+ this.minVal = initVals[0];
+ this.maxVal = initVals[1];
+
+ // Set values so initial assignment when the slider thumbs are ready will
+ // use these values
+ this.minSlider.setValue(this.minVal,true,true,true);
+ this.maxSlider.setValue(this.maxVal,true,true,true);
+
}
-YAHOO.register("slider", YAHOO.widget.Slider, {version: "2.3.0", build: "442"});
+DualSlider.prototype = {
+
+ /**
+ * The current value of the min thumb. read only.
+ * @property minVal
+ * @type int
+ */
+ minVal : -1,
+
+ /**
+ * The current value of the max thumb. read only.
+ * @property maxVal
+ * @type int
+ */
+ maxVal : -1,
+
+ /**
+ * Pixel distance to maintain between thumbs.
+ * @property minRange
+ * @type int
+ * @default 0
+ */
+ minRange : 0,
+
+ /**
+ * Executed when one of the sliders fires the slideStart event
+ * @method _handleSlideStart
+ * @private
+ */
+ _handleSlideStart: function(data, slider) {
+ this.fireEvent("slideStart", slider);
+ },
+
+ /**
+ * Executed when one of the sliders fires the slideEnd event
+ * @method _handleSlideEnd
+ * @private
+ */
+ _handleSlideEnd: function(data, slider) {
+ this.fireEvent("slideEnd", slider);
+ },
+
+ /**
+ * Overrides the onDrag method for both sliders
+ * @method _handleDrag
+ * @private
+ */
+ _handleDrag: function(e) {
+ YW.Slider.prototype.onDrag.call(this.activeSlider, e);
+ },
+
+ /**
+ * Executed when the min slider fires the change event
+ * @method _handleMinChange
+ * @private
+ */
+ _handleMinChange: function() {
+ this.activeSlider = this.minSlider;
+ this.updateValue();
+ },
+
+ /**
+ * Executed when the max slider fires the change event
+ * @method _handleMaxChange
+ * @private
+ */
+ _handleMaxChange: function() {
+ this.activeSlider = this.maxSlider;
+ this.updateValue();
+ },
+
+ /**
+ * Set up the listeners for the keydown and keypress events.
+ *
+ * @method _bindKeyEvents
+ * @protected
+ */
+ _bindKeyEvents : function (slider) {
+ Event.on(slider.id,'keydown', this._handleKeyDown, this,true);
+ Event.on(slider.id,'keypress',this._handleKeyPress,this,true);
+ },
+
+ /**
+ * Delegate event handling to the active Slider. See Slider.handleKeyDown.
+ *
+ * @method _handleKeyDown
+ * @param e {Event} the mousedown DOM event
+ * @protected
+ */
+ _handleKeyDown : function (e) {
+ this.activeSlider.handleKeyDown.apply(this.activeSlider,arguments);
+ },
+
+ /**
+ * Delegate event handling to the active Slider. See Slider.handleKeyPress.
+ *
+ * @method _handleKeyPress
+ * @param e {Event} the mousedown DOM event
+ * @protected
+ */
+ _handleKeyPress : function (e) {
+ this.activeSlider.handleKeyPress.apply(this.activeSlider,arguments);
+ },
+
+ /**
+ * Sets the min and max thumbs to new values.
+ * @method setValues
+ * @param min {int} Pixel offset to assign to the min thumb
+ * @param max {int} Pixel offset to assign to the max thumb
+ * @param skipAnim {boolean} (optional) Set to true to skip thumb animation.
+ * Default false
+ * @param force {boolean} (optional) ignore the locked setting and set
+ * value anyway. Default false
+ * @param silent {boolean} (optional) Set to true to skip firing change
+ * events. Default false
+ */
+ setValues : function (min, max, skipAnim, force, silent) {
+ var mins = this.minSlider,
+ maxs = this.maxSlider,
+ mint = mins.thumb,
+ maxt = maxs.thumb,
+ self = this,
+ done = { min : false, max : false };
+
+ // Clear constraints to prevent animated thumbs from prematurely
+ // stopping when hitting a constraint that's moving with the other
+ // thumb.
+ if (mint._isHoriz) {
+ mint.setXConstraint(mint.leftConstraint,maxt.rightConstraint,mint.tickSize);
+ maxt.setXConstraint(mint.leftConstraint,maxt.rightConstraint,maxt.tickSize);
+ } else {
+ mint.setYConstraint(mint.topConstraint,maxt.bottomConstraint,mint.tickSize);
+ maxt.setYConstraint(mint.topConstraint,maxt.bottomConstraint,maxt.tickSize);
+ }
+
+ // Set up one-time slideEnd callbacks to call updateValue when both
+ // thumbs have been set
+ this._oneTimeCallback(mins,'slideEnd',function () {
+ done.min = true;
+ if (done.max) {
+ self.updateValue(silent);
+ // Clean the slider's slideEnd events on a timeout since this
+ // will be executed from inside the event's fire
+ setTimeout(function () {
+ self._cleanEvent(mins,'slideEnd');
+ self._cleanEvent(maxs,'slideEnd');
+ },0);
+ }
+ });
+
+ this._oneTimeCallback(maxs,'slideEnd',function () {
+ done.max = true;
+ if (done.min) {
+ self.updateValue(silent);
+ // Clean both sliders' slideEnd events on a timeout since this
+ // will be executed from inside one of the event's fire
+ setTimeout(function () {
+ self._cleanEvent(mins,'slideEnd');
+ self._cleanEvent(maxs,'slideEnd');
+ },0);
+ }
+ });
+
+ // Must emit Slider slideEnd event to propagate to updateValue
+ mins.setValue(min,skipAnim,force,false);
+ maxs.setValue(max,skipAnim,force,false);
+ },
+
+ /**
+ * Set the min thumb position to a new value.
+ * @method setMinValue
+ * @param min {int} Pixel offset for min thumb
+ * @param skipAnim {boolean} (optional) Set to true to skip thumb animation.
+ * Default false
+ * @param force {boolean} (optional) ignore the locked setting and set
+ * value anyway. Default false
+ * @param silent {boolean} (optional) Set to true to skip firing change
+ * events. Default false
+ */
+ setMinValue : function (min, skipAnim, force, silent) {
+ var mins = this.minSlider,
+ self = this;
+
+ this.activeSlider = mins;
+
+ // Use a one-time event callback to delay the updateValue call
+ // until after the slide operation is done
+ self = this;
+ this._oneTimeCallback(mins,'slideEnd',function () {
+ self.updateValue(silent);
+ // Clean the slideEnd event on a timeout since this
+ // will be executed from inside the event's fire
+ setTimeout(function () { self._cleanEvent(mins,'slideEnd'); }, 0);
+ });
+
+ mins.setValue(min, skipAnim, force);
+ },
+
+ /**
+ * Set the max thumb position to a new value.
+ * @method setMaxValue
+ * @param max {int} Pixel offset for max thumb
+ * @param skipAnim {boolean} (optional) Set to true to skip thumb animation.
+ * Default false
+ * @param force {boolean} (optional) ignore the locked setting and set
+ * value anyway. Default false
+ * @param silent {boolean} (optional) Set to true to skip firing change
+ * events. Default false
+ */
+ setMaxValue : function (max, skipAnim, force, silent) {
+ var maxs = this.maxSlider,
+ self = this;
+
+ this.activeSlider = maxs;
+
+ // Use a one-time event callback to delay the updateValue call
+ // until after the slide operation is done
+ this._oneTimeCallback(maxs,'slideEnd',function () {
+ self.updateValue(silent);
+ // Clean the slideEnd event on a timeout since this
+ // will be executed from inside the event's fire
+ setTimeout(function () { self._cleanEvent(maxs,'slideEnd'); }, 0);
+ });
+
+ maxs.setValue(max, skipAnim, force);
+ },
+
+ /**
+ * Executed when one of the sliders is moved
+ * @method updateValue
+ * @param silent {boolean} (optional) Set to true to skip firing change
+ * events. Default false
+ * @private
+ */
+ updateValue: function(silent) {
+ var min = this.minSlider.getValue(),
+ max = this.maxSlider.getValue(),
+ changed = false,
+ mint,maxt,dim,minConstraint,maxConstraint,thumbInnerWidth;
+
+ if (min != this.minVal || max != this.maxVal) {
+ changed = true;
+
+ mint = this.minSlider.thumb;
+ maxt = this.maxSlider.thumb;
+ dim = this.isHoriz ? 'x' : 'y';
+
+ thumbInnerWidth = this.minSlider.thumbCenterPoint[dim] +
+ this.maxSlider.thumbCenterPoint[dim];
+
+ // Establish barriers within the respective other thumb's edge, less
+ // the minRange. Limit to the Slider's range in the case of
+ // negative minRanges.
+ minConstraint = Math.max(max-thumbInnerWidth-this.minRange,0);
+ maxConstraint = Math.min(-min-thumbInnerWidth-this.minRange,0);
+
+ if (this.isHoriz) {
+ minConstraint = Math.min(minConstraint,maxt.rightConstraint);
+
+ mint.setXConstraint(mint.leftConstraint,minConstraint, mint.tickSize);
+
+ maxt.setXConstraint(maxConstraint,maxt.rightConstraint, maxt.tickSize);
+ } else {
+ minConstraint = Math.min(minConstraint,maxt.bottomConstraint);
+ mint.setYConstraint(mint.leftConstraint,minConstraint, mint.tickSize);
+
+ maxt.setYConstraint(maxConstraint,maxt.bottomConstraint, maxt.tickSize);
+ }
+ }
+
+ this.minVal = min;
+ this.maxVal = max;
+
+ if (changed && !silent) {
+ this.fireEvent("change", this);
+ }
+ },
+
+ /**
+ * A background click will move the slider thumb nearest to the click.
+ * Override if you need different behavior.
+ * @method selectActiveSlider
+ * @param e {Event} the mousedown event
+ * @private
+ */
+ selectActiveSlider: function(e) {
+ var min = this.minSlider,
+ max = this.maxSlider,
+ minLocked = min.isLocked() || !min.backgroundEnabled,
+ maxLocked = max.isLocked() || !min.backgroundEnabled,
+ Ev = YAHOO.util.Event,
+ d;
+
+ if (minLocked || maxLocked) {
+ this.activeSlider = minLocked ? max : min;
+ } else {
+ if (this.isHoriz) {
+ d = Ev.getPageX(e)-min.thumb.initPageX-min.thumbCenterPoint.x;
+ } else {
+ d = Ev.getPageY(e)-min.thumb.initPageY-min.thumbCenterPoint.y;
+ }
+
+ this.activeSlider = d*2 > max.getValue()+min.getValue() ? max : min;
+ }
+ },
+
+ /**
+ * Delegates the onMouseDown to the appropriate Slider
+ *
+ * @method _handleMouseDown
+ * @param e {Event} mouseup event
+ * @protected
+ */
+ _handleMouseDown: function(e) {
+ if (!e._handled) {
+ e._handled = true;
+ this.selectActiveSlider(e);
+ return YW.Slider.prototype.onMouseDown.call(this.activeSlider, e);
+ } else {
+ return false;
+ }
+ },
+
+ /**
+ * Delegates the onMouseUp to the active Slider
+ *
+ * @method _handleMouseUp
+ * @param e {Event} mouseup event
+ * @protected
+ */
+ _handleMouseUp : function (e) {
+ YW.Slider.prototype.onMouseUp.apply(
+ this.activeSlider, arguments);
+ },
+
+ /**
+ * Schedule an event callback that will execute once, then unsubscribe
+ * itself.
+ * @method _oneTimeCallback
+ * @param o {EventProvider} Object to attach the event to
+ * @param evt {string} Name of the event
+ * @param fn {Function} function to execute once
+ * @private
+ */
+ _oneTimeCallback : function (o,evt,fn) {
+ o.subscribe(evt,function () {
+ // Unsubscribe myself
+ o.unsubscribe(evt,arguments.callee);
+ // Pass the event handler arguments to the one time callback
+ fn.apply({},[].slice.apply(arguments));
+ });
+ },
+
+ /**
+ * Clean up the slideEnd event subscribers array, since each one-time
+ * callback will be replaced in the event's subscribers property with
+ * null. This will cause memory bloat and loss of performance.
+ * @method _cleanEvent
+ * @param o {EventProvider} object housing the CustomEvent
+ * @param evt {string} name of the CustomEvent
+ * @private
+ */
+ _cleanEvent : function (o,evt) {
+ var ce,i,len,j,subs,newSubs;
+
+ if (o.__yui_events && o.events[evt]) {
+ for (i = o.__yui_events.length; i >= 0; --i) {
+ if (o.__yui_events[i].type === evt) {
+ ce = o.__yui_events[i];
+ break;
+ }
+ }
+ if (ce) {
+ subs = ce.subscribers;
+ newSubs = [];
+ j = 0;
+ for (i = 0, len = subs.length; i < len; ++i) {
+ if (subs[i]) {
+ newSubs[j++] = subs[i];
+ }
+ }
+ ce.subscribers = newSubs;
+ }
+ }
+ }
+
+};
+
+YAHOO.lang.augmentProto(DualSlider, YAHOO.util.EventProvider);
+
+
+/**
+ * Factory method for creating a horizontal dual-thumb slider
+ * @for YAHOO.widget.Slider
+ * @method YAHOO.widget.Slider.getHorizDualSlider
+ * @static
+ * @param {String} bg the id of the slider's background element
+ * @param {String} minthumb the id of the min thumb
+ * @param {String} maxthumb the id of the thumb thumb
+ * @param {int} range the number of pixels the thumbs can move within
+ * @param {int} iTickSize (optional) the element should move this many pixels
+ * at a time
+ * @param {Array} initVals (optional) [min,max] Initial thumb placement
+ * @return {DualSlider} a horizontal dual-thumb slider control
+ */
+YW.Slider.getHorizDualSlider =
+ function (bg, minthumb, maxthumb, range, iTickSize, initVals) {
+ var mint = new YW.SliderThumb(minthumb, bg, 0, range, 0, 0, iTickSize),
+ maxt = new YW.SliderThumb(maxthumb, bg, 0, range, 0, 0, iTickSize);
+
+ return new DualSlider(
+ new YW.Slider(bg, bg, mint, "horiz"),
+ new YW.Slider(bg, bg, maxt, "horiz"),
+ range, initVals);
+};
+
+/**
+ * Factory method for creating a vertical dual-thumb slider.
+ * @for YAHOO.widget.Slider
+ * @method YAHOO.widget.Slider.getVertDualSlider
+ * @static
+ * @param {String} bg the id of the slider's background element
+ * @param {String} minthumb the id of the min thumb
+ * @param {String} maxthumb the id of the thumb thumb
+ * @param {int} range the number of pixels the thumbs can move within
+ * @param {int} iTickSize (optional) the element should move this many pixels
+ * at a time
+ * @param {Array} initVals (optional) [min,max] Initial thumb placement
+ * @return {DualSlider} a vertical dual-thumb slider control
+ */
+YW.Slider.getVertDualSlider =
+ function (bg, minthumb, maxthumb, range, iTickSize, initVals) {
+ var mint = new YW.SliderThumb(minthumb, bg, 0, 0, 0, range, iTickSize),
+ maxt = new YW.SliderThumb(maxthumb, bg, 0, 0, 0, range, iTickSize);
+
+ return new YW.DualSlider(
+ new YW.Slider(bg, bg, mint, "vert"),
+ new YW.Slider(bg, bg, maxt, "vert"),
+ range, initVals);
+};
+
+YAHOO.widget.DualSlider = DualSlider;
+
+})();
+YAHOO.register("slider", YAHOO.widget.Slider, {version: "2.7.0", build: "1799"});