Subversion Repositories Applications.papyrus

if(!dojo._hasResource["dijit.ColorPalette"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dijit.ColorPalette"] = true;
dojo.provide("dijit.ColorPalette");

dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojo.colors");
dojo.require("dojo.i18n");
dojo.requireLocalization("dojo", "colors", null, "ko,zh,ja,zh-tw,ru,it,hu,ROOT,fr,pt,pl,es,de,cs");

dojo.declare(
                "dijit.ColorPalette",
                [dijit._Widget, dijit._Templated],
{
        // summary
        //              Grid showing various colors, so the user can pick a certain color

        // defaultTimeout: Number
        //              number of milliseconds before a held key or button becomes typematic
        defaultTimeout: 500,

        // timeoutChangeRate: Number
        //              fraction of time used to change the typematic timer between events
        //              1.0 means that each typematic event fires at defaultTimeout intervals
        //              < 1.0 means that each typematic event fires at an increasing faster rate
        timeoutChangeRate: 0.90,

        // palette: String
        //              Size of grid, either "7x10" or "3x4".
        palette: "7x10",

        //_value: String
        //              The value of the selected color.
        value: null,

        //_currentFocus: Integer
        //              Index of the currently focused color.
        _currentFocus: 0,

        // _xDim: Integer
        //              This is the number of colors horizontally across.
        _xDim: null,

        // _yDim: Integer
        ///             This is the number of colors vertically down.
        _yDim: null,

        // _palettes: Map
        //              This represents the value of the colors.
        //              The first level is a hashmap of the different arrays available
        //              The next two dimensions represent the columns and rows of colors.
        _palettes: {

                "7x10": [["white", "seashell", "cornsilk", "lemonchiffon","lightyellow", "palegreen", "paleturquoise", "lightcyan",     "lavender", "plum"],
                                ["lightgray", "pink", "bisque", "moccasin", "khaki", "lightgreen", "lightseagreen", "lightskyblue", "cornflowerblue", "violet"],
                                ["silver", "lightcoral", "sandybrown", "orange", "palegoldenrod", "chartreuse", "mediumturquoise",      "skyblue", "mediumslateblue","orchid"],
                                ["gray", "red", "orangered", "darkorange", "yellow", "limegreen",       "darkseagreen", "royalblue", "slateblue", "mediumorchid"],
                                ["dimgray", "crimson",  "chocolate", "coral", "gold", "forestgreen", "seagreen", "blue", "blueviolet", "darkorchid"],
                                ["darkslategray","firebrick","saddlebrown", "sienna", "olive", "green", "darkcyan", "mediumblue","darkslateblue", "darkmagenta" ],
                                ["black", "darkred", "maroon", "brown", "darkolivegreen", "darkgreen", "midnightblue", "navy", "indigo",        "purple"]],

                "3x4": [["white", "lime", "green", "blue"],
                        ["silver", "yellow", "fuchsia", "navy"],
                        ["gray", "red", "purple", "black"]]     

        },

        // _imagePaths: Map
        //              This is stores the path to the palette images
        _imagePaths: {
                "7x10": dojo.moduleUrl("dijit", "templates/colors7x10.png"),
                "3x4": dojo.moduleUrl("dijit", "templates/colors3x4.png")
        },

        // _paletteCoords: Map
        //              This is a map that is used to calculate the coordinates of the
        //              images that make up the palette.
        _paletteCoords: {
                "leftOffset": 4, "topOffset": 4,
                "cWidth": 20, "cHeight": 20
                
        },

        // templatePath: String
        //              Path to the template of this widget.
        templateString:"<div class=\"dijitInline dijitColorPalette\">\n\t<div class=\"dijitColorPaletteInner\" dojoAttachPoint=\"divNode\" waiRole=\"grid\" tabIndex=\"-1\">\n\t\t<img class=\"dijitColorPaletteUnder\" dojoAttachPoint=\"imageNode\" waiRole=\"presentation\">\n\t</div>\t\n</div>\n",

        // _paletteDims: Object
        //              Size of the supported palettes for alignment purposes.
        _paletteDims: {
                "7x10": {"width": "206px", "height": "145px"},
                "3x4": {"width": "86px", "height": "64px"}
        },


        postCreate: function(){
                // A name has to be given to the colorMap, this needs to be unique per Palette.
                dojo.mixin(this.divNode.style, this._paletteDims[this.palette]);
                this.imageNode.setAttribute("src", this._imagePaths[this.palette]);
                var choices = this._palettes[this.palette];     
                this.domNode.style.position = "relative";
                this._highlightNodes = [];      
                this.colorNames = dojo.i18n.getLocalization("dojo", "colors", this.lang);
                var url= dojo.moduleUrl("dijit", "templates/blank.gif");
                var colorObject = new dojo.Color(),
                    coords = this._paletteCoords;
                for(var row=0; row < choices.length; row++){
                        for(var col=0; col < choices[row].length; col++) {
                var highlightNode = document.createElement("img");
                highlightNode.src = url;
                dojo.addClass(highlightNode, "dijitPaletteImg");
                var color = choices[row][col],
                        colorValue = colorObject.setColor(dojo.Color.named[color]);
                highlightNode.alt = this.colorNames[color];
                highlightNode.color = colorValue.toHex();
                var highlightStyle = highlightNode.style;
                highlightStyle.color = highlightStyle.backgroundColor = highlightNode.color;
                dojo.forEach(["Dijitclick", "MouseOut", "MouseOver", "Blur", "Focus"], function(handler) {
                    this.connect(highlightNode, "on" + handler.toLowerCase(), "_onColor" + handler);
                }, this);
                this.divNode.appendChild(highlightNode);
                highlightStyle.top = coords.topOffset + (row * coords.cHeight) + "px";
                highlightStyle.left = coords.leftOffset + (col * coords.cWidth) + "px";
                highlightNode.setAttribute("tabIndex", "-1");
                highlightNode.title = this.colorNames[color];
                dijit.setWaiRole(highlightNode, "gridcell");
                highlightNode.index = this._highlightNodes.length;
                this._highlightNodes.push(highlightNode);
            }
                }
                this._highlightNodes[this._currentFocus].tabIndex = 0;
                this._xDim = choices[0].length;
                this._yDim = choices.length;

                // Now set all events
                // The palette itself is navigated to with the tab key on the keyboard
                // Keyboard navigation within the Palette is with the arrow keys
                // Spacebar selects the color.
                // For the up key the index is changed by negative the x dimension.             

                var keyIncrementMap = {
                        UP_ARROW: -this._xDim,
                        // The down key the index is increase by the x dimension.       
                        DOWN_ARROW: this._xDim,
                        // Right and left move the index by 1.
                        RIGHT_ARROW: 1,
                        LEFT_ARROW: -1
                };
                for(var key in keyIncrementMap){
                        this._connects.push(dijit.typematic.addKeyListener(this.domNode,
                                {keyCode:dojo.keys[key], ctrlKey:false, altKey:false, shiftKey:false},
                                this,
                                function(){
                                        var increment = keyIncrementMap[key];
                                        return function(count){ this._navigateByKey(increment, count); };
                                }(),
                                this.timeoutChangeRate, this.defaultTimeout));
                }
        },

        focus: function(){
                // summary:
                //              Focus this ColorPalette.
                dijit.focus(this._highlightNodes[this._currentFocus]);
        },

        onChange: function(color){
                // summary:
                //              Callback when a color is selected.
                // color: String
                //              Hex value corresponding to color.
//              console.debug("Color selected is: "+color);
        },

        _onColorDijitclick: function(/*Event*/ evt){
                // summary:
                //              Handler for click, enter key & space key. Selects the color.
                // evt:
                //              The event.
                var target = evt.currentTarget;
                if (this._currentFocus != target.index){
                        this._currentFocus = target.index;
                        dijit.focus(target);
                }
                this._selectColor(target);
                dojo.stopEvent(evt);
        },

        _onColorMouseOut: function(/*Event*/ evt){
                // summary:
                //              Handler for onMouseOut. Removes highlight.
                // evt:
                //              The mouse event.
                dojo.removeClass(evt.currentTarget, "dijitPaletteImgHighlight");
        },

        _onColorMouseOver: function(/*Event*/ evt){
                // summary:
                //              Handler for onMouseOver. Highlights the color.
                // evt:
                //              The mouse event.
                var target = evt.currentTarget;
                target.tabIndex = 0;
                target.focus();
        },

        _onColorBlur: function(/*Event*/ evt){
                // summary:
                //              Handler for onBlur. Removes highlight and sets
                //              the first color as the palette's tab point.
                // evt:
                //              The blur event.
                dojo.removeClass(evt.currentTarget, "dijitPaletteImgHighlight");
                evt.currentTarget.tabIndex = -1;
                this._currentFocus = 0;
                this._highlightNodes[0].tabIndex = 0;
        },

        _onColorFocus: function(/*Event*/ evt){
                // summary:
                //              Handler for onFocus. Highlights the color.
                // evt:
                //              The focus event.
                if(this._currentFocus != evt.currentTarget.index){
                        this._highlightNodes[this._currentFocus].tabIndex = -1;
                }
                this._currentFocus = evt.currentTarget.index;
                dojo.addClass(evt.currentTarget, "dijitPaletteImgHighlight");

        },

        _selectColor: function(selectNode){     
                // summary:
                //              This selects a color. It triggers the onChange event
                // area:
                //              The area node that covers the color being selected.
                this.onChange(this.value = selectNode.color);
        },

        _navigateByKey: function(increment, typeCount){
                // summary:we
                //              This is the callback for typematic.
                //              It changes the focus and the highlighed color.
                // increment:
                //              How much the key is navigated.
                // typeCount:
                //              How many times typematic has fired.

                // typecount == -1 means the key is released.
                if(typeCount == -1){ return; }

                var newFocusIndex = this._currentFocus + increment;
                if(newFocusIndex < this._highlightNodes.length && newFocusIndex > -1)
                {
                        var focusNode = this._highlightNodes[newFocusIndex];
                        focusNode.tabIndex = 0;
                        focusNode.focus();
                }
        }
});

}