Updated history and example. Fixed bottom margin of submenu

This commit is contained in:
jos 2017-05-07 15:32:31 +02:00
parent 913af51aab
commit 0ddc9407b0
3 changed files with 37 additions and 18 deletions

View File

@ -3,6 +3,11 @@
https://github.com/josdejong/jsoneditor https://github.com/josdejong/jsoneditor
## not yet released, version 5.7.0
- Implemented support for template items. Thanks @israelito3000.
## 2017-04-15, version 5.6.0 ## 2017-04-15, version 5.6.0
- Implemented readonly option for modes `text` and `code.` - Implemented readonly option for modes `text` and `code.`

View File

@ -1,7 +1,7 @@
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<title>JSONEditor | JSON schema validation</title> <title>JSONEditor | Item templates</title>
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css"> <link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script> <script src="../dist/jsoneditor.js"></script>
@ -19,33 +19,42 @@
</style> </style>
</head> </head>
<body> <body>
<h1>JSON schema validation</h1> <h1>Item templates</h1>
<p> <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. Using item templates, the options in the context menu under "insert" and "append" can be extended with extra options, containing a domain specific template like a "Person", "Contact", "Order", "Address", etc.
</p>
<p>
See <a href="http://json-schema.org/" target="_blank">http://json-schema.org/</a> for more information.
</p> </p>
<div id="jsoneditor"></div> <div id="jsoneditor"></div>
<script> <script>
var json = { var json = [
firstName: 'John', {
lastName: 'Doe', firstName: 'John',
gender: null, lastName: 'Doe',
age: 28 age: 28
}; }
];
var options = { var options = {
templates: [ templates: [
{ {
"menu": "Special Node", menu: 'Person',
"name": "SpecialNode", name: 'PersonTemplate',
"data": { data: {
"field1": "value1", 'firstName': 'John',
"field2": "value2" 'lastName': 'Do',
'age': 28
}
},
{
menu: 'Address',
name: 'AddressTemplate',
data: {
'street': "",
'city': "",
'state': "",
'ZIP code': ""
} }
} }
] ]
@ -54,6 +63,7 @@
// create the editor // create the editor
var container = document.getElementById('jsoneditor'); var container = document.getElementById('jsoneditor');
var editor = new JSONEditor(container, options, json); var editor = new JSONEditor(container, options, json);
editor.expandAll();
</script> </script>
</body> </body>
</html> </html>

View File

@ -321,7 +321,11 @@ ContextMenu.prototype._onExpandItem = function (domItem) {
var height = ul.clientHeight; // force a reflow in Firefox var height = ul.clientHeight; // force a reflow in Firefox
setTimeout(function () { setTimeout(function () {
if (me.expandedItem == domItem) { if (me.expandedItem == domItem) {
ul.style.height = (ul.childNodes.length * 24) + 'px'; var childsHeight = 0;
for (var i = 0; i < ul.childNodes.length; i++) {
childsHeight += ul.childNodes[i].clientHeight;
}
ul.style.height = childsHeight + 'px';
ul.style.padding = '5px 10px'; ul.style.padding = '5px 10px';
} }
}, 0); }, 0);