move eff_cp to global edt, update schema

This commit is contained in:
brindosch 2016-12-29 17:12:06 +01:00
parent 8d304d58d2
commit 1659000cbb
3 changed files with 87 additions and 71 deletions

View File

@ -1,66 +1,3 @@
JSONEditor.defaults.editors.colorPicker = JSONEditor.defaults.editors.string.extend({
getValue: function() {
if ($(this.input).data("colorpicker") !== undefined) {
var color = $(this.input).data('colorpicker').color.toRGB();
return [color.r,color.g, color.b];
}
else {
return [0,0,0];
}
},
setValue: function(val) {
function rgb2hex(rgb)
{
return "#" +
("0" + parseInt(rgb[0],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[2],10).toString(16)).slice(-2);
}
$(this.input).colorpicker('updateInput', 'rgb('+val+')');
$(this.input).colorpicker('updateData', val);
$(this.input).colorpicker('updatePicker', rgb2hex(val));
$(this.input).colorpicker('updateComponent', 'rgb('+val+')');
},
build: function() {
this._super();
var myinput = this;
$(myinput.input).parent().attr("class", $(myinput.input).parent().attr('class') + " colorpicker-element input-group");
$(myinput.input).append("<span class='input-group-addon' id='event_catcher'><i></i></span>");
$(myinput.input).colorpicker({
format: 'rgb',
customClass: 'colorpicker-2x',
sliders: {
saturation: {
maxLeft: 200,
maxTop: 200
},
hue: {
maxTop: 200
},
},
})
$("#event_catcher").detach().insertAfter(myinput.input);
$("#event_catcher").attr("id", "selector");
$(this.input).colorpicker().on('changeColor', function(e) {
$(myinput).val(e.color.toRGB()).change();
});
}
});
JSONEditor.defaults.resolvers.unshift(function(schema) {
if(schema.type === "array" && schema.format === "colorpicker") {
return "colorPicker";
}
});
var oldDelList = [];

View File

@ -6162,6 +6162,63 @@ JSONEditor.defaults.editors.arraySelectize = JSONEditor.AbstractEditor.extend({
}
});
// colorpicker creation and handling, build on top of strings editor
JSONEditor.defaults.editors.colorPicker = JSONEditor.defaults.editors.string.extend({
getValue: function() {
if ($(this.input).data("colorpicker") !== undefined) {
var color = $(this.input).data('colorpicker').color.toRGB();
return [color.r,color.g, color.b];
}
else {
return [0,0,0];
}
},
setValue: function(val) {
function rgb2hex(rgb)
{
return "#" +
("0" + parseInt(rgb[0],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
("0" + parseInt(rgb[2],10).toString(16)).slice(-2);
}
$(this.input).colorpicker('updateInput', 'rgb('+val+')');
$(this.input).colorpicker('updateData', val);
$(this.input).colorpicker('updatePicker', rgb2hex(val));
$(this.input).colorpicker('updateComponent', 'rgb('+val+')');
},
build: function() {
this._super();
var myinput = this;
$(myinput.input).parent().attr("class", $(myinput.input).parent().attr('class') + " colorpicker-element input-group");
$(myinput.input).append("<span class='input-group-addon' id='event_catcher'><i></i></span>");
$(myinput.input).colorpicker({
format: 'rgb',
customClass: 'colorpicker-2x',
sliders: {
saturation: {
maxLeft: 200,
maxTop: 200
},
hue: {
maxTop: 200
},
},
})
$("#event_catcher").detach().insertAfter(myinput.input);
$("#event_catcher").attr("id", "selector");
$(this.input).colorpicker().on('changeColor', function(e) {
$(myinput).val(e.color.toRGB()).change();
});
}
});
var matchKey = (function () {
var elem = document.documentElement;
@ -7017,6 +7074,12 @@ JSONEditor.defaults.resolvers.unshift(function(schema) {
// If this schema uses `oneOf` or `anyOf`
if(schema.oneOf || schema.anyOf) return "multiple";
});
// colorpicker extend for strings
JSONEditor.defaults.resolvers.unshift(function(schema) {
if(schema.type === "array" && schema.format === "colorpicker") {
return "colorPicker";
}
});
/**
* This is a small wrapper for using JSON Editor like a typical jQuery plugin.

View File

@ -134,6 +134,7 @@
"black" :
{
"type" : "array",
"format" : "colorpicker",
"required" : true,
"default": [0,0,0],
"items" : {
@ -142,11 +143,13 @@
"maximum" : 255
},
"minItems" : 3,
"maxItems" : 3
"maxItems" : 3,
"propertOrder" : 8
},
"white" :
{
"type" : "array",
"format" : "colorpicker",
"required" : true,
"default": [255,255,255],
"items" : {
@ -155,11 +158,13 @@
"maximum" : 255
},
"minItems" : 3,
"maxItems" : 3
"maxItems" : 3,
"propertOrder" : 1
},
"red" :
{
"type" : "array",
"format" : "colorpicker",
"required" : true,
"default": [255,0,0],
"items" : {
@ -168,11 +173,13 @@
"maximum" : 255
},
"minItems" : 3,
"maxItems" : 3
"maxItems" : 3,
"propertOrder" : 2
},
"green" :
{
"type" : "array",
"format" : "colorpicker",
"required" : true,
"default": [0,255,0],
"items" : {
@ -181,11 +188,13 @@
"maximum" : 255
},
"minItems" : 3,
"maxItems" : 3
"maxItems" : 3,
"propertOrder" : 3
},
"blue" :
{
"type" : "array",
"format" : "colorpicker",
"required" : true,
"default": [0,0,255],
"items" : {
@ -194,11 +203,13 @@
"maximum" : 255
},
"minItems" : 3,
"maxItems" : 3
"maxItems" : 3,
"propertOrder" : 4
},
"cyan" :
{
"type" : "array",
"format" : "colorpicker",
"required" : true,
"default": [0,255,255],
"items" : {
@ -207,11 +218,13 @@
"maximum" : 255
},
"minItems" : 3,
"maxItems" : 3
"maxItems" : 3,
"propertOrder" : 5
},
"magenta" :
{
"type" : "array",
"format" : "colorpicker",
"required" : true,
"default": [255,0,255],
"items" : {
@ -220,11 +233,13 @@
"maximum" : 255
},
"minItems" : 3,
"maxItems" : 3
"maxItems" : 3,
"propertOrder" : 6
},
"yellow" :
{
"type" : "array",
"format" : "colorpicker",
"required" : true,
"default": [255,255,0],
"items" : {
@ -233,7 +248,8 @@
"maximum" : 255
},
"minItems" : 3,
"maxItems" : 3
"maxItems" : 3,
"propertOrder" : 7
}
},
"additionalProperties" : false