wp-includes/js/tinymce/plugins/textcolor/plugin.js

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