[Summary view] [Print] [Text view]

   1  (function () {
   2  var colorpicker = (function () {
   3      'use strict';
   4  
   5      var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
   6  
   7      var global$1 = tinymce.util.Tools.resolve('tinymce.util.Color');
   8  
   9      var showPreview = function (win, hexColor) {
  10        win.find('#preview')[0].getEl().style.background = hexColor;
  11      };
  12      var setColor = function (win, value) {
  13        var color = global$1(value), rgb = color.toRgb();
  14        win.fromJSON({
  15          r: rgb.r,
  16          g: rgb.g,
  17          b: rgb.b,
  18          hex: color.toHex().substr(1)
  19        });
  20        showPreview(win, color.toHex());
  21      };
  22      var open = function (editor, callback, value) {
  23        var win = editor.windowManager.open({
  24          title: 'Color',
  25          items: {
  26            type: 'container',
  27            layout: 'flex',
  28            direction: 'row',
  29            align: 'stretch',
  30            padding: 5,
  31            spacing: 10,
  32            items: [
  33              {
  34                type: 'colorpicker',
  35                value: value,
  36                onchange: function () {
  37                  var rgb = this.rgb();
  38                  if (win) {
  39                    win.find('#r').value(rgb.r);
  40                    win.find('#g').value(rgb.g);
  41                    win.find('#b').value(rgb.b);
  42                    win.find('#hex').value(this.value().substr(1));
  43                    showPreview(win, this.value());
  44                  }
  45                }
  46              },
  47              {
  48                type: 'form',
  49                padding: 0,
  50                labelGap: 5,
  51                defaults: {
  52                  type: 'textbox',
  53                  size: 7,
  54                  value: '0',
  55                  flex: 1,
  56                  spellcheck: false,
  57                  onchange: function () {
  58                    var colorPickerCtrl = win.find('colorpicker')[0];
  59                    var name, value;
  60                    name = this.name();
  61                    value = this.value();
  62                    if (name === 'hex') {
  63                      value = '#' + value;
  64                      setColor(win, value);
  65                      colorPickerCtrl.value(value);
  66                      return;
  67                    }
  68                    value = {
  69                      r: win.find('#r').value(),
  70                      g: win.find('#g').value(),
  71                      b: win.find('#b').value()
  72                    };
  73                    colorPickerCtrl.value(value);
  74                    setColor(win, value);
  75                  }
  76                },
  77                items: [
  78                  {
  79                    name: 'r',
  80                    label: 'R',
  81                    autofocus: 1
  82                  },
  83                  {
  84                    name: 'g',
  85                    label: 'G'
  86                  },
  87                  {
  88                    name: 'b',
  89                    label: 'B'
  90                  },
  91                  {
  92                    name: 'hex',
  93                    label: '#',
  94                    value: '000000'
  95                  },
  96                  {
  97                    name: 'preview',
  98                    type: 'container',
  99                    border: 1
 100                  }
 101                ]
 102              }
 103            ]
 104          },
 105          onSubmit: function () {
 106            callback('#' + win.toJSON().hex);
 107          }
 108        });
 109        setColor(win, value);
 110      };
 111      var Dialog = { open: open };
 112  
 113      global.add('colorpicker', function (editor) {
 114        if (!editor.settings.color_picker_callback) {
 115          editor.settings.color_picker_callback = function (callback, value) {
 116            Dialog.open(editor, callback, value);
 117          };
 118        }
 119      });
 120      function Plugin () {
 121      }
 122  
 123      return Plugin;
 124  
 125  }());
 126  })();