lib/dijit/ColorPalette.js

   1 /*
   2         Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved.
   3         Available via Academic Free License >= 2.1 OR the modified BSD license.
   4         see: http://dojotoolkit.org/license for details
   5 */
   6
   7
   8 if(!dojo._hasResource["dijit.ColorPalette"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
   9 dojo._hasResource["dijit.ColorPalette"] = true;
  10 dojo.provide("dijit.ColorPalette");
  11 dojo.require("dijit._Widget");
  12 dojo.require("dijit._Templated");
  13 dojo.require("dojo.colors");
  14 dojo.require("dojo.i18n");
  15 dojo.require("dojo.string");
  16 dojo.require("dijit._PaletteMixin");
  17 dojo.requireLocalization("dojo", "colors", null, "ROOT,ar,ca,cs,da,de,el,es,fi,fr,he,hu,it,ja,kk,ko,nb,nl,pl,pt,pt-pt,ro,ru,sk,sl,sv,th,tr,zh,zh-tw");
  18
  19
  20 dojo.declare("dijit.ColorPalette",
  21         [dijit._Widget, dijit._Templated, dijit._PaletteMixin],
  22         {
  23         // summary:
  24         //              A keyboard accessible color-picking widget
  25         // description:
  26         //              Grid showing various colors, so the user can pick a certain color.
  27         //              Can be used standalone, or as a popup.
  28         //
  29         // example:
  30         // |    <div dojoType="dijit.ColorPalette"></div>
  31         //
  32         // example:
  33         // |    var picker = new dijit.ColorPalette({ },srcNode);
  34         // |    picker.startup();
  35
  36
  37         // palette: [const] String
  38         //              Size of grid, either "7x10" or "3x4".
  39         palette: "7x10",
  40
  41         // _palettes: [protected] Map
  42         //              This represents the value of the colors.
  43         //              The first level is a hashmap of the different palettes available.
  44         //              The next two dimensions represent the columns and rows of colors.
  45         _palettes: {
  46                 "7x10": [["white", "seashell", "cornsilk", "lemonchiffon","lightyellow", "palegreen", "paleturquoise", "lightcyan",     "lavender", "plum"],
  47                                 ["lightgray", "pink", "bisque", "moccasin", "khaki", "lightgreen", "lightseagreen", "lightskyblue", "cornflowerblue", "violet"],
  48                                 ["silver", "lightcoral", "sandybrown", "orange", "palegoldenrod", "chartreuse", "mediumturquoise",      "skyblue", "mediumslateblue","orchid"],
  49                                 ["gray", "red", "orangered", "darkorange", "yellow", "limegreen",       "darkseagreen", "royalblue", "slateblue", "mediumorchid"],
  50                                 ["dimgray", "crimson",  "chocolate", "coral", "gold", "forestgreen", "seagreen", "blue", "blueviolet", "darkorchid"],
  51                                 ["darkslategray","firebrick","saddlebrown", "sienna", "olive", "green", "darkcyan", "mediumblue","darkslateblue", "darkmagenta" ],
  52                                 ["black", "darkred", "maroon", "brown", "darkolivegreen", "darkgreen", "midnightblue", "navy", "indigo",        "purple"]],
  53
  54                 "3x4": [["white", "lime", "green", "blue"],
  55                         ["silver", "yellow", "fuchsia", "navy"],
  56                         ["gray", "red", "purple", "black"]]
  57         },
  58
  59         // templateString: String
  60         //              The template of this widget.
  61         templateString: dojo.cache("dijit", "templates/ColorPalette.html", "<div class=\"dijitInline dijitColorPalette\">\n\t<table class=\"dijitPaletteTable\" cellSpacing=\"0\" cellPadding=\"0\">\n\t\t<tbody dojoAttachPoint=\"gridNode\"></tbody>\n\t</table>\n</div>\n"),
  62
  63         baseClass: "dijitColorPalette",
  64
  65         buildRendering: function(){
  66                 // Instantiate the template, which makes a skeleton into which we'll insert a bunch of
  67                 // <img> nodes
  68                 this.inherited(arguments);
  69
  70                 // Creates <img> nodes in each cell of the template.
  71                 // Pass in "customized" dijit._Color constructor for specified palette and high-contrast vs. normal mode
  72                 this._preparePalette(
  73                         this._palettes[this.palette],
  74                         dojo.i18n.getLocalization("dojo", "colors", this.lang),
  75                         dojo.declare(dijit._Color, {
  76                                 hc: dojo.hasClass(dojo.body(), "dijit_a11y"),
  77                                 palette: this.palette
  78                         })
  79                 );
  80         }
  81 });
  82
  83 dojo.declare("dijit._Color", dojo.Color, {
  84         // summary:
  85         //              Object associated with each cell in a ColorPalette palette.
  86         //              Implements dijit.Dye.
  87
  88         // Template for each cell in normal (non-high-contrast mode).  Each cell contains a wrapper
  89         // node for showing the border (called dijitPaletteImg for back-compat), and dijitColorPaletteSwatch
  90         // for showing the color.
  91         template:
  92                 "<span class='dijitInline dijitPaletteImg'>" +
  93                         "<img src='${blankGif}' alt='${alt}' class='dijitColorPaletteSwatch' style='background-color: ${color}'/>" +
  94                 "</span>",
  95
  96         // Template for each cell in high contrast mode.  Each cell contains an image with the whole palette,
  97         // but scrolled and clipped to show the correct color only
  98         hcTemplate:
  99                 "<span class='dijitInline dijitPaletteImg' style='position: relative; overflow: hidden; height: 12px; width: 14px;'>" +
 100                         "<img src='${image}' alt='${alt}' style='position: absolute; left: ${left}px; top: ${top}px; ${size}'/>" +
 101                 "</span>",
 102
 103         // _imagePaths: [protected] Map
 104         //              This is stores the path to the palette images used for high-contrast mode display
 105         _imagePaths: {
 106                 "7x10": dojo.moduleUrl("dijit.themes", "a11y/colors7x10.png"),
 107                 "3x4": dojo.moduleUrl("dijit.themes", "a11y/colors3x4.png")
 108         },
 109
 110         constructor: function(/*String*/alias, /*Number*/ row, /*Number*/ col){
 111                 this._alias = alias;
 112                 this._row = row;
 113                 this._col = col;
 114                 this.setColor(dojo.Color.named[alias]);
 115         },
 116
 117         getValue: function(){
 118                 // summary:
 119                 //              Note that although dijit._Color is initialized with a value like "white" getValue() always
 120                 //              returns a hex value
 121                 return this.toHex();
 122         },
 123
 124         fillCell: function(/*DOMNode*/ cell, /*String*/ blankGif){
 125                 var html = dojo.string.substitute(this.hc ? this.hcTemplate : this.template, {
 126                         // substitution variables for normal mode
 127                         color: this.toHex(),
 128                         blankGif: blankGif,
 129                         alt: this._alias,
 130
 131                         // variables used for high contrast mode
 132                         image: this._imagePaths[this.palette].toString(),
 133                         left: this._col * -20 - 5,
 134                         top: this._row * -20 - 5,
 135                         size: this.palette == "7x10" ? "height: 145px; width: 206px" : "height: 64px; width: 86px"
 136                 });
 137
 138                 dojo.place(html, cell);
 139         }
 140 });
 141
 142 }