scrollbar.js

javascript 很酷的类库

/*
 * Isomorphic SmartClient
 * Version 6.5 (2008-04-30)
 * Copyright(c) 1998-2007 Isomorphic Software, Inc. All rights reserved.
 * "SmartClient" is a trademark of Isomorphic Software, Inc.
 *
 * [e-mail]
 *
 * http://smartclient.com/license
 */

 







//>	@class	Scrollbar
//
//  The Scrollbar widget implements cross-platform, image-based scrollbars that control the
//  scrolling of content in other widgets.   When native, CSS-based scrollbars are not in use,
//  Scrollbar widgets are created and displayed automatically for widgets that require them.
//  <br><br>
//  Even where native scrollbars are functional, it may be desirable to use Scrollbar widgets
//  to customize size, positioning, images, and enabled state. 
//
//  @treeLocation Client Reference/Foundation
//  @visibility external
//<

// Implementation overview:
// The Scrollbar's buttons and track are set up as a standard image array to be drawn by our
// StretchImg superclass.  The Thumb is a separate StretchImg instance, with it's relevant events
// plumbed to the Scrollbar instance (methods in this class prefixed with "thumb"). 
//
// The thumb is moved around via a drag and drop interaction.  Dragging of the thumb and clicks on
// the buttons/track all cause us to call scrollTo() on our target Canvas.
//
// The scroll is a peer of the Canvas it scrolls, so it is redrawn whenever the master redraws.

// declare the class itself
isc.ClassFactory.defineClass("Scrollbar", "StretchImg");

// store thumb defaults in a class level constant
isc.defineClass("ScrollThumb", "StretchImg").addMethods({
    autoDraw:false,
    _generated:true,

    // we redraw the thumb manually, not automatically with parent or master
    _redrawWithMaster:false,
    _resizeWithMaster:false,
    _redrawWithParent:false,

    capSize:2,
    backgroundColor:"#EEEEEE",

    // don't reverse, even in RTL, (in case media is asymetric)
    textDirection:"ltr",

	skinImgDir:"images/Scrollbar/",	
    hSrc:"[SKIN]hthumb.gif",
    vSrc:"[SKIN]vthumb.gif",
    // the thumb drags with a custom drag style
    canDrag:true,
    dragAppearance:isc.EventHandler.NONE,
    dragStartDistance:0, // start drag scrolling on any mouse movement
    dragScrollType:"parentsOnly",
        
    // stop various events from bubbling to parent of the Canvas we are scrolling
    click : isc.EventHandler.stopBubbling,
    doubleClick : isc.EventHandler.stopBubbling,
    mouseMove : isc.EventHandler.stopBubbling,

    // send special notifications for some events
    mouseDown : function () {return this.scrollbar.thumbDown();},
    dragStart : function () {return this.scrollbar.thumbDragStart();},
    dragMove : function () {return this.scrollbar.thumbMove();},
    dragStop : function () {return this.scrollbar.thumbDragStop();},
    mouseUp : function () {return this.scrollbar.thumbUp();},

    // bubble other events to the scrollbar
    keyPress : function () {
        return this.ns.EH.bubbleEvent(this.scrollbar, this.ns.EH.eventTypes.KEY_PRESS);
    },
    keyDown : function () {
        return this.ns.EH.bubbleEvent(this.scrollbar, this.ns.EH.eventTypes.KEY_DOWN);
    },
    keyUp : function () {
        return this.ns.EH.bubbleEvent(this.scrollbar, this.ns.EH.eventTypes.KEY_UP);
    },
    mouseWheel : function () {
        return this.ns.EH.bubbleEvent(this.scrollbar, this.ns.EH.eventTypes.MOUSE_WHEEL);
    },
    
    masterMoved : function () {
        // on scrollbar.setRect, we'll be positioned to our final position in response to 
        // the resize, so no need to also reposition in response to the scrollbar moving
        var master = this.masterElement;
        if (master && master._settingRect) return;
        this.Super("masterMoved", arguments);
    }
});    
isc.defineClass("HScrollThumb", isc.ScrollThumb).addProperties({ vertical:false });
isc.defineClass("VScrollThumb", isc.ScrollThumb);

// add default properties to the class
isc.Scrollbar.addProperties( {
    //>	@attr	scrollbar.btnSize		(number : 16 : [IRW])
    // The size of the square buttons (arrows) at the ends of this scrollbar. This 
    // overrides the width of a vertical scrollbar or the height of a horizontal scrollbar
    // to set the scrollbar's thickness.
    //      @visibility external
    //      @group  appearance
    //<
	btnSize:16,
    
    //>	@attr	scrollbar.state		(ImgState : isc.StatefulCanvas.STATE_UP : IRWA)
	//	Default to the "up" state, other states are "down" and isc.StatefulCanvas.STATE_DISABLED
	//		@group	appearance
	//<
	state:isc.StatefulCanvas.STATE_UP,							

    //>	@attr	scrollbar.autoEnable	(boolean : true : [IRWA])
    //          If true, this scrollbar will automatically enable when the scrollTarget is
    //          scrollable (i.e., when the contents of the scrollTarget exceed its clip size in the
    //          direction relevant to this scrollbar), and automatically disable when the
    //          scrollTarget is not scrollable. Set this property to false for full manual control
    //          over a scrollbar's enabled state.
    //      @visibility external
    //<
	autoEnable:true,

    //>	@attr	scrollbar.showCorner		(boolean : false : [IRWA])
    //          If true, displays a corner piece at the bottom end of a vertical scrollbar, or the
    //          right end of a horizontal scrollbar. This is typically set only when both horizontal
    //          and vertical scrollbars are displayed and about the same corner.
    //      @visibility external
    //      @group  appearance
    //<
	//showCorner:false,

    //> @attr	scrollbar.allowThumbDownState	(boolean : false : [IRWA])
    //          If true, the thumb's appearance changes when it's clicked on.
    //      @visibility external
    //      @group  appearance
    //<
	allowThumbDownState:false,
    

    //> @attr	scrollbar.showTrackEnds	(boolean : false : [IRWA])
    //          If true, displays track start and end segments.
    //      @visibility external
    //      @group  appearance
    //<
    showTrackEnds:false,

    //>	@attr	scrollbar.thumbMinSize   (number : 12 : [IRWA])
    // The minimum pixel size of the draggable thumb regardless of how large the scrolling
    // region becomes.
    //      @visibility external
    //<
    thumbMinSize : 12,

    //>	@attr	scrollbar.trackEndWidth   (number : 12 : [IRWA])
    // The minimum pixel width of the track end segments (if enabled with showTrackEnds).
    //      @visibility external
    //<
    trackEndWidth : 12,

    //>	@attr	scrollbar.trackEndHeight   (number : 12 : [IRWA])
    // The minimum pixel height of the track end segments (if enabled with showTrackEnds).
    //      @visibility external
    //<
    trackEndHeight : 12,

    //>	@attr	scrollbar.thumbOverlap   (number : 1 : [IRWA])
    // Number of pixels the thumb is allowed to overlap the buttons at each end of the track.
    // Default prevents doubling of 1px borders.  Set higher to allow media that shows curved
    // joins between the track button and ScrollThumb.
    //
    //      @visibility external
    //<
    thumbOverlap : 1,

    //>	@attr	scrollbar.startThumbOverlap   (number : null : [IRWA])
    // Number of pixels the thumb is allowed to overlap the buttons at the start of the track.
    // Default prevents doubling of 1px borders.  Set higher to allow media that shows curved
    // joins between the track button and ScrollThumb.
    //
    //      @visibility external
    //<

    //>	@attr	scrollbar.endThumbOverlap   (number : null : [IRWA])
    // Number of pixels the thumb is allowed to overlap the buttons at the end of the track.
    // Default prevents doubling of 1px borders.  Set higher to allow media that shows curved
    // joins between the track button and ScrollThumb.
    //
    //      @visibility external
    //<

	overflow:isc.Canvas.HIDDEN,

    //>	@attr	scrollbar.skinImgDir		(URL : "images/Scrollbar/" : IRWA)
	//		@group	appearance, images
	//		Where do 'skin' images (those provided with the class) live?
	//		This is local to the Page.skinDir
	//<
	skinImgDir:"images/Scrollbar/",	

    cornerSrc : "[SKIN]corner.gif",
    hSrc:"[SKIN]hscroll.gif",
    vSrc:"[SKIN]vscroll.gif",

    // internal attributes to allow instance level skinning of scrollbars
    // do not expose - thumb should be implemented as autoChild instead
    hThumbClass: isc.HScrollThumb,
    vThumbClass: isc.VScrollThumb,
    
	// Images for parts of the scrollbar, initialized in scrollbar.initWidget
	// ----------------------------------------------------------------------------------------

    startImg :     {name:"start",       width:"btnSize",       height:"btnSize"},
    trackStartImg: {name:"track_start", width:"trackStartSize", height:"trackStartSize"},
    trackImg :     {name:"track",       width:"*",             height:"*"},
    trackEndImg:   {name:"track_end",   width:"trackEndSize", height:"trackEndSize"},
    endImg :       {name:"end",         width:"btnSize",       height:"btnSize"},
	//_cornerImg:null,

    //>	@attr	scrollbar.scrollTarget	(Canvas : null : [IRWA])
    //          The widget whose contents should be scrolled by this scrollbar. The scrollbar thumb
    //          is sized according to the amount of visible vs. scrollable content in this widget.
    //      @visibility external
	//<
	
    // don't reverse, even in RTL, since otherwise track-end arrows would point inwards
    textDirection:"ltr",

    //>	@attr	scrollbar._selfManaged	(attrtype : true : IRWA)
    //			flag for whether or not the scrollBar should be managing its own scrollTarget.
	//			set to false if a scrollTarget actually creates the scrollBar itself.
	//<
	_selfManaged:true				
});

isc.Scrollbar.addMethods({

//>	@method	scrollbar.initWidget()	(A)
//			creates the thumb and adds it as a peer
//			calls setScrollTarget() to set us up with the target to be scrolled
//
//		@param	[all arguments]	(object)	objects with properties to override from default
//<
initWidget : function () {
    
	this.invokeSuper(isc.Scrollbar,"initWidget");

    var size = this.getID() + ".btnSize-1";
	this._cornerImg = {name:"corner", width:size, height:size};

    if (null == this.startThumbOverlap)    this.startThumbOverlap  = this.thumbOverlap;
    if (null == this.endThumbOverlap)      this.endThumbOverlap    = this.thumbOverlap;
    
	if (this.vertical) this.setWidth(this.btnSize);
	else this.setHeight(this.btnSize);

	// set up the image list for this scrollbar
	this.setItems();

	// create our thumb
	this.makeThumb();

	// add the thumb as a peer
	this.addPeer(this.thumb);
	
	// initialize us for our scrollTarget
	this.setScrollTarget();

	// call setThumb to figure out how big and where the scrollbar thumb should be
	// note: this will enable and disable the scrollbar if autoEnable is true
	this.setThumb();
},

//>	@method	scrollbar.setItems()
//		@group	appearance
//			set up the list of images for this scrollbar
//			the image list changes depending on whether we're showing a corner piece or not
//<
setItems : function () {
	// create the items
    
    if (this.showTrackEnds == true) {
        this.items = [
		    this.startImg,
            this.trackStartImg,
            this.trackImg,
            this.trackEndImg,
            this.endImg
            ];
    } else {