slider.js

javascript 很酷的类库

//!>Deferred
//----------  Define instance methods  ----------\\
isc.Slider.addMethods({


//------  initWidget()
// Extends superclass initWidget() to set slider dimensions, create the track and thumb child
// widgets, and initialize the slider's target, value, and enabled state.
initWidget : function () {
	this.Super("initWidget", arguments);
    // If passed a minValue that's greater than a max value, swap them.
    // If they are equal just leave them for now - we'll always return that value.
    if (!(this.minValue <= this.maxValue)) {
        this.logWarn("Slider specified with minValue:"+ this.minValue 
                    + ", greater than maxValue:"+ this.maxValue 
                    + " - reversing max and min value.");
        var minValue = this.minValue;
        this.minValue = this.maxValue;
        this.maxValue = minValue;
    }
    var specifiedWidth = this._userWidth,
        specifiedHeight = this._userHeight;

    // If the user didn't specify a width / height, default them based on which components are
    // being shown.
	if (this.vertical) {
        if (specifiedWidth == null) {
            var width = Math.max(this.thumbThickWidth, this.trackWidth);
            if (this.showValue) width += this.labelWidth + this.labelSpacing;
            if (this.showRange) width += this.labelWidth + this.labelSpacing;
            //>DEBUG
            this.logInfo("defaulting width to " + width + "px");            
            //<DEBUG
    		this.setWidth(width);
        } 
        if (specifiedHeight == null) {
            var height = this.length;
            if (this.showTitle) height += this.labelHeight + this.labelSpacing;
            //>DEBUG
            this.logInfo("no specified height on vertical Slider - defaulting to:" + height +
                         " based on slider.length of " + this.length);
            //<DEBUG
            this.setHeight(height);
        } else {
            // if the user specifies both length and height, let height win.
            this.length = this.getHeight();
            if (this.showTitle) this.length -= (this.labelHeight + this.labelSpacing);            
            //>DEBUG            
            this.logInfo("setting slider track length to:"+ this.length 
                        + ", based on specified height");
            //<DEBUG
        }
	} else {
        if (specifiedHeight == null) {
            var height = Math.max(this.thumbThickWidth, this.trackWidth);
            if (this.showValue) height += this.labelHeight + this.labelSpacing;
            if (this.showRange) height += this.labelHeight + this.labelSpacing;
            //>DEBUG
            this.logInfo("defaulting height to " + height + "px");
            //<DEBUG
    		this.setHeight(height);
        }
        if (specifiedWidth == null) {
            var width = (this.length + (this.showTitle ? this.labelWidth + this.labelSpacing: 0));
            //>DEBUG
            this.logInfo("no specified width on horizontal Slider - defaulting to:" + width +
                         " based on slider.length of " + this.length);
            //<DEBUG
    		this.setWidth(width);
        } else {
            // if the user specifies both length and width let width win.
            this.length = this.getWidth();
            if (this.showTitle) this.length -= (this.labelWidth + this.labelSpacing);
            //>DEBUG            
            this.logInfo("setting slider track length to:"+ this.length 
                        + ", based on specified width");
            //<DEBUG
        }
	}

	// calculate usable length and step size, in pixels, for use in ongoing calculations
	this._usableLength = this.length-this.thumbThinWidth;
	if (this.numValues && this.numValues > 1) {
        this._stepSize = this._usableLength/(this.numValues-1);
    }

	// create track and thumb
    this._createTrackLayout();
	
	// create title, range, value labels if specified
	if (this.showTitle) this._titleLabel = this.addChild(this._createTitleLabel());
	if (this.showRange) {
		this._minLabel = this.addChild(this._createRangeLabel("min"));
		this._maxLabel = this.addChild(this._createRangeLabel("max"));
	}
	if (this.showValue) {
        this._valueLabel = this._thumb.addPeer(this._createValueLabel());
        this._valueLabel.sendToBack();
        // Ensure the valueLabel is drawn at the correct position.
        this._updateValueLabel();
    }
	
	// If an event is sent with a null target, the event handling system determines the
	// target based on the last mouse event. We definitely don't want that, so make this
	// slider the target if no target has been specified.
    
	
	this.setValue(this.value, !(this.animateThumbInit==true));
},

// Override resizeBy to resize the track.
// setWidth / setHeight / setRect et al. fall through to this method
resizeBy : function (deltaX, deltaY) {
    this.Super("resizeBy", arguments);
    if (!this._track) return;
    
    var vertical = this.vertical;
    
    if ((vertical && deltaY != 0) || (!vertical && deltaX != 0)) {
        // Update length / usable length for caculations...
        this.length += vertical ? deltaY : deltaX;
        this._usableLength = this.length-this.thumbThinWidth;
        // resize the track
        if (vertical) this._track.resizeBy(0, deltaY)
        else this._track.resizeBy(deltaX, 0);

    	// re-calculate stepSize if numValues is defined
    	if (this.numValues && this.numValues > 1) {
            this._stepSize = this._usableLength/(this.numValues-1);
        }

        // fire setValue to update the thumb.
        this.setValue(this.value, true); // no animation
        // Also move the max (or min) marker
        if (this.showRange) {
            if (this.vertical) {
                var endMarker = this.flipValues ? this._maxLabel : this._minLabel;
                endMarker.moveBy(0, deltaY);
            } else {
                var endMarker = this.flipValues ? this._minLabel : this._maxLabel;
                endMarker.moveBy(deltaX, 0);
            }
        }
    }
},

//------  _createRangeLabel(minOrMax)
// Creates, initializes, and returns a new Label widget to be the slider's mix or max value
// label. minOrMax must be the string "min" or "max".
_createRangeLabel : function (minOrMax) {
	var labelLeft, labelTop, labelAlign, labelValign,
        // Should the label be at the start (top / left) or end (bottom/right) of the slider?
        atStartPosition = (this.vertical ? minOrMax == "max" : minOrMax == "min");
     if (this.flipValues) atStartPosition = !atStartPosition;
    
    // For vertical sliders, range labels appear to the right of the slider track
    // for horizontal sliders, they appear below the slider track.
	if (this.vertical) {
		labelLeft = Math.max(this.thumbThickWidth, this.trackWidth) + this.labelSpacing +
                    (this.showValue ? this.labelWidth + this.labelSpacing : 0);
		labelAlign = isc.Canvas.LEFT;
        if (atStartPosition) {
            labelTop = (this.showTitle ? this.labelHeight + this.labelSpacing : 0);
			labelValign = isc.Canvas.TOP;
		} else {
			labelTop = (this.showTitle ? this.labelHeight + this.labelSpacing: 0) 
                        + (this.length - this.labelHeight);
			labelValign = isc.Canvas.BOTTOM;
		}
	} else { // this.horizontal
		labelTop = Math.max(this.thumbThickWidth, this.trackWidth) + this.labelSpacing +
                    (this.showValue ? this.labelHeight + this.labelSpacing : 0);

		labelValign = isc.Canvas.TOP;
        if (atStartPosition) {
			labelLeft = (this.showTitle ? this.labelWidth + this.labelSpacing : 0);
			labelAlign = isc.Canvas.LEFT;
		} else {
			labelLeft = (this.showTitle ? this.labelWidth + this.labelSpacing : 0) 
                            + this.length - this.labelWidth;
			labelAlign = isc.Canvas.RIGHT;
		}
	}

	return isc.Label.newInstance({
		ID:this.getID()+"_"+minOrMax+"Label",
        autoDraw:false, 
		left:labelLeft,
		top:labelTop,
		width:this.labelWidth,
		height:this.labelHeight,
		align:labelAlign,
		valign:labelValign,
		className:this.rangeStyle,
		contents:(minOrMax == "min" ?
			(this.minValueLabel ? this.minValueLabel : this.minValue) : 
			(this.maxValueLabel ? this.maxValueLabel : this.maxValue) )
        
	});
},


//------  _createTitleLabel()
// Creates, initializes, and returns a new Label widget to be the slider's title label.
_createTitleLabel : function () {
    // Title label will always float at 0,0 within the slider.
	var labelAlign = (this.vertical ? isc.Canvas.CENTER : isc.Canvas.RIGHT);
	
	return isc.Label.newInstance({
		ID:this.getID()+"_titleLabel",
        autoDraw:false,
		left:0,
		top:0,
		width:(this.vertical ? this.getWidth() : this.labelWidth),
		height:(this.vertical ? this.labelHeight : this.getHeight()),
		align:labelAlign,
		className:this.titleStyle,
		contents:this.title
	});
},


//------  _createValueLabel()
// Creates, initializes, and returns a new Label widget to be the slider's dynamic value label.
_createValueLabel : function () {
	var labelLeft, labelTop, labelWidth, labelAlign, labelValign;
	
	if (this.vertical) {
		labelLeft = this._thumb.getLeft() - this.labelWidth - this.labelSpacing;
        // align the center of the label with the center of the thumb
		labelTop = this._thumb.getTop() 
                    + parseInt(this._thumb.getHeight()/2 - this.labelHeight/2);
		labelAlign = isc.Canvas.RIGHT;
		labelValign = isc.Canvas.CENTER;
        labelWidth = this.labelWidth;
	} else {
		labelLeft = this._thumb.getLeft() 
                    + parseInt(this._thumb.getWidth()/2 - this.labelWidth/2);
		labelTop = this._thumb.getTop() - this.labelHeight - this.labelSpacing;
		labelAlign = isc.Canvas.CENTER;
		labelValign = isc.Canvas.BOTTOM;
        labelWidth = 5; // Specify a small size for the label, and allow it's content to
                        // overflow.
	}
	
	var label = isc.Label.newInstance({
		ID:this.getID()+"_valueLabel",
        autoDraw:false,
		left:labelLeft,
		top:labelTop,
		width:labelWidth,
		height:this.labelHeight,
		align:labelAlign,
		className:this.valueStyle,
		contents:this.value,
		mouseUp:function () { return false; },
        moveWithMaster:false,   // We'll explicitly handle moving the valueLabel
		observes:[{source:this, message:"valueChanged", action:"this._updateValueLabel();"}]
	});
    
    if (!this.vertical) {
        isc.addMethods(label, {        
            // Override draw() to reposition the label after drawing.
            // we have to do this as we don't know the drawn size of the label until it has been
            // drawn in the DOM, and the desired position depends on the drawn size.
            draw : function () {
                var prevVis = this.visibility
                // avoid a flash by drawing with visibility hidden initially
                this.hide();
                this.Super("draw", arguments);
                this.parentElement._updateValueLabel();
                this.setVisibility(this.prevVis);
            }
        });
    };
    
    return label;
},


//_createTrackLayout()
// Internal function fired once at init time to create the track and thumb for the slider

_createTrackLayout : function () {

    // Determine the rect for the trackLayout.  We will center the thumb and track along the
    // long axis of this rect.
    var layoutRect = this._getTrackLayoutPos(),
        trackLeft, trackTop, 
        trackWidth = (this.vertical ? this.trackWidth : this.length), 
        trackHeight = (this.vertical ? this.length : this.trackWidth),
        thumbLeft, thumbTop, 
        thumbWidth = (this.vertical ? this.thumbThickWidth : this.thumbThinWidth), 
        thumbHeight = (this.vertical ? this.thumbThinWidth : this.thumbThickWidth)
    ;
    
    
    var thumbThicker = this.thumbThickWidth > this.trackWidth;
    if (thumbThicker) {
        if (this.vertical) {
            thumbLeft = layoutRect[0];
            trackLeft = thumbLeft + parseInt(this.thumbThickWidth/2 - this.trackWidth/2);
            trackTop = layoutRect[1];
            // Doesn't really matter where we put the thumb vertically - it'll be shifted via 
            // 'setValue()'
            thumbTop = layoutRect[1];
        } else {
            thumbTop = layoutRect[1];           
            trackTop = thumbTop + parseInt(this.thumbThickWidth/2 - this.trackWidth/2);
            trackLeft = layoutRect[0];
            thumbLeft = layoutRect[0];
        }
    // track is thicker than the thumb
    } else {
        if (this.vertical) {
            trackLeft = layoutRect[0];
            thumbLeft = trackLeft + parseInt(this.trackWidth/2 - this.thumbThinWidth/2);
            trackTop = layoutRect[1];
            thumbTop = layoutRect[1];
        } else {
            trackTop = layoutRect[1];
            thumbTop = trackTop + parseInt(this.trackWidth/2 - this.thumbThinWidth/2);
            trackLeft = layoutRect[0];
            thumbLeft = layoutRect[0];
        }
    }
    
    //>DEBUG
    this.logDebug("calculated coords for track:"+ [trackLeft, trackTop, trackWidth, trackHeight]);
    this.logDebug("calculated coords for thumb:"+ [thumbLeft, thumbTop, thumbWidth, thumbHeight]);
    //<DEBUG
    
	this._track = this.addChild(this._createTrack(trackTop, trackLeft, trackWidth, trackHeight));
    // Make the thumb a peer of the track. When the track gets moved, so will the thumb
    // (but the thumb can move without moving the track, of course)
	this._thumb = this._track.addPeer(this._createThumb(thumbTop, thumbLeft, thumbWidth, thumbHeight));
},

// _getTrackLayoutPos()
_getTrackLayoutPos : function () {
    // value floats to the left of a vertical slider and above a horizontal one
    // title floats above a vertical slider and to the left of a horizontal one.
    var left = this.vertical ? (this.showValue ? this.labelWidth + this.labelSpacing: 0) 
                             : (this.showTitle ? this.labelWidth + this.labelSpacing: 0),
        // title always floats above a slider
        top = this.vertical ? (this.showTitle ? this.labelHeight + this.labelSpacing : 0) 
                            : (this.showValue ? this.labelHeight + this.labelSpacing: 0);
   
    return [left, top];
},

//------  _createTrack()
// Creates, initializes, and returns a new StretchImg widget to be the slider's track.
_createTrack : function (top, left, width, height) {

	return isc.StretchImg.newInstance({
		ID:this.getID()+"_track",
		autoDraw:false,
		left:left,
		top:top,
		width:width,