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

 

// This file creates an array of buttons that can bue used to pick a color.
// Used by the rich text editor class to set text / background color.
isc.ClassFactory.defineClass("ColorChooser", "VStack");


isc.ColorChooser.addProperties({

    border:"1px solid black",
    backgroundColor:"#D3D3D3",
    
    layoutMargin:2,
    
    autoDraw:false,
    canFocus:false,
    
    // This is likely to be floating above items that would potentially burn through it!
    // Use a back mask where necessary
    useBackMask:true,

    // Should a click outside the picker dismiss it?
    autoClose:true,
    // Should we float the picker near the mouse?
    autoPosition:true,
    
    // We have logic to determine the best number of cols to fit in the specified space,
    // but will respect numCols if specified.
    // Default to using 8 cols in a 165 wide picker - this fits neatly with the default set of 
    // colors.
    numCols:8,
    width:165,
    
    colorArray:[
        
        "#000000",
        "#996100",
        "#636300",
        "#006300",
        "#006366",
        "#000080",
        "#636399",
        "#636363",

        "#800000",
        "#FF6600",
        "#808000",
        "#8000FF",
        "#008080",
        "#0000FF",
        "#666699",
        "#808080",
        
        "#FF0000",
        "#FF9900",
        "#99CC00",
        "#639966",
        "#63CCCC",
        "#6366FF",
        "#800080",
        "#999999",
        
        "#FF00FF",
        "#FFCC00",
        "#FFFF00",
        "#00FF00",
        "#00FFFF",
        "#00CCFF",
        "#996366",
        "#C0C0C0",

        "#FF99CC",
        "#FFCC99",
        "#FFFF99",
        "#CCFFCC",
        "#CCFFFF",
        "#99CCFF",
        "#CC99FF",
        "#FFFFFF"

    ],
    
    //>@attr    ColorChooser.colorButtonSize    (number : 20 : IRW)
    // Width / Height of buttons (color selector cells) used to pick colors.
    //<
    colorButtonSize : 20,
    
    //>@attr    ColorChooser.colorButtonBaseStyle   (cssClass : "colorChooserCell" : IRW)
    // Base style to apply to our color selector cells. Will be appended with Over when the
    // user rolls over the color in question.
    //<
    colorButtonBaseStyle : "colorChooserCell",
    
    //>@attr    ColorChooser.cancelButtonHeight (number : 20 : IRW)
    // Height of the cancel button
    //<
    cancelButtonHeight:20,
    
    //>@attr    ColorChooser.cancelButtonWidth  (number : 80 : IRW)
    // Width of the cancel button
    //<
    cancelButtonWidth:80,
    
    //>@attr    ColorChooser.cancelButtonTitle  (string : "Cancel" : IRW)
    // Title for the cancel button
    //<
    cancelButtonTitle:"Cancel",

    //>@attr    ColorChooser.cancelButtonClass  (Class : isc.Button : IRW)
    // Constructor for the cancel button
    //<
    cancelButtonClass:isc.Button,
    
    //>@attr    ColorChooser.labelHeight    (number : 20 : IRW)
    // Height of the label used to display the current color name
    //<
    labelHeight:20,
    
    // The color chooser contains a button for clearing the color.
    // Depending on the usage, this button is either a 'transparent' button or an 'auto color' 
    // button
    // Not shown if 'showNullValue' is false
    showNullValue : true, 
    
    //>@attr    ColorChooser.supportsTransparency   (boolean : true : IRW)
    // Will picking a null color make the selection transparent.
    // Used to determine which title / icon to use on the 'auto' button
    //<
    supportsTransparency:true,
    
    //>@attr    ColorChooser.transparentButtonTitle (string : "Transparent" : IRW)
    // Title for the 'null' color selector if supportsTransparency is true
    //<
    transparentButtonTitle:"Transparent",
    
    //>@attr    ColorChooser.transparentButtonIcon  (SCImgURL : "[SKIN]/ColorChooser/transparent_icon.png" : IRW)
    // Icon for the 'null' color selector if supportsTransparency is true
    //<
    transparentButtonIcon: "[SKIN]/ColorChooser/transparent_icon.png",
    
    //>@attr    ColorChooser.transparentButtonIconSize  (number : 12 : IRW)
    // Size of the transparent button icon.
    //<
    transparentButtonIconSize:12,    
    
    //>@attr    ColorChooser.autoButtonTitle    (string : "Auto" : IRW)
    // Title for the 'null' color selector if supportsTransparency is false
    //<
    autoButtonTitle:"Auto",
    
    //>@attr    ColorChooser.autoButtonIcon (SCImgURL : "[SKIN]/ColorChooser/auto_icon.png" : IRW)
    // Icon for the 'null' color selector if supportsTransparency is false
    //<
    autoButtonIcon:"[SKIN]/ColorChooser/auto_icon.png",
    
    //>@attr    ColorChooser.autoButtonIconSize (number : 12 : IRW)
    // Size of the auto button icon.
    //<
    autoButtonIconSize:12
    
    
});

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

    // Override show() to position near the mouse, and show the clickMask if appropriate
    show : function () {
        // place the menu immediately adjacent to the mouse pointer, keeping it onscreen
        if (this.autoPosition) {
        	var event = isc.EH.getLastEvent();
            this.placeNear(event.x, event.y);
        }
   
        var returnVal = this.Super("show", arguments);
        if (this.autoClose) {
			this.showClickMask(this.getID()+".close()",true);		
        	this.bringToFront();
        }
    },
    
    drawChildren : function () {
        if (this.showNullValue && !this.autoButton) this._makeAutoButton();
        this._updatePickArea();
        if (!this.label) this._makeLabel();
        if (!this.cancelButton) this._makeCancelButton();
        
        this.Super("drawChildren", arguments);
    },

    // Button for selecting a null color  
    // Depending on usage this is a "Transparent" or "Auto" button.
    _makeAutoButton : function () {
        return this.addAutoChild(
            "autoButton",
            {title:this._getAutoButtonTitle(), icon:this._getAutoButtonIcon(),
             iconSize:this._getAutoButtonIconSize(),
             // On click select null
             click:"this.creator.close();this.creator.colorSelected();",
             width:"100%" }, 
            isc.Button
        );
    },
    
    _getAutoButtonTitle : function () {
        if (this.supportsTransparency) return this.transparentButtonTitle;
        return this.autoButtonTitle;
    },
    
    _getAutoButtonIcon : function () {
        if (this.supportsTransparency) return this.transparentButtonIcon;
        return this.autoButtonIcon;
    },
    
    _getAutoButtonIconSize : function () {
        if (this.supportsTransparency) return this.transparentButtonIconSize;
        return this.autoButtonIconSize;
    },
    
    setSupportsTransparency : function (supportsTransparency) {
        if (this.supportsTransparency == supportsTransparency) return;
        this.supportsTransparency = supportsTransparency;
        var ab = this.autoButton;
        if (!ab) return;
        ab.setTitle(this._getAutoButtonTitle());
        ab.icon = this._getAutoButtonIcon();
    },
    
    // _updatePickArea()    Method to create a new pick area
    
    _updatePickArea : function () {
        if (!this.pickArea) {
            return this.addAutoChild("pickArea");
        }
    },
    
    // pickArea_autoMaker() custom maker method for the 'pickArea' named child
    // (Picked up by the 'autoChild' subsystem)
    pickArea_autoMaker : function (properties) {
        var gridSize = this._getGridSize(),
            numRows = gridSize[0],
            numCols = gridSize[1],
            
            fieldArray = [],