splitbar.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
 */

 


// Splitbar
// --------------------------------------------------------------------------------------------
// A Splitbar points to a "target" and will resize the target according to the target's minHeight
// and maxHeight.  Used as 'resizeBar's in layouts.

//> @class Splitbar
//  Subclass of the +link{class:StretchImg} class. As with the +link{class:ImgSplitbar} class, 
//  widgets of this class can be displayed as a resize-bar for widgets 
//  in Layouts where showResizeBar is set to true. Provides a different appearance from
//  the <code>ImgSplitbar</code> class.<br>
//  To specify the resizeBar class for some layout, use the +link{layout.resizeBarClass}
//  property.
// @see class:Layout
// @see class:ImgSplitbar
// @treeLocation Client Reference/Layout
//  @visibility external
//<





// Shared splitbar properties and methods
// Applied to 'Splitbar' class (stretchImg based) and 'ImgSplitbar' class
isc._SplitbarProperties = {

    //> @attr   Splitbar.target     (Canvas : null : R)
    // When a <code>Splitbar</code> is created by a layout, the <code>target</code> property
    // of the Splitbar will be a pointer to the member for which it is acting as a resizeBar.
    // The Splitbar will be positioned next to its target, and will resize it on drag completion.
    // @visibility external
    //<

    //> @attr   Splitbar.vertical    (boolean : null : R)
    // Is this split bar vertically orientated?<br>
    // When a <code>Splitbar</code> is created by a layout to be the resizeBar for some
    // member of the layout, the <code>vertical</code> property will be set to <code>true</code>
    // if the layout is horizontal, meaning this resizeBar will be taller than it is wide, 
    // and will allow horizontal resizing of the member.
    // @visibility external
    //<
  
    //> @attr   Splitbar.src    (SCImgURL : null : IR)
    // @include StretchImg.src
    // @visibility external
    //<
    
    //> @attr   Splitbar.hSrc   (SCImgURL : null : IR)
    // @include StretchImg.hSrc
    // @visibility external
    //<
    
    //> @attr   Splitbar.vSrc   (SCImgURL : null : IR)
    // @include StretchImg.vSrc
    // @visibility external
    //<
    
    //> @attr   Splitbar.capSize    (integer : null : IR)
    // @include StretchImg.capSize
    // @visibility external
    //<
    
    //> @attr   Splitbar.skinImgDir    (boolean : null : IR)
    // @include Canvas.skinImgDir
    // @visibility external
    //<

    //> @attr   Splitbar.showGrip    (boolean : null : IRA)
    // @include StretchImg.showGrip
    // @visibility external
    //<

    // -----
        
    
    //> @attr   SplitBar.gripImgSuffix (string : "grip" : IRA)
    // part name for the 'grip' image if +link{SplitBar.showGrip} is true
    // @group grip
    // @visibility external
    //<
    
    
    //> @attr   Splitbar.showDownGrip   (boolean : null : IRA)
    // If +link{SplitBar.showGrip} is true, this property determines whether to show the
    // 'Down' state on the grip image when the user mousedown's on this widget. 
    // Has no effect if +link{statefulCanvas.showDown} is false
    // @visibility external
    // @group grip
    //<

    //> @attr   Splitbar.showRollOverGrip   (boolean : null : IRA)
    // If +link{Splitbar.showGrip} is true, this property determines whether to show the
    // 'Over' state on the grip image when the user rolls over on this widget. 
    // Has no effect if +link{statefulCanvas.showRollOver} is false
    // @visibility external
    // @group grip
    //<
      
    //> @attr   splitbar.showClosedGrip   (boolean : null : IRA)
    // If +link{splitbar.showGrip} is true, this property determines whether the grip image
    // displayed should show the <code>"Closed"</code> state when the +link{Splitbar.target} 
    // is hidden.
    // @visibility external
    // @group grip
    //<

    // on drag, we resize a target widget
    //> @attr   Splitbar.canDrag    (boolean : true : IRW)
    // <code>canDrag</code> set to true to allow dragging of the split bar. Dragging the
    // Splitbar will resize it's +link{Splitbar.target, target}
    // @visibility external
    //<
	canDrag:true,
    
    dragAppearance:"none",
    
	dragStartDistance:1, 
	
    //> @attr   Splitbar.canCollapse    (boolean : true : IRW)
    // If this property is true, a click on the Splitbar will collapse its 
    // +link{Splitbar.target, target}, hiding it and shifting the Splitbar and other members
    // of the layout across to fill the newly available space. If the target is already hidden
    // a click will expand it again (showing it at it's normal size).
    // @visibility external
    //<
    canCollapse:true,   // enables click-to-collapse behavior
    // cursor - default to different cursors based on vertical or horizontal splitbars
    //> @attr   Splitbar.cursor (Cursor : "hand" : IRW)
    // Splitbars' cursors are set at init time based on whether they are to be used for vertical or
    // horizontal resize.  To customize the cursor for this class, modify 
    // +link{Splitbar.vResizeCursor} or +link{Splitbar.hResizeCursor} rather than this property.
    // @visibility external
    // @group cursor
    //<
    cursor:"hand",
    
    //> @attr Splitbar.vResizeCursor    (Cursor : "row-resize" : IR)
    // Cursor to display if this Splitbar is to be used for vertical resize of widgets.
    // @visibility external
    // @group cursor    
    //<
    vResizeCursor:"row-resize",
    //> @attr Splitbar.hResizeCursor    (Cursor : "col-resize" : IR)
    // Cursor to display if this Splitbar is to be used for horizontal resize of widgets.
    // @visibility external
    // @group cursor    
    //<
    hResizeCursor:"col-resize",   

    resizeInRealTime:false,
    _redrawWithMaster:false, 
    _resizeWithMaster:false,
    overflow:"hidden",

    
    isMouseTransparent:true
    
};

isc._SplitbarMethods = {

	initWidget : function () {
        // vertical switch of hSrc/vSrc is handled by StretchImg, but not by Img
        if (isc.isA.Img(this)) this.src = this.vertical ? this.vSrc : this.hSrc;
        
        this.Super("initWidget", arguments);
        
        if (this.vertical) this.defaultWidth = this.defaultWidth || 10;
        else this.defaultHeight = this.defaultHeight || 10;
	    this.cursor = this.vertical ? this.hResizeCursor : this.vResizeCursor;
	
        
		if (isc.Browser.isMoz) this.bringToFront();
	},
    
    // Override 'makeLabel' to ensure the label, showing any 'grip' image picks up the custom
    // closed state for the grip if appropriate
    
    makeLabel : function () {
        this.Super("makeLabel", arguments);
        this.label.addMethods({
            getCustomState : function () {
                var bar = this.masterElement;
                if (!bar.showClosedGrip) return

                var target = bar.target,
                    isHidden = target.visibility == isc.Canvas.HIDDEN;
                if ((!bar.targetAfter && isHidden) || (bar.targetAfter && !isHidden)) {
                    return "closed";
                }
            }
        })
        
    },

	dragStart : function () {
		if (this.showDown) this.setState("Down"); // note: case sensitive
        this.bringToFront(); // so we aren't occluded by what we will drag resize
	},
	dragMove : function () {
        var offset = this.vertical ? (0 - isc.EH.dragOffsetX) : (0 - isc.EH.dragOffsetY);
        this.resizeTarget(this.target, !this.vertical, this.resizeInRealTime, offset,
                          null, null, this.targetAfter);
	},
	dragStop : function () {
		if (this.showDown) this.setState("");
        this.finishTargetResize(this.target, !this.vertical, this.resizeInRealTime);
	},
    
    click : function () {
        if (this.canCollapse != true) return;
        // toggle target visibility on click
        var target = this.hideTarget || this.target;
        // Note: call showMember/hideMember so animation kicks in if configured on the Layout
        if (target.visibility == 'hidden') {
            if (isc.isA.Layout(target.parentElement)) target.parentElement.showMember(target); 
            else target.show();

            this.canDrag = true;
        } else {
            if (isc.isA.Layout(target.parentElement)) target.parentElement.hideMember(target); 
            else target.hide();

            // disallow dragging while target is hidden