mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-08-02 16:55:44 +02:00
8f23fa99a5
The 'admin' module will be split off from 'framework', where 'framework' only provides (mostly) frontend-agnostic PHP classes. For example, HTMLEditorField.php has a TinyMCEConfig.php driver, but doesn't come with its own JS includes.
112 lines
2.4 KiB
JavaScript
112 lines
2.4 KiB
JavaScript
/**
|
|
* plugin.js
|
|
*
|
|
* Released under LGPL License.
|
|
* Copyright (c) 1999-2015 Ephox Corp. All rights reserved
|
|
*
|
|
* License: http://www.tinymce.com/license
|
|
* Contributing: http://www.tinymce.com/contributing
|
|
*/
|
|
|
|
/*global tinymce:true */
|
|
|
|
tinymce.PluginManager.add('colorpicker', function(editor) {
|
|
function colorPickerCallback(callback, value) {
|
|
function setColor(value) {
|
|
var color = new tinymce.util.Color(value), rgb = color.toRgb();
|
|
|
|
win.fromJSON({
|
|
r: rgb.r,
|
|
g: rgb.g,
|
|
b: rgb.b,
|
|
hex: color.toHex().substr(1)
|
|
});
|
|
|
|
showPreview(color.toHex());
|
|
}
|
|
|
|
function showPreview(hexColor) {
|
|
win.find('#preview')[0].getEl().style.background = hexColor;
|
|
}
|
|
|
|
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,
|
|
onchange: function() {
|
|
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(this.value());
|
|
}
|
|
}
|
|
},
|
|
{
|
|
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(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(value);
|
|
}
|
|
},
|
|
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('#' + this.toJSON().hex);
|
|
}
|
|
});
|
|
|
|
setColor(value);
|
|
}
|
|
|
|
if (!editor.settings.color_picker_callback) {
|
|
editor.settings.color_picker_callback = colorPickerCallback;
|
|
}
|
|
}); |