2017-05-08 07:32:46 +02:00
|
|
|
(function () {
|
2018-04-26 00:35:21 +02:00
|
|
|
var colorpicker = (function () {
|
2019-01-29 21:19:51 +01:00
|
|
|
'use strict';
|
2017-05-08 07:32:46 +02:00
|
|
|
|
2019-01-29 21:19:51 +01:00
|
|
|
var global = tinymce.util.Tools.resolve('tinymce.PluginManager');
|
2017-05-08 07:32:46 +02:00
|
|
|
|
2019-01-29 21:19:51 +01:00
|
|
|
var global$1 = tinymce.util.Tools.resolve('tinymce.util.Color');
|
2017-05-08 07:32:46 +02:00
|
|
|
|
2019-01-29 21:19:51 +01:00
|
|
|
var showPreview = function (win, hexColor) {
|
|
|
|
win.find('#preview')[0].getEl().style.background = hexColor;
|
|
|
|
};
|
|
|
|
var setColor = function (win, value) {
|
|
|
|
var color = global$1(value), rgb = color.toRgb();
|
|
|
|
win.fromJSON({
|
|
|
|
r: rgb.r,
|
|
|
|
g: rgb.g,
|
|
|
|
b: rgb.b,
|
|
|
|
hex: color.toHex().substr(1)
|
|
|
|
});
|
|
|
|
showPreview(win, color.toHex());
|
|
|
|
};
|
|
|
|
var open = function (editor, callback, value) {
|
|
|
|
var win = editor.windowManager.open({
|
|
|
|
title: 'Color',
|
|
|
|
items: {
|
|
|
|
type: 'container',
|
|
|
|
layout: 'flex',
|
|
|
|
direction: 'row',
|
|
|
|
align: 'stretch',
|
|
|
|
padding: 5,
|
|
|
|
spacing: 10,
|
|
|
|
items: [
|
|
|
|
{
|
|
|
|
type: 'colorpicker',
|
|
|
|
value: value,
|
2018-04-26 00:35:21 +02:00
|
|
|
onchange: function () {
|
2019-01-29 21:19:51 +01:00
|
|
|
var rgb = this.rgb();
|
|
|
|
if (win) {
|
|
|
|
win.find('#r').value(rgb.r);
|
|
|
|
win.find('#g').value(rgb.g);
|
|
|
|
win.find('#b').value(rgb.b);
|
|
|
|
win.find('#hex').value(this.value().substr(1));
|
|
|
|
showPreview(win, this.value());
|
2018-04-26 00:35:21 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
2019-01-29 21:19:51 +01:00
|
|
|
{
|
|
|
|
type: 'form',
|
|
|
|
padding: 0,
|
|
|
|
labelGap: 5,
|
|
|
|
defaults: {
|
|
|
|
type: 'textbox',
|
|
|
|
size: 7,
|
|
|
|
value: '0',
|
|
|
|
flex: 1,
|
|
|
|
spellcheck: false,
|
|
|
|
onchange: function () {
|
|
|
|
var colorPickerCtrl = win.find('colorpicker')[0];
|
|
|
|
var name, value;
|
|
|
|
name = this.name();
|
|
|
|
value = this.value();
|
|
|
|
if (name === 'hex') {
|
|
|
|
value = '#' + value;
|
|
|
|
setColor(win, value);
|
|
|
|
colorPickerCtrl.value(value);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
value = {
|
|
|
|
r: win.find('#r').value(),
|
|
|
|
g: win.find('#g').value(),
|
|
|
|
b: win.find('#b').value()
|
|
|
|
};
|
|
|
|
colorPickerCtrl.value(value);
|
|
|
|
setColor(win, value);
|
|
|
|
}
|
2018-04-26 00:35:21 +02:00
|
|
|
},
|
2019-01-29 21:19:51 +01:00
|
|
|
items: [
|
|
|
|
{
|
|
|
|
name: 'r',
|
|
|
|
label: 'R',
|
|
|
|
autofocus: 1
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'g',
|
|
|
|
label: 'G'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'b',
|
|
|
|
label: 'B'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'hex',
|
|
|
|
label: '#',
|
|
|
|
value: '000000'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'preview',
|
|
|
|
type: 'container',
|
|
|
|
border: 1
|
|
|
|
}
|
|
|
|
]
|
|
|
|
}
|
|
|
|
]
|
|
|
|
},
|
|
|
|
onSubmit: function () {
|
|
|
|
callback('#' + win.toJSON().hex);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
setColor(win, value);
|
|
|
|
};
|
|
|
|
var Dialog = { open: open };
|
|
|
|
|
|
|
|
global.add('colorpicker', function (editor) {
|
|
|
|
if (!editor.settings.color_picker_callback) {
|
|
|
|
editor.settings.color_picker_callback = function (callback, value) {
|
|
|
|
Dialog.open(editor, callback, value);
|
|
|
|
};
|
2017-05-08 07:32:46 +02:00
|
|
|
}
|
|
|
|
});
|
2019-01-29 21:19:51 +01:00
|
|
|
function Plugin () {
|
2018-04-26 00:35:21 +02:00
|
|
|
}
|
|
|
|
|
2019-01-29 21:19:51 +01:00
|
|
|
return Plugin;
|
2018-04-26 00:35:21 +02:00
|
|
|
|
|
|
|
}());
|
2017-05-08 07:32:46 +02:00
|
|
|
})();
|