ColorPalette.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  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",
  7. "./_TemplatedMixin",
  8. "./_PaletteMixin",
  9. "dojo/i18n", // i18n.getLocalization
  10. "dojo/_base/Color", // dojo.Color dojo.Color.named
  11. "dojo/_base/declare", // declare
  12. "dojo/dom-class", // domClass.contains
  13. "dojo/dom-construct", // domConstruct.place
  14. "dojo/_base/window", // win.body
  15. "dojo/string", // string.substitute
  16. "dojo/i18n!dojo/nls/colors", // translations
  17. "dojo/colors" // extend dojo.Color w/names of other colors
  18. ], function(require, template, _Widget, _TemplatedMixin, _PaletteMixin, i18n, Color,
  19. declare, domClass, domConstruct, win, string){
  20. /*=====
  21. var _Widget = dijit._Widget;
  22. var _TemplatedMixin = dijit._TemplatedMixin;
  23. var _PaletteMixin = dijit._PaletteMixin;
  24. =====*/
  25. // module:
  26. // dijit/ColorPalette
  27. // summary:
  28. // A keyboard accessible color-picking widget
  29. var ColorPalette = declare("dijit.ColorPalette", [_Widget, _TemplatedMixin, _PaletteMixin], {
  30. // summary:
  31. // A keyboard accessible color-picking widget
  32. // description:
  33. // Grid showing various colors, so the user can pick a certain color.
  34. // Can be used standalone, or as a popup.
  35. //
  36. // example:
  37. // | <div data-dojo-type="dijit.ColorPalette"></div>
  38. //
  39. // example:
  40. // | var picker = new dijit.ColorPalette({ },srcNode);
  41. // | picker.startup();
  42. // palette: [const] String
  43. // Size of grid, either "7x10" or "3x4".
  44. palette: "7x10",
  45. // _palettes: [protected] Map
  46. // This represents the value of the colors.
  47. // The first level is a hashmap of the different palettes available.
  48. // The next two dimensions represent the columns and rows of colors.
  49. _palettes: {
  50. "7x10": [["white", "seashell", "cornsilk", "lemonchiffon","lightyellow", "palegreen", "paleturquoise", "lightcyan", "lavender", "plum"],
  51. ["lightgray", "pink", "bisque", "moccasin", "khaki", "lightgreen", "lightseagreen", "lightskyblue", "cornflowerblue", "violet"],
  52. ["silver", "lightcoral", "sandybrown", "orange", "palegoldenrod", "chartreuse", "mediumturquoise", "skyblue", "mediumslateblue","orchid"],
  53. ["gray", "red", "orangered", "darkorange", "yellow", "limegreen", "darkseagreen", "royalblue", "slateblue", "mediumorchid"],
  54. ["dimgray", "crimson", "chocolate", "coral", "gold", "forestgreen", "seagreen", "blue", "blueviolet", "darkorchid"],
  55. ["darkslategray","firebrick","saddlebrown", "sienna", "olive", "green", "darkcyan", "mediumblue","darkslateblue", "darkmagenta" ],
  56. ["black", "darkred", "maroon", "brown", "darkolivegreen", "darkgreen", "midnightblue", "navy", "indigo", "purple"]],
  57. "3x4": [["white", "lime", "green", "blue"],
  58. ["silver", "yellow", "fuchsia", "navy"],
  59. ["gray", "red", "purple", "black"]]
  60. },
  61. // templateString: String
  62. // The template of this widget.
  63. templateString: template,
  64. baseClass: "dijitColorPalette",
  65. _dyeFactory: function(value, row, col){
  66. // Overrides _PaletteMixin._dyeFactory().
  67. return new this._dyeClass(value, row, col);
  68. },
  69. buildRendering: function(){
  70. // Instantiate the template, which makes a skeleton into which we'll insert a bunch of
  71. // <img> nodes
  72. this.inherited(arguments);
  73. // Creates customized constructor for dye class (color of a single cell) for
  74. // specified palette and high-contrast vs. normal mode. Used in _getDye().
  75. this._dyeClass = declare(ColorPalette._Color, {
  76. hc: domClass.contains(win.body(), "dijit_a11y"),
  77. palette: this.palette
  78. });
  79. // Creates <img> nodes in each cell of the template.
  80. this._preparePalette(
  81. this._palettes[this.palette],
  82. i18n.getLocalization("dojo", "colors", this.lang));
  83. }
  84. });
  85. ColorPalette._Color = declare("dijit._Color", Color, {
  86. // summary:
  87. // Object associated with each cell in a ColorPalette palette.
  88. // Implements dijit.Dye.
  89. // Template for each cell in normal (non-high-contrast mode). Each cell contains a wrapper
  90. // node for showing the border (called dijitPaletteImg for back-compat), and dijitColorPaletteSwatch
  91. // for showing the color.
  92. template:
  93. "<span class='dijitInline dijitPaletteImg'>" +
  94. "<img src='${blankGif}' alt='${alt}' class='dijitColorPaletteSwatch' style='background-color: ${color}'/>" +
  95. "</span>",
  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. // _imagePaths: [protected] Map
  103. // This is stores the path to the palette images used for high-contrast mode display
  104. _imagePaths: {
  105. "7x10": require.toUrl("./themes/a11y/colors7x10.png"),
  106. "3x4": require.toUrl("./themes/a11y/colors3x4.png")
  107. },
  108. constructor: function(/*String*/alias, /*Number*/ row, /*Number*/ col){
  109. this._alias = alias;
  110. this._row = row;
  111. this._col = col;
  112. this.setColor(Color.named[alias]);
  113. },
  114. getValue: function(){
  115. // summary:
  116. // Note that although dijit._Color is initialized with a value like "white" getValue() always
  117. // returns a hex value
  118. return this.toHex();
  119. },
  120. fillCell: function(/*DOMNode*/ cell, /*String*/ blankGif){
  121. var html = string.substitute(this.hc ? this.hcTemplate : this.template, {
  122. // substitution variables for normal mode
  123. color: this.toHex(),
  124. blankGif: blankGif,
  125. alt: this._alias,
  126. // variables used for high contrast mode
  127. image: this._imagePaths[this.palette].toString(),
  128. left: this._col * -20 - 5,
  129. top: this._row * -20 - 5,
  130. size: this.palette == "7x10" ? "height: 145px; width: 206px" : "height: 64px; width: 86px"
  131. });
  132. domConstruct.place(html, cell);
  133. }
  134. });
  135. return ColorPalette;
  136. });