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 });