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

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