plugin.js (11310B)
1 (function () { 2 var textcolor = (function () { 3 'use strict'; 4 5 var global = tinymce.util.Tools.resolve('tinymce.PluginManager'); 6 7 var getCurrentColor = function (editor, format) { 8 var color; 9 editor.dom.getParents(editor.selection.getStart(), function (elm) { 10 var value; 11 if (value = elm.style[format === 'forecolor' ? 'color' : 'background-color']) { 12 color = color ? color : value; 13 } 14 }); 15 return color; 16 }; 17 var mapColors = function (colorMap) { 18 var i; 19 var colors = []; 20 for (i = 0; i < colorMap.length; i += 2) { 21 colors.push({ 22 text: colorMap[i + 1], 23 color: '#' + colorMap[i] 24 }); 25 } 26 return colors; 27 }; 28 var applyFormat = function (editor, format, value) { 29 editor.undoManager.transact(function () { 30 editor.focus(); 31 editor.formatter.apply(format, { value: value }); 32 editor.nodeChanged(); 33 }); 34 }; 35 var removeFormat = function (editor, format) { 36 editor.undoManager.transact(function () { 37 editor.focus(); 38 editor.formatter.remove(format, { value: null }, null, true); 39 editor.nodeChanged(); 40 }); 41 }; 42 var TextColor = { 43 getCurrentColor: getCurrentColor, 44 mapColors: mapColors, 45 applyFormat: applyFormat, 46 removeFormat: removeFormat 47 }; 48 49 var register = function (editor) { 50 editor.addCommand('mceApplyTextcolor', function (format, value) { 51 TextColor.applyFormat(editor, format, value); 52 }); 53 editor.addCommand('mceRemoveTextcolor', function (format) { 54 TextColor.removeFormat(editor, format); 55 }); 56 }; 57 var Commands = { register: register }; 58 59 var global$1 = tinymce.util.Tools.resolve('tinymce.dom.DOMUtils'); 60 61 var global$2 = tinymce.util.Tools.resolve('tinymce.util.Tools'); 62 63 var defaultColorMap = [ 64 '000000', 65 'Black', 66 '993300', 67 'Burnt orange', 68 '333300', 69 'Dark olive', 70 '003300', 71 'Dark green', 72 '003366', 73 'Dark azure', 74 '000080', 75 'Navy Blue', 76 '333399', 77 'Indigo', 78 '333333', 79 'Very dark gray', 80 '800000', 81 'Maroon', 82 'FF6600', 83 'Orange', 84 '808000', 85 'Olive', 86 '008000', 87 'Green', 88 '008080', 89 'Teal', 90 '0000FF', 91 'Blue', 92 '666699', 93 'Grayish blue', 94 '808080', 95 'Gray', 96 'FF0000', 97 'Red', 98 'FF9900', 99 'Amber', 100 '99CC00', 101 'Yellow green', 102 '339966', 103 'Sea green', 104 '33CCCC', 105 'Turquoise', 106 '3366FF', 107 'Royal blue', 108 '800080', 109 'Purple', 110 '999999', 111 'Medium gray', 112 'FF00FF', 113 'Magenta', 114 'FFCC00', 115 'Gold', 116 'FFFF00', 117 'Yellow', 118 '00FF00', 119 'Lime', 120 '00FFFF', 121 'Aqua', 122 '00CCFF', 123 'Sky blue', 124 '993366', 125 'Red violet', 126 'FFFFFF', 127 'White', 128 'FF99CC', 129 'Pink', 130 'FFCC99', 131 'Peach', 132 'FFFF99', 133 'Light yellow', 134 'CCFFCC', 135 'Pale green', 136 'CCFFFF', 137 'Pale cyan', 138 '99CCFF', 139 'Light sky blue', 140 'CC99FF', 141 'Plum' 142 ]; 143 var getTextColorMap = function (editor) { 144 return editor.getParam('textcolor_map', defaultColorMap); 145 }; 146 var getForeColorMap = function (editor) { 147 return editor.getParam('forecolor_map', getTextColorMap(editor)); 148 }; 149 var getBackColorMap = function (editor) { 150 return editor.getParam('backcolor_map', getTextColorMap(editor)); 151 }; 152 var getTextColorRows = function (editor) { 153 return editor.getParam('textcolor_rows', 5); 154 }; 155 var getTextColorCols = function (editor) { 156 return editor.getParam('textcolor_cols', 8); 157 }; 158 var getForeColorRows = function (editor) { 159 return editor.getParam('forecolor_rows', getTextColorRows(editor)); 160 }; 161 var getBackColorRows = function (editor) { 162 return editor.getParam('backcolor_rows', getTextColorRows(editor)); 163 }; 164 var getForeColorCols = function (editor) { 165 return editor.getParam('forecolor_cols', getTextColorCols(editor)); 166 }; 167 var getBackColorCols = function (editor) { 168 return editor.getParam('backcolor_cols', getTextColorCols(editor)); 169 }; 170 var getColorPickerCallback = function (editor) { 171 return editor.getParam('color_picker_callback', null); 172 }; 173 var hasColorPicker = function (editor) { 174 return typeof getColorPickerCallback(editor) === 'function'; 175 }; 176 var Settings = { 177 getForeColorMap: getForeColorMap, 178 getBackColorMap: getBackColorMap, 179 getForeColorRows: getForeColorRows, 180 getBackColorRows: getBackColorRows, 181 getForeColorCols: getForeColorCols, 182 getBackColorCols: getBackColorCols, 183 getColorPickerCallback: getColorPickerCallback, 184 hasColorPicker: hasColorPicker 185 }; 186 187 var global$3 = tinymce.util.Tools.resolve('tinymce.util.I18n'); 188 189 var getHtml = function (cols, rows, colorMap, hasColorPicker) { 190 var colors, color, html, last, x, y, i, count = 0; 191 var id = global$1.DOM.uniqueId('mcearia'); 192 var getColorCellHtml = function (color, title) { 193 var isNoColor = color === 'transparent'; 194 return '<td class="mce-grid-cell' + (isNoColor ? ' mce-colorbtn-trans' : '') + '">' + '<div id="' + id + '-' + count++ + '"' + ' data-mce-color="' + (color ? color : '') + '"' + ' role="option"' + ' tabIndex="-1"' + ' style="' + (color ? 'background-color: ' + color : '') + '"' + ' title="' + global$3.translate(title) + '">' + (isNoColor ? '×' : '') + '</div>' + '</td>'; 195 }; 196 colors = TextColor.mapColors(colorMap); 197 colors.push({ 198 text: global$3.translate('No color'), 199 color: 'transparent' 200 }); 201 html = '<table class="mce-grid mce-grid-border mce-colorbutton-grid" role="list" cellspacing="0"><tbody>'; 202 last = colors.length - 1; 203 for (y = 0; y < rows; y++) { 204 html += '<tr>'; 205 for (x = 0; x < cols; x++) { 206 i = y * cols + x; 207 if (i > last) { 208 html += '<td></td>'; 209 } else { 210 color = colors[i]; 211 html += getColorCellHtml(color.color, color.text); 212 } 213 } 214 html += '</tr>'; 215 } 216 if (hasColorPicker) { 217 html += '<tr>' + '<td colspan="' + cols + '" class="mce-custom-color-btn">' + '<div id="' + id + '-c" class="mce-widget mce-btn mce-btn-small mce-btn-flat" ' + 'role="button" tabindex="-1" aria-labelledby="' + id + '-c" style="width: 100%">' + '<button type="button" role="presentation" tabindex="-1">' + global$3.translate('Custom...') + '</button>' + '</div>' + '</td>' + '</tr>'; 218 html += '<tr>'; 219 for (x = 0; x < cols; x++) { 220 html += getColorCellHtml('', 'Custom color'); 221 } 222 html += '</tr>'; 223 } 224 html += '</tbody></table>'; 225 return html; 226 }; 227 var ColorPickerHtml = { getHtml: getHtml }; 228 229 var setDivColor = function setDivColor(div, value) { 230 div.style.background = value; 231 div.setAttribute('data-mce-color', value); 232 }; 233 var onButtonClick = function (editor) { 234 return function (e) { 235 var ctrl = e.control; 236 if (ctrl._color) { 237 editor.execCommand('mceApplyTextcolor', ctrl.settings.format, ctrl._color); 238 } else { 239 editor.execCommand('mceRemoveTextcolor', ctrl.settings.format); 240 } 241 }; 242 }; 243 var onPanelClick = function (editor, cols) { 244 return function (e) { 245 var buttonCtrl = this.parent(); 246 var value; 247 var currentColor = TextColor.getCurrentColor(editor, buttonCtrl.settings.format); 248 var selectColor = function (value) { 249 editor.execCommand('mceApplyTextcolor', buttonCtrl.settings.format, value); 250 buttonCtrl.hidePanel(); 251 buttonCtrl.color(value); 252 }; 253 var resetColor = function () { 254 editor.execCommand('mceRemoveTextcolor', buttonCtrl.settings.format); 255 buttonCtrl.hidePanel(); 256 buttonCtrl.resetColor(); 257 }; 258 if (global$1.DOM.getParent(e.target, '.mce-custom-color-btn')) { 259 buttonCtrl.hidePanel(); 260 var colorPickerCallback = Settings.getColorPickerCallback(editor); 261 colorPickerCallback.call(editor, function (value) { 262 var tableElm = buttonCtrl.panel.getEl().getElementsByTagName('table')[0]; 263 var customColorCells, div, i; 264 customColorCells = global$2.map(tableElm.rows[tableElm.rows.length - 1].childNodes, function (elm) { 265 return elm.firstChild; 266 }); 267 for (i = 0; i < customColorCells.length; i++) { 268 div = customColorCells[i]; 269 if (!div.getAttribute('data-mce-color')) { 270 break; 271 } 272 } 273 if (i === cols) { 274 for (i = 0; i < cols - 1; i++) { 275 setDivColor(customColorCells[i], customColorCells[i + 1].getAttribute('data-mce-color')); 276 } 277 } 278 setDivColor(div, value); 279 selectColor(value); 280 }, currentColor); 281 } 282 value = e.target.getAttribute('data-mce-color'); 283 if (value) { 284 if (this.lastId) { 285 global$1.DOM.get(this.lastId).setAttribute('aria-selected', 'false'); 286 } 287 e.target.setAttribute('aria-selected', true); 288 this.lastId = e.target.id; 289 if (value === 'transparent') { 290 resetColor(); 291 } else { 292 selectColor(value); 293 } 294 } else if (value !== null) { 295 buttonCtrl.hidePanel(); 296 } 297 }; 298 }; 299 var renderColorPicker = function (editor, foreColor) { 300 return function () { 301 var cols = foreColor ? Settings.getForeColorCols(editor) : Settings.getBackColorCols(editor); 302 var rows = foreColor ? Settings.getForeColorRows(editor) : Settings.getBackColorRows(editor); 303 var colorMap = foreColor ? Settings.getForeColorMap(editor) : Settings.getBackColorMap(editor); 304 var hasColorPicker = Settings.hasColorPicker(editor); 305 return ColorPickerHtml.getHtml(cols, rows, colorMap, hasColorPicker); 306 }; 307 }; 308 var register$1 = function (editor) { 309 editor.addButton('forecolor', { 310 type: 'colorbutton', 311 tooltip: 'Text color', 312 format: 'forecolor', 313 panel: { 314 role: 'application', 315 ariaRemember: true, 316 html: renderColorPicker(editor, true), 317 onclick: onPanelClick(editor, Settings.getForeColorCols(editor)) 318 }, 319 onclick: onButtonClick(editor) 320 }); 321 editor.addButton('backcolor', { 322 type: 'colorbutton', 323 tooltip: 'Background color', 324 format: 'hilitecolor', 325 panel: { 326 role: 'application', 327 ariaRemember: true, 328 html: renderColorPicker(editor, false), 329 onclick: onPanelClick(editor, Settings.getBackColorCols(editor)) 330 }, 331 onclick: onButtonClick(editor) 332 }); 333 }; 334 var Buttons = { register: register$1 }; 335 336 global.add('textcolor', function (editor) { 337 Commands.register(editor); 338 Buttons.register(editor); 339 }); 340 function Plugin () { 341 } 342 343 return Plugin; 344 345 }()); 346 })();