1 /**
  2  * color button.
  3  * @author yiminghe@gmail.com
  4  */
  5 KISSY.add("editor/plugin/color/btn", function (S, Editor, Button, Overlay4E, DialogLoader) {
  6 
  7     var Node = S.Node,
  8         DOM = S.DOM;
  9 
 10     DOM.addStyleSheet(window, ".ks-editor-color-panel a {" +
 11         "display: block;" +
 12         "color:black;" +
 13         "text-decoration: none;" +
 14         "}" +
 15         "" +
 16         ".ks-editor-color-panel a:hover {" +
 17         "color:black;" +
 18         "text-decoration: none;" +
 19         "}" +
 20         ".ks-editor-color-panel a:active {" +
 21         "color:black;" +
 22         "}" +
 23 
 24         ".ks-editor-color-palette {" +
 25         "    margin: 5px 8px 8px;" +
 26         "}" +
 27 
 28         ".ks-editor-color-palette table {" +
 29         "    border: 1px solid #666666;" +
 30         "    border-collapse: collapse;" +
 31         "}" +
 32 
 33         ".ks-editor-color-palette td {" +
 34         "    border-right: 1px solid #666666;" +
 35         "    height: 18px;" +
 36         "    width: 18px;" +
 37         "}" +
 38 
 39         "a.ks-editor-color-a {" +
 40         "    height: 18px;" +
 41         "    width: 18px;" +
 42         "}" +
 43 
 44         "a.ks-editor-color-a:hover {" +
 45         "    border: 1px solid #ffffff;" +
 46         "    height: 16px;" +
 47         "    width: 16px;" +
 48         "}" +
 49         "a.ks-editor-color-remove {" +
 50         "  padding:3px 8px;" +
 51         "  margin:2px 0 3px 0;" +
 52         "}" +
 53         "a.ks-editor-color-remove:hover {" +
 54         "    background-color: #D6E9F8;" +
 55         "}", "ks-editor-color-plugin");
 56 
 57     var COLORS = [
 58         ["000", "444", "666", "999", "CCC", "EEE", "F3F3F3", "FFF"],
 59         ["F00", "F90", "FF0", "0F0", "0FF", "00F", "90F", "F0F"],
 60         [
 61             "F4CCCC", "FCE5CD", "FFF2CC", "D9EAD3", "D0E0E3", "CFE2F3", "D9D2E9", "EAD1DC",
 62             "EA9999", "F9CB9C", "FFE599", "B6D7A8", "A2C4C9", "9FC5E8", "B4A7D6", "D5A6BD",
 63             "E06666", "F6B26B", "FFD966", "93C47D", "76A5AF", "6FA8DC", "8E7CC3", "C27BAD",
 64             "CC0000", "E69138", "F1C232", "6AA84F", "45818E", "3D85C6", "674EA7", "A64D79",
 65             "990000", "B45F06", "BF9000", "38761D", "134F5C", "0B5394", "351C75", "741B47",
 66             "660000", "783F04", "7F6000", "274E13", "0C343D", "073763", "20124D", "4C1130"
 67         ]
 68     ], html;
 69 
 70 
 71     function initHtml() {
 72         html = "<div class='ks-editor-color-panel'>" +
 73             "<a class='ks-editor-color-remove' " +
 74             "href=\"javascript:void('清除');\">" +
 75             "清除" +
 76             "</a>";
 77         for (var i = 0; i < 3; i++) {
 78             html += "<div class='ks-editor-color-palette'><table>";
 79             var c = COLORS[i], l = c.length / 8;
 80             for (var k = 0; k < l; k++) {
 81                 html += "<tr>";
 82                 for (var j = 0; j < 8; j++) {
 83                     var currentColor = "#" + (c[8 * k + j]);
 84                     html += "<td>";
 85                     html += "<a href='javascript:void(0);' " +
 86                         "class='ks-editor-color-a' " +
 87                         "style='background-color:"
 88                         + currentColor
 89                         + "'" +
 90                         "></a>";
 91                     html += "</td>";
 92                 }
 93                 html += "</tr>";
 94             }
 95             html += "</table></div>";
 96         }
 97         html += "" +
 98             "<div>" +
 99             "<a class='ks-editor-button ks-editor-color-others ks-inline-block'>其他颜色</a>" +
100             "</div>" +
101             "</div>";
102     }
103 
104     initHtml();
105 
106     return Button.extend({
107 
108         initializer:function () {
109             var self = this;
110             self.on("blur", function () {
111                 // make select color works
112                 setTimeout(function () {
113                     self.colorWin && self.colorWin.hide();
114                 }, 150);
115             });
116             self.on('click', function () {
117                 var checked = self.get("checked");
118                 if (checked) {
119                     self._prepare();
120                 } else {
121                     self.colorWin && self.colorWin.hide();
122                 }
123             });
124         },
125 
126         _prepare:function () {
127             var self = this,
128                 editor = self.get("editor"),
129                 colorPanel;
130 
131             self.colorWin = new Overlay4E({
132                 // TODO 变成了 -1??
133                 elAttrs:{
134                     tabindex:0
135                 },
136                 elCls:"ks-editor-popup",
137                 content:html,
138                 autoRender:true,
139                 width:170,
140                 zIndex:Editor.baseZIndex(Editor.zIndexManager.POPUP_MENU)
141             });
142 
143             var colorWin = self.colorWin;
144             colorPanel = colorWin.get("contentEl");
145             colorPanel.on("click", self._selectColor, self);
146             colorWin.on("hide", function () {
147                 self.set("checked", false);
148             });
149             var others = colorPanel.one(".ks-editor-color-others");
150             others.on("click", function (ev) {
151                 ev.halt();
152                 colorWin.hide();
153                 DialogLoader.useDialog(editor, "color/colorPicker",
154                     self.get("pluginConfig"),
155                     self.get("cmdType"));
156             });
157             self._prepare = self._show;
158             self._show();
159         },
160 
161         _show:function () {
162             var self = this,
163                 el = self.get("el"),
164                 colorWin = self.colorWin;
165             colorWin.align(el, ["bl", "tl"], [0, 2]);
166             colorWin.show();
167         },
168 
169         _selectColor:function (ev) {
170             ev.halt();
171             var self = this,
172                 t = new Node(ev.target);
173             if (t.hasClass("ks-editor-color-a")) {
174                 self.get("editor").execCommand(self.get("cmdType"), t.style("background-color"));
175             }
176         },
177 
178         destructor:function () {
179             var self = this;
180             if (self.colorWin) {
181                 self.colorWin.destroy();
182             }
183         }
184     }, {
185         ATTRS:{
186             checkable:{
187                 value:true
188             },
189             mode:{
190                 value:Editor.WYSIWYG_MODE
191             }
192         }
193     });
194 
195 }, {
196     requires:['editor', '../button/', '../overlay/', '../dialogLoader/']
197 });