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

Add API functionality to extend event behaviour.

This commit is contained in:
Cristina 2018-07-02 13:13:02 +02:00
parent 8e619dea2f
commit ecd9bf021f
8 changed files with 136 additions and 7 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: `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 ## 2018-06-27, version 5.18.0

19
docs/api.md
View File

@ -226,6 +226,25 @@ Constructs a new JSONEditor.
} }
``` ```
Only applicable when `mode` is 'tree'. 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` - `{string} language`

86
examples/16_extend_event_api.html Normal file
View File

@ -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": '&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>

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "jsoneditor", "name": "jsoneditor",
"version": "5.18.0", "version": "5.19.0",
"main": "./index", "main": "./index",
"description": "A web-based tool to view, edit, format, and validate JSON", "description": "A web-based tool to view, edit, format, and validate JSON",
"tags": [ "tags": [

12
src/js/JSONEditor.js
View File

@ -55,6 +55,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} extendEvent Triggered after onEvent
* to extend event
* behaviour.
* 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) {
@ -93,8 +100,9 @@ function JSONEditor (container, options, json) {
'ajv', 'schema', 'schemaRefs','templates', 'ajv', 'schema', 'schemaRefs','templates',
'ace', 'theme','autocomplete', 'ace', 'theme','autocomplete',
'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'
]; ];
Object.keys(options).forEach(function (option) { Object.keys(options).forEach(function (option) {

6
src/js/Node.js
View File

@ -2370,8 +2370,9 @@ 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) { Node.prototype.onEvent = function (event, extendEvent) {
var type = event.type, var type = event.type,
target = event.target || event.srcElement, target = event.target || event.srcElement,
dom = this.dom, dom = this.dom,
@ -2550,6 +2551,9 @@ Node.prototype.onEvent = function (event) {
if (type == 'keydown') { if (type == 'keydown') {
this.onKeyDown(event); this.onKeyDown(event);
} }
// Execute event extension
if (extendEvent) extendEvent(this, event);
}; };
/** /**

12
src/js/treemode.js
View File

@ -35,6 +35,8 @@ 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
* after Node event.
* @private * @private
*/ */
treemode.create = function (container, options) { treemode.create = function (container, options) {
@ -63,6 +65,9 @@ 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();
}; };
@ -119,7 +124,8 @@ treemode._setOptions = function (options) {
schemaRefs: null, schemaRefs: null,
autocomplete: null, autocomplete: null,
navigationBar : true, navigationBar : true,
onSelectionChange: null onSelectionChange: null,
extendEvent: null
}; };
// copy all options // copy all options
@ -889,13 +895,13 @@ treemode._onEvent = function (event) {
} }
if (node) { if (node) {
node.onEvent(event); node.onEvent(event, this.options.extendEvent);
} }
}; };
/** /**
* Update TreePath components * 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 * @private
*/ */
treemode._updateTreePath = function (pathNodes) { treemode._updateTreePath = function (pathNodes) {