require({cache:{ 'dijit/ColorPalette':function(){ define([ "require", // require.toUrl "dojo/text!./templates/ColorPalette.html", "./_Widget", // used also to load dijit/hccss for setting has("highcontrast") "./_TemplatedMixin", "./_PaletteMixin", "./hccss", // has("highcontrast") "dojo/i18n", // i18n.getLocalization "dojo/_base/Color", // dojo.Color dojo.Color.named "dojo/_base/declare", // declare "dojo/dom-construct", // domConstruct.place "dojo/string", // string.substitute "dojo/i18n!dojo/nls/colors", // translations "dojo/colors" // extend dojo.Color w/names of other colors ], function(require, template, _Widget, _TemplatedMixin, _PaletteMixin, has, i18n, Color, declare, domConstruct, string){ // module: // dijit/ColorPalette var ColorPalette = declare("dijit.ColorPalette", [_Widget, _TemplatedMixin, _PaletteMixin], { // summary: // A keyboard accessible color-picking widget // description: // Grid showing various colors, so the user can pick a certain color. // Can be used standalone, or as a popup. // // example: // |
// // example: // | var picker = new dijit.ColorPalette({ },srcNode); // | picker.startup(); // palette: [const] String // Size of grid, either "7x10" or "3x4". palette: "7x10", // _palettes: [protected] Map // This represents the value of the colors. // The first level is a hashmap of the different palettes 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"] ] }, // templateString: String // The template of this widget. templateString: template, baseClass: "dijitColorPalette", _dyeFactory: function(value, row, col, title){ // Overrides _PaletteMixin._dyeFactory(). return new this._dyeClass(value, row, col, title); }, buildRendering: function(){ // Instantiate the template, which makes a skeleton into which we'll insert a bunch of // nodes this.inherited(arguments); // Creates customized constructor for dye class (color of a single cell) for // specified palette and high-contrast vs. normal mode. Used in _getDye(). this._dyeClass = declare(ColorPalette._Color, { palette: this.palette }); // Creates nodes in each cell of the template. this._preparePalette( this._palettes[this.palette], i18n.getLocalization("dojo", "colors", this.lang)); } }); ColorPalette._Color = declare("dijit._Color", Color, { // summary: // Object associated with each cell in a ColorPalette palette. // Implements dijit/Dye. // Template for each cell in normal (non-high-contrast mode). Each cell contains a wrapper // node for showing the border (called dijitPaletteImg for back-compat), and dijitColorPaletteSwatch // for showing the color. template: "" + "" + "", // Template for each cell in high contrast mode. Each cell contains an image with the whole palette, // but scrolled and clipped to show the correct color only hcTemplate: " ", // _imagePaths: [protected] Map // This is stores the path to the palette images used for high-contrast mode display _imagePaths: { "7x10": require.toUrl("./themes/a11y/colors7x10.png"), "3x4": require.toUrl("./themes/a11y/colors3x4.png") }, constructor: function(alias, row, col, title){ // summary: // Constructor for ColorPalette._Color // alias: String // English name of the color. // row: Number // Vertical position in grid. // column: Number // Horizontal position in grid. // title: String // Localized name of the color. this._title = title; this._row = row; this._col = col; this.setColor(Color.named[alias]); }, getValue: function(){ // summary: // Note that although dijit._Color is initialized with a value like "white" getValue() always // returns a hex value return this.toHex(); }, fillCell: function(/*DOMNode*/ cell, /*String*/ blankGif){ var html = string.substitute(has("highcontrast") ? this.hcTemplate : this.template, { // substitution variables for normal mode color: this.toHex(), blankGif: blankGif, alt: this._title, title: this._title, // variables used for high contrast mode image: this._imagePaths[this.palette].toString(), left: this._col * -20 - 5, top: this._row * -20 - 5, size: this.palette == "7x10" ? "height: 145px; width: 206px" : "height: 64px; width: 86px" }); domConstruct.place(html, cell); } }); return ColorPalette; }); }, 'dijit/_PaletteMixin':function(){ define([ "dojo/_base/declare", // declare "dojo/dom-attr", // domAttr.set "dojo/dom-class", // domClass.add domClass.remove "dojo/dom-construct", // domConstruct.create domConstruct.place "dojo/keys", // keys "dojo/_base/lang", // lang.getObject "dojo/on", "./_CssStateMixin", "./a11yclick", "./focus", "./typematic" ], function(declare, domAttr, domClass, domConstruct, keys, lang, on, _CssStateMixin, a11yclick, focus, typematic){ // module: // dijit/_PaletteMixin var PaletteMixin = declare("dijit._PaletteMixin", _CssStateMixin, { // summary: // A keyboard accessible palette, for picking a color/emoticon/etc. // description: // A mixin for a grid showing various entities, so the user can pick a certain entity. // 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 // Less than 1.0 means that each typematic event fires at an increasing faster rate timeoutChangeRate: 0.90, // value: String // Currently selected color/emoticon/etc. value: "", // _selectedCell: [private] Integer // Index of the currently selected cell. Initially, none selected _selectedCell: -1, /*===== // _currentFocus: [private] DomNode // The currently focused cell (if the palette itself has focus), or otherwise // the cell to be focused when the palette itself gets focus. // Different from value, which represents the selected (i.e. clicked) cell. _currentFocus: null, =====*/ /*===== // _xDim: [protected] Integer // This is the number of cells horizontally across. _xDim: null, =====*/ /*===== // _yDim: [protected] Integer // This is the number of cells vertically down. _yDim: null, =====*/ // tabIndex: String // Widget tab index. tabIndex: "0", // cellClass: [protected] String // CSS class applied to each cell in the palette cellClass: "dijitPaletteCell", // dyeClass: [protected] Constructor // Constructor for Object created for each cell of the palette. // dyeClass should implement the dijit/_PaletteMixin.__Dye interface. dyeClass: null, _dyeFactory: function(value /*===== , row, col, title =====*/){ // summary: // Return instance of dijit.Dye for specified cell of palette // tags: // extension // Remove string support for 2.0 var dyeClassObj = typeof this.dyeClass == "string" ? lang.getObject(this.dyeClass) : this.dyeClass; return new dyeClassObj(value); }, _preparePalette: function(choices, titles){ // summary: // Subclass must call _preparePalette() from postCreate(), passing in the tooltip // for each cell // choices: String[][] // id's for each cell of the palette, used to create Dye JS object for each cell // titles: String[] // Localized tooltip for each cell this._cells = []; var url = this._blankGif; this.own(on(this.gridNode, a11yclick, lang.hitch(this, "_onCellClick"))); for(var row = 0; row < choices.length; row++){ var rowNode = domConstruct.create("tr", {tabIndex: "-1", role: "row"}, this.gridNode); for(var col = 0; col < choices[row].length; col++){ var value = choices[row][col]; if(value){ var cellObject = this._dyeFactory(value, row, col, titles[value]); var cellNode = domConstruct.create("td", { "class": this.cellClass, tabIndex: "-1", title: titles[value], role: "gridcell" }, rowNode); // prepare cell inner structure cellObject.fillCell(cellNode, url); cellNode.idx = this._cells.length; // save cell info into _cells this._cells.push({node: cellNode, dye: cellObject}); } } } 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 cell. // 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: this.isLeftToRight() ? 1 : -1, LEFT_ARROW: this.isLeftToRight() ? -1 : 1 }; for(var key in keyIncrementMap){ this.own( typematic.addKeyListener( this.domNode, {keyCode: 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 ) ); } }, postCreate: function(){ this.inherited(arguments); // Set initial navigable node. this._setCurrent(this._cells[0].node); }, focus: function(){ // summary: // Focus this widget. Puts focus on the most recently focused cell. // The cell already has tabIndex set, just need to set CSS and focus it focus.focus(this._currentFocus); }, _onCellClick: function(/*Event*/ evt){ // summary: // Handler for click, enter key & space key. Selects the cell. // evt: // The event. // tags: // private var target = evt.target; // Find TD associated with click event. For ColorPalette user likely clicked IMG inside of TD while(target.tagName != "TD"){ if(!target.parentNode || target == this.gridNode){ // probably can never happen, but just in case return; } target = target.parentNode; } var value = this._getDye(target).getValue(); // First focus the clicked cell, and then send onChange() notification. // onChange() (via _setValueAttr) must be after the focus call, because // it may trigger a refocus to somewhere else (like the Editor content area), and that // second focus should win. this._setCurrent(target); focus.focus(target); this._setValueAttr(value, true); evt.stopPropagation(); evt.preventDefault(); }, _setCurrent: function(/*DomNode*/ node){ // summary: // Sets which node is the focused cell. // description: // At any point in time there's exactly one // cell with tabIndex != -1. If focus is inside the palette then // focus is on that cell. // // After calling this method, arrow key handlers and mouse click handlers // should focus the cell in a setTimeout(). // tags: // protected if("_currentFocus" in this){ // Remove tabIndex on old cell domAttr.set(this._currentFocus, "tabIndex", "-1"); } // Set tabIndex of new cell this._currentFocus = node; if(node){ domAttr.set(node, "tabIndex", this.tabIndex); } }, _setValueAttr: function(value, priorityChange){ // summary: // This selects a cell. It triggers the onChange event. // value: String // Value of the cell to select // tags: // protected // priorityChange: Boolean? // Optional parameter used to tell the select whether or not to fire // onChange event. // clear old selected cell if(this._selectedCell >= 0){ domClass.remove(this._cells[this._selectedCell].node, this.cellClass + "Selected"); } this._selectedCell = -1; // search for cell matching specified value if(value){ for(var i = 0; i < this._cells.length; i++){ if(value == this._cells[i].dye.getValue()){ this._selectedCell = i; domClass.add(this._cells[i].node, this.cellClass + "Selected"); break; } } } // record new value, or null if no matching cell this._set("value", this._selectedCell >= 0 ? value : null); if(priorityChange || priorityChange === undefined){ this.onChange(value); } }, onChange: function(/*===== value =====*/){ // summary: // Callback when a cell is selected. // value: String // Value corresponding to cell. }, _navigateByKey: function(increment, typeCount){ // summary: // This is the callback for typematic. // It changes the focus and the highlighed cell. // increment: // How much the key is navigated. // typeCount: // How many times typematic has fired. // tags: // private // typecount == -1 means the key is released. if(typeCount == -1){ return; } var newFocusIndex = this._currentFocus.idx + increment; if(newFocusIndex < this._cells.length && newFocusIndex > -1){ var focusNode = this._cells[newFocusIndex].node; this._setCurrent(focusNode); // Actually focus the node, for the benefit of screen readers. // Use defer because IE doesn't like changing focus inside of an event handler this.defer(lang.hitch(focus, "focus", focusNode)); } }, _getDye: function(/*DomNode*/ cell){ // summary: // Get JS object for given cell DOMNode return this._cells[cell.idx].dye; } }); /*===== PaletteMixin.__Dye = declare("dijit.Dye", null, { // summary: // Interface for the JS Object associated with a palette cell (i.e. DOMNode) constructor: function(alias, row, col){ // summary: // Initialize according to value or alias like "white" // alias: String }, getValue: function(){ // summary: // Return "value" of cell; meaning of "value" varies by subclass. // description: // For example color hex value, emoticon ascii value etc, entity hex value. }, fillCell: function(cell, blankGif){ // summary: // Add cell DOMNode inner structure // cell: DomNode // The surrounding cell // blankGif: String // URL for blank cell image } }); =====*/ return PaletteMixin; }); }, 'dojo/colors':function(){ define(["./_base/kernel", "./_base/lang", "./_base/Color", "./_base/array"], function(dojo, lang, Color, ArrayUtil){ // module: // dojo/colors /*===== return { // summary: // Color utilities, extending Base dojo.Color }; =====*/ var ColorExt = {}; lang.setObject("dojo.colors", ColorExt); //TODO: this module appears to break naming conventions // this is a standard conversion prescribed by the CSS3 Color Module var hue2rgb = function(m1, m2, h){ if(h < 0){ ++h; } if(h > 1){ --h; } var h6 = 6 * h; if(h6 < 1){ return m1 + (m2 - m1) * h6; } if(2 * h < 1){ return m2; } if(3 * h < 2){ return m1 + (m2 - m1) * (2 / 3 - h) * 6; } return m1; }; // Override base Color.fromRgb with the impl in this module dojo.colorFromRgb = Color.fromRgb = function(/*String*/ color, /*dojo/_base/Color?*/ obj){ // summary: // get rgb(a) array from css-style color declarations // description: // this function can handle all 4 CSS3 Color Module formats: rgb, // rgba, hsl, hsla, including rgb(a) with percentage values. var m = color.toLowerCase().match(/^(rgba?|hsla?)\(([\s\.\-,%0-9]+)\)/); if(m){ var c = m[2].split(/\s*,\s*/), l = c.length, t = m[1], a; if((t == "rgb" && l == 3) || (t == "rgba" && l == 4)){ var r = c[0]; if(r.charAt(r.length - 1) == "%"){ // 3 rgb percentage values a = ArrayUtil.map(c, function(x){ return parseFloat(x) * 2.56; }); if(l == 4){ a[3] = c[3]; } return Color.fromArray(a, obj); // dojo/_base/Color } return Color.fromArray(c, obj); // dojo/_base/Color } if((t == "hsl" && l == 3) || (t == "hsla" && l == 4)){ // normalize hsl values var H = ((parseFloat(c[0]) % 360) + 360) % 360 / 360, S = parseFloat(c[1]) / 100, L = parseFloat(c[2]) / 100, // calculate rgb according to the algorithm // recommended by the CSS3 Color Module m2 = L <= 0.5 ? L * (S + 1) : L + S - L * S, m1 = 2 * L - m2; a = [ hue2rgb(m1, m2, H + 1 / 3) * 256, hue2rgb(m1, m2, H) * 256, hue2rgb(m1, m2, H - 1 / 3) * 256, 1 ]; if(l == 4){ a[3] = c[3]; } return Color.fromArray(a, obj); // dojo/_base/Color } } return null; // dojo/_base/Color }; var confine = function(c, low, high){ // summary: // sanitize a color component by making sure it is a number, // and clamping it to valid values c = Number(c); return isNaN(c) ? high : c < low ? low : c > high ? high : c; // Number }; Color.prototype.sanitize = function(){ // summary: // makes sure that the object has correct attributes var t = this; t.r = Math.round(confine(t.r, 0, 255)); t.g = Math.round(confine(t.g, 0, 255)); t.b = Math.round(confine(t.b, 0, 255)); t.a = confine(t.a, 0, 1); return this; // dojo/_base/Color }; ColorExt.makeGrey = Color.makeGrey = function(/*Number*/ g, /*Number?*/ a){ // summary: // creates a greyscale color with an optional alpha return Color.fromArray([g, g, g, a]); // dojo/_base/Color }; // mixin all CSS3 named colors not already in _base, along with SVG 1.0 variant spellings lang.mixin(Color.named, { "aliceblue": [240,248,255], "antiquewhite": [250,235,215], "aquamarine": [127,255,212], "azure": [240,255,255], "beige": [245,245,220], "bisque": [255,228,196], "blanchedalmond": [255,235,205], "blueviolet": [138,43,226], "brown": [165,42,42], "burlywood": [222,184,135], "cadetblue": [95,158,160], "chartreuse": [127,255,0], "chocolate": [210,105,30], "coral": [255,127,80], "cornflowerblue": [100,149,237], "cornsilk": [255,248,220], "crimson": [220,20,60], "cyan": [0,255,255], "darkblue": [0,0,139], "darkcyan": [0,139,139], "darkgoldenrod": [184,134,11], "darkgray": [169,169,169], "darkgreen": [0,100,0], "darkgrey": [169,169,169], "darkkhaki": [189,183,107], "darkmagenta": [139,0,139], "darkolivegreen": [85,107,47], "darkorange": [255,140,0], "darkorchid": [153,50,204], "darkred": [139,0,0], "darksalmon": [233,150,122], "darkseagreen": [143,188,143], "darkslateblue": [72,61,139], "darkslategray": [47,79,79], "darkslategrey": [47,79,79], "darkturquoise": [0,206,209], "darkviolet": [148,0,211], "deeppink": [255,20,147], "deepskyblue": [0,191,255], "dimgray": [105,105,105], "dimgrey": [105,105,105], "dodgerblue": [30,144,255], "firebrick": [178,34,34], "floralwhite": [255,250,240], "forestgreen": [34,139,34], "gainsboro": [220,220,220], "ghostwhite": [248,248,255], "gold": [255,215,0], "goldenrod": [218,165,32], "greenyellow": [173,255,47], "grey": [128,128,128], "honeydew": [240,255,240], "hotpink": [255,105,180], "indianred": [205,92,92], "indigo": [75,0,130], "ivory": [255,255,240], "khaki": [240,230,140], "lavender": [230,230,250], "lavenderblush": [255,240,245], "lawngreen": [124,252,0], "lemonchiffon": [255,250,205], "lightblue": [173,216,230], "lightcoral": [240,128,128], "lightcyan": [224,255,255], "lightgoldenrodyellow": [250,250,210], "lightgray": [211,211,211], "lightgreen": [144,238,144], "lightgrey": [211,211,211], "lightpink": [255,182,193], "lightsalmon": [255,160,122], "lightseagreen": [32,178,170], "lightskyblue": [135,206,250], "lightslategray": [119,136,153], "lightslategrey": [119,136,153], "lightsteelblue": [176,196,222], "lightyellow": [255,255,224], "limegreen": [50,205,50], "linen": [250,240,230], "magenta": [255,0,255], "mediumaquamarine": [102,205,170], "mediumblue": [0,0,205], "mediumorchid": [186,85,211], "mediumpurple": [147,112,219], "mediumseagreen": [60,179,113], "mediumslateblue": [123,104,238], "mediumspringgreen": [0,250,154], "mediumturquoise": [72,209,204], "mediumvioletred": [199,21,133], "midnightblue": [25,25,112], "mintcream": [245,255,250], "mistyrose": [255,228,225], "moccasin": [255,228,181], "navajowhite": [255,222,173], "oldlace": [253,245,230], "olivedrab": [107,142,35], "orange": [255,165,0], "orangered": [255,69,0], "orchid": [218,112,214], "palegoldenrod": [238,232,170], "palegreen": [152,251,152], "paleturquoise": [175,238,238], "palevioletred": [219,112,147], "papayawhip": [255,239,213], "peachpuff": [255,218,185], "peru": [205,133,63], "pink": [255,192,203], "plum": [221,160,221], "powderblue": [176,224,230], "rosybrown": [188,143,143], "royalblue": [65,105,225], "saddlebrown": [139,69,19], "salmon": [250,128,114], "sandybrown": [244,164,96], "seagreen": [46,139,87], "seashell": [255,245,238], "sienna": [160,82,45], "skyblue": [135,206,235], "slateblue": [106,90,205], "slategray": [112,128,144], "slategrey": [112,128,144], "snow": [255,250,250], "springgreen": [0,255,127], "steelblue": [70,130,180], "tan": [210,180,140], "thistle": [216,191,216], "tomato": [255,99,71], "turquoise": [64,224,208], "violet": [238,130,238], "wheat": [245,222,179], "whitesmoke": [245,245,245], "yellowgreen": [154,205,50] }); return Color; // TODO: return ColorExt, not Color }); }, 'dijit/Declaration':function(){ define([ "dojo/_base/array", // array.forEach array.map "dojo/aspect", // aspect.after "dojo/_base/declare", // declare "dojo/_base/lang", // lang.getObject "dojo/parser", // parser._functionFromScript "dojo/query", // query "./_Widget", "./_TemplatedMixin", "./_WidgetsInTemplateMixin", "dojo/NodeList-dom" ], function(array, aspect, declare, lang, parser, query, _Widget, _TemplatedMixin, _WidgetsInTemplateMixin){ // module: // dijit/Declaration return declare("dijit.Declaration", _Widget, { // summary: // The Declaration widget allows a developer to declare new widget // classes directly from a snippet of markup. // _noScript: [private] Boolean // Flag to parser to leave alone the script tags contained inside of me _noScript: true, // stopParser: [private] Boolean // Flag to parser to not try and parse widgets declared inside of me stopParser: true, // widgetClass: [const] String // Name of class being declared, ex: "acme.myWidget" widgetClass: "", // propList: [const] Object // Set of attributes for this widget along with default values, ex: // {delay: 100, title: "hello world"} defaults: null, // mixins: [const] String[] // List containing the prototype for this widget, and also any mixins, // ex: ["dijit._Widget", "dijit._Container"] mixins: [], buildRendering: function(){ var src = this.srcNodeRef.parentNode.removeChild(this.srcNodeRef), methods = query("> script[type='dojo/method']", src).orphan(), connects = query("> script[type='dojo/connect']", src).orphan(), // remove for 2.0 aspects = query("> script[type='dojo/aspect']", src).orphan(), srcType = src.nodeName; var propList = this.defaults || {}; // For all methods defined like