lib/dijit/ColorPalette.js.uncompressed.js

   1 require({cache:{
   2 'url:dijit/templates/ColorPalette.html':"<div class=\"dijitInline dijitColorPalette\">\n\t<table dojoAttachPoint=\"paletteTableNode\" class=\"dijitPaletteTable\" cellSpacing=\"0\" cellPadding=\"0\" role=\"grid\">\n\t\t<tbody data-dojo-attach-point=\"gridNode\"></tbody>\n\t</table>\n</div>\n"}});
   3 define("dijit/ColorPalette", [
   4         "require",              // require.toUrl
   5         "dojo/text!./templates/ColorPalette.html",
   6         "./_Widget",    // used also to load dijit/hccss for setting has("highcontrast")
   7         "./_TemplatedMixin",
   8         "./_PaletteMixin",
   9         "./hccss",      // has("highcontrast")
  10         "dojo/i18n", // i18n.getLocalization
  11         "dojo/_base/Color", // dojo.Color dojo.Color.named
  12         "dojo/_base/declare", // declare
  13         "dojo/dom-construct", // domConstruct.place
  14         "dojo/string", // string.substitute
  15         "dojo/i18n!dojo/nls/colors",    // translations
  16         "dojo/colors"   // extend dojo.Color w/names of other colors
  17 ], function(require, template, _Widget, _TemplatedMixin, _PaletteMixin, has, i18n, Color,
  18         declare, domConstruct, string){
  19
  20 // module:
  21 //              dijit/ColorPalette
  22
  23 var ColorPalette = declare("dijit.ColorPalette", [_Widget, _TemplatedMixin, _PaletteMixin], {
  24         // summary:
  25         //              A keyboard accessible color-picking widget
  26         // description:
  27         //              Grid showing various colors, so the user can pick a certain color.
  28         //              Can be used standalone, or as a popup.
  29         //
  30         // example:
  31         // |    <div data-dojo-type="dijit/ColorPalette"></div>
  32         //
  33         // example:
  34         // |    var picker = new dijit.ColorPalette({ },srcNode);
  35         // |    picker.startup();
  36
  37
  38         // palette: [const] String
  39         //              Size of grid, either "7x10" or "3x4".
  40         palette: "7x10",
  41
  42         // _palettes: [protected] Map
  43         //              This represents the value of the colors.
  44         //              The first level is a hashmap of the different palettes available.
  45         //              The next two dimensions represent the columns and rows of colors.
  46         _palettes: {
  47                 "7x10": [["white", "seashell", "cornsilk", "lemonchiffon","lightyellow", "palegreen", "paleturquoise", "lightcyan",     "lavender", "plum"],
  48                                 ["lightgray", "pink", "bisque", "moccasin", "khaki", "lightgreen", "lightseagreen", "lightskyblue", "cornflowerblue", "violet"],
  49                                 ["silver", "lightcoral", "sandybrown", "orange", "palegoldenrod", "chartreuse", "mediumturquoise", "skyblue", "mediumslateblue","orchid"],
  50                                 ["gray", "red", "orangered", "darkorange", "yellow", "limegreen", "darkseagreen", "royalblue", "slateblue", "mediumorchid"],
  51                                 ["dimgray", "crimson",  "chocolate", "coral", "gold", "forestgreen", "seagreen", "blue", "blueviolet", "darkorchid"],
  52                                 ["darkslategray","firebrick","saddlebrown", "sienna", "olive", "green", "darkcyan", "mediumblue","darkslateblue", "darkmagenta" ],
  53                                 ["black", "darkred", "maroon", "brown", "darkolivegreen", "darkgreen", "midnightblue", "navy", "indigo", "purple"]],
  54
  55                 "3x4": [["white", "lime", "green", "blue"],
  56                         ["silver", "yellow", "fuchsia", "navy"],
  57                         ["gray", "red", "purple", "black"]]
  58         },
  59
  60         // templateString: String
  61         //              The template of this widget.
  62         templateString: template,
  63
  64         baseClass: "dijitColorPalette",
  65
  66         _dyeFactory: function(value, row, col, title){
  67                 // Overrides _PaletteMixin._dyeFactory().
  68                 return new this._dyeClass(value, row, col, title);
  69         },
  70
  71         buildRendering: function(){
  72                 // Instantiate the template, which makes a skeleton into which we'll insert a bunch of
  73                 // <img> nodes
  74                 this.inherited(arguments);
  75
  76                 //      Creates customized constructor for dye class (color of a single cell) for
  77                 //      specified palette and high-contrast vs. normal mode.   Used in _getDye().
  78                 this._dyeClass = declare(ColorPalette._Color, {
  79                         palette: this.palette
  80                 });
  81
  82                 // Creates <img> nodes in each cell of the template.
  83                 this._preparePalette(
  84                         this._palettes[this.palette],
  85                         i18n.getLocalization("dojo", "colors", this.lang));
  86         }
  87 });
  88
  89 ColorPalette._Color = declare("dijit._Color", Color, {
  90         // summary:
  91         //              Object associated with each cell in a ColorPalette palette.
  92         //              Implements dijit/Dye.
  93
  94         // Template for each cell in normal (non-high-contrast mode).  Each cell contains a wrapper
  95         // node for showing the border (called dijitPaletteImg for back-compat), and dijitColorPaletteSwatch
  96         // for showing the color.
  97         template:
  98                 "<span class='dijitInline dijitPaletteImg'>" +
  99                         "<img src='${blankGif}' alt='${alt}' title='${title}' class='dijitColorPaletteSwatch' style='background-color: ${color}'/>" +
 100                 "</span>",
 101
 102         // Template for each cell in high contrast mode.  Each cell contains an image with the whole palette,
 103         // but scrolled and clipped to show the correct color only
 104         hcTemplate:
 105                 "<span class='dijitInline dijitPaletteImg' style='position: relative; overflow: hidden; height: 12px; width: 14px;'>" +
 106                         "<img src='${image}' alt='${alt}' title='${title}' style='position: absolute; left: ${left}px; top: ${top}px; ${size}'/>" +
 107                 "</span>",
 108
 109         // _imagePaths: [protected] Map
 110         //              This is stores the path to the palette images used for high-contrast mode display
 111         _imagePaths: {
 112                 "7x10": require.toUrl("./themes/a11y/colors7x10.png"),
 113                 "3x4": require.toUrl("./themes/a11y/colors3x4.png")
 114         },
 115
 116         constructor: function(alias, row, col, title){
 117                 // summary:
 118                 //              Constructor for ColorPalette._Color
 119                 // alias: String
 120                 //              English name of the color.
 121                 // row: Number
 122                 //              Vertical position in grid.
 123                 // column: Number
 124                 //              Horizontal position in grid.
 125                 // title: String
 126                 //              Localized name of the color.
 127                 this._title = title;
 128                 this._row = row;
 129                 this._col = col;
 130                 this.setColor(Color.named[alias]);
 131         },
 132
 133         getValue: function(){
 134                 // summary:
 135                 //              Note that although dijit._Color is initialized with a value like "white" getValue() always
 136                 //              returns a hex value
 137                 return this.toHex();
 138         },
 139
 140         fillCell: function(/*DOMNode*/ cell, /*String*/ blankGif){
 141                 var html = string.substitute(has("highcontrast") ? this.hcTemplate : this.template, {
 142                         // substitution variables for normal mode
 143                         color: this.toHex(),
 144                         blankGif: blankGif,
 145                         alt: this._title,
 146                         title: this._title,
 147
 148                         // variables used for high contrast mode
 149                         image: this._imagePaths[this.palette].toString(),
 150                         left: this._col * -20 - 5,
 151                         top: this._row * -20 - 5,
 152                         size: this.palette == "7x10" ? "height: 145px; width: 206px" : "height: 64px; width: 86px"
 153                 });
 154
 155                 domConstruct.place(html, cell);
 156         }
 157 });
 158
 159
 160 return ColorPalette;
 161 });