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         function mapColors() {
  16                 var i, colors = [], colorMap;
  17
  18                 colorMap = editor.settings.textcolor_map || [
  19                         "000000", "Black",
  20                         "993300", "Burnt orange",
  21                         "333300", "Dark olive",
  22                         "003300", "Dark green",
  23                         "003366", "Dark azure",
  24                         "000080", "Navy Blue",
  25                         "333399", "Indigo",
  26                         "333333", "Very dark gray",
  27                         "800000", "Maroon",
  28                         "FF6600", "Orange",
  29                         "808000", "Olive",
  30                         "008000", "Green",
  31                         "008080", "Teal",
  32                         "0000FF", "Blue",
  33                         "666699", "Grayish blue",
  34                         "808080", "Gray",
  35                         "FF0000", "Red",
  36                         "FF9900", "Amber",
  37                         "99CC00", "Yellow green",
  38                         "339966", "Sea green",
  39                         "33CCCC", "Turquoise",
  40                         "3366FF", "Royal blue",
  41                         "800080", "Purple",
  42                         "999999", "Medium gray",
  43                         "FF00FF", "Magenta",
  44                         "FFCC00", "Gold",
  45                         "FFFF00", "Yellow",
  46                         "00FF00", "Lime",
  47                         "00FFFF", "Aqua",
  48                         "00CCFF", "Sky blue",
  49                         "993366", "Brown",
  50                         "C0C0C0", "Silver",
  51                         "FF99CC", "Pink",
  52                         "FFCC99", "Peach",
  53                         "FFFF99", "Light yellow",
  54                         "CCFFCC", "Pale green",
  55                         "CCFFFF", "Pale cyan",
  56                         "99CCFF", "Light sky blue",
  57                         "CC99FF", "Plum",
  58                         "FFFFFF", "White"
  59                 ];
  60
  61                 for (i = 0; i < colorMap.length; i += 2) {
  62                         colors.push({
  63                                 text: colorMap[i + 1],
  64                                 color: colorMap[i]
  65                         });
  66                 }
  67
  68                 return colors;
  69         }
  70
  71         function renderColorPicker() {
  72                 var ctrl = this, colors, color, html, last, rows, cols, x, y, i;
  73
  74                 colors = mapColors();
  75
  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;
  80
  81                 for (y = 0; y < rows; y++) {
  82                         html += '<tr>';
  83
  84                         for (x = 0; x < cols; x++) {
  85                                 i = y * cols + x;
  86
  87                                 if (i > last) {
  88                                         html += '<td></td>';
  89                                 } else {
  90                                         color = colors[i];
  91                                         html += (
  92                                                 '<td>' +
  93                                                         '<div id="' + ctrl._id + '-' + i + '"' +
  94                                                                 ' data-mce-color="' + color.color + '"' +
  95                                                                 ' role="option"' +
  96                                                                 ' tabIndex="-1"' +
  97                                                                 ' style="' + (color ? 'background-color: #' + color.color : '') + '"' +
  98                                                                 ' title="' + color.text + '">' +
  99                                                         '</div>' +
 100                                                 '</td>'
 101                                         );
 102                                 }
 103                         }
 104
 105                         html += '</tr>';
 106                 }
 107
 108                 html += '</tbody></table>';
 109
 110                 return html;
 111         }
 112
 113         function onPanelClick(e) {
 114                 var buttonCtrl = this.parent(), value;
 115
 116                 if ((value = e.target.getAttribute('data-mce-color'))) {
 117                         if (this.lastId) {
 118                                 document.getElementById(this.lastId).setAttribute('aria-selected', false);
 119                         }
 120
 121                         e.target.setAttribute('aria-selected', true);
 122                         this.lastId = e.target.id;
 123
 124                         buttonCtrl.hidePanel();
 125                         value = '#' + value;
 126                         buttonCtrl.color(value);
 127                         editor.execCommand(buttonCtrl.settings.selectcmd, false, value);
 128                 }
 129         }
 130
 131         function onButtonClick() {
 132                 var self = this;
 133
 134                 if (self._color) {
 135                         editor.execCommand(self.settings.selectcmd, false, self._color);
 136                 }
 137         }
 138
 139         editor.addButton('forecolor', {
 140                 type: 'colorbutton',
 141                 tooltip: 'Text color',
 142                 selectcmd: 'ForeColor',
 143                 panel: {
 144                         role: 'application',
 145                         ariaRemember: true,
 146                         html: renderColorPicker,
 147                         onclick: onPanelClick
 148                 },
 149                 onclick: onButtonClick
 150         });
 151
 152         editor.addButton('backcolor', {
 153                 type: 'colorbutton',
 154                 tooltip: 'Background color',
 155                 selectcmd: 'HiliteColor',
 156                 panel: {
 157                         role: 'application',
 158                         ariaRemember: true,
 159                         html: renderColorPicker,
 160                         onclick: onPanelClick
 161                 },
 162                 onclick: onButtonClick
 163         });
 164 });