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
commit
13bb4d7bb1
|
|
@ -1,4 +1,5 @@
|
|||
.idea
|
||||
*.iml
|
||||
.vscode
|
||||
build
|
||||
downloads
|
||||
|
|
|
|||
|
|
@ -2,6 +2,11 @@
|
|||
|
||||
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
|
||||
|
||||
|
|
|
|||
23
docs/api.md
23
docs/api.md
|
|
@ -245,6 +245,29 @@ Constructs a new JSONEditor.
|
|||
}
|
||||
```
|
||||
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`
|
||||
|
||||
|
|
|
|||
|
|
@ -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": '"',
|
||||
"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>
|
||||
|
|
@ -68,6 +68,13 @@ var util = require('./util');
|
|||
* overlay and display the modals in a
|
||||
* centered location.
|
||||
* 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
|
||||
*/
|
||||
function JSONEditor (container, options, json) {
|
||||
|
|
@ -148,7 +155,7 @@ JSONEditor.VALID_OPTIONS = [
|
|||
'ajv', 'schema', 'schemaRefs','templates',
|
||||
'ace', 'theme','autocomplete',
|
||||
'onChange', 'onChangeJSON', 'onChangeText',
|
||||
'onEditable', 'onError', 'onModeChange', 'onSelectionChange', 'onTextSelectionChange',
|
||||
'onEditable', 'onError', 'onEvent', 'onModeChange', 'onSelectionChange', 'onTextSelectionChange',
|
||||
'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation',
|
||||
'sortObjectKeys', 'navigationBar', 'statusBar', 'languages', 'language'
|
||||
];
|
||||
|
|
|
|||
|
|
@ -95,7 +95,8 @@ Node.prototype._updateEditability = function () {
|
|||
|
||||
/**
|
||||
* 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 () {
|
||||
var node = this;
|
||||
|
|
@ -2684,6 +2685,11 @@ Node.prototype.onEvent = function (event) {
|
|||
node = this,
|
||||
expandable = this._hasChilds();
|
||||
|
||||
|
||||
if (typeof this.editor.options.onEvent === 'function') {
|
||||
this._onEvent(event);
|
||||
}
|
||||
|
||||
// check if mouse is on menu or on dragarea.
|
||||
// If so, highlight current row and its childs
|
||||
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
|
||||
* @param {Event} event
|
||||
|
|
|
|||
|
|
@ -50,6 +50,9 @@ var treemode = {};
|
|||
* characters are escaped.
|
||||
* false by default.
|
||||
* {Object} schema A JSON Schema for validation
|
||||
* {function} onEvent Function triggered
|
||||
* when an event occurs
|
||||
* in a field or value.
|
||||
* @private
|
||||
*/
|
||||
treemode.create = function (container, options) {
|
||||
|
|
@ -134,7 +137,8 @@ treemode._setOptions = function (options) {
|
|||
schemaRefs: null,
|
||||
autocomplete: null,
|
||||
navigationBar : true,
|
||||
onSelectionChange: null
|
||||
onSelectionChange: null,
|
||||
onEvent: null
|
||||
};
|
||||
|
||||
// copy all options
|
||||
|
|
|
|||
Loading…
Reference in New Issue