diff options
Diffstat (limited to 'lib/dijit/ColorPalette.js')
-rw-r--r-- | lib/dijit/ColorPalette.js | 147 |
1 files changed, 129 insertions, 18 deletions
diff --git a/lib/dijit/ColorPalette.js b/lib/dijit/ColorPalette.js index 62aae00df..62c9d8df6 100644 --- a/lib/dijit/ColorPalette.js +++ b/lib/dijit/ColorPalette.js @@ -1,31 +1,142 @@ /* - Copyright (c) 2004-2010, The Dojo Foundation All Rights Reserved. + Copyright (c) 2004-2011, The Dojo Foundation All Rights Reserved. Available via Academic Free License >= 2.1 OR the modified BSD license. see: http://dojotoolkit.org/license for details */ -if(!dojo._hasResource["dijit.ColorPalette"]){ -dojo._hasResource["dijit.ColorPalette"]=true; +if(!dojo._hasResource["dijit.ColorPalette"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dijit.ColorPalette"] = true; dojo.provide("dijit.ColorPalette"); dojo.require("dijit._Widget"); dojo.require("dijit._Templated"); dojo.require("dojo.colors"); dojo.require("dojo.i18n"); +dojo.require("dojo.string"); dojo.require("dijit._PaletteMixin"); -dojo.requireLocalization("dojo","colors",null,"ROOT,ar,ca,cs,da,de,el,es,fi,fr,he,hu,it,ja,ko,nb,nl,pl,pt,pt-pt,ro,ru,sk,sl,sv,th,tr,zh,zh-tw"); -dojo.declare("dijit.ColorPalette",[dijit._Widget,dijit._Templated,dijit._PaletteMixin],{palette:"7x10",_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:{"7x10":dojo.moduleUrl("dijit.themes","a11y/colors7x10.png"),"3x4":dojo.moduleUrl("dijit.themes","a11y/colors3x4.png"),"7x10-rtl":dojo.moduleUrl("dijit.themes","a11y/colors7x10-rtl.png"),"3x4-rtl":dojo.moduleUrl("dijit.themes","a11y/colors3x4-rtl.png")},templateString:dojo.cache("dijit","templates/ColorPalette.html","<div class=\"dijitInline dijitColorPalette\">\n\t<img class=\"dijitColorPaletteUnder\" dojoAttachPoint=\"imageNode\" waiRole=\"presentation\" alt=\"\"/>\n\t<table class=\"dijitPaletteTable\" cellSpacing=\"0\" cellPadding=\"0\">\n\t\t<tbody dojoAttachPoint=\"gridNode\"></tbody>\n\t</table>\n</div>\n"),baseClass:"dijitColorPalette",dyeClass:"dijit._Color",buildRendering:function(){ -this.inherited(arguments); -this.imageNode.setAttribute("src",this._imagePaths[this.palette+(this.isLeftToRight()?"":"-rtl")].toString()); -var _1=dojo.i18n.getLocalization("dojo","colors",this.lang); -this._preparePalette(this._palettes[this.palette],_1); -}}); -dojo.declare("dijit._Color",dojo.Color,{constructor:function(_2){ -this._alias=_2; -this.setColor(dojo.Color.named[_2]); -},getValue:function(){ -return this.toHex(); -},fillCell:function(_3,_4){ -dojo.create("img",{src:_4,"class":"dijitPaletteImg",alt:this._alias},_3); -}}); +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"); + + +dojo.declare("dijit.ColorPalette", + [dijit._Widget, dijit._Templated, dijit._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: + // | <div dojoType="dijit.ColorPalette"></div> + // + // 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: 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"), + + baseClass: "dijitColorPalette", + + buildRendering: function(){ + // Instantiate the template, which makes a skeleton into which we'll insert a bunch of + // <img> nodes + this.inherited(arguments); + + // Creates <img> nodes in each cell of the template. + // Pass in "customized" dijit._Color constructor for specified palette and high-contrast vs. normal mode + this._preparePalette( + this._palettes[this.palette], + dojo.i18n.getLocalization("dojo", "colors", this.lang), + dojo.declare(dijit._Color, { + hc: dojo.hasClass(dojo.body(), "dijit_a11y"), + palette: this.palette + }) + ); + } +}); + +dojo.declare("dijit._Color", dojo.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: + "<span class='dijitInline dijitPaletteImg'>" + + "<img src='${blankGif}' alt='${alt}' class='dijitColorPaletteSwatch' style='background-color: ${color}'/>" + + "</span>", + + // 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: + "<span class='dijitInline dijitPaletteImg' style='position: relative; overflow: hidden; height: 12px; width: 14px;'>" + + "<img src='${image}' alt='${alt}' style='position: absolute; left: ${left}px; top: ${top}px; ${size}'/>" + + "</span>", + + // _imagePaths: [protected] Map + // This is stores the path to the palette images used for high-contrast mode display + _imagePaths: { + "7x10": dojo.moduleUrl("dijit.themes", "a11y/colors7x10.png"), + "3x4": dojo.moduleUrl("dijit.themes", "a11y/colors3x4.png") + }, + + constructor: function(/*String*/alias, /*Number*/ row, /*Number*/ col){ + this._alias = alias; + this._row = row; + this._col = col; + this.setColor(dojo.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 = dojo.string.substitute(this.hc ? this.hcTemplate : this.template, { + // substitution variables for normal mode + color: this.toHex(), + blankGif: blankGif, + alt: this._alias, + + // 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" + }); + + dojo.place(html, cell); + } +}); + } |