|
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 }); |