toolbar.js

javascript 很酷的类库

        resizeFromOneSide = ["B"];
    } else {
        edgeCursorMap = {"L":isc.Canvas.COL_RESIZE, "R":isc.Canvas.COL_RESIZE };
        resizeFrom = ["L","R"];
        if (!rtl) {
            resizeFromOneSide = ["R"];
        } else {
            resizeFromOneSide = ["L"];
        }
    }

    var previousCantResize = false;
    for (var i = 0; i < this.members.length; i++) {
        var button = this.members[i];
        if (!button.canDragResize) {
            button.resizeFrom = button.edgeCursorMap = null;
            previousCantResize = true;
        } else {
            if (previousCantResize || i == 0)
            { 
                // the first button, or any button next to a button that can't resize, is not
                // allowed to resize from it's left/top.
                button.resizeFrom = resizeFromOneSide;
            } else {
                button.resizeFrom = resizeFrom;
            }
            button.edgeCursorMap = edgeCursorMap;
            previousCantResize = false;
        }
    }
},

//>	@method	toolbar.getSelectedButton()	(A)
// Get the button currently selected.
//		@return (object) button
//<
getSelectedButton : function () {
	return this.lastSelectedButton;
},	
	
//>	@method	toolbar.selectButton()  ([])
// Given an identifier for a button, select it.
// The button identifier can be a number (index), string (id), or object (widget or init block),
// as with the getButtonNumber() method.
// 
//      @see    getButtonNumber()
//		@group	selection
//		@param	buttonID		(number | string | object | canvas)    Button / Button identifier
//      @visibility external
//<
selectButton : function (buttonID) {

	if (!this.members) return;
	var btn = this.getButton(buttonID);
	if (btn && isc.isA.StatefulCanvas(btn)) btn.select();
},


//>	@method	toolbar.deselectButton()    ([])
//	Deselects the specified button from the toolbar, where buttonID is the index of
//  the button's object initializer. The button will be redrawn if necessary.
//  The button identifier can be a number (index), string (id), or object (widget or init block),
// as with the getButtonNumber() method.
//      @see    getButtonNumber()
//      @visibility external
//		@group	selection
//		@param	buttonID		(number | string | object | canvas)    Button / Button identifier
//<
deselectButton : function (buttonID) {
	var btn = this.getButton(buttonID);
	if (btn) btn.deselect();
},


//>	@method	toolbar.buttonSelected()	(A)
// One of the toolbar button was just selected -- update other buttons as necessary
//		@group	selection
//
//		@param	button		(button object)		a member of this.buttons
//<
buttonSelected : function (button) {
	if (button.getActionType() == isc.Button.RADIO) {
        this.lastSelectedButton = button;
	}
},


//>	@method	toolbar.buttonDeselected()	(A)
// Notification that one of the toolbar buttons was just DEselected
//		@group	selection
//
//		@param	button		(button object)		a member of this.buttons
//<
buttonDeselected : function (button) {
},


//>	@method	toolbar.itemClick() ([A])
//	Called when one of the buttons recieved a click event
//		@group	event handling
//		@param	item		(button)		pointer to the button in question
//		@param	itemNum		(number)		number of the button in question
// @visibility external
//<
itemClick : function (item, itemNum) {
},

//>	@method	toolbar.getMouesOverButtonIndex()	(A)
//  @return (number) the number of the button the mouse is currently over, 
//                   or -1 for before all buttons, -2 for after all buttons
//                  See also getFocusButtonIndex()
//<
getMouseOverButtonIndex : function () {
	var offset = this.vertical ? this.getOffsetY() : this.getOffsetX();
    return this.inWhichPosition(this.memberSizes, offset, this.getTextDirection());
},

//
//	Drag and Drop operations on members
//

prepareForDragging : function () {
    // NOTE: we currently set a canDrag, canDragResize, etc flags on our children.  However, we
    // could manage everything from this function instead, eg, pick dragResize if there is a
    // resize edge hit on the child, otherwise dragReorder.

    var EH = this.ns.EH;
    // This event is expected to be bubbled from a member being drag-repositioned/resized.
    // Note: If the drag is not occurring on one of our members, (but a child of a member),
    // allow normal drag handling to occur.
    if (!this.members.contains(EH.lastEvent.target)) return;
     
    // If we hit a valid resize edge on a member, the member will have set the dragOperation to
    // dragResize
    if (EH.dragOperation == "dragResize") {
        // for drag resizes on the length axis, do specially managed resizing.  Don't interfere
        // with breadth-axis resize, if enabled
        if ((this.vertical && ["T","B"].contains(EH.resizeEdge)) ||
            (!this.vertical && ["L","R"].contains(EH.resizeEdge)))
        {
            EH.dragOperation = "dragResizeMember";  
        }
    // otherwise, starting a drag on a button means dragReordering the members.
    
    } else if (this.canReorderItems && EH.dragOperation == "drag") EH.dragOperation = "dragReorder";
},

// Drag Reordering
// --------------------------------------------------------------------------------------------

// get the position where the button being reordered would be dropped, if dragging stopped at the
// current mouse coordinates
getDropPosition : function () {
    var position = this.getMouseOverButtonIndex();

    
    var EH = this.ns.EH,
        switchInMiddle = (this.reorderStyle == "explorer" || 
                        (EH.dropTarget && EH.dropTarget.parentElement == this));
    if (switchInMiddle && position >= 0) { 
        // if we are over a member, check whether we should switch to the next member or final
        // coordinate
        var buttonSize = this.memberSizes[position],
            offset = (this.vertical ? this.getOffsetY() : this.getOffsetX());
            
        
        offset -= this.memberSizes.slice(0, position).sum();
        var oldPosition = position;
        // switch to next coordinate in the middle of the button 
        if (offset > buttonSize/2) position++;

        //this.logWarn("oldPosition: " + oldPosition +
        //             ", size: " + buttonSize +  
        //             ", offset: " + offset +
        //             ", position: " + position);
    }

    var numMembers = this.members.length,
        maxIndex = (switchInMiddle ? numMembers : numMembers - 1);

    // if beyond the last member, but still within the layout rect, convert to last member
	if (position == -2 && this.containsEvent()) return maxIndex;

    // for reorder/self-drop interactions, when we drag out of the Layout, we revert to the
    // original position.  For external drops, the only remaining case is a coordinate within
    // the Layout, but before all members.
    var revertPosition = this.dragStartPosition || 0;
	if (position < 0 || position > maxIndex) position = revertPosition;

    // for reorder/self-drop, check canReorder flag
    else if (EH.dragTarget && EH.dragTarget.parentElement == this &&
             (this.members[position] && this.members[position].canReorder == false)) 
    {
	    position = revertPosition;
    }
    return position;
},

// sent when button dragging for reordering begins
dragReorderStart : function () {
	var EH = this.ns.EH,
		startButton = EH.dragTarget
	;

	// if the button's canReorder property is false, it can't be reordered so forget it!
	if (startButton.canReorder == false) return false;
	
    

	if (startButton.showDown) startButton.setState(isc.StatefulCanvas.STATE_DOWN);	
	
	// get the item number that reordering started in (NOTE: depended on by observers like LV)
	this.dragStartPosition = this.getButtonNumber(startButton);
	return EH.STOP_BUBBLING;
},

// sent when button moves during drag-reorder
dragReorderMove : function () {
	var EH = this.ns.EH,
		startButton = EH.dragTarget,
		startPosition = this.dragStartPosition,
		currentPosition = this.getDropPosition();
	
    //this.logWarn("dragReorderMove: position: " + this.getMouseOverButtonIndex() + 
    //             ", drop position: " + this.getDropPosition());

	// remember the current position (NOTE: depended on by observers like LV)
	this.dragCurrentPosition = currentPosition;

    

    // create a temporary order for the members and lay them out in that order
    var members = this.members.duplicate();
    members.slide(startPosition, currentPosition);
    //this.logWarn("startPos: " + startPosition + ", currentPos: " + currentPosition + 
    //             "members: " + this.members + ", reordered: " + members);
    // NOTE: tell stackMembers() not to update sizes, since this is a temporary order
    this.stackMembers(members, null, false);

	return EH.STOP_BUBBLING;
},

// sent when button dragging for reordering ends
dragReorderStop : function () {
	var EH = this.ns.EH,
		startButton = EH.dragTarget,
		startPosition = this.dragStartPosition,
		currentPosition = this.dragCurrentPosition;

	startButton.setState(isc.StatefulCanvas.STATE_UP);

    

    if (currentPosition == startPosition) return false;

	// if we're supposed to actually reorder on drop, reorder now
    if (this.reorderOnDrop) this.reorderItem(currentPosition, startPosition);
    
    // notify observers
    if (this.itemDragReordered) this.itemDragReordered(startPosition, currentPosition);

	return EH.STOP_BUBBLING;
},

//>	@method	toolbar.dragStop()	(A)
//		@group	events, dragging
//			handle a dragStop event
//<
dragStop : function () {
    // NOTE: called at the end of an inter-toolbar move iteraction, not a dragReorder
	var EH = this.ns.EH,
        startButton = EH.dragTarget,
		startPosition = this.dragStartPosition;

	startButton.setState(isc.StatefulCanvas.STATE_UP);
    this.hideDropLine();

	return EH.STOP_BUBBLING;
},

// reorder an item programmatically
reorderItem : function (itemNum, newPosition) {
    this.reorderItems(itemNum, itemNum+1, newPosition);
},

// reorder multiple items programmatically
reorderItems : function (start, end, newPosition) {
    // reorder the button config
	this.buttons.slideRange(start, end, newPosition);
    // and array of button widgets
    this.reorderMembers(start, end, newPosition);
    // update which buttons can resize
    this.setResizeRules();
},



// Drag Resizing (of buttons)
// --------------------------------------------------------------------------------------------

// sent whem button dragging for resizing begins
dragResizeMemberStart : function () {
	var EH = this.ns.EH,
		item = EH.dragTarget,
		itemNum = this.getButtonNumber(item),
        rtl = this.isRTL();

	// if dragging from the left edge, switch to the previous item and drag resize from its right
    var offsetDrag = false;
	if ((!rtl && EH.resizeEdge == "L") || (rtl && EH.resizeEdge == "R")) {
        offsetDrag = true;
        itemNum--;
		EH.resizeEdge = (rtl ? "L" : "R");
	} else if (EH.resizeEdge == "T") {
        offsetDrag = true;
        itemNum--;
		EH.resizeEdge = "B";
    }
	// if not in a valid item, forget it
	if (itemNum < 0 || itemNum >= this.members.length || item == null) return false;
    EH.dragTarget = item = this.members[itemNum];

    
    item._oldCanDrop = item.canDrop;
    item.canDrop = false;
	
    // NOTE: depended upon by observers (ListGrid)
	this._resizePosition = itemNum;
	
	if (item.showDown) item.setState(isc.StatefulCanvas.STATE_DOWN);
    if (offsetDrag) {
        var mouseDownItem = this.members[itemNum+1];
        if (mouseDownItem) mouseDownItem.setState(isc.StatefulCanvas.STATE_UP);
    }	
	return EH.STOP_BUBBLING;
},

// sent whem item moves during drag-resizing
dragResizeMemberMove : function () {
    var EH = this.ns.EH,
        item = EH.dragTarget;

    // resize the item 
	item.resizeToEvent();
    // do an immediate redraw for responsiveness 
    item.redrawIfDirty("dragResize"); 
	return EH.STOP_BUBBLING;
},

// sent whem item dragging for resizing ends
dragResizeMemberStop : function () {
	var EH = this.ns.EH,
		item = EH.dragTarget;

    // restore old canDrop setting
    item.canDrop = item._oldCanDrop;

    // change appearance back
	item.setState(isc.StatefulCanvas.STATE_UP);

    // resize
	item.resizeToEvent();
 
    // record the new size
    var newSize = (this.vertical ? item.getHeight() : item.getWidth());
    this.resizeItem(this._resizePosition, newSize);

    if (this.itemDragResized) this.itemDragResized(this._resizePosition, newSize); // for observers
	return EH.STOP_BUBBLING;
},

// resize an item programatically
resizeItem : function (itemNum, newSize) {
    // resize the item
    var item = this.members[itemNum];
    if (this.vertical) item.setHeight(newSize);
    else item.setWidth(newSize);
}

});

isc.Toolbar.registerStringMethods({
// itemClick handler for when an item is clicked
// (JSDoc comment next to default implementation)
itemClick : "item,itemNum",

//> @method toolbar.itemDragResized
// Observable, overrideable method - called when one of the Toolbar buttons is drag resized.
//
// @param itemNum (number) the index of the item that was resized
// @param newSize (number) the new size of the item
//
// @visibility external
//<
itemDragResized : "itemNum,newSize",

// Sent when an item is drag reordered.  This can be observed to have a related widget
// rearrange itself.
itemDragReordered : "itemNum,newPosition"
});