git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/ColorPalette.js

   1 if(!dojo._hasResource["dijit.ColorPalette"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
   2 dojo._hasResource["dijit.ColorPalette"] = true;
   3 dojo.provide("dijit.ColorPalette");
   4
   5 dojo.require("dijit._Widget");
   6 dojo.require("dijit._Templated");
   7 dojo.require("dojo.colors");
   8 dojo.require("dojo.i18n");
   9 dojo.requireLocalization("dojo", "colors", null, "zh,pt,da,tr,ru,de,sv,ja,he,fi,nb,el,ar,pt-pt,cs,fr,es,nl,ko,zh-tw,pl,it,hu,ROOT");
  10
  11 dojo.declare("dijit.ColorPalette",
  12         [dijit._Widget, dijit._Templated],
  13         {
  14         // summary: A keyboard accessible color-picking widget
  15         // description:
  16         //      Grid showing various colors, so the user can pick a certain color
  17         //      Can be used standalone, or as a popup.
  18         //
  19         // example:
  20         // |    <div dojoType="dijit.ColorPalette"></div>
  21         //
  22         // example:
  23         // |    var picker = new dijit.ColorPalette({ },srcNode);
  24         // |    picker.startup();
  25         //
  26         // defaultTimeout: Number
  27         //              number of milliseconds before a held key or button becomes typematic
  28         defaultTimeout: 500,
  29
  30         // timeoutChangeRate: Number
  31         //              fraction of time used to change the typematic timer between events
  32         //              1.0 means that each typematic event fires at defaultTimeout intervals
  33         //              < 1.0 means that each typematic event fires at an increasing faster rate
  34         timeoutChangeRate: 0.90,
  35
  36         // palette: String
  37         //              Size of grid, either "7x10" or "3x4".
  38         palette: "7x10",
  39
  40         //_value: String
  41         //              The value of the selected color.
  42         value: null,
  43
  44         //_currentFocus: Integer
  45         //              Index of the currently focused color.
  46         _currentFocus: 0,
  47
  48         // _xDim: Integer
  49         //              This is the number of colors horizontally across.
  50         _xDim: null,
  51
  52         // _yDim: Integer
  53         ///             This is the number of colors vertically down.
  54         _yDim: null,
  55
  56         // _palettes: Map
  57         //              This represents the value of the colors.
  58         //              The first level is a hashmap of the different arrays available
  59         //              The next two dimensions represent the columns and rows of colors.
  60         _palettes: {
  61
  62                 "7x10": [["white", "seashell", "cornsilk", "lemonchiffon","lightyellow", "palegreen", "paleturquoise", "lightcyan",     "lavender", "plum"],
  63                                 ["lightgray", "pink", "bisque", "moccasin", "khaki", "lightgreen", "lightseagreen", "lightskyblue", "cornflowerblue", "violet"],
  64                                 ["silver", "lightcoral", "sandybrown", "orange", "palegoldenrod", "chartreuse", "mediumturquoise",      "skyblue", "mediumslateblue","orchid"],
  65                                 ["gray", "red", "orangered", "darkorange", "yellow", "limegreen",       "darkseagreen", "royalblue", "slateblue", "mediumorchid"],
  66                                 ["dimgray", "crimson",  "chocolate", "coral", "gold", "forestgreen", "seagreen", "blue", "blueviolet", "darkorchid"],
  67                                 ["darkslategray","firebrick","saddlebrown", "sienna", "olive", "green", "darkcyan", "mediumblue","darkslateblue", "darkmagenta" ],
  68                                 ["black", "darkred", "maroon", "brown", "darkolivegreen", "darkgreen", "midnightblue", "navy", "indigo",        "purple"]],
  69
  70                 "3x4": [["white", "lime", "green", "blue"],
  71                         ["silver", "yellow", "fuchsia", "navy"],
  72                         ["gray", "red", "purple", "black"]]
  73
  74         },
  75
  76         // _imagePaths: Map
  77         //              This is stores the path to the palette images
  78         _imagePaths: {
  79                 "7x10": dojo.moduleUrl("dijit", "templates/colors7x10.png"),
  80                 "3x4": dojo.moduleUrl("dijit", "templates/colors3x4.png")
  81         },
  82
  83         // _paletteCoords: Map
  84         //              This is a map that is used to calculate the coordinates of the
  85         //              images that make up the palette.
  86         _paletteCoords: {
  87                 "leftOffset": 3, "topOffset": 3,
  88                 "cWidth": 20, "cHeight": 20
  89
  90         },
  91
  92         // templatePath: String
  93         //              Path to the template of this widget.
  94         templateString:"<div class=\"dijitInline dijitColorPalette\">\n\t<div class=\"dijitColorPaletteInner\" dojoAttachPoint=\"divNode\" waiRole=\"grid\" tabIndex=\"${tabIndex}\">\n\t\t<img class=\"dijitColorPaletteUnder\" dojoAttachPoint=\"imageNode\" waiRole=\"presentation\">\n\t</div>\t\n</div>\n",
  95
  96         // _paletteDims: Object
  97         //              Size of the supported palettes for alignment purposes.
  98         _paletteDims: {
  99                 "7x10": {"width": "206px", "height": "145px"},
 100                 "3x4": {"width": "86px", "height": "64px"}
 101         },
 102
 103         // tabIndex: String
 104         //              Widget tabindex.
 105         tabIndex: "0",
 106
 107         postCreate: function(){
 108                 // A name has to be given to the colorMap, this needs to be unique per Palette.
 109                 dojo.mixin(this.divNode.style, this._paletteDims[this.palette]);
 110                 this.imageNode.setAttribute("src", this._imagePaths[this.palette]);
 111                 var choices = this._palettes[this.palette];
 112                 this.domNode.style.position = "relative";
 113                 this._cellNodes = [];
 114                 this.colorNames = dojo.i18n.getLocalization("dojo", "colors", this.lang);
 115                 var url = dojo.moduleUrl("dojo", "resources/blank.gif"),
 116             colorObject = new dojo.Color(),
 117                     coords = this._paletteCoords;
 118                 for(var row=0; row < choices.length; row++){
 119                         for(var col=0; col < choices[row].length; col++) {
 120                 var imgNode = dojo.doc.createElement("img");
 121                 imgNode.src = url;
 122                 dojo.addClass(imgNode, "dijitPaletteImg");
 123                 var color = choices[row][col],
 124                         colorValue = colorObject.setColor(dojo.Color.named[color]);
 125                 imgNode.alt = this.colorNames[color];
 126                 imgNode.color = colorValue.toHex();
 127                 var imgStyle = imgNode.style;
 128                 imgStyle.color = imgStyle.backgroundColor = imgNode.color;
 129                 var cellNode = dojo.doc.createElement("span");
 130                 cellNode.appendChild(imgNode);
 131                 dojo.forEach(["Dijitclick", "MouseEnter", "Focus", "Blur"], function(handler) {
 132                     this.connect(cellNode, "on" + handler.toLowerCase(), "_onCell" + handler);
 133                 }, this);
 134                 this.divNode.appendChild(cellNode);
 135                 var cellStyle = cellNode.style;
 136                 cellStyle.top = coords.topOffset + (row * coords.cHeight) + "px";
 137                 cellStyle.left = coords.leftOffset + (col * coords.cWidth) + "px";
 138                 dojo.attr(cellNode, "tabindex", "-1");
 139                 cellNode.title = this.colorNames[color];
 140                 dojo.addClass(cellNode, "dijitPaletteCell");
 141                 dijit.setWaiRole(cellNode, "gridcell");
 142                 cellNode.index = this._cellNodes.length;
 143                 this._cellNodes.push(cellNode);
 144             }
 145                 }
 146                 this._xDim = choices[0].length;
 147                 this._yDim = choices.length;
 148                 this.connect(this.divNode, "onfocus", "_onDivNodeFocus");
 149
 150                 // Now set all events
 151                 // The palette itself is navigated to with the tab key on the keyboard
 152                 // Keyboard navigation within the Palette is with the arrow keys
 153                 // Spacebar selects the color.
 154                 // For the up key the index is changed by negative the x dimension.
 155
 156                 var keyIncrementMap = {
 157                         UP_ARROW: -this._xDim,
 158                         // The down key the index is increase by the x dimension.
 159                         DOWN_ARROW: this._xDim,
 160                         // Right and left move the index by 1.
 161                         RIGHT_ARROW: 1,
 162                         LEFT_ARROW: -1
 163                 };
 164                 for(var key in keyIncrementMap){
 165                         this._connects.push(dijit.typematic.addKeyListener(this.domNode,
 166                                 {keyCode:dojo.keys[key], ctrlKey:false, altKey:false, shiftKey:false},
 167                                 this,
 168                                 function(){
 169                                         var increment = keyIncrementMap[key];
 170                                         return function(count){ this._navigateByKey(increment, count); };
 171                                 }(),
 172                                 this.timeoutChangeRate, this.defaultTimeout));
 173                 }
 174         },
 175
 176         focus: function(){
 177                 // summary:
 178                 //              Focus this ColorPalette.  Puts focus on the first swatch.
 179                 this._focusFirst();
 180         },
 181
 182         onChange: function(color){
 183                 // summary:
 184                 //              Callback when a color is selected.
 185                 // color: String
 186                 //              Hex value corresponding to color.
 187 //              console.debug("Color selected is: "+color);
 188         },
 189
 190         _focusFirst: function(){
 191                 this._currentFocus = 0;
 192                 var cellNode = this._cellNodes[this._currentFocus];
 193                 window.setTimeout(function(){dijit.focus(cellNode)}, 0);
 194         },
 195
 196         _onDivNodeFocus: function(evt){
 197                 // focus bubbles on Firefox 2, so just make sure that focus has really
 198                 // gone to the container
 199                 if(evt.target === this.divNode){
 200                         this._focusFirst();
 201                 }
 202         },
 203
 204         _onFocus: function(){
 205                 // while focus is on the palette, set its tabindex to -1 so that on a
 206                 // shift-tab from a cell, the container is not in the tab order
 207                 dojo.attr(this.divNode, "tabindex", "-1");
 208         },
 209
 210         _onBlur: function(){
 211                 this._removeCellHighlight(this._currentFocus);
 212                 // when focus leaves the palette, restore its tabindex, since it was
 213                 // modified by _onFocus().
 214                 dojo.attr(this.divNode, "tabindex", this.tabIndex);
 215         },
 216
 217         _onCellDijitclick: function(/*Event*/ evt){
 218                 // summary:
 219                 //              Handler for click, enter key & space key. Selects the color.
 220                 // evt:
 221                 //              The event.
 222                 var target = evt.currentTarget;
 223                 if (this._currentFocus != target.index){
 224                         this._currentFocus = target.index;
 225                         window.setTimeout(function(){dijit.focus(target)}, 0);
 226                 }
 227                 this._selectColor(target);
 228                 dojo.stopEvent(evt);
 229         },
 230
 231         _onCellMouseEnter: function(/*Event*/ evt){
 232                 // summary:
 233                 //              Handler for onMouseOver. Put focus on the color under the mouse.
 234                 // evt:
 235                 //              The mouse event.
 236                 var target = evt.currentTarget;
 237                 window.setTimeout(function(){dijit.focus(target)}, 0);
 238         },
 239
 240         _onCellFocus: function(/*Event*/ evt){
 241                 // summary:
 242                 //              Handler for onFocus. Removes highlight of
 243                 //              the color that just lost focus, and highlights
 244                 //              the new color.
 245                 // evt:
 246                 //              The focus event.
 247                 this._removeCellHighlight(this._currentFocus);
 248                 this._currentFocus = evt.currentTarget.index;
 249                 dojo.addClass(evt.currentTarget, "dijitPaletteCellHighlight");
 250         },
 251
 252         _onCellBlur: function(/*Event*/ evt){
 253                 // summary:
 254                 //              needed for Firefox 2 on Mac OS X
 255                 this._removeCellHighlight(this._currentFocus);
 256         },
 257
 258         _removeCellHighlight: function(index){
 259                 dojo.removeClass(this._cellNodes[index], "dijitPaletteCellHighlight");
 260         },
 261
 262         _selectColor: function(selectNode){
 263                 // summary:
 264                 //              This selects a color. It triggers the onChange event
 265                 // area:
 266                 //              The area node that covers the color being selected.
 267                 var img = selectNode.getElementsByTagName("img")[0];
 268                 this.onChange(this.value = img.color);
 269         },
 270
 271         _navigateByKey: function(increment, typeCount){
 272                 // summary:
 273                 //              This is the callback for typematic.
 274                 //              It changes the focus and the highlighed color.
 275                 // increment:
 276                 //              How much the key is navigated.
 277                 // typeCount:
 278                 //              How many times typematic has fired.
 279
 280                 // typecount == -1 means the key is released.
 281                 if(typeCount == -1){ return; }
 282
 283                 var newFocusIndex = this._currentFocus + increment;
 284                 if(newFocusIndex < this._cellNodes.length && newFocusIndex > -1)
 285                 {
 286                         var focusNode = this._cellNodes[newFocusIndex];
 287                         focusNode.focus();
 288                 }
 289         }
 290 });
 291
 292 }