[Summary view] [Print] [Text view]

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