diff --git a/.gitignore b/.gitignore index 363c86a..4157ddb 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ .idea +*.iml .vscode build downloads diff --git a/HISTORY.md b/HISTORY.md index 7319dfb..10e7ddc 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -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 diff --git a/docs/api.md b/docs/api.md index f4fe59d..48680c5 100644 --- a/docs/api.md +++ b/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` diff --git a/examples/16_extend_event_api.html b/examples/16_extend_event_api.html new file mode 100644 index 0000000..be56a8e --- /dev/null +++ b/examples/16_extend_event_api.html @@ -0,0 +1,86 @@ + + + + + + + + + + + + +

+ When clicking on a field or leaf, a log message will be shown in console. +

+ +
+
+
+ + + + diff --git a/package.json b/package.json index 67210dc..307ebd4 100644 --- a/package.json +++ b/package.json @@ -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": [ diff --git a/src/js/JSONEditor.js b/src/js/JSONEditor.js index f6d15b6..c01df3d 100644 --- a/src/js/JSONEditor.js +++ b/src/js/JSONEditor.js @@ -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) { diff --git a/src/js/Node.js b/src/js/Node.js index fc60904..968db58 100644 --- a/src/js/Node.js +++ b/src/js/Node.js @@ -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); }; /** diff --git a/src/js/treemode.js b/src/js/treemode.js index 50488bf..043d92f 100644 --- a/src/js/treemode.js +++ b/src/js/treemode.js @@ -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} pathNodes list of nodes in path from root to selection + * @param {Array} pathNodes list of nodes in path from root to selection * @private */ treemode._updateTreePath = function (pathNodes) {