Changes due to PR.
This commit is contained in:
parent
ecd9bf021f
commit
9de11c04cd
|
@ -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
|
||||||
|
|
20
docs/api.md
20
docs/api.md
|
@ -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) {
|
||||||
...
|
...
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
|
@ -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": '"',
|
||||||
|
// "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>
|
|
@ -56,12 +56,12 @@ 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'
|
||||||
* @param {Object | undefined} json JSON object
|
* @param {Object | undefined} json JSON object
|
||||||
*/
|
*/
|
||||||
function JSONEditor (container, options, json) {
|
function JSONEditor (container, options, json) {
|
||||||
|
@ -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) {
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue