]>
Commit | Line | Data |
---|---|---|
f0cfe83e AD |
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 | }); |