StardewValley
/
jsoneditor
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use extended path with type for onEvent

This commit is contained in:
Cristina 2018-07-26 01:48:03 +02:00
parent 9de11c04cd
commit ef74ede75e
4 changed files with 79 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
docs/api.md
View File

@ -233,15 +233,16 @@ Constructs a new JSONEditor.
a JSON field or value.
In case of field event, node information will be
`{field: string, path: string[]}`.
`{field: String, path: [{name: String, type: String}]}`.
In case of value event, node information will be
`{field: string, path: string[], value: string}`
`{field: String, path: [{name: String, type: String}], value: String}`
signature should be:
```js
/**
* @param {Node} the Node where event has been triggered
identified by {field: string, path: string[] [, value: string]}`
identified by {field: String, path: [{name: String, type: String}] [,
value: String]}`
* @param {event} the event fired
*/
function onEvent(node, event) {

86
examples/16_extend_event_api.html
View File

@ -1,86 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
<script src="../dist/jsoneditor.js"></script>
<style type="text/css">
body {
font: 10.5pt arial;
color: #4d4d4d;
line-height: 150%;
width: 500px;
padding-left: 40px;
}
code {
background-color: #f5f5f5;
}
#jsoneditor {
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<p>
When clicking on a field or leaf, a log message will be shown in console.
</p>
<form>
<div id="jsoneditor"></div>
</form>
<script>
var container, options, json, editor;
container = document.getElementById('jsoneditor');
options = {
mode: 'tree',
modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
onError: function (err) {
alert(err.toString());
},
extendEvent: function(node, event) {
if (event.type === 'click') {
const isField = checkField(node, event.target);
const isLeafValue = checkLeaf(node, event.target);
if (!isField && !isLeafValue) return;
console.log('click on ' + ((isField) ? 'field' : 'leaf value') +
' under path: ' + node.getPath());
}
function checkField(node, element) {
return node.parent && element === node.dom.field;
}
function checkLeaf(node, element) {
return (!node._hasChilds() && element === node.dom.value);
}
}
};
json = {
"array": [1, 2, [3,4,5]],
"boolean": true,
"htmlcode": '&quot;',
"escaped_unicode": '\\u20b9',
"unicode": '\u20b9,\uD83D\uDCA9',
"return": '\n',
"null": null,
"number": 123,
"object": {"a": "b", "c": "d"},
"string": "Hello World",
"url": "http://jsoneditoronline.org"
};
window.editor = new JSONEditor(container, options, json);
console.log('json', json);
console.log('string', JSON.stringify(json));
</script>
</body>
</html>

66
examples/16_on_event_api.html
View File

@ -44,37 +44,69 @@
options = {
mode: 'tree',
modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
name: "jsonContent",
onError: function (err) {
alert(err.toString());
},
onEvent: function(node, event) {
if (event.type === 'click') {
var message = 'click on <' + node.field +
'> under path <' + node.path + '>';
'> under path <' + printPath(node.path) +
'> with pretty path: <' + prettyPrintPath(node.path) + '>';
if (node.value) message += ' with value <' + node.value + '>';
console.log(message);
}
function prettyPrintPath(path) {
var str = '';
for (var i=0; i<path.length; i++) {
var element = path[i];
if (element.name === undefined) continue;
if (i>0 && (path[i-1].type === 'array')) {
str += '[' + element.name + ']'
} else {
str += (str.length > 0) ? ','+element.name : element.name;
}
}
return str;
}
function printPath(path) {
var str = '';
for (var i=0; i<path.length; i++) {
var element = path[i];
str += '[' + element.name + ',' + element.type + ']';
}
return str;
}
}
};
json = {
"array": [1, 2, [3,4,5]]
};
//json = 1;
// json = {
// "array": [1, 2, [3,4,5]],
// "boolean": true,
// "htmlcode": '&quot;',
// "escaped_unicode": '\\u20b9',
// "unicode": '\u20b9,\uD83D\uDCA9',
// "return": '\n',
// "null": null,
// "number": 123,
// "object": {"a": "b", "c": "d"},
// "string": "Hello World",
// "url": "http://jsoneditoronline.org"
// };
//json = "zero";
//json = ["zero", "one", "two", [3,4,5,6]];
//json = {"zero": 0}
//json = {
// "myarray": [1, 2, [3, 4, 5]]
//};
json = {
"array": [1, 2, [3,4,5]],
"boolean": true,
"htmlcode": '&quot;',
"escaped_unicode": '\\u20b9',
"unicode": '\u20b9,\uD83D\uDCA9',
"return": '\n',
"null": null,
"number": 123,
"object": {"a": "b", "c": "d", "e": [1, 2, 3]},
"string": "Hello World",
"url": "http://jsoneditoronline.org",
"[0]": "zero"
};
window.editor = new JSONEditor(container, options, json);
console.log('json', json);

33
src/js/Node.js
View File

@ -105,6 +105,27 @@ Node.prototype.getPath = function () {
return path;
};
/**
* Get the path of this node with the type for each element in path.
* @return {[{name: String, type: String}]} Array containing the path to this
* node including, for each element, its type
*/
Node.prototype.getExtendedPath = function () {
var node = this;
var path = [];
while (node) {
var name = node.getName();
// note: name is undefined if it is an array
var element = {
name: name,
type: node.type
};
path.unshift(element);
node = node.parent;
}
return path;
};
/**
* Get node serializable name
* @returns {String|Number}
@ -2559,20 +2580,18 @@ Node.prototype.onEvent = function (event) {
/**
* Trigger external onEvent provided in options if node is a JSON field or
* value.
* Information provided depends on the element:
* - If event occurs in a field, {field: string, path: string[]}
* - If event occurs in a value, {field: string, path: string[], value:
* string}
* Information provided depends on the element, value is only included if
* event occurs in a JSON value:
* {field: String, path: [{name: String, type: String}] [, value: String]}
* @param {Event} event
* @private
*/
Node.prototype._onEvent = function (event) {
var element = event.target;
if (this.parent &&
(element === this.dom.field || element === this.dom.value)) {
if (element === this.dom.field || element === this.dom.value) {
var info = {
field: this.getField(),
path: this.getPath()
path: this.getExtendedPath()
};
// For leaf values, include value
if (!this._hasChilds() &&element === this.dom.value) {