colorchooser.js

javascript 很酷的类库

            fieldWidths = [];
            
        
        for (var i = 0; i < numCols; i++) {
            fieldArray.add({});
            fieldWidths.add(this.colorButtonSize);
        }
           
        
        var pickArea = isc.GridRenderer.create({

            ID:this.getID() + "_pickArea",
            creator:this,

            autoDraw:false,
            _generated:true,

            layoutAlign:isc.Layout.CENTER,

            // Allow the grid to expand with its content            
            width:1, height:1,
            overflow:isc.Canvas.VISIBLE,
            
            cursor:isc.Canvas.HAND,
            
            // totalRows will designate how many rows are rendered
            totalRows:numRows,

            // fields property will designate how many columns to render
            fields:fieldArray,
            
            celHeight:this.colorButtonSize,

            cellPadding:0,
            
            // Style the grid
            baseStyle:this.colorButtonBaseStyle,
            
            
            useCellRollOvers:true,
            showRollOver:true,

            // override getCellValue to return a block of the appropriate color
            getCellValue : function (record, rowNum, colNum) {
                return this.creator._getCellValue(rowNum, colNum);
            },
            
            // Don't show rollOver when there's no color for the cell
            shouldShowRollOver : function (rowNum, colNum) {
                return (this.creator._getCellColor(rowNum, colNum) != null);
            },
            
            // Send cellOver to the chooser widget so it can update its label
            cellOver : function (record, rowNum, colNum) {
                return this.creator._cellMouseOver(rowNum, colNum);
            },
            
            // on widget mouseOut, ensure we clear the label's content
            mouseOut : function () {
                this.creator.clearLabelContents();
                // The super call will also clear any rollover styling on the last over cell.
                return this.Super("mouseOut", arguments);
            }
            
        });
    
        // Send cellClick to the chooser widget. If the user is over a color, this will
        // select that color.
        
        var cellClick = function (record, rowNum, colNum) {
            return this.creator._cellClick(rowNum, colNum);
        } 
        if (isc.Browser.isSafari) isc.addMethods(pickArea, {cellMouseDown:cellClick});
        else isc.addMethods(pickArea, {cellClick:cellClick});
        
        
        pickArea.setColumnWidths(fieldWidths);
        
        return pickArea;

    },
    
    // The pick area is rendered as a grid of colored squares (used to select colors).
    // We want to render as many squares as we can horizontally to fill the available space,
    // wrapping to show more colors in additional rows.
    // If we are going to exceed the specified height of the widget, we'll add another column
    // (before adding another row / adding another column, etc., keeping the grid as square as
    // possible).
    _getGridSize : function () {

        var numColors = this.colorArray.length;
        
        // If we have an explicitly specified number of columns, use that.
        if (this.numCols != null) {
            return [Math.ceil(numColors / this.numCols), this.numCols];
        }
        
        // Otherwise use the number of cols that will fit in the available space
        var cbw = this.colorButtonSize,
            specifiedWidth = this.getWidth(),
            specifiedHeight = this.getHeight() - 
                                (this.labelHeight + this.membersMargin) -
                                (this.cancelButtonHeight + this.membersMargin);
        
        var numCols = Math.floor(specifiedWidth / cbw),
            numRows = Math.ceil(numColors / numCols);

        // Default case - we can fit all our colors in our specified height
        if (numRows * cbw <= specifiedHeight) return [numRows, numCols];
        
        // In this case just return a grid as close to square as possible.
        numCols = Math.floor(Math.sqrt(numColors));
        numRows = Math.ceil(numColors / numCols);

        
        return [numRows, numCols];
    },
    
    // _getCellColor returns the color associated with some cell (or null, if appropriate)
    _getCellColor : function (rowNum, colNum) {
        var numCols = this.pickArea.fields.length,
            colorArray = this.colorArray,
            colorIndex = (numCols * rowNum) + colNum;
            
        return colorArray[colorIndex];
    },

    // We write the cells out as blocks (DIVs) of the appropriate color.
    // We have to size the DIV to match the available space (based on the styling applied to 
    // the cells - otherwise the blocks of color will be clipped horizontally, but will
    // force the rows to expand vertically.
    _getCellValue : function (rowNum, colNum) {
        var cbw = this._getCellInnerWidth(),
            cbh = this._getCellInnerHeight();
            
        return ["<DIV style='width:", cbw, "px;height:", cbh, 
                "px;background-color:", this._getCellColor(rowNum, colNum),
                ";overflow:hidden'>&nbsp;</DIV>"].join("");
        
    },

    // Cache the calculated sizes, as we do this for every cell.  
    
    _getCellInnerWidth : function () {
        if (!this._cbw) {
            var cbw = this.colorButtonSize;
            cbw -= isc.Element._getHBorderPad(this.colorButtonBaseStyle)
            this._cbw = cbw;
        }
        return this._cbw;
    },
    _getCellInnerHeight : function () {
        if (!this._cbh) {
            var cbh = this.colorButtonSize;
            cbh -= isc.Element._getVBorderPad(this.colorButtonBaseStyle)
            this._cbh = cbh;
        }
        return this._cbh;
    },    
    

    // When the user hovers over a color, show it's value in the label    
    _cellMouseOver : function (rowNum, colNum) {
        var color = this._getCellColor(rowNum, colNum);
        if (color) {
            this.label.setContents(color);
        } else {
            this.clearLabelContents();
        }
    },
    
    
    clearLabelContents : function () {
        this.label.setContents("&nbsp;");
    },
    
    // On cell-click, select the appropriate color.
    _cellClick : function (rowNum, colNum) {
        var color = this._getCellColor(rowNum, colNum);
        if (!color) return;
        
        this.close();
        this.colorSelected(color);
    },
    
    //>@method  ColorChooser.colorSelected()
    // Fired when the user picks a color. Override or observe to perform some action on color
    // selection.
    //  @param  color   (string)    CSS color value
    //<
    
    colorSelected : function (color) {
    },
    
    _makeLabel : function () {
        this.addAutoChild("label", {height:this.labelHeight}, isc.Label);
    },
    
    _makeCancelButton : function () {
        this.addAutoChild("cancelButton", 
                         {title:this.cancelButtonTitle, 
                          click:"this.creator.cancel()", layoutAlign:isc.Layout.CENTER,
                          width:this.cancelButtonWidth, height:this.cancelButtonHeight},
                         this.cancelButtonClass);
    },
    
    //>@method  ColorChooser.cancel()
    // Cancel the color selection.
    // By default falls through to this.close().
    //<
    // This is a separate method so we can have custom implementations fire on cancel
    cancel : function () {
        this.close();
    },
    
    //>@method  ColorChooser.close()
    // Closes the color chooser (hiding it, and hiding the clickMask).
    //<
    close : function () {
        this.hideClickMask();
        if (this.isDrawn()) {
            this.hide();
            // move offscreen to prevent page-level scrolling
            // NOTE: could create a problem if a ColorChooser was ever used inside an
            // overflow:visible parent, but ColorChoosers are always top level for now.
            this.moveTo(0,-9999);
        }
    }
    

});

isc.ColorChooser.registerStringMethods({
    // Allow colorSelected to be defined as a stringMethod.
    colorSelected:["color"]
});
//!<Deferred

isc.ColorChooser.addClassMethods({
    
    // For efficiency we want to re-use a single color-chooser widget in some cases.
    // Return a standard color chooser that can be reused by different form items, etc.
    getSharedColorChooser : function (properties) {
        if (!this._globalCC) {
            this._globalCC = this.create(properties, {
                _generated:true
            });
        } else {
            isc.addProperties(this._globalCC, properties);
        }
        return this._globalCC;
    }
    
});