popuptextareaitem.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	PopUptextAreaItem
//	A FormItem that displays an uneditable (static) value, with an icon to show a floating
//  text area, which can be used to edit the value.
// @visibility popUpTextAreaItem
//<

isc.ClassFactory.defineClass("PopUpTextAreaItem", "StaticTextItem");

isc.PopUpTextAreaItem.addProperties({

    // Override canFocus - pop up text areas can accept focus
    canFocus:true,

    //>	@attr	popUptextAreaItem.wrap		(boolean : false : IRW)
	// Don't wrap the specified text - this allows it to be truncated more easily
	//		@group	appearance
	//<
	wrap:false,
    
    //>	@attr	popUptextAreaItem.width		(number : 150 : IRW)
	//			Default width for fields.
	//		@group	appearance
	//<
	width:150,

    //>	@attr	popUptextAreaItem.clipValue (boolean : true : IRW)
	// Override clipValue to force any text displayed to be truncated.
	//		@group	appearance
	//<
    clipValue:true,
    
    //>	@attr	popUptextAreaItem.popUpOnEnter (boolean : false : IRW)
	// Should the text area pop up when the user tabs into this field.
	//		@group	appearance
	//<
    
    popUpOnEnter:false,

    // whether to show the pop-up on a click anywhere in the item (as opposed to just on the
    // icon)
    popUpOnAnyClick:true,
    
    //>	@attr	popUptextAreaItem.textAreaWidth (number : 100 : IRW)
	// How wide should the pop up textArea be drawn?
	//		@group	appearance
	//<
    textAreaWidth : 100,

    //>	@attr	popUptextAreaItem.textAreaHeight (number : 100 : IRW)
	// How tall should the pop up textArea be drawn?
	//		@group	appearance
	//<
    textAreaHeight : 100,
    
    //>	@attr	popUptextAreaItem.iconOnly (boolean : false : IRW)
	// If true, display the icon to launch the pop up with no text.
	// @group appearance
    // @visibility popUpTextAreaItem
	//<
    iconOnly : false,
    
    //>	@attr	popUptextAreaItem.popUpIconSrc (string : [SKIN]/DynamicForm/PopUpTextAreaEditor_icon.gif : IRW)
	// If specified, use this src for the icon that launches to the pop up text area.
	// @group appearance
    // @visibility popUpTextAreaItem
	//<
    popUpIconSrc : "[SKIN]/DynamicForm/PopUpTextAreaEditor_icon.gif",

    //>	@attr	popUptextAreaItem.popUpIconWidth (number : 20 : IRW)
	// Width for the popUp launcher icon.
	// @group appearance
    // @visibility popUpTextAreaItem
	//<
    popUpIconWidth:20,
    
    //>	@attr	popUptextAreaItem.popUpIconHeight (number : 20 : IRW)
	// Height for the popUp launcher icon.
	// @group appearance
    // @visibility popUpTextAreaItem
	//<
    popUpIconHeight:20,
    
    // Setting iconVAlign to "center" ensures that if the icon height exceeds the content's height
    // (EG a single line of text) the text will be centered wrt the the icon.
    
    iconVAlign:isc.Canvas.CENTER
    
    
});

//!>Deferred
isc.PopUpTextAreaItem.addMethods({

    _setUpIcons : function () {
        if (this.icons == null) this.icons = [];
        
        var icon = {

            src:this.popUpIconSrc,
            
            showOver:false,
            
            width:this.popUpIconWidth,
            height:this.popUpIconHeight,
            
            
            click:this._popUpIconClick
            
        };
        
        // Add this to the icons array.
        this.icons.addAt(icon, 0);
        
        this.Super("_setUpIcons", arguments);
    },
    
    // click handler for the pop up icon - (applied directly to the icon so not fired in the
    // scope of the item)
    _popUpIconClick : function (form,item,icon) {
        if (item.popUpOnAnyClick || item.isDisabled()) return;
        item.showPopUp(true);
    },
    
    // Support showing the pop up text area from a click on the item (either on the icon or the
    // static text)
    
    handleCellClick : function () {
        if (this.Super("handleCellClick") == false) return false;
        if (this.popUpOnAnyClick && !this.isDisabled()) this.showPopUp(true);
    },

    // showPopUp - method to actually show the pop up.
    showPopUp : function (shouldFocus) {
        var value = this.getValue();

        if (!this._popUpForm) this.setupPopUpForm();
        
        this.placePopUp();

        var item = this._popUpForm.getItem("textArea");        
        item.setValue(value);
        
        this._popUpForm.bringToFront();
        this._popUpForm.show();
        if (shouldFocus) this._popUpForm.focusInItem("textArea");

        // Show a clickMask to hide the pop up form on click-outside
        
        this._popUpForm.showClickMask({target:this, methodName:"hidePopUp"}, true, 
                                        [this._popUpForm])
        
    },

    // If the item is hidden, ensure we also hide the pop up form.    
    visibilityChanged : function () {
        if (!this.isVisible()) this._hiddenObservation();
    },

    _hiddenObservation : function () {
        var pUF = this._popUpForm;
        if (!pUF || !(pUF.isVisible() && pUF.isDrawn())) return;
        
        pUF.hide();
    },
        
    // Whenever the item is moved by its container widget, we need to update the popUpForm's
    // position (if it is drawn).
    moved : function () {
        this._movedObservation();
    },
    
    _movedObservation : function () {
        var pUF = this._popUpForm;
        if (!pUF || !(pUF.isVisible() && pUF.isDrawn()) ) return;
        
        // If we've been moved out of the viewport, hide the TA temporarily (will reshow if
        // scrolled back into view, unless something else gets focus)
        var top = this.getTop(), left = this.getLeft(), 
            width = this.getInnerWidth(), height = this.getInnerHeight(),
            container = this.containerWidget,
            scrollTop = container.getScrollTop(), scrollLeft = container.getScrollLeft(),
            viewportWidth = container.getViewportWidth(), 
            viewportHeight = container.getViewportHeight()
        ;

        if (top < scrollTop || (top+height) > (scrollTop+viewportHeight) ||
            left < scrollLeft || (left+width) > (scrollLeft + viewportWidth) )
        {
            pUF.hide();
        } else {
            this.placePopUp();
        }
        
    },

    // if the ZIndex is modified, we need to ensure that if the pop up form is visible it
    // continues to float above the form item.    
    zIndexChanged : function () {
        var pUF = this._popUpForm;
        if (!pUF || !(pUF.isVisible() && pUF.isDrawn()) ) return;
        pUF.bringToFront();
    },

    
    placePopUp : function () {
        var top = this.getTextAreaTop(),
            left = this.getTextAreaLeft(),
            width = this.getTextAreaWidth(),
            height = this.getTextAreaHeight();
    
        
        this._popUpForm.moveTo(left,top);
        this._popUpForm.resizeTo(width,height);
        
        var item = this._popUpForm.getItem("textArea");
        item.setWidth(width);
        item.setHeight(height);
    },