4 * Copyright, Moxiecode Systems AB
5 * Released under LGPL License.
7 * License: http://www.tinymce.com/license
8 * Contributing: http://www.tinymce.com/contributing
11 /*global tinymce:true */
12 /*eslint consistent-this:0 */
14 tinymce.PluginManager.add('textcolor', function(editor) {
15 function mapColors() {
16 var i, colors = [], colorMap;
18 colorMap = editor.settings.textcolor_map || [
20 "993300", "Burnt orange",
21 "333300", "Dark olive",
22 "003300", "Dark green",
23 "003366", "Dark azure",
24 "000080", "Navy Blue",
26 "333333", "Very dark gray",
33 "666699", "Grayish blue",
37 "99CC00", "Yellow green",
38 "339966", "Sea green",
39 "33CCCC", "Turquoise",
40 "3366FF", "Royal blue",
42 "999999", "Medium gray",
53 "FFFF99", "Light yellow",
54 "CCFFCC", "Pale green",
55 "CCFFFF", "Pale cyan",
56 "99CCFF", "Light sky blue",
61 for (i = 0; i < colorMap.length; i += 2) {
63 text: colorMap[i + 1],
71 function renderColorPicker() {
72 var ctrl = this, colors, color, html, last, rows, cols, x, y, i;
76 html = '<table class="mce-grid mce-grid-border mce-colorbutton-grid" role="list" cellspacing="0"><tbody>';
77 last = colors.length - 1;
78 rows = editor.settings.textcolor_rows || 5;
79 cols = editor.settings.textcolor_cols || 8;
81 for (y = 0; y < rows; y++) {
84 for (x = 0; x < cols; x++) {
93 '<div id="' + ctrl._id + '-' + i + '"' +
94 ' data-mce-color="' + color.color + '"' +
97 ' style="' + (color ? 'background-color: #' + color.color : '') + '"' +
98 ' title="' + color.text + '">' +
108 html += '</tbody></table>';
113 function onPanelClick(e) {
114 var buttonCtrl = this.parent(), value;
116 if ((value = e.target.getAttribute('data-mce-color'))) {
118 document.getElementById(this.lastId).setAttribute('aria-selected', false);
121 e.target.setAttribute('aria-selected', true);
122 this.lastId = e.target.id;
124 buttonCtrl.hidePanel();
126 buttonCtrl.color(value);
127 editor.execCommand(buttonCtrl.settings.selectcmd, false, value);
131 function onButtonClick() {
135 editor.execCommand(self.settings.selectcmd, false, self._color);
139 editor.addButton('forecolor', {
141 tooltip: 'Text color',
142 selectcmd: 'ForeColor',
146 html: renderColorPicker,
147 onclick: onPanelClick
149 onclick: onButtonClick
152 editor.addButton('backcolor', {
154 tooltip: 'Background color',
155 selectcmd: 'HiliteColor',
159 html: renderColorPicker,
160 onclick: onPanelClick
162 onclick: onButtonClick