coloritem.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	ColorItem
// FormItem for selecting a color via a pop-up ColorChooser.
//
// @treeLocation Client Reference/Forms/Form Items
// @visibility internal
//<
// NOTE: intentionally zero doc of the functionality for now, in anticipate of a full color
// wheel interface with radically different configuration.
isc.ClassFactory.defineClass("ColorItem", "TextItem");


isc.ColorItem.addProperties({
    // Don't update on keystrokes, as we're verifying the color on change.
    changeOnBlur:true,
    changeOnKeypress:false,
    
    // Properties for the default formItem picker handling code
    pickerConstructor: "ColorChooser",
    pickerDefaults: {
        // By default the form item 'picker' subsystem will fired pickerDataChanged in response
        // to a picker firing its dataChanged() method.
        // ColorChoosers support 'colorSelected()' rather than dataChanged, so override this
        // notification method to fire pickerDataChanged instead.
        colorSelected : function (color) { this.callingFormItem.pickerColorSelected(color) }
    },
    
    
    //>	@attr	colorItem.showPickerIcon    (boolean : true : IRW)
    //      Should we show the pick button icon for choosing colors?
    // @visibility pickerIcon
    //<
    showPickerIcon:true,

    //>	@attr	colorItem.pickerIconWidth (number : 18 : IRW)
    // @include FormItem.pickerIconWidth
    // @visibility pickerIcon
    //<
    pickerIconWidth:18,

    //>	@attr	colorItem.pickerIconHeight    (number : 18 : IRW)
    // @include FormItem.pickerIconHeight
    // @visibility pickerIcon
    //<
    pickerIconHeight:18,

    //>	@attr	colorItem.pickerIconSrc (SCImgURL : "[SKIN]/DynamicForm/ColorPicker_icon.png" : IRW)
    // @include FormItem.pickerIconSrc
    // @visibility pickerIcon
    //<
    // Note - by default this image has a transparent patch allowing the
    // background color to show through.
    pickerIconSrc:"[SKIN]/DynamicForm/ColorPicker_icon.png",

    //>	@attr	colorItem.pickerIconProperties (object : {...} : IRWA)
    // Properties for the picker icon. Default object specifies a prompt for the picker icon
    // @visibility pickerIcon
    //<
    pickerIconProperties:{
        prompt:"Click to select a new color",
        showOver:false
    },
    
    //> @attr   colorItem.supportsTransparency  (boolean : true : IRW)
    // If this item has a value of null, does this represent transparency or auto-assigned 
    // color?<br>
    // Determines the title / icon shown on the picker for select null values   
    //<
    supportsTransparency : true,
    
    // Disable native spellChecking on color fields
    browserSpellCheck:false

});

isc.ColorItem.addMethods({
    
    // Override updateValue to validate the color, and update the icon color
    updateValue : function () {

        var oldValue = this._value,
            value = this.getElementValue();

        // unmap the value if necessary 
        value = this.mapDisplayToValue(value);

        if (value == this._value) return;
        
        // If the user entered an invalid color just refuse to accept it.
        if (value != null && !isc.isA.color(value)) {
            this.setElementValue(oldValue);
            return;
        }

        // Allow the superclass implementation to actually update the value
        this.Super("updateValue", arguments); 

        // Assuming the change wasn't rejected, update our icon background color.
        if (this.showPickerIcon && this._value != oldValue) {
            this.setIconBackgroundColor(this.getPickerIcon(), this._value);
        }
    },
	
	//>	@method	colorItem.getDefaultValue()	(A)
	//		Override getDefaultValue to guarantee that it returns a color (or null)
	//<
	getDefaultValue : function () {
		var value = this.Super("getDefaultValue", arguments);
        if (value && !isc.isA.color(value)) {
            this.logWarn("Default value:" + value + " is not a valid color identifier." + 
                        " Ignoring this default.");
            value = this.defaultValue = null;
        }
        return value;
	},
    
    
    // Override 'showPicker' to pass in supportsTransparency
    showPicker : function () {
        if (!this.picker) 
            this.picker = isc.ColorChooser.getSharedColorChooser(this.pickerDefaults);
        var picker = this.picker;
        
        var oldItem = picker.callingFormItem;
        if (oldItem != this) {
            picker.callingFormItem = this;
            picker.callingForm = this.form;
            picker.setSupportsTransparency(this.supportsTransparency);
        }
        
        return this.Super("showPicker", arguments)
        
    },
    

	//>	@method	colorItem.pickerColorSelected()
    //  Store the color value selected by the user from the color picker.
    //  @param  color (color)   the selected color as a string
	//<
	pickerColorSelected : function (color) {
        color = this.mapValueToDisplay(color);
        this.setElementValue(color);
        this.updateValue();
	},
    
    // Override setValue to ensure we update the color swatch icon.
    setValue : function (newValue) {
        this.Super("setValue", arguments);
        this.setIconBackgroundColor(this.getPickerIcon(), this._value);
        
    }
    
});