Merge pull request #396 from israelito3000/feature/templateItems
Feature/template items
This commit is contained in:
Jos de Jong
GitHub
commit
913af51aab
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>JSONEditor | JSON schema validation</title>
|
||||
|
||||
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
|
||||
<script src="../dist/jsoneditor.js"></script>
|
||||
|
||||
<style type="text/css">
|
||||
body {
|
||||
width: 600px;
|
||||
font: 11pt sans-serif;
|
||||
}
|
||||
#jsoneditor {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>JSON schema validation</h1>
|
||||
<p>
|
||||
This example demonstrates JSON schema validation. The JSON object in this example must contain properties <code>firstName</code> and <code>lastName</code>, can can optionally have a property <code>age</code> which must be a positive integer.
|
||||
</p>
|
||||
<p>
|
||||
See <a href="http://json-schema.org/" target="_blank">http://json-schema.org/</a> for more information.
|
||||
</p>
|
||||
|
||||
<div id="jsoneditor"></div>
|
||||
|
||||
<script>
|
||||
|
||||
var json = {
|
||||
firstName: 'John',
|
||||
lastName: 'Doe',
|
||||
gender: null,
|
||||
age: 28
|
||||
};
|
||||
|
||||
var options = {
|
||||
templates: [
|
||||
{
|
||||
"menu": "Special Node",
|
||||
"name": "SpecialNode",
|
||||
"data": {
|
||||
"field1": "value1",
|
||||
"field2": "value2"
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// create the editor
|
||||
var container = document.getElementById('jsoneditor');
|
||||
var editor = new JSONEditor(container, options, json);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -80,7 +80,7 @@ function JSONEditor (container, options, json) {
|
|||
if (options) {
|
||||
var VALID_OPTIONS = [
|
||||
'ace', 'theme',
|
||||
'ajv', 'schema',
|
||||
'ajv', 'schema','templates',
|
||||
'onChange', 'onEditable', 'onError', 'onModeChange',
|
||||
'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation', 'sortObjectKeys'
|
||||
];
|
||||
|
|
@ -288,11 +288,11 @@ JSONEditor.prototype.setSchema = function (schema) {
|
|||
}
|
||||
|
||||
if (ajv) {
|
||||
this.validateSchema = ajv.compile(schema);
|
||||
this.validateSchema = ajv.compile(schema);
|
||||
|
||||
// add schema to the options, so that when switching to an other mode,
|
||||
// the set schema is not lost
|
||||
this.options.schema = schema;
|
||||
// add schema to the options, so that when switching to an other mode,
|
||||
// the set schema is not lost
|
||||
this.options.schema = schema;
|
||||
|
||||
// validate now
|
||||
this.validate();
|
||||
|
|
|
|||
152
src/js/Node.js
152
src/js/Node.js
|
|
@ -3175,6 +3175,32 @@ Node.TYPE_TITLES = {
|
|||
'but always returned as string.'
|
||||
};
|
||||
|
||||
Node.prototype.addTemplates = function (menu, append) {
|
||||
var node = this;
|
||||
var templates = node.editor.options.templates;
|
||||
if (templates == null) return;
|
||||
if (templates.length) {
|
||||
// create a separator
|
||||
menu.push({
|
||||
'type': 'separator'
|
||||
});
|
||||
}
|
||||
var appendData = function (name, data) {
|
||||
node._onAppend(name, data);
|
||||
};
|
||||
var insertData = function (name, data) {
|
||||
node._onInsertBefore(name, data);
|
||||
};
|
||||
templates.forEach(function (template) {
|
||||
menu.push({
|
||||
text: template.menu,
|
||||
className: (template.class || 'jsoneditor-type-object'),
|
||||
title: template.menu,
|
||||
click: (append ? appendData.bind(this, template.name, template.data) : insertData.bind(this, template.name, template.data))
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Show a contextmenu for this node
|
||||
* @param {HTMLElement} anchor Anchor element to attach the context menu to
|
||||
|
|
@ -3274,52 +3300,91 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
|
|||
// create append button (for last child node only)
|
||||
var childs = node.parent.childs;
|
||||
if (node == childs[childs.length - 1]) {
|
||||
items.push({
|
||||
text: 'Append',
|
||||
title: 'Append a new field with type \'auto\' after this field (Ctrl+Shift+Ins)',
|
||||
submenuTitle: 'Select the type of the field to be appended',
|
||||
className: 'jsoneditor-append',
|
||||
click: function () {
|
||||
node._onAppend('', '', 'auto');
|
||||
},
|
||||
submenu: [
|
||||
{
|
||||
var appendSubmenu = [
|
||||
{
|
||||
text: 'Auto',
|
||||
className: 'jsoneditor-type-auto',
|
||||
title: titles.auto,
|
||||
click: function () {
|
||||
node._onAppend('', '', 'auto');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Array',
|
||||
className: 'jsoneditor-type-array',
|
||||
title: titles.array,
|
||||
click: function () {
|
||||
node._onAppend('', []);
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Object',
|
||||
className: 'jsoneditor-type-object',
|
||||
title: titles.object,
|
||||
click: function () {
|
||||
node._onAppend('', {});
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'String',
|
||||
className: 'jsoneditor-type-string',
|
||||
title: titles.string,
|
||||
click: function () {
|
||||
node._onAppend('', '', 'string');
|
||||
}
|
||||
}
|
||||
];
|
||||
node.addTemplates(appendSubmenu, true);
|
||||
items.push({
|
||||
text: 'Append',
|
||||
title: 'Append a new field with type \'auto\' after this field (Ctrl+Shift+Ins)',
|
||||
submenuTitle: 'Select the type of the field to be appended',
|
||||
className: 'jsoneditor-append',
|
||||
click: function () {
|
||||
node._onAppend('', '', 'auto');
|
||||
},
|
||||
submenu: appendSubmenu
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
|
||||
// create insert button
|
||||
var insertSubmenu = [
|
||||
{
|
||||
text: 'Auto',
|
||||
className: 'jsoneditor-type-auto',
|
||||
title: titles.auto,
|
||||
click: function () {
|
||||
node._onAppend('', '', 'auto');
|
||||
node._onInsertBefore('', '', 'auto');
|
||||
}
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
text: 'Array',
|
||||
className: 'jsoneditor-type-array',
|
||||
title: titles.array,
|
||||
click: function () {
|
||||
node._onAppend('', []);
|
||||
node._onInsertBefore('', []);
|
||||
}
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
text: 'Object',
|
||||
className: 'jsoneditor-type-object',
|
||||
title: titles.object,
|
||||
click: function () {
|
||||
node._onAppend('', {});
|
||||
node._onInsertBefore('', {});
|
||||
}
|
||||
},
|
||||
{
|
||||
},
|
||||
{
|
||||
text: 'String',
|
||||
className: 'jsoneditor-type-string',
|
||||
title: titles.string,
|
||||
click: function () {
|
||||
node._onAppend('', '', 'string');
|
||||
node._onInsertBefore('', '', 'string');
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
// create insert button
|
||||
}
|
||||
];
|
||||
node.addTemplates(insertSubmenu, false);
|
||||
items.push({
|
||||
text: 'Insert',
|
||||
title: 'Insert a new field with type \'auto\' before this field (Ctrl+Ins)',
|
||||
|
|
@ -3328,40 +3393,7 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
|
|||
click: function () {
|
||||
node._onInsertBefore('', '', 'auto');
|
||||
},
|
||||
submenu: [
|
||||
{
|
||||
text: 'Auto',
|
||||
className: 'jsoneditor-type-auto',
|
||||
title: titles.auto,
|
||||
click: function () {
|
||||
node._onInsertBefore('', '', 'auto');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Array',
|
||||
className: 'jsoneditor-type-array',
|
||||
title: titles.array,
|
||||
click: function () {
|
||||
node._onInsertBefore('', []);
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Object',
|
||||
className: 'jsoneditor-type-object',
|
||||
title: titles.object,
|
||||
click: function () {
|
||||
node._onInsertBefore('', {});
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'String',
|
||||
className: 'jsoneditor-type-string',
|
||||
title: titles.string,
|
||||
click: function () {
|
||||
node._onInsertBefore('', '', 'string');
|
||||
}
|
||||
}
|
||||
]
|
||||
submenu: insertSubmenu
|
||||
});
|
||||
|
||||
if (this.editable.field) {
|
||||
|
|
|
|||
|
|
@ -134,50 +134,52 @@ function appendNodeFactory(Node) {
|
|||
AppendNode.prototype.showContextMenu = function (anchor, onClose) {
|
||||
var node = this;
|
||||
var titles = Node.TYPE_TITLES;
|
||||
var appendSubmenu = [
|
||||
{
|
||||
text: 'Auto',
|
||||
className: 'jsoneditor-type-auto',
|
||||
title: titles.auto,
|
||||
click: function () {
|
||||
node._onAppend('', '', 'auto');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Array',
|
||||
className: 'jsoneditor-type-array',
|
||||
title: titles.array,
|
||||
click: function () {
|
||||
node._onAppend('', []);
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'Object',
|
||||
className: 'jsoneditor-type-object',
|
||||
title: titles.object,
|
||||
click: function () {
|
||||
node._onAppend('', {});
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'String',
|
||||
className: 'jsoneditor-type-string',
|
||||
title: titles.string,
|
||||
click: function () {
|
||||
node._onAppend('', '', 'string');
|
||||
}
|
||||
}
|
||||
];
|
||||
node.addTemplates(appendSubmenu, true);
|
||||
var items = [
|
||||
// create append button
|
||||
{
|
||||
'text': 'Append',
|
||||
'text': 'Append!',
|
||||
'title': 'Append a new field with type \'auto\' (Ctrl+Shift+Ins)',
|
||||
'submenuTitle': 'Select the type of the field to be appended',
|
||||
'className': 'jsoneditor-insert',
|
||||
'click': function () {
|
||||
node._onAppend('', '', 'auto');
|
||||
},
|
||||
'submenu': [
|
||||
{
|
||||
'text': 'Auto',
|
||||
'className': 'jsoneditor-type-auto',
|
||||
'title': titles.auto,
|
||||
'click': function () {
|
||||
node._onAppend('', '', 'auto');
|
||||
}
|
||||
},
|
||||
{
|
||||
'text': 'Array',
|
||||
'className': 'jsoneditor-type-array',
|
||||
'title': titles.array,
|
||||
'click': function () {
|
||||
node._onAppend('', []);
|
||||
}
|
||||
},
|
||||
{
|
||||
'text': 'Object',
|
||||
'className': 'jsoneditor-type-object',
|
||||
'title': titles.object,
|
||||
'click': function () {
|
||||
node._onAppend('', {});
|
||||
}
|
||||
},
|
||||
{
|
||||
'text': 'String',
|
||||
'className': 'jsoneditor-type-string',
|
||||
'title': titles.string,
|
||||
'click': function () {
|
||||
node._onAppend('', '', 'string');
|
||||
}
|
||||
}
|
||||
]
|
||||
'submenu': appendSubmenu
|
||||
}
|
||||
];
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue