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

Changes due to PR.

This commit is contained in:
Cristina 2018-07-16 16:52:41 +02:00
parent ecd9bf021f
commit 9de11c04cd
6 changed files with 140 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
HISTORY.md
View File

@ -4,8 +4,8 @@ https://github.com/josdejong/jsoneditor
## 2018-07-02, version 5.19.0 ## 2018-07-02, version 5.19.0
- Implemented API: `extendEvent` to let extend behaviour when an event is - Implemented API: `onEvent` triggered when an event occurs in a JSON field or
fired in a node using internal structures and code. value.
## 2018-06-27, version 5.18.0 ## 2018-06-27, version 5.18.0

18
docs/api.md
View File

@ -227,20 +227,24 @@ Constructs a new JSONEditor.
``` ```
Only applicable when `mode` is 'tree'. Only applicable when `mode` is 'tree'.
- `{function} extendEvent` - `{function} onEvent`
Set a function that will be triggered after node event. This is added at the Set a callback function that will be triggered when an event will occur in
end of a node event execution, not replaced. It means that actions for that a JSON field or value.
event will be executed and after that, if this function is provided, this code
will be executed. In case of field event, node information will be
`{field: string, path: string[]}`.
In case of value event, node information will be
`{field: string, path: string[], value: string}`
signature should be: signature should be:
```js ```js
/** /**
* @param {Node} the Node where event has been triggered * @param {Node} the Node where event has been triggered
* @param {event} the event triggered identified by {field: string, path: string[] [, value: string]}`
* @param {event} the event fired
*/ */
function extendEvent(node, event) { function onEvent(node, event) {
... ...
} }
``` ```

84
examples/16_on_event_api.html Normal file
View File

@ -0,0 +1,84 @@
<!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
onError: function (err) {
alert(err.toString());
},
onEvent: function(node, event) {
if (event.type === 'click') {
var message = 'click on <' + node.field +
'> under path <' + node.path + '>';
if (node.value) message += ' with value <' + node.value + '>';
console.log(message);
}
}
};
json = {
"array": [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"},
// "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>

8
src/js/JSONEditor.js
View File

@ -56,9 +56,9 @@ var util = require('./util');
* centered location. * centered location.
* Defaults to document.body * Defaults to document.body
* 'text' and 'code' * 'text' and 'code'
* {function} extendEvent Triggered after onEvent * {function} onEvent Callback method, triggered
* to extend event * when an event occurs in
* behaviour. * a JSON field or value.
* Only applicable for * Only applicable for
* modes 'form', 'tree' and * modes 'form', 'tree' and
* 'view' * 'view'
@ -102,7 +102,7 @@ function JSONEditor (container, options, json) {
'onChange', 'onEditable', 'onError', 'onModeChange', 'onSelectionChange', 'onTextSelectionChange', 'onChange', 'onEditable', 'onError', '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',
'extendEvent' 'onEvent'
]; ];
Object.keys(options).forEach(function (option) { Object.keys(options).forEach(function (option) {

34
src/js/Node.js
View File

@ -2370,9 +2370,8 @@ Node.prototype._createDomTree = function () {
/** /**
* Handle an event. The event is caught centrally by the editor * Handle an event. The event is caught centrally by the editor
* @param {Event} event * @param {Event} event
* @param {extendEvent} function with code for extend event behaviour.
*/ */
Node.prototype.onEvent = function (event, extendEvent) { Node.prototype.onEvent = function (event) {
var type = event.type, var type = event.type,
target = event.target || event.srcElement, target = event.target || event.srcElement,
dom = this.dom, dom = this.dom,
@ -2552,8 +2551,35 @@ Node.prototype.onEvent = function (event, extendEvent) {
this.onKeyDown(event); this.onKeyDown(event);
} }
// Execute event extension if (typeof this.editor.options.onEvent === 'function') {
if (extendEvent) extendEvent(this, event); this._onEvent(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}
* @param {Event} event
* @private
*/
Node.prototype._onEvent = function (event) {
var element = event.target;
if (this.parent &&
(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);
}
}; };
/** /**

12
src/js/treemode.js
View File

@ -35,8 +35,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} extendEvent Function triggered * {function} onEvent Function triggered
* after Node event. * when an event occurs
* in a field or value.
* @private * @private
*/ */
treemode.create = function (container, options) { treemode.create = function (container, options) {
@ -65,9 +66,6 @@ treemode.create = function (container, options) {
this.history = new History(this); this.history = new History(this);
} }
if (options.extendEvent)
this.extendEvent = this.options.extendEvent;
this._createFrame(); this._createFrame();
this._createTable(); this._createTable();
}; };
@ -125,7 +123,7 @@ treemode._setOptions = function (options) {
autocomplete: null, autocomplete: null,
navigationBar : true, navigationBar : true,
onSelectionChange: null, onSelectionChange: null,
extendEvent: null onEvent: null
}; };
// copy all options // copy all options
@ -895,7 +893,7 @@ treemode._onEvent = function (event) {
} }
if (node) { if (node) {
node.onEvent(event, this.options.extendEvent); node.onEvent(event);
} }
}; };