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

Merge branch 'extendEvent' of https://github.com/cristinabarrantes/jsoneditor into cristinabarrantes-extendEvent 

# Conflicts:
#	package.json
#	src/js/JSONEditor.js
This commit is contained in:
jos 2018-08-13 20:53:03 +02:00
parent c7a29d74c5 bb699e1473
commit 13bb4d7bb1
7 changed files with 185 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,4 +1,5 @@
.idea .idea
*.iml
.vscode .vscode
build build
downloads downloads

5
HISTORY.md
View File

@ -2,6 +2,11 @@
https://github.com/josdejong/jsoneditor https://github.com/josdejong/jsoneditor
## 2018-07-02, version 5.19.0
- Implemented API: `onEvent` triggered when an event occurs in a JSON field or
value.
## 2018-08-12, version 5.21.0 ## 2018-08-12, version 5.21.0

23
docs/api.md
View File

@ -245,6 +245,29 @@ Constructs a new JSONEditor.
} }
``` ```
Only applicable when `mode` is 'tree'. Only applicable when `mode` is 'tree'.
- `{function} onEvent`
Set a callback function that will be triggered when an event will occur in
a JSON field or value.
In case of field event, node information will be
`{field: string, path: {string|number}[]}`.
In case of value event, node information will be
`{field: string, path: {string|number}[], value: string}`
signature should be:
```js
/**
* @param {Node} the Node where event has been triggered
identified by {field: string, path: {string|number}[] [, value: string]}`
* @param {event} the event fired
*/
function onEvent(node, event) {
...
}
```
Only applicable when `mode` is 'form', 'tree' or 'view'.
- `{string} language` - `{string} language`

112
examples/17_on_event_api.html Normal file
View File

@ -0,0 +1,112 @@
<!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 JSON field or value, a log message will be shown in
console.
</p>
<form>
<div id="jsoneditor"></div>
</form>
<script>
var container, options, json;
container = document.getElementById('jsoneditor');
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 +
'> 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 (typeof element === 'number') {
str += '[' + element + ']'
} else {
if (str.length > 0) str += ',';
str += element;
}
}
return str;
}
}
};
// json = 1;
// json = "zero";
// json = ["zero", "one", "two", [3,4,5,6]];
// json = ["zero"];
// json = {"0": "zero"};
// json = {"[0]": "zero"};
// 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);
console.log('string', JSON.stringify(json));
</script>
</body>
</html>

9
src/js/JSONEditor.js
View File

@ -68,6 +68,13 @@ var util = require('./util');
* overlay and display the modals in a * overlay and display the modals in a
* centered location. * centered location.
* Defaults to document.body * Defaults to document.body
* 'text' and 'code'
* {function} onEvent Callback method, triggered
* when an event occurs in
* a JSON field or value.
* Only applicable for
* modes 'form', 'tree' and
* 'view'
* @param {Object | undefined} json JSON object * @param {Object | undefined} json JSON object
*/ */
function JSONEditor (container, options, json) { function JSONEditor (container, options, json) {
@ -148,7 +155,7 @@ JSONEditor.VALID_OPTIONS = [
'ajv', 'schema', 'schemaRefs','templates', 'ajv', 'schema', 'schemaRefs','templates',
'ace', 'theme','autocomplete', 'ace', 'theme','autocomplete',
'onChange', 'onChangeJSON', 'onChangeText', 'onChange', 'onChangeJSON', 'onChangeText',
'onEditable', 'onError', 'onModeChange', 'onSelectionChange', 'onTextSelectionChange', 'onEditable', 'onError', 'onEvent', 'onModeChange', 'onSelectionChange', 'onTextSelectionChange',
'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation', 'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation',
'sortObjectKeys', 'navigationBar', 'statusBar', 'languages', 'language' 'sortObjectKeys', 'navigationBar', 'statusBar', 'languages', 'language'
]; ];

32
src/js/Node.js
View File

@ -95,7 +95,8 @@ Node.prototype._updateEditability = function () {
/** /**
* Get the path of this node * Get the path of this node
* @return {String[]} Array containing the path to this node * @return {{string|number}[]} Array containing the path to this node.
* Element is a number if is the index of an array, a string otherwise.
*/ */
Node.prototype.getPath = function () { Node.prototype.getPath = function () {
var node = this; var node = this;
@ -2684,6 +2685,11 @@ Node.prototype.onEvent = function (event) {
node = this, node = this,
expandable = this._hasChilds(); expandable = this._hasChilds();
if (typeof this.editor.options.onEvent === 'function') {
this._onEvent(event);
}
// check if mouse is on menu or on dragarea. // check if mouse is on menu or on dragarea.
// If so, highlight current row and its childs // If so, highlight current row and its childs
if (target == dom.drag || target == dom.menu) { if (target == dom.drag || target == dom.menu) {
@ -2858,6 +2864,30 @@ 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, value is only included if
* event occurs in a JSON value:
* {field: string, path: {string|number}[] [, value: string]}
* @param {Event} event
* @private
*/
Node.prototype._onEvent = function (event) {
var element = event.target;
if (element === this.dom.field || element === this.dom.value) {
var info = {
field: this.getField(),
path: this.getPath()
};
// For leaf values, include value
if (!this._hasChilds() &&element === this.dom.value) {
info.value = this.getValue();
}
this.editor.options.onEvent(info, event);
}
};
/** /**
* Key down event handler * Key down event handler
* @param {Event} event * @param {Event} event

6
src/js/treemode.js
View File

@ -50,6 +50,9 @@ var treemode = {};
* characters are escaped. * characters are escaped.
* false by default. * false by default.
* {Object} schema A JSON Schema for validation * {Object} schema A JSON Schema for validation
* {function} onEvent Function triggered
* when an event occurs
* in a field or value.
* @private * @private
*/ */
treemode.create = function (container, options) { treemode.create = function (container, options) {
@ -134,7 +137,8 @@ treemode._setOptions = function (options) {
schemaRefs: null, schemaRefs: null,
autocomplete: null, autocomplete: null,
navigationBar : true, navigationBar : true,
onSelectionChange: null onSelectionChange: null,
onEvent: null
}; };
// copy all options // copy all options