slider.js

javascript 很酷的类库

		height:height,
		vertical:this.vertical,
		capSize:this.trackCapSize,
		src:"[SKIN]" + (this.vertical ? isc.Slider.VERTICAL_SRC_PREFIX : isc.Slider.HORIZONTAL_SRC_PREFIX) + this.trackSrc,
		skinImgDir:this.skinImgDir,
		imageType:this.trackImageType,
        // allow the thumb and the track to have focus, but set exclude them from the tab order
        // this allows for bubbling of keypress events after the user has clicked on the thumb or
        // track of the slider
        canFocus:true,
        tabIndex:-1,
        cacheImageSizes: false
		//backgroundColor:"#666666"	// in case images aren't available
	});
},


//------  _createThumb()
// Creates, initializes, and returns a new Img widget to be the slider's thumb.
_createThumb : function (top, left, width, height) {
	return isc.Img.newInstance({
		ID:this.getID()+"_thumb",
		autoDraw:false,
		left:left,
		top:top,
		width:width,
		height:height,
		src:"[SKIN]" + (this.vertical ? isc.Slider.VERTICAL_SRC_PREFIX : isc.Slider.HORIZONTAL_SRC_PREFIX) + this.thumbSrc,
		skinImgDir:this.skinImgDir,
		canDrag:true,
		dragAppearance:isc.EventHandler.NONE,
		cursor:isc.Canvas.HAND,
		dragMove:function () { this.parentElement._thumbMove(); return false },
        // We want the thumb to move with the track, but NOT resize with it.
        _resizeWithMaster:false,
        
		
		dragStart:function(){
			var EH = isc.EventHandler;
			EH.dragOffsetX = -1 * (this.getPageLeft() - EH.mouseDownEvent.x);
			EH.dragOffsetY = -1 * (this.getPageTop() - EH.mouseDownEvent.y);
            this.parentElement._thumbIsDragging = true;
			return EH.STOP_BUBBLING;
		},
		dragStop:function(){
            this.parentElement._thumbIsDragging = false;
            this.setState(isc.Slider.UP);
            if (this.parentElement.valueChangedOnRelease) {
                this.parentElement.valueChanged(this.parentElement.value);
            }
            return false;
        },
		mouseDown:function () { this.setState(isc.Slider.DOWN) },
		mouseUp:function () { this.setState(isc.Slider.UP); return false },
        // allow the thumb and the track to have focus, but set exclude them from the tab order
        // this allows for bubbling of keypress events after the user has clicked on the thumb or
        // track of the slider
        canFocus:true,
        tabIndex:-1
		//backgroundColor:"#AAAAAA"	// in case images aren't available
	});
},


//------  _thumbMove()
// Called by the dragMove handler for the slider thumb (this._thumb). Calculates
// the new thumb position, and if the position has changed: moves the thumb widget,
// calculates the new slider value (this.value) and sends the 'sliderMove' event
// to the target (this.sliderTarget).
// The 'fromClick' parameter indicates whether this movement is called from a click
// (eg elsewhere on the track) instead of a drag, in which case we might animate the thumb.
_thumbMove : function (fromClick) {
	var thumbPosition, rawValue;

	if (this.vertical) {
        var trackTop = this._track.getTop(),
            trackEnd = this._usableLength + trackTop; 

        // determine the desired position on the track
		thumbPosition = isc.EventHandler.getY() - isc.EventHandler.dragOffsetY - this.getPageTop();
		thumbPosition = Math.max(trackTop, Math.min(trackEnd, thumbPosition));
        // for values calculations we want positions relative to trackTop
        var thumbOffset = thumbPosition - trackTop;
		if (this.numValues) {
            // do not round thumbOffset yet, since it is used to calculate the raw value below
            thumbOffset = Math.round(thumbOffset/this._stepSize) * this._stepSize;
            thumbPosition = Math.round(thumbOffset) + trackTop;
        }
		if (thumbPosition == this._thumb.getTop()) return; // no thumb movement
        //>DEBUG
        this.logDebug("drag-moving thumb to:"+ thumbPosition)
        //<DEBUG
        if (fromClick && this.animateThumb) {
            this._thumbAnimation = this._thumb.animateMove(this._thumb.getLeft(), thumbPosition,
                null, this.animateThumbTime, this.animateThumbAcceleration);
        } else {
		    this._thumb.setTop(thumbPosition);
        }

		rawValue = (this.flipValues ? thumbOffset/this._usableLength : 1-thumbOffset/this._usableLength);
	} else {
        var trackLeft = this._track.getLeft(),
            trackEnd = this._usableLength + trackLeft;
            
		thumbPosition = isc.EventHandler.getX() - isc.EventHandler.dragOffsetX - this.getPageLeft();
		thumbPosition = Math.max(trackLeft, Math.min(trackEnd, thumbPosition));
        var thumbOffset = thumbPosition - trackLeft;
		if (this.numValues) {
            // do not round thumbOffset yet, since it is used to calculate the raw value below
            thumbOffset = Math.round(thumbOffset/this._stepSize) * this._stepSize;
            thumbPosition = Math.round(thumbOffset) + trackLeft;
        }
		if (thumbPosition == this._thumb.getLeft()) return; // no thumb movement
        //>DEBUG
        this.logDebug("drag-moving thumb to:"+ thumbPosition)
        //<DEBUG
        if (fromClick && this.animateThumb) {
            this._thumbAnimation = this._thumb.animateMove(thumbPosition, this._thumb.getTop(),
                null, this.animateThumbTime, this.animateThumbAcceleration);
        } else {
		    this._thumb.setLeft(thumbPosition);
        }
        
		rawValue = (this.flipValues ? 1-thumbOffset/this._usableLength : thumbOffset/this._usableLength);
	}

    if (this.maxValue == this.minValue) {
        this.value = this.minValue;	
    } else {
    	if (this.roundValues)
       		this.value = Math.round(rawValue*(this.maxValue-this.minValue) + this.minValue);
    	else
    		this.value = rawValue*(this.maxValue-this.minValue) + this.minValue;
    }
    //>DEBUG
    this.logDebug("slider value from drag-move:"+ this.value);
    //<DEBUG
	
    // NB: second part of this conditional is required because slider.mouseUp calls slider._thumbMove
	if (this.valueChangedOnDrag || !this._thumbIsDragging) {
        this.valueChanged(this.value);	// observable method
	}
    
	if (this.sliderTarget) isc.EventHandler.handleEvent(this.sliderTarget, isc.Slider.EVENTNAME, this);
},

// _updateValueLabel is called on 'valueChanged' observation when the valueLabel is set up
_updateValueLabel : function () {
    var label = this._valueLabel;    
    if (label == null) return;

    label.setContents(this.getValue());

    var thumb = this._thumb;

    if (this.vertical) {
        label.setTop(parseInt((thumb.getTop() + thumb.getHeight()/2) - label.getHeight() / 2));
    } else {
        // Center the label over the thumb, but avoid it overflowing the slider
        
        if (label.isDrawn()) label.redraw();
        var width = label.getVisibleWidth(),
            desiredLeft = parseInt((thumb.getLeft() + thumb.getWidth()/2) - width/2);

        // clamp the label over the available space.
        if (desiredLeft + width > this.getWidth()) desiredLeft = this.getWidth() - width;
        if (desiredLeft < 0) desiredLeft = 0;
        label.setLeft(desiredLeft);
    }
},


mouseUp : function() {
    
	isc.EventHandler.dragOffsetX = isc.EventHandler.dragOffsetY = 
             Math.floor(this.thumbThinWidth/2);
	if (this.valueChangedOnClick) this._thumbMove(true);
},


//------ setValue(newValue)
//> @method slider.setValue()   ([])
// Sets the slider value to newValue and moves the slider thumb to the appropriate position for this
// value. Sends the 'sliderMove' event to the sliderTarget.
//
// @param newValue (float) the new value
// @param noAnimation (boolean) do not animate the slider thumb to the new value
// @visibility external
//<
setValue : function (newValue, noAnimation) {
	var rawValue, thumbOffset;
	if (!isc.isA.Number(newValue)) return;
	
	// Ensure minValue<=newValue<=maxValue.
	newValue = Math.max(this.minValue, (Math.min(newValue, this.maxValue)));
	
	// Set value, rounding if specified.
	this.value = (this.roundValues ? Math.round(newValue) : newValue);
	
	// Calculate rawValue and resulting thumbOffset.
	if (this.minValue == this.maxValue) rawValue = 1;
    else rawValue = (this.value-this.minValue)/(this.maxValue-this.minValue);
	thumbOffset = rawValue * this._usableLength;
    
	// Set the thumb position.
    var thumbPosition;
	if (this.vertical) {
        thumbPosition = this._track.getTop() + 
                        parseInt(this.flipValues ? thumbOffset : this._usableLength - thumbOffset);
        if (this.animateThumb && !noAnimation) {
            this._thumbAnimation = this._thumb.animateMove(this._thumb.getLeft(), thumbPosition,
                null, this.animateThumbTime, this.animateThumbAcceleration);
        } else {
		    this._thumb.setTop(thumbPosition);
        }
    } else {
        thumbPosition = this._track.getLeft() + 
                        parseInt(this.flipValues ? this._usableLength - thumbOffset : thumbOffset);
        if (this.animateThumb && !noAnimation) {
            this._thumbAnimation = this._thumb.animateMove(thumbPosition, this._thumb.getTop(),
                null, this.animateThumbTime, this.animateThumbAcceleration);
        } else {
            this._thumb.setLeft(thumbPosition);
        }
    }
    
	this.valueChanged(this.value);	// observable method
	
	if (this.sliderTarget) isc.EventHandler.handleEvent(this.sliderTarget, isc.Slider.EVENTNAME, this);
},


//------ getValue()
//>	@method	slider.getValue()   ([])
// Returns the current slider value.
//
//		@return	(float)	current slider value
// @visibility external
//<
getValue : function () {
	return this.value;
},


//------ valueChanged()
//> @method slider.valueChanged()   ([A])
// This method is called when the slider value changes. This occurs when the setValue method is
// called, or when the slider is moved. Observe this method to be notified when the slider value
// changes.
//
// @param value (number) the new value
//
// @see method:class.observe
// @visibility external
// @example slider
//<
valueChanged : function (value) {
},


//> @method slider.valueIsChanging()   ([A])
// Call this method in your +link{slider.valueChanged()} handler to determine whether the
// value change is due to an ongoing drag interaction (true) or due to a thumb-release,
// mouse click, keypress, or programmatic event (false). You may choose to execute temporary or
// partial updates while the slider thumb is dragged, and final updates or persistence of the value
// in response to the other events.
//
// @return  (boolean)   true if user is still dragging the slider thumb, false otherwise
//
// @visibility external
//<

valueIsChanging : function () {
    return (this._thumbIsDragging == true);
},


// HandleKeyPress:
// If Home, End, or the arrow keys are pressed while this slider has focus, move the slider
// appropriately.
// 20050912: Thumb animation is explicitly disabled by setting the noAnimation parameter of
// setValue(), because the thumb jumps around when one of the arrow keys is held down. Not worth
// tracking down, since the effect is already pretty close to an animation in this case.
handleKeyPress : function (event, eventInfo) {

    var keyName = event.keyName;

    // Note: if this.flipValues is true, vertical sliders will start at the top, and increase
    // toward the bottom, horizontal sliders will start at the right and increase towards the
    // left

    // "Home" will move the slider all the way to the min value (may be either end depending on
    // flipValues)
    if (keyName == "Home") {
        this.setValue(this.minValue, true);
        return false;
    }
    // "End" will move the slider all the way to the max value
    if (keyName == "End") {
        this.setValue(this.maxValue, true);
        return false;
    }
    
    // If an arrow key was pressed, move the slider one step in the direction indicated

    // Calculate one step from this.stepPercent:
    var change = (this.maxValue - this.minValue) * this.stepPercent / 100;
    // if roundValues is enabled, ensure we always move (a change < 1 could be rounded to no
    // change)
    if (this.roundValues && change < 1) change = 1;

    if (this.vertical) {
        if ((this.flipValues && keyName == "Arrow_Up") ||
            (!this.flipValues && keyName == "Arrow_Down"))
        {
            this.setValue(this.getValue() - change, true);
            return false;
            
        } else if ( (this.flipValues && keyName == "Arrow_Down") || 
                    (!this.flipValues && keyName == "Arrow_Up"))
        {
            this.setValue(this.getValue() + change, true);
            return false
        }
    
    } else {
        if ((this.flipValues && keyName == "Arrow_Left") || 
            (!this.flipValues && keyName == "Arrow_Right"))
        {
            this.setValue(this.getValue() + change, true)
            return false;
            
        } else if ( (this.flipValues && keyName == "Arrow_Right") || 
                    (!this.flipValues && keyName == "Arrow_Left"))
        {
            this.setValue(this.getValue() - change, true)
            return false;
        }
    }
    
    if (this.keyPress) {
        this.convertToMethod("keyPress");
        return this.keyPress(event, eventInfo);
    }
},

// override setCanFocus to set the canFocus property on the track and the thumb as well
setCanFocus : function (canFocus) {
    this.Super("canFocus", arguments);
    if (this._thumb != null) this._thumb.setCanFocus(canFocus);
    if (this._track != null) this._track.setCanFocus(canFocus);
    
}
});


isc.Slider.registerStringMethods({
    valueChanged : "value"
})

//!<Deferred