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) {
17 rows = editor.settings.textcolor_rows || 5;
18 cols = editor.settings.textcolor_cols || 8;
20 function getCurrentColor(format) {
23 editor.dom.getParents(editor.selection.getStart(), function(elm) {
26 if ((value = elm.style[format == 'forecolor' ? 'color' : 'background-color'])) {
34 function mapColors() {
35 var i, colors = [], colorMap;
37 colorMap = editor.settings.textcolor_map || [
39 "993300", "Burnt orange",
40 "333300", "Dark olive",
41 "003300", "Dark green",
42 "003366", "Dark azure",
43 "000080", "Navy Blue",
45 "333333", "Very dark gray",
52 "666699", "Grayish blue",
56 "99CC00", "Yellow green",
57 "339966", "Sea green",
58 "33CCCC", "Turquoise",
59 "3366FF", "Royal blue",
61 "999999", "Medium gray",
68 "993366", "Red violet",
72 "FFFF99", "Light yellow",
73 "CCFFCC", "Pale green",
74 "CCFFFF", "Pale cyan",
75 "99CCFF", "Light sky blue",
79 for (i = 0; i < colorMap.length; i += 2) {
81 text: colorMap[i + 1],
82 color: '#' + colorMap[i]
89 function renderColorPicker() {
90 var ctrl = this, colors, color, html, last, x, y, i, id = ctrl._id, count = 0;
92 function getColorCellHtml(color, title) {
93 var isNoColor = color == 'transparent';
96 '<td class="mce-grid-cell' + (isNoColor ? ' mce-colorbtn-trans' : '') + '">' +
97 '<div id="' + id + '-' + (count++) + '"' +
98 ' data-mce-color="' + (color ? color : '') + '"' +
101 ' style="' + (color ? 'background-color: ' + color : '') + '"' +
102 ' title="' + tinymce.translate(title) + '">' +
103 (isNoColor ? '×' : '') +
109 colors = mapColors();
111 text: tinymce.translate("No color"),
115 html = '<table class="mce-grid mce-grid-border mce-colorbutton-grid" role="list" cellspacing="0"><tbody>';
116 last = colors.length - 1;
118 for (y = 0; y < rows; y++) {
121 for (x = 0; x < cols; x++) {
128 html += getColorCellHtml(color.color, color.text);
135 if (editor.settings.color_picker_callback) {
138 '<td colspan="' + cols + '" class="mce-custom-color-btn">' +
139 '<div id="' + id + '-c" class="mce-widget mce-btn mce-btn-small mce-btn-flat" ' +
140 'role="button" tabindex="-1" aria-labelledby="' + id + '-c" style="width: 100%">' +
141 '<button type="button" role="presentation" tabindex="-1">' + tinymce.translate('Custom...') + '</button>' +
149 for (x = 0; x < cols; x++) {
150 html += getColorCellHtml('', 'Custom color');
156 html += '</tbody></table>';
161 function applyFormat(format, value) {
163 editor.formatter.apply(format, {value: value});
164 editor.nodeChanged();
167 function removeFormat(format) {
169 editor.formatter.remove(format, {value: null}, null, true);
170 editor.nodeChanged();
173 function onPanelClick(e) {
174 var buttonCtrl = this.parent(), value;
176 function selectColor(value) {
177 buttonCtrl.hidePanel();
178 buttonCtrl.color(value);
179 applyFormat(buttonCtrl.settings.format, value);
182 function setDivColor(div, value) {
183 div.style.background = value;
184 div.setAttribute('data-mce-color', value);
187 if (tinymce.DOM.getParent(e.target, '.mce-custom-color-btn')) {
188 buttonCtrl.hidePanel();
190 editor.settings.color_picker_callback.call(editor, function(value) {
191 var tableElm = buttonCtrl.panel.getEl().getElementsByTagName('table')[0];
192 var customColorCells, div, i;
194 customColorCells = tinymce.map(tableElm.rows[tableElm.rows.length - 1].childNodes, function(elm) {
195 return elm.firstChild;
198 for (i = 0; i < customColorCells.length; i++) {
199 div = customColorCells[i];
200 if (!div.getAttribute('data-mce-color')) {
205 // Shift colors to the right
206 // TODO: Might need to be the left on RTL
208 for (i = 0; i < cols - 1; i++) {
209 setDivColor(customColorCells[i], customColorCells[i + 1].getAttribute('data-mce-color'));
213 setDivColor(div, value);
215 }, getCurrentColor(buttonCtrl.settings.format));
218 value = e.target.getAttribute('data-mce-color');
221 document.getElementById(this.lastId).setAttribute('aria-selected', false);
224 e.target.setAttribute('aria-selected', true);
225 this.lastId = e.target.id;
227 if (value == 'transparent') {
228 removeFormat(buttonCtrl.settings.format);
229 buttonCtrl.hidePanel();
234 } else if (value !== null) {
235 buttonCtrl.hidePanel();
239 function onButtonClick() {
243 applyFormat(self.settings.format, self._color);
247 editor.addButton('forecolor', {
249 tooltip: 'Text color',
254 html: renderColorPicker,
255 onclick: onPanelClick
257 onclick: onButtonClick
260 editor.addButton('backcolor', {
262 tooltip: 'Background color',
263 format: 'hilitecolor',
267 html: renderColorPicker,
268 onclick: onPanelClick
270 onclick: onButtonClick