scrollbar.js

javascript 很酷的类库

//<
trackStart : function () {
	if (this.vertical)
		return this.getTop() + this.btnSize - this.startThumbOverlap;
	else
		return this.getLeft() + this.btnSize - this.startThumbOverlap;
},

//>	@method	scrollbar.directionRelativeToThumb()	(A)
// Return where an x,y coordinate is in relation to the scroll thumb, accounting for direction
//
//		@return	(number)
//			negative == before thumb
//			0 == inside thumb
//			positive == after thumb
//<
directionRelativeToThumb : function () {
 
    var coord, thumb = this.thumb, thumbEdge, thumbSize;   
    if (this.vertical) {
        coord = isc.EH.getY();
        thumbEdge = thumb.getPageTop();
        thumbSize = thumb.getHeight();
    } else {
        coord = isc.EH.getX();
        thumbEdge = thumb.getPageLeft();
        thumbSize = thumb.getWidth();
    }
    if (coord < thumbEdge) return -1;
    else if (coord > thumbEdge + thumbSize) return 1;
    return 0;
},

//>	@method	scrollbar.mouseDown()	(A)
//			mouseDown handler -- figures out what was clicked on and what to do
//		@group	event handling
//
//		@return	(boolean)	false == cancel event processing
//<
mouseDown : function () {
	// figure out which part they clicked in and remember it
	this.clickPart = this.inWhichPart();
    
	// if the click is in a corner, clear the clickPart
	if (this.clickPart == this._$corner) {
		this.clickPart = null;
		return isc.EH.STOP_BUBBLING;
	}
	
	// show that clickPart as down visually
    if (    this.clickPart == this._$track || 
            this.clickPart == this._$track_start ||
            this.clickPart == this._$track_end) {
        this.setState(isc.StatefulCanvas.STATE_DOWN,this._$track);
        this.setState(isc.StatefulCanvas.STATE_DOWN,this._$track_start);
        this.setState(isc.StatefulCanvas.STATE_DOWN,this._$track_end);
    } else this.setState(isc.StatefulCanvas.STATE_DOWN,this.clickPart);

	// remember the 'direction' of the click relative to the thumb
	//	 -1 = before thumb, 0 = inside thumb, 1 = after thumb
	this.startDirection = this.directionRelativeToThumb();

	// return false so we cancel event processing
	return isc.EH.STOP_BUBBLING;
},

//>	@method	scrollbar.mouseStillDown()	(A)
//			mouseStillDown handler
//		@group	event handling
//
//		@return	(boolean)	false == cancel event processing
//<
mouseStillDown : function () {
	// scroll the target according to where the mouse went down
	if (this.clickPart == this._$track || this.showTrackEnds == true && 
            (this.clickPart == this._$track_start || this.clickPart == this._$track_end)) {
        
        // avoid continuing to page scroll if the thumb passes the cursor
        // direction will be zero the the thumb is actually underneath the cursor
        var direction = this.directionRelativeToThumb();
        if (direction != 0 && direction == this.startDirection) {
            // Make a note of the fact that we're doing repeated track scrolls
            // Note: do this on the 2nd track scroll only - we don't want a single click in the
            // track to count as this kind of rapid scrolling
            if (this._initialTrackScroll) {
                delete this._initialTrackScroll;
                this._repeatTrackScrolling = true;
            } else if (!this._repeatTrackScrolling) 
                this._initialTrackScroll = true;
            
        
            this.scrollTarget.scrollByPage(this.vertical, this.startDirection);
        }
        
        
    } else {
        // button click
        this.scrollTarget.scrollByDelta(this.vertical, this.startDirection);
    }

	// return true that mouseStillDown should continue
	//return isc.EventHandler.STOP_BUBBLING;
	return true;
},

doubleClick : function () {
    //this.logWarn("scrollbar double click");
    
    if (isc.Browser.isIE) return this.mouseStillDown();

	// return isc.EventHandler.STOP_BUBBLING so we cancel event processing
	return isc.EH.STOP_BUBBLING;
},

//>	@method	scrollbar.mouseUp()	(A)
//		@group	event handling
//			mouseUp handler for the main scrollbar
//
//		@return	(boolean)	false == cancel event processing
//<
mouseUp : function () {
	// show the clickPart as up again visually
	if (this.clickPart) {
        if (this.clickPart == this._$track ||
            this.clickPart == this._$track_start ||
            this.clickPart == this._$track_end)
        {
            this.setState(isc.StatefulCanvas.STATE_UP,this._$track);
            this.setState(isc.StatefulCanvas.STATE_UP,this._$track_start);
            this.setState(isc.StatefulCanvas.STATE_UP,this._$track_end);
        } else 
            this.setState(isc.StatefulCanvas.STATE_UP,this.clickPart);
    }
    this.clickPart = null;
    this.doneTrackScrolling();

	// return isc.EventHandler.STOP_BUBBLING so we cancel event processing
	return isc.EventHandler.STOP_BUBBLING;
},

// Stop various events from propagating to the parent of the Canvas we are scrolling.
click : isc.EventHandler.stopBubbling,
mouseMove : isc.EventHandler.stopBubbling,
// avoid triggering drag interactions on the track (possible if any of our master's parents are
// canDrag:true and aren't coded to explicitly avoid drag interactions on scrollbars)
prepareForDragging : function () { return false; },

// is the user currently scrolling by dragging the scroll thumb?
isDragScrolling : function () {
    return this._dragScrolling;
},

// is the user scrolling by holding the mouse down over the track?
isRepeatTrackScrolling : function () {
    return this._repeatTrackScrolling;
},

doneTrackScrolling : function () {
    // We're no longer repeat track scrolling
    delete this._initialTrackScroll;
    if (this.isRepeatTrackScrolling()) {
        delete this._repeatTrackScrolling;
        
        // notify the target we're done with 'track scrolling'
        if (this.scrollTarget && this.scrollTarget.doneFastScrolling) this.scrollTarget.doneFastScrolling();
    }
},


//>	@method	scrollbar.thumbDown()	(A)
// Handle mouse down in the thumb
//		@group	event handling
//
//		@return	(boolean)	false == cancel event processing
//<
thumbDown : function () {
	// show the thumb as down
	if (this.allowThumbDownState) {
        this.clickPart = this._$thumb;
        this.thumb.setState(isc.StatefulCanvas.STATE_DOWN);
    }
	return isc.EventHandler.STOP_BUBBLING;
},


//>	@method	scrollbar.thumbDragStart()	(A)
// Handle drag start in the thumb
//		@group	event handling
//
//		@return	(boolean)	false == cancel event processing
//<
thumbDragStart : function () {
	// set the offsetX and offsetY so the thumb moves with the mouse properly
    var EH = isc.EH;
	EH.dragOffsetX = this.thumb.getOffsetX(EH.mouseDownEvent);
	EH.dragOffsetY = this.thumb.getOffsetY(EH.mouseDownEvent);
    this._dragScrolling = true;
	return EH.STOP_BUBBLING;
},

//>	@method	scrollbar.getEventCoord()	(A)
//			return the event coordinate we care about, in the relevant direction
//		@return	(number)	x or y coordinate, relative to our coordinate system
//<
getEventCoord : function () {
    var EH = isc.EH;
	if (this.vertical)
		return EH.getY() - this.getPageTop() - this.btnSize + this.startThumbOverlap - EH.dragOffsetY;
	else
		return EH.getX() - this.getPageLeft() - this.btnSize + this.startThumbOverlap - EH.dragOffsetX;	
},


masterMoved : function (dX,dY,a,b,c,d) {
    if (this.masterElement._settingRect) return;
    return this.invokeSuper(isc.Scrollbar, "masterMoved", dX, dY, a,b,c,d);
},

//>	@method	scrollbar.thumbMove()	(A)
//			mouse move in the thumb
//
//		@return	(boolean)	false == cancel event processing
//<
thumbMove : function () {
		// get the total amount of the track that's scrollable
	var trackSize = this.trackSize() - this.thumbSize(),
		// get the Y coordinate of the event, less the track start and the offsetY from mouseDown
		eventCoord = this.getEventCoord(),
        // get ratio to scroll to
        ratio = eventCoord / trackSize;

    ratio = Math.max(0, Math.min(ratio, 1));

	this.scrollTarget.scrollToRatio(this.vertical, ratio);

	return isc.EventHandler.STOP_BUBBLING;
},


//>	@method	scrollbar.thumbUp()	(A)
//			mouse up in the thumb
//
//		@return	(boolean)	false == cancel event processing
//<
thumbUp : function () {
    // The thumb can catch the mouse up events that really should be going to
    // the track, because the thumb winds up occluding the track when the button is
    // held down long enough to move the thumb to where the mouse pointer is. If we're
    // currently servicing a non-thumb click, bail out and call mouseUp.
    if (this.clickPart != this._$thumb)
        return this.mouseUp();

	// show the thumb as up
	this.thumb.setState(isc.StatefulCanvas.STATE_UP);
	return isc.EventHandler.STOP_BUBBLING;
},

//>	@method	scrollbar.thumbDragStop()
//  Event fired when the user stops dragging the scrollbar thumb
//<
thumbDragStop : function () {
    delete this._dragScrolling;
    
    // doneFastScrolling() - notifies the target that the user is no longer performing
    // rapid scrolls on the widget
    if (this.scrollTarget && this.scrollTarget.doneFastScrolling) this.scrollTarget.doneFastScrolling();
    
    // thumbUp will handle clearing the down state, etc.
    return this.thumbUp();
},


// pass key and mousewheel events through
keyPress : function () {
    return this.ns.EH.bubbleEvent(this.scrollTarget, this.ns.EH.eventTypes.KEY_PRESS);
},
keyDown : function () {
    return this.ns.EH.bubbleEvent(this.scrollTarget, this.ns.EH.eventTypes.KEY_DOWN);
},
keyUp : function () {
    return this.ns.EH.bubbleEvent(this.scrollTarget, this.ns.EH.eventTypes.KEY_UP);
},
mouseWheel : function () {
    return this.ns.EH.bubbleEvent(this.scrollTarget, this.ns.EH.eventTypes.MOUSE_WHEEL);
},

// If this scrollbar was created by a widget automatically, always hide by shifting to 
// top/left and sizing to smallest possible size of the target.

hide : function (a,b,c,d) {
    this.invokeSuper("Scrollbar", "hide", a,b,c,d);
    if (!this._selfManaged && this.scrollTarget != null) {
        this.moveTo(this.scrollTarget.getLeft(), this.scrollTarget.getTop());
        this.resizeTo(1,1);
    }
}

});