Add API functionality to extend event behaviour.
This commit is contained in:
Cristina
parent
8e619dea2f
commit
ecd9bf021f
|
|
@ -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: `extendEvent` to let extend behaviour when an event is
|
||||
fired in a node using internal structures and code.
|
||||
|
||||
|
||||
## 2018-06-27, version 5.18.0
|
||||
|
||||
|
|
|
|||
19
docs/api.md
19
docs/api.md
|
|
@ -226,6 +226,25 @@ Constructs a new JSONEditor.
|
|||
}
|
||||
```
|
||||
Only applicable when `mode` is 'tree'.
|
||||
|
||||
- `{function} extendEvent`
|
||||
|
||||
Set a function that will be triggered after node event. This is added at the
|
||||
end of a node event execution, not replaced. It means that actions for that
|
||||
event will be executed and after that, if this function is provided, this code
|
||||
will be executed.
|
||||
|
||||
signature should be:
|
||||
```js
|
||||
/**
|
||||
* @param {Node} the Node where event has been triggered
|
||||
* @param {event} the event triggered
|
||||
*/
|
||||
function extendEvent(node, event) {
|
||||
...
|
||||
}
|
||||
```
|
||||
Only applicable when `mode` is 'form', 'tree' or 'view'.
|
||||
|
||||
- `{string} language`
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,86 @@
|
|||
<!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": '"',
|
||||
"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>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "jsoneditor",
|
||||
"version": "5.18.0",
|
||||
"version": "5.19.0",
|
||||
"main": "./index",
|
||||
"description": "A web-based tool to view, edit, format, and validate JSON",
|
||||
"tags": [
|
||||
|
|
|
|||
|
|
@ -55,6 +55,13 @@ var util = require('./util');
|
|||
* overlay and display the modals in a
|
||||
* centered location.
|
||||
* Defaults to document.body
|
||||
* 'text' and 'code'
|
||||
* {function} extendEvent Triggered after onEvent
|
||||
* to extend event
|
||||
* behaviour.
|
||||
* Only applicable for
|
||||
* modes 'form', 'tree' and
|
||||
* 'view'
|
||||
* @param {Object | undefined} json JSON object
|
||||
*/
|
||||
function JSONEditor (container, options, json) {
|
||||
|
|
@ -93,8 +100,9 @@ function JSONEditor (container, options, json) {
|
|||
'ajv', 'schema', 'schemaRefs','templates',
|
||||
'ace', 'theme','autocomplete',
|
||||
'onChange', 'onEditable', 'onError', 'onModeChange', 'onSelectionChange', 'onTextSelectionChange',
|
||||
'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation',
|
||||
'sortObjectKeys', 'navigationBar', 'statusBar', 'languages', 'language'
|
||||
'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation',
|
||||
'sortObjectKeys', 'navigationBar', 'statusBar', 'languages', 'language',
|
||||
'extendEvent'
|
||||
];
|
||||
|
||||
Object.keys(options).forEach(function (option) {
|
||||
|
|
|
|||
|
|
@ -2370,8 +2370,9 @@ Node.prototype._createDomTree = function () {
|
|||
/**
|
||||
* Handle an event. The event is caught centrally by the editor
|
||||
* @param {Event} event
|
||||
* @param {extendEvent} function with code for extend event behaviour.
|
||||
*/
|
||||
Node.prototype.onEvent = function (event) {
|
||||
Node.prototype.onEvent = function (event, extendEvent) {
|
||||
var type = event.type,
|
||||
target = event.target || event.srcElement,
|
||||
dom = this.dom,
|
||||
|
|
@ -2550,6 +2551,9 @@ Node.prototype.onEvent = function (event) {
|
|||
if (type == 'keydown') {
|
||||
this.onKeyDown(event);
|
||||
}
|
||||
|
||||
// Execute event extension
|
||||
if (extendEvent) extendEvent(this, event);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -35,6 +35,8 @@ var treemode = {};
|
|||
* characters are escaped.
|
||||
* false by default.
|
||||
* {Object} schema A JSON Schema for validation
|
||||
* {function} extendEvent Function triggered
|
||||
* after Node event.
|
||||
* @private
|
||||
*/
|
||||
treemode.create = function (container, options) {
|
||||
|
|
@ -63,6 +65,9 @@ treemode.create = function (container, options) {
|
|||
this.history = new History(this);
|
||||
}
|
||||
|
||||
if (options.extendEvent)
|
||||
this.extendEvent = this.options.extendEvent;
|
||||
|
||||
this._createFrame();
|
||||
this._createTable();
|
||||
};
|
||||
|
|
@ -119,7 +124,8 @@ treemode._setOptions = function (options) {
|
|||
schemaRefs: null,
|
||||
autocomplete: null,
|
||||
navigationBar : true,
|
||||
onSelectionChange: null
|
||||
onSelectionChange: null,
|
||||
extendEvent: null
|
||||
};
|
||||
|
||||
// copy all options
|
||||
|
|
@ -889,13 +895,13 @@ treemode._onEvent = function (event) {
|
|||
}
|
||||
|
||||
if (node) {
|
||||
node.onEvent(event);
|
||||
node.onEvent(event, this.options.extendEvent);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Update TreePath components
|
||||
* @param {Array<Node>} pathNodes list of nodes in path from root to selection
|
||||
* @param {Array<Node>} pathNodes list of nodes in path from root to selection
|
||||
* @private
|
||||
*/
|
||||
treemode._updateTreePath = function (pathNodes) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue