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