a:50:{s:9:"#provides";s:18:"dijit.ColorPalette";s:9:"#resource";s:15:"ColorPalette.js";s:9:"#requires";a:4:{i:0;a:2:{i:0;s:6:"common";i:1;s:13:"dijit._Widget";}i:1;a:2:{i:0;s:6:"common";i:1;s:16:"dijit._Templated";}i:2;a:3:{i:0;s:6:"common";i:1;s:11:"dojo.colors";i:2;s:4:"dojo";}i:3;a:3:{i:0;s:6:"common";i:1;s:9:"dojo.i18n";i:2;s:4:"dojo";}}s:18:"dijit.ColorPalette";a:7:{s:4:"type";s:8:"Function";s:6:"chains";a:2:{s:9:"prototype";a:1:{i:0;s:13:"dijit._Widget";}s:4:"call";a:2:{i:0;s:13:"dijit._Widget";i:1;s:16:"dijit._Templated";}}s:6:"mixins";a:1:{s:9:"prototype";a:1:{i:0;s:26:"dijit._Templated.prototype";}}s:7:"summary";s:42:"A keyboard accessible color-picking widget";s:11:"description";s:104:"Grid showing various colors, so the user can pick a certain color Can be used standalone, or as a popup.";s:8:"examples";a:2:{i:0;s:44:"
";i:1;s:74:" var picker = new dijit.ColorPalette({ },srcNode); picker.startup();";}s:9:"classlike";b:1;}s:33:"dijit.ColorPalette.defaultTimeout";a:3:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:6:"Number";s:7:"summary";s:68:"Number of milliseconds before a held key or button becomes typematic";}s:36:"dijit.ColorPalette.timeoutChangeRate";a:3:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:6:"Number";s:7:"summary";s:212:"Fraction of time used to change the typematic timer between events 1.0 means that each typematic event fires at defaultTimeout intervals < 1.0 means that each typematic event fires at an increasing faster rate";}s:26:"dijit.ColorPalette.palette";a:3:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:6:"String";s:7:"summary";s:57:"Size of grid, either "7x10" or "3x4".";}s:24:"dijit.ColorPalette.value";a:4:{s:9:"prototype";s:18:"dijit.ColorPalette";s:8:"instance";s:18:"dijit.ColorPalette";s:4:"type";s:6:"String";s:7:"summary";s:32:"The value of the selected color.";}s:32:"dijit.ColorPalette._currentFocus";a:6:{s:9:"prototype";s:18:"dijit.ColorPalette";s:8:"instance";s:18:"dijit.ColorPalette";s:4:"tags";a:1:{i:0;s:7:"private";}s:4:"type";s:7:"Integer";s:7:"summary";s:37:"Index of the currently focused color.";s:7:"private";b:1;}s:24:"dijit.ColorPalette._xDim";a:6:{s:9:"prototype";s:18:"dijit.ColorPalette";s:8:"instance";s:18:"dijit.ColorPalette";s:4:"tags";a:1:{i:0;s:9:"protected";}s:4:"type";s:7:"Integer";s:7:"summary";s:49:"This is the number of colors horizontally across.";s:7:"private";b:1;}s:24:"dijit.ColorPalette._yDim";a:6:{s:9:"prototype";s:18:"dijit.ColorPalette";s:8:"instance";s:18:"dijit.ColorPalette";s:4:"tags";a:1:{i:0;s:9:"protected";}s:4:"type";s:7:"Integer";s:7:"summary";s:48:"/ This is the number of colors vertically down.";s:7:"private";b:1;}s:28:"dijit.ColorPalette._palettes";a:4:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:6:"Object";s:7:"private";b:1;s:7:"summary";s:0:"";}s:30:"dijit.ColorPalette._imagePaths";a:4:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:6:"Object";s:7:"private";b:1;s:7:"summary";s:0:"";}s:33:"dijit.ColorPalette._paletteCoords";a:4:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:6:"Object";s:7:"private";b:1;s:7:"summary";s:0:"";}s:31:"dijit.ColorPalette.templatePath";a:3:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:6:"String";s:7:"summary";s:36:"Path to the template of this widget.";}s:31:"dijit.ColorPalette._paletteDims";a:4:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:6:"Object";s:7:"private";b:1;s:7:"summary";s:0:"";}s:27:"dijit.ColorPalette.tabIndex";a:3:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:6:"String";s:7:"summary";s:17:"Widget tab index.";}s:29:"dijit.ColorPalette.postCreate";a:4:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:8:"Function";s:6:"source";s:6545:"dojo.provide("dijit.ColorPalette"); dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); dojo.require("dojo.colors"); dojo.require("dojo.i18n"); dojo.requireLocalization("dojo", "colors"); dojo.declare("dijit.ColorPalette", [dijit._Widget, dijit._Templated], { // 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(); // 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 // < 1.0 means that each typematic event fires at an increasing faster rate timeoutChangeRate: 0.90, // palette: String // Size of grid, either "7x10" or "3x4". palette: "7x10", // value: String // The value of the selected color. value: null, // _currentFocus: [private] Integer // Index of the currently focused color. _currentFocus: 0, // _xDim: [protected] Integer // This is the number of colors horizontally across. _xDim: null, // _yDim: [protected] Integer /// This is the number of colors vertically down. _yDim: null, // _palettes: [protected] Map // This represents the value of the colors. // The first level is a hashmap of the different arrays 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"]] }, // _imagePaths: [protected] Map // This is stores the path to the palette images _imagePaths: { "7x10": dojo.moduleUrl("dijit.themes", "a11y/colors7x10.png"), "3x4": dojo.moduleUrl("dijit.themes", "a11y/colors3x4.png") }, // _paletteCoords: [protected] Map // This is a map that is used to calculate the coordinates of the // images that make up the palette. _paletteCoords: { "leftOffset": 3, "topOffset": 3, "cWidth": 20, "cHeight": 20 }, // templatePath: String // Path to the template of this widget. templatePath: dojo.moduleUrl("dijit", "templates/ColorPalette.html"), // _paletteDims: [protected] Object // Size of the supported palettes for alignment purposes. _paletteDims: { "7x10": {"width": "206px", "height": "145px"}, "3x4": {"width": "86px", "height": "64px"} }, // tabIndex: String // Widget tab index. tabIndex: "0", postCreate: function(){ // A name has to be given to the colorMap, this needs to be unique per Palette. dojo.mixin(this.divNode.style, this._paletteDims[this.palette]); this.imageNode.setAttribute("src", this._imagePaths[this.palette]); var choices = this._palettes[this.palette]; this.domNode.style.position = "relative"; this._cellNodes = []; this.colorNames = dojo.i18n.getLocalization("dojo", "colors", this.lang); var url = this._blankGif, colorObject = new dojo.Color(), coords = this._paletteCoords; for(var row=0; row < choices.length; row++){ for(var col=0; col < choices[row].length; col++) { var color = choices[row][col], colorValue = colorObject.setColor(dojo.Color.named[color]) ; var cellNode = dojo.create("span", { "class":"dijitPaletteCell", "tabindex":"-1", title: this.colorNames[color], style:{ top: coords.topOffset + (row * coords.cHeight) + "px", left: coords.leftOffset + (col * coords.cWidth) + "px" } }); var imgNode = dojo.create("img",{ src: url, "class":"dijitPaletteImg", alt: this.colorNames[color] }, cellNode); // FIXME: color is an attribute of img? imgNode.color = colorValue.toHex(); var imgStyle = imgNode.style; imgStyle.color = imgStyle.backgroundColor = imgNode.color; dojo.forEach(["Dijitclick", "MouseEnter", "Focus", "Blur"], function(handler) { this.connect(cellNode, "on" + handler.toLowerCase(), "_onCell" + handler); }, this); dojo.place(cellNode, this.divNode); dijit.setWaiRole(cellNode, "gridcell"); cellNode.index = this._cellNodes.length; this._cellNodes.push(cellNode); } } this._xDim = choices[0].length; this._yDim = choices.length; this.connect(this.divNode, "onfocus", "_onDivNodeFocus"); // 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 color. // 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: 1, LEFT_ARROW: -1 }; for(var key in keyIncrementMap){ this._connects.push(dijit.typematic.addKeyListener(this.domNode, {charOrCode:dojo.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)); }";s:7:"summary";s:0:"";}s:24:"dijit.ColorPalette.focus";a:4:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:8:"Function";s:6:"source";s:21:" this._focusFirst();";s:7:"summary";s:57:"Focus this ColorPalette. Puts focus on the first swatch.";}s:27:"dijit.ColorPalette.onChange";a:5:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:8:"Function";s:10:"parameters";a:1:{s:5:"color";a:2:{s:4:"type";s:6:"String";s:7:"summary";s:87:"Hex value corresponding to color. console.debug("Color selected is: "+color);";}}s:6:"source";s:161:" // summary: // Callback when a color is selected. // color: String // Hex value corresponding to color. // console.debug("Color selected is: "+color);";s:7:"summary";s:34:"Callback when a color is selected.";}s:30:"dijit.ColorPalette._focusFirst";a:6:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:8:"Function";s:6:"source";s:138:" this._currentFocus = 0; var cellNode = this._cellNodes[this._currentFocus]; window.setTimeout(function(){dijit.focus(cellNode)}, 0);";s:7:"summary";s:90:"Focus the first cell in the color picker, or the previously selected cell, if there is one";s:4:"tags";s:7:"private";s:7:"private";b:1;}s:34:"dijit.ColorPalette._onDivNodeFocus";a:6:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:8:"Function";s:10:"parameters";a:1:{s:3:"evt";a:1:{s:4:"type";s:0:"";}}s:6:"source";s:7562:"dojo.provide("dijit.ColorPalette"); dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); dojo.require("dojo.colors"); dojo.require("dojo.i18n"); dojo.requireLocalization("dojo", "colors"); dojo.declare("dijit.ColorPalette", [dijit._Widget, dijit._Templated], { // 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(); // 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 // < 1.0 means that each typematic event fires at an increasing faster rate timeoutChangeRate: 0.90, // palette: String // Size of grid, either "7x10" or "3x4". palette: "7x10", // value: String // The value of the selected color. value: null, // _currentFocus: [private] Integer // Index of the currently focused color. _currentFocus: 0, // _xDim: [protected] Integer // This is the number of colors horizontally across. _xDim: null, // _yDim: [protected] Integer /// This is the number of colors vertically down. _yDim: null, // _palettes: [protected] Map // This represents the value of the colors. // The first level is a hashmap of the different arrays 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"]] }, // _imagePaths: [protected] Map // This is stores the path to the palette images _imagePaths: { "7x10": dojo.moduleUrl("dijit.themes", "a11y/colors7x10.png"), "3x4": dojo.moduleUrl("dijit.themes", "a11y/colors3x4.png") }, // _paletteCoords: [protected] Map // This is a map that is used to calculate the coordinates of the // images that make up the palette. _paletteCoords: { "leftOffset": 3, "topOffset": 3, "cWidth": 20, "cHeight": 20 }, // templatePath: String // Path to the template of this widget. templatePath: dojo.moduleUrl("dijit", "templates/ColorPalette.html"), // _paletteDims: [protected] Object // Size of the supported palettes for alignment purposes. _paletteDims: { "7x10": {"width": "206px", "height": "145px"}, "3x4": {"width": "86px", "height": "64px"} }, // tabIndex: String // Widget tab index. tabIndex: "0", postCreate: function(){ // A name has to be given to the colorMap, this needs to be unique per Palette. dojo.mixin(this.divNode.style, this._paletteDims[this.palette]); this.imageNode.setAttribute("src", this._imagePaths[this.palette]); var choices = this._palettes[this.palette]; this.domNode.style.position = "relative"; this._cellNodes = []; this.colorNames = dojo.i18n.getLocalization("dojo", "colors", this.lang); var url = this._blankGif, colorObject = new dojo.Color(), coords = this._paletteCoords; for(var row=0; row < choices.length; row++){ for(var col=0; col < choices[row].length; col++) { var color = choices[row][col], colorValue = colorObject.setColor(dojo.Color.named[color]) ; var cellNode = dojo.create("span", { "class":"dijitPaletteCell", "tabindex":"-1", title: this.colorNames[color], style:{ top: coords.topOffset + (row * coords.cHeight) + "px", left: coords.leftOffset + (col * coords.cWidth) + "px" } }); var imgNode = dojo.create("img",{ src: url, "class":"dijitPaletteImg", alt: this.colorNames[color] }, cellNode); // FIXME: color is an attribute of img? imgNode.color = colorValue.toHex(); var imgStyle = imgNode.style; imgStyle.color = imgStyle.backgroundColor = imgNode.color; dojo.forEach(["Dijitclick", "MouseEnter", "Focus", "Blur"], function(handler) { this.connect(cellNode, "on" + handler.toLowerCase(), "_onCell" + handler); }, this); dojo.place(cellNode, this.divNode); dijit.setWaiRole(cellNode, "gridcell"); cellNode.index = this._cellNodes.length; this._cellNodes.push(cellNode); } } this._xDim = choices[0].length; this._yDim = choices.length; this.connect(this.divNode, "onfocus", "_onDivNodeFocus"); // 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 color. // 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: 1, LEFT_ARROW: -1 }; for(var key in keyIncrementMap){ this._connects.push(dijit.typematic.addKeyListener(this.domNode, {charOrCode:dojo.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)); } }, focus: function(){ // summary: // Focus this ColorPalette. Puts focus on the first swatch. this._focusFirst(); }, onChange: function(color){ // summary: // Callback when a color is selected. // color: String // Hex value corresponding to color. // console.debug("Color selected is: "+color); }, _focusFirst: function(){ // summary: // Focus the first cell in the color picker, // or the previously selected cell, if there is one // tags: // private this._currentFocus = 0; var cellNode = this._cellNodes[this._currentFocus]; window.setTimeout(function(){dijit.focus(cellNode)}, 0); }, _onDivNodeFocus: function(evt){ // summary: // Handler for when focus goes to the ColorPalette itself. // Shifts focus to the first color or the previously selected // color. // tags: // private // focus bubbles on Firefox 2, so just make sure that focus has really // gone to the container if(evt.target === this.divNode){ this._focusFirst(); }";s:7:"summary";s:121:"Handler for when focus goes to the ColorPalette itself. Shifts focus to the first color or the previously selected color.";s:7:"private";b:1;}s:27:"dijit.ColorPalette._onFocus";a:5:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:8:"Function";s:6:"source";s:7896:"dojo.provide("dijit.ColorPalette"); dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); dojo.require("dojo.colors"); dojo.require("dojo.i18n"); dojo.requireLocalization("dojo", "colors"); dojo.declare("dijit.ColorPalette", [dijit._Widget, dijit._Templated], { // 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(); // 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 // < 1.0 means that each typematic event fires at an increasing faster rate timeoutChangeRate: 0.90, // palette: String // Size of grid, either "7x10" or "3x4". palette: "7x10", // value: String // The value of the selected color. value: null, // _currentFocus: [private] Integer // Index of the currently focused color. _currentFocus: 0, // _xDim: [protected] Integer // This is the number of colors horizontally across. _xDim: null, // _yDim: [protected] Integer /// This is the number of colors vertically down. _yDim: null, // _palettes: [protected] Map // This represents the value of the colors. // The first level is a hashmap of the different arrays 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"]] }, // _imagePaths: [protected] Map // This is stores the path to the palette images _imagePaths: { "7x10": dojo.moduleUrl("dijit.themes", "a11y/colors7x10.png"), "3x4": dojo.moduleUrl("dijit.themes", "a11y/colors3x4.png") }, // _paletteCoords: [protected] Map // This is a map that is used to calculate the coordinates of the // images that make up the palette. _paletteCoords: { "leftOffset": 3, "topOffset": 3, "cWidth": 20, "cHeight": 20 }, // templatePath: String // Path to the template of this widget. templatePath: dojo.moduleUrl("dijit", "templates/ColorPalette.html"), // _paletteDims: [protected] Object // Size of the supported palettes for alignment purposes. _paletteDims: { "7x10": {"width": "206px", "height": "145px"}, "3x4": {"width": "86px", "height": "64px"} }, // tabIndex: String // Widget tab index. tabIndex: "0", postCreate: function(){ // A name has to be given to the colorMap, this needs to be unique per Palette. dojo.mixin(this.divNode.style, this._paletteDims[this.palette]); this.imageNode.setAttribute("src", this._imagePaths[this.palette]); var choices = this._palettes[this.palette]; this.domNode.style.position = "relative"; this._cellNodes = []; this.colorNames = dojo.i18n.getLocalization("dojo", "colors", this.lang); var url = this._blankGif, colorObject = new dojo.Color(), coords = this._paletteCoords; for(var row=0; row < choices.length; row++){ for(var col=0; col < choices[row].length; col++) { var color = choices[row][col], colorValue = colorObject.setColor(dojo.Color.named[color]) ; var cellNode = dojo.create("span", { "class":"dijitPaletteCell", "tabindex":"-1", title: this.colorNames[color], style:{ top: coords.topOffset + (row * coords.cHeight) + "px", left: coords.leftOffset + (col * coords.cWidth) + "px" } }); var imgNode = dojo.create("img",{ src: url, "class":"dijitPaletteImg", alt: this.colorNames[color] }, cellNode); // FIXME: color is an attribute of img? imgNode.color = colorValue.toHex(); var imgStyle = imgNode.style; imgStyle.color = imgStyle.backgroundColor = imgNode.color; dojo.forEach(["Dijitclick", "MouseEnter", "Focus", "Blur"], function(handler) { this.connect(cellNode, "on" + handler.toLowerCase(), "_onCell" + handler); }, this); dojo.place(cellNode, this.divNode); dijit.setWaiRole(cellNode, "gridcell"); cellNode.index = this._cellNodes.length; this._cellNodes.push(cellNode); } } this._xDim = choices[0].length; this._yDim = choices.length; this.connect(this.divNode, "onfocus", "_onDivNodeFocus"); // 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 color. // 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: 1, LEFT_ARROW: -1 }; for(var key in keyIncrementMap){ this._connects.push(dijit.typematic.addKeyListener(this.domNode, {charOrCode:dojo.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)); } }, focus: function(){ // summary: // Focus this ColorPalette. Puts focus on the first swatch. this._focusFirst(); }, onChange: function(color){ // summary: // Callback when a color is selected. // color: String // Hex value corresponding to color. // console.debug("Color selected is: "+color); }, _focusFirst: function(){ // summary: // Focus the first cell in the color picker, // or the previously selected cell, if there is one // tags: // private this._currentFocus = 0; var cellNode = this._cellNodes[this._currentFocus]; window.setTimeout(function(){dijit.focus(cellNode)}, 0); }, _onDivNodeFocus: function(evt){ // summary: // Handler for when focus goes to the ColorPalette itself. // Shifts focus to the first color or the previously selected // color. // tags: // private // focus bubbles on Firefox 2, so just make sure that focus has really // gone to the container if(evt.target === this.divNode){ this._focusFirst(); } }, _onFocus: function(){ // summary: // Handler for when the ColorPalette or a color cell inside of it get focus // tags: // protected // While focus is on the palette, set its tabindex to -1 so that on a // shift-tab from a cell, the container is not in the tab order dojo.attr(this.divNode, "tabindex", "-1");";s:7:"summary";s:72:"Handler for when the ColorPalette or a color cell inside of it get focus";s:7:"private";b:1;}s:26:"dijit.ColorPalette._onBlur";a:6:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:8:"Function";s:6:"source";s:204:" this._removeCellHighlight(this._currentFocus); // when focus leaves the palette, restore its tabindex, since it was // modified by _onFocus(). dojo.attr(this.divNode, "tabindex", this.tabIndex);";s:7:"summary";s:76:"Handler for when the ColorPalette and the color cell inside of it lose focus";s:4:"tags";s:9:"protected";s:7:"private";b:1;}s:36:"dijit.ColorPalette._onCellDijitclick";a:7:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:8:"Function";s:10:"parameters";a:1:{s:3:"evt";a:2:{s:4:"type";s:5:"Event";s:7:"summary";s:10:"The event.";}}s:6:"source";s:228:" var target = evt.currentTarget; if (this._currentFocus != target.index){ this._currentFocus = target.index; window.setTimeout(function(){dijit.focus(target)}, 0); } this._selectColor(target); dojo.stopEvent(evt);";s:7:"summary";s:64:"Handler for click, enter key & space key. Selects the color.";s:4:"tags";s:7:"private";s:7:"private";b:1;}s:36:"dijit.ColorPalette._onCellMouseEnter";a:7:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:8:"Function";s:10:"parameters";a:1:{s:3:"evt";a:2:{s:4:"type";s:5:"Event";s:7:"summary";s:16:"The mouse event.";}}s:6:"source";s:189:" var target = evt.currentTarget; this._setCurrent(target); // redundant, but needed per safari bug where onCellFocus never called window.setTimeout(function(){dijit.focus(target)}, 0);";s:7:"summary";s:64:"Handler for onMouseOver. Put focus on the color under the mouse.";s:4:"tags";s:7:"private";s:7:"private";b:1;}s:31:"dijit.ColorPalette._onCellFocus";a:7:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:8:"Function";s:10:"parameters";a:1:{s:3:"evt";a:2:{s:4:"type";s:5:"Event";s:7:"summary";s:16:"The focus event.";}}s:6:"source";s:38:" this._setCurrent(evt.currentTarget);";s:7:"summary";s:113:"Handler for onFocus of a cell. Removes highlight of the color that just lost focus, and highlights the new color.";s:4:"tags";s:7:"private";s:7:"private";b:1;}s:30:"dijit.ColorPalette._setCurrent";a:8:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:8:"Function";s:10:"parameters";a:1:{s:4:"node";a:1:{s:4:"type";s:4:"Node";}}s:6:"source";s:137:" this._removeCellHighlight(this._currentFocus); this._currentFocus = node.index; dojo.addClass(node, "dijitPaletteCellHighlight"); ";s:7:"summary";s:42:"Called when a color is hovered or focused.";s:11:"description";s:65:"Removes highlight of the old color, and highlights the new color.";s:4:"tags";s:9:"protected";s:7:"private";b:1;}s:30:"dijit.ColorPalette._onCellBlur";a:7:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:8:"Function";s:10:"parameters";a:1:{s:3:"evt";a:1:{s:4:"type";s:5:"Event";}}s:6:"source";s:48:" this._removeCellHighlight(this._currentFocus);";s:7:"summary";s:32:"needed for Firefox 2 on Mac OS X";s:4:"tags";s:7:"private";s:7:"private";b:1;}s:39:"dijit.ColorPalette._removeCellHighlight";a:7:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:8:"Function";s:10:"parameters";a:1:{s:5:"index";a:1:{s:4:"type";s:0:"";}}s:6:"source";s:72:" dojo.removeClass(this._cellNodes[index], "dijitPaletteCellHighlight");";s:7:"summary";s:50:"Removes the hover CSS class for the specified cell";s:4:"tags";s:7:"private";s:7:"private";b:1;}s:31:"dijit.ColorPalette._selectColor";a:7:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:8:"Function";s:10:"parameters";a:1:{s:10:"selectNode";a:1:{s:4:"type";s:0:"";}}s:6:"source";s:95:" var img = selectNode.getElementsByTagName("img")[0]; this.onChange(this.value = img.color);";s:7:"summary";s:110:"This selects a color. It triggers the onChange event area: The area node that covers the color being selected.";s:4:"tags";s:7:"private";s:7:"private";b:1;}s:33:"dijit.ColorPalette._navigateByKey";a:6:{s:9:"prototype";s:18:"dijit.ColorPalette";s:4:"type";s:8:"Function";s:10:"parameters";a:2:{s:9:"increment";a:2:{s:4:"type";s:3:"How";s:7:"summary";s:26:"much the key is navigated.";}s:9:"typeCount";a:2:{s:4:"type";s:3:"How";s:7:"summary";s:31:"many times typematic has fired.";}}s:6:"source";s:11003:"dojo.provide("dijit.ColorPalette"); dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); dojo.require("dojo.colors"); dojo.require("dojo.i18n"); dojo.requireLocalization("dojo", "colors"); dojo.declare("dijit.ColorPalette", [dijit._Widget, dijit._Templated], { // 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(); // 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 // < 1.0 means that each typematic event fires at an increasing faster rate timeoutChangeRate: 0.90, // palette: String // Size of grid, either "7x10" or "3x4". palette: "7x10", // value: String // The value of the selected color. value: null, // _currentFocus: [private] Integer // Index of the currently focused color. _currentFocus: 0, // _xDim: [protected] Integer // This is the number of colors horizontally across. _xDim: null, // _yDim: [protected] Integer /// This is the number of colors vertically down. _yDim: null, // _palettes: [protected] Map // This represents the value of the colors. // The first level is a hashmap of the different arrays 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"]] }, // _imagePaths: [protected] Map // This is stores the path to the palette images _imagePaths: { "7x10": dojo.moduleUrl("dijit.themes", "a11y/colors7x10.png"), "3x4": dojo.moduleUrl("dijit.themes", "a11y/colors3x4.png") }, // _paletteCoords: [protected] Map // This is a map that is used to calculate the coordinates of the // images that make up the palette. _paletteCoords: { "leftOffset": 3, "topOffset": 3, "cWidth": 20, "cHeight": 20 }, // templatePath: String // Path to the template of this widget. templatePath: dojo.moduleUrl("dijit", "templates/ColorPalette.html"), // _paletteDims: [protected] Object // Size of the supported palettes for alignment purposes. _paletteDims: { "7x10": {"width": "206px", "height": "145px"}, "3x4": {"width": "86px", "height": "64px"} }, // tabIndex: String // Widget tab index. tabIndex: "0", postCreate: function(){ // A name has to be given to the colorMap, this needs to be unique per Palette. dojo.mixin(this.divNode.style, this._paletteDims[this.palette]); this.imageNode.setAttribute("src", this._imagePaths[this.palette]); var choices = this._palettes[this.palette]; this.domNode.style.position = "relative"; this._cellNodes = []; this.colorNames = dojo.i18n.getLocalization("dojo", "colors", this.lang); var url = this._blankGif, colorObject = new dojo.Color(), coords = this._paletteCoords; for(var row=0; row < choices.length; row++){ for(var col=0; col < choices[row].length; col++) { var color = choices[row][col], colorValue = colorObject.setColor(dojo.Color.named[color]) ; var cellNode = dojo.create("span", { "class":"dijitPaletteCell", "tabindex":"-1", title: this.colorNames[color], style:{ top: coords.topOffset + (row * coords.cHeight) + "px", left: coords.leftOffset + (col * coords.cWidth) + "px" } }); var imgNode = dojo.create("img",{ src: url, "class":"dijitPaletteImg", alt: this.colorNames[color] }, cellNode); // FIXME: color is an attribute of img? imgNode.color = colorValue.toHex(); var imgStyle = imgNode.style; imgStyle.color = imgStyle.backgroundColor = imgNode.color; dojo.forEach(["Dijitclick", "MouseEnter", "Focus", "Blur"], function(handler) { this.connect(cellNode, "on" + handler.toLowerCase(), "_onCell" + handler); }, this); dojo.place(cellNode, this.divNode); dijit.setWaiRole(cellNode, "gridcell"); cellNode.index = this._cellNodes.length; this._cellNodes.push(cellNode); } } this._xDim = choices[0].length; this._yDim = choices.length; this.connect(this.divNode, "onfocus", "_onDivNodeFocus"); // 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 color. // 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: 1, LEFT_ARROW: -1 }; for(var key in keyIncrementMap){ this._connects.push(dijit.typematic.addKeyListener(this.domNode, {charOrCode:dojo.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)); } }, focus: function(){ // summary: // Focus this ColorPalette. Puts focus on the first swatch. this._focusFirst(); }, onChange: function(color){ // summary: // Callback when a color is selected. // color: String // Hex value corresponding to color. // console.debug("Color selected is: "+color); }, _focusFirst: function(){ // summary: // Focus the first cell in the color picker, // or the previously selected cell, if there is one // tags: // private this._currentFocus = 0; var cellNode = this._cellNodes[this._currentFocus]; window.setTimeout(function(){dijit.focus(cellNode)}, 0); }, _onDivNodeFocus: function(evt){ // summary: // Handler for when focus goes to the ColorPalette itself. // Shifts focus to the first color or the previously selected // color. // tags: // private // focus bubbles on Firefox 2, so just make sure that focus has really // gone to the container if(evt.target === this.divNode){ this._focusFirst(); } }, _onFocus: function(){ // summary: // Handler for when the ColorPalette or a color cell inside of it get focus // tags: // protected // While focus is on the palette, set its tabindex to -1 so that on a // shift-tab from a cell, the container is not in the tab order dojo.attr(this.divNode, "tabindex", "-1"); }, _onBlur: function(){ // summary: // Handler for when the ColorPalette and the color cell inside of it lose focus // tags: // protected this._removeCellHighlight(this._currentFocus); // when focus leaves the palette, restore its tabindex, since it was // modified by _onFocus(). dojo.attr(this.divNode, "tabindex", this.tabIndex); }, _onCellDijitclick: function(/*Event*/ evt){ // summary: // Handler for click, enter key & space key. Selects the color. // evt: // The event. // tags: // private var target = evt.currentTarget; if (this._currentFocus != target.index){ this._currentFocus = target.index; window.setTimeout(function(){dijit.focus(target)}, 0); } this._selectColor(target); dojo.stopEvent(evt); }, _onCellMouseEnter: function(/*Event*/ evt){ // summary: // Handler for onMouseOver. Put focus on the color under the mouse. // evt: // The mouse event. // tags: // private var target = evt.currentTarget; this._setCurrent(target); // redundant, but needed per safari bug where onCellFocus never called window.setTimeout(function(){dijit.focus(target)}, 0); }, _onCellFocus: function(/*Event*/ evt){ // summary: // Handler for onFocus of a cell. Removes highlight of // the color that just lost focus, and highlights // the new color. // evt: // The focus event. // tags: // private this._setCurrent(evt.currentTarget); }, _setCurrent: function(/*Node*/ node){ // summary: // Called when a color is hovered or focused. // description: // Removes highlight of the old color, and highlights // the new color. // tags: // protected this._removeCellHighlight(this._currentFocus); this._currentFocus = node.index; dojo.addClass(node, "dijitPaletteCellHighlight"); }, _onCellBlur: function(/*Event*/ evt){ // summary: // needed for Firefox 2 on Mac OS X // tags: // private this._removeCellHighlight(this._currentFocus); }, _removeCellHighlight: function(index){ // summary: // Removes the hover CSS class for the specified cell // tags: // private dojo.removeClass(this._cellNodes[index], "dijitPaletteCellHighlight"); }, _selectColor: function(selectNode){ // summary: // This selects a color. It triggers the onChange event // area: // The area node that covers the color being selected. // tags: // private var img = selectNode.getElementsByTagName("img")[0]; this.onChange(this.value = img.color); }, _navigateByKey: function(increment, typeCount){ // summary: // This is the callback for typematic. // It changes the focus and the highlighed color. // 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 + increment; if(newFocusIndex < this._cellNodes.length && newFocusIndex > -1) { var focusNode = this._cellNodes[newFocusIndex]; focusNode.focus(); }";s:7:"summary";s:82:"This is the callback for typematic. It changes the focus and the highlighed color.";s:7:"private";b:1;}s:33:"dijit.ColorPalette._palettes.7x10";a:2:{s:14:"private_parent";b:1;s:7:"summary";s:0:"";}s:32:"dijit.ColorPalette._palettes.3x4";a:2:{s:14:"private_parent";b:1;s:7:"summary";s:0:"";}s:35:"dijit.ColorPalette._imagePaths.7x10";a:2:{s:14:"private_parent";b:1;s:7:"summary";s:0:"";}s:34:"dijit.ColorPalette._imagePaths.3x4";a:2:{s:14:"private_parent";b:1;s:7:"summary";s:0:"";}s:44:"dijit.ColorPalette._paletteCoords.leftOffset";a:2:{s:14:"private_parent";b:1;s:7:"summary";s:0:"";}s:43:"dijit.ColorPalette._paletteCoords.topOffset";a:2:{s:14:"private_parent";b:1;s:7:"summary";s:0:"";}s:40:"dijit.ColorPalette._paletteCoords.cWidth";a:2:{s:14:"private_parent";b:1;s:7:"summary";s:0:"";}s:42:"dijit.ColorPalette._paletteDims.7x10.width";a:2:{s:14:"private_parent";b:1;s:7:"summary";s:0:"";}s:43:"dijit.ColorPalette._paletteDims.7x10.height";a:2:{s:14:"private_parent";b:1;s:7:"summary";s:0:"";}s:36:"dijit.ColorPalette._paletteDims.7x10";a:3:{s:4:"type";s:6:"Object";s:14:"private_parent";b:1;s:7:"summary";s:0:"";}s:41:"dijit.ColorPalette._paletteDims.3x4.width";a:2:{s:14:"private_parent";b:1;s:7:"summary";s:0:"";}s:42:"dijit.ColorPalette._paletteDims.3x4.height";a:2:{s:14:"private_parent";b:1;s:7:"summary";s:0:"";}s:35:"dijit.ColorPalette._paletteDims.3x4";a:3:{s:4:"type";s:6:"Object";s:14:"private_parent";b:1;s:7:"summary";s:0:"";}s:41:"dijit.ColorPalette.domNode.style.position";a:2:{s:8:"instance";s:18:"dijit.ColorPalette";s:7:"summary";s:0:"";}s:29:"dijit.ColorPalette._cellNodes";a:3:{s:8:"instance";s:18:"dijit.ColorPalette";s:7:"private";b:1;s:7:"summary";s:0:"";}s:29:"dijit.ColorPalette.colorNames";a:2:{s:8:"instance";s:18:"dijit.ColorPalette";s:7:"summary";s:0:"";}s:18:"this.divNode.style";a:2:{s:6:"mixins";a:1:{s:6:"normal";a:1:{i:0;s:31:"this._paletteDims[this.palette]";}}s:7:"summary";s:0:"";}s:5:"dijit";a:2:{s:4:"type";s:6:"Object";s:7:"summary";s:0:"";}}