slider.js

YahooUI,搞WEB开发的朋友值得看一看

/* Copyright (c) 2006 Yahoo! Inc. All rights reserved. */

/**
 * @class a DragDrop implementation that can be used as a background for a
 * slider.  It takes a reference to the thumb instance 
 * so it can delegate some of the events to it.  The goal is to make the 
 * thumb jump to the location on the background when the background is 
 * clicked.  
 *
 * @extends YAHOO.util.DragDrop
 * @constructor
 * @param {String} id the id of the element linked to this instance
 * @param {String} sGroup the group of related DragDrop items
 */
YAHOO.widget.Slider = function(sElementId, sGroup, oThumb) {
	if (sElementId) {
		this.init(sElementId, sGroup, true);
		this.logger = new ygLogger("Slider " + sElementId);
		var self = this;

		/**
		 * a YAHOO.widget.SliderThumb instance that we will use to 
		 * reposition the thumb when the background is clicked
		 *
		 * @type YAHOO.widget.Slider 
		 */
		this.thumb = oThumb;

		// add handler for the handle onchange event
		oThumb.onChange = function() { 
			self.onThumbChange(); 
		};

		var el = oThumb.getEl();

		/**
		 * the center of the slider element is stored so we can position 
		 * place it in the correct position when the background is clicked
		 *
		 * @type Coordinate
		 */
		this.thumbCenterPoint = { x:el.offsetWidth/2, y:el.offsetHeight/2 };

		/**
		 * Overrides the isTarget property in YAHOO.util.DragDrop
		 * @private
		 */
		this.isTarget = false;
	
		/**
		 * Flag that determines if the thumb will animate when moved
		 * @type boolean
		 */
		this.animate = YAHOO.widget.Slider.ANIM_AVAIL;

        /**
         * The basline position of the background element, used
         * to determine if the background has moved since the last
         * operation.
         * @type int[]
         */
        this.baselinePos = YAHOO.util.Dom.getXY(this.getEl());

		/**
		 * Adjustment factor for tick animation, the more ticks, the
		 * faster the animation (by default)
		 *
		 * @type int
		 */
		this.tickPause = 40;
		if (oThumb._isHoriz && oThumb.xTicks) {
			this.tickPause = Math.round(360 / oThumb.xTicks.length);
		} else if (oThumb.yTicks) {
			this.tickPause = Math.round(360 / oThumb.yTicks.length);
		}

		// delegate thumb methods
		oThumb.onMouseDown = function () { return self.focus(); };
		oThumb.b4MouseDown = function () { return self.b4MouseDown(); };
		// oThumb.lock = function() { self.lock(); };
		// oThumb.unlock = function() { self.unlock(); };
		oThumb.onMouseUp = function() { self.onMouseUp(); };
		oThumb.onDrag = function() { self.fireEvents(); };
	}

    // this.maintainOffset = true;
};

YAHOO.widget.Slider.prototype = new YAHOO.util.DragDrop();

/**
 * Factory method for creating a horizontal slider
 *
 * @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 {YAHOO.widget.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));
};

/**
 * Factory method for creating a vertical slider
 *
 * @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 {YAHOO.widget.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));
};

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));
};

YAHOO.widget.Slider.ANIM_AVAIL = true;
/**
 * Lock the slider, overrides YAHOO.util.DragDrop
 */
YAHOO.widget.Slider.prototype.lock = function() {
	this.logger.debug("locking");
	this.thumb.lock();
	this.locked = true;
};

/**
 * Unlock the slider, overrides YAHOO.util.DragDrop
 */
YAHOO.widget.Slider.prototype.unlock = function() {
	this.logger.debug("unlocking");
	this.thumb.unlock();
	this.locked = false;
};

/**
 * handles mouseup event on the slider background
 *
 * @private
 */
YAHOO.widget.Slider.prototype.onMouseUp = function() {
	this.logger.debug("bg mouseup");
	this._deferSlideEnd = true;
	this.fireEvents();

};

/**
 * Try to focus the element when clicked so we can add
 * accessibility features
 *
 * @private
 */
YAHOO.widget.Slider.prototype.focus = function() {
    this.logger.debug("focus");

    // Focus the background element if possible
    var el = this.getEl();

    if (el.focus) {
        el.focus();
    }

    this.verifyOffset();

    if (this.isLocked()) {
        return false;
    } else {

        this.onSlideStart();
	    return true;
    }

};

/**
 * Event that fires when the value of the slider has changed
 *
 * @param {int} offsetFromStart the number of pixels the thumb has moved
 * from its start position
 */
YAHOO.widget.Slider.prototype.onChange = function (firstOffset, secondOffset) { 
	/* override me */ 
	this.logger.debug("onChange: " + firstOffset + ", " + secondOffset);
};

/**
 * Event that fires when the at the beginning of the slider thumb move
 */
YAHOO.widget.Slider.prototype.onSlideStart = function () { 
	/* override me */ 
	this.logger.debug("onSlideStart");
};

/**
 * Event that fires at the end of a slider thumb move
 */
YAHOO.widget.Slider.prototype.onSlideEnd = function () { 
	/* override me */ 
	this.logger.debug("onSlideEnd");
};

/**
 * Returns the slider's thumb offset from the start position
 *
 * @return {int} the current value
 */
YAHOO.widget.Slider.prototype.getValue = function () { 
	return this.thumb.getValue();
};

YAHOO.widget.Slider.prototype.getXValue = function () { 
	return this.thumb.getXValue();
};

YAHOO.widget.Slider.prototype.getYValue = function () { 
	return this.thumb.getYValue();
};

YAHOO.widget.Slider.prototype.onThumbChange = function () { 
	var t = this.thumb;
	if (t._isRegion) {
		t.onChange(t.getXValue(), t.getYValue());
	} else {
		t.onChange(t.getValue());
	}

};

/**
 * Provides a way to set the value of the slider in code.
 *
 * @param {int} newOffset the number of pixels the thumb should be
 * positioned away from the initial start point 
 * @param {boolean} skip animation set to true to disable the animation
 * for this move action (but not others).
 * @return {boolean} true if the move was performed, false if it failed
 */
YAHOO.widget.Slider.prototype.setValue = function(newOffset, skipAnim) {

    if (this.isLocked()) {
        this.logger.debug("Can't set the value, the control is locked");
        return false;
    }

	if ( isNaN(newOffset) ) {
		this.logger.debug("setValue, Illegal argument: " + newOffset);
		return false;
	}

	var t = this.thumb;
	var newX, newY;
	if (t._isRegion) {
        return false;
	} else if (t._isHoriz) {
		newX = t.initPageX + newOffset + this.thumbCenterPoint.x;
		this.moveThumb(newX, t.initPageY, skipAnim);
	} else {
		newY = t.initPageY + newOffset + this.thumbCenterPoint.y;
		this.moveThumb(t.initPageX, newY, skipAnim);
	}

	return true;
};

/**
 * Provides a way to set the value of the region slider in code.
 *
 * @param {int} newOffset the number of pixels the thumb should be
 * positioned away from the initial start point 
 * @param {int} newOffset2 the number of pixels the thumb should be
 * positioned away from the initial start point (y axis for region)
 * @param {boolean} skip animation set to true to disable the animation
 * for this move action (but not others).
 * @return {boolean} true if the move was performed, false if it failed
 */
YAHOO.widget.Slider.prototype.setRegionValue = function(newOffset, newOffset2, skipAnim) {

    if (this.isLocked()) {
        this.logger.debug("Can't set the value, the control is locked");
        return false;
    }

	if ( isNaN(newOffset) ) {
		this.logger.debug("setRegionValue, Illegal argument: " + newOffset);
		return false;
	}

	var t = this.thumb;
	if (t._isRegion) {
		var newX = t.initPageX + newOffset + this.thumbCenterPoint.x;
		var newY = t.initPageY + newOffset2 + this.thumbCenterPoint.y;
		this.moveThumb(newX, newY, skipAnim);
	    return true;
	}

    return false;

};

/**
 * Checks the background position element position.  If it has moved from the
 * baseline position, the constraints for the thumb are reset
 * @return {boolean} True if the offset is the same as the baseline.
 */
YAHOO.widget.Slider.prototype.verifyOffset = function() {

    var newPos = YAHOO.util.Dom.getXY(this.getEl());

    if (newPos[0] != this.baselinePos[0] || newPos[1] != this.baselinePos[1]) {
        this.logger.debug("background moved, resetting constraints");
        this.thumb.resetConstraints();
        this.baselinePos = newPos;
        return false;
    }

    return true;
};

/**
 * Move the associated slider moved to a timeout to try to get around the 
 * mousedown stealing moz does when I move the slider element between the 
 * cursor and the background during the mouseup event
 *
 * @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
 * @private
 */
YAHOO.widget.Slider.prototype.moveThumb = function(x, y, skipAnim) {

	this.logger.debug("move thumb, x: "  + x + ", y: " + y);

    this.verifyOffset();

	var self = this;
	var t = this.thumb;
    //if (t._graduated) {
	    //t.setDelta(0, 0);
    //} else {
	    t.setDelta(this.thumbCenterPoint.x, this.thumbCenterPoint.y);
    //}
	var _p = t.getTargetCoord(x, y);
    var p = [_p.x, _p.y];

	if (this.animate && YAHOO.widget.Slider.ANIM_AVAIL && t._graduated && !skipAnim) {
		this.logger.debug("graduated");
		// this.thumb._animating = true;
		this.lock();
		
		setTimeout( function() { self.moveOneTick(p); }, this.tickPause );

	} else if (this.animate && YAHOO.widget.Slider.ANIM_AVAIL && !skipAnim) {
		this.logger.debug("animating to " + p);

		// this.thumb._animating = true;
		this.lock();