diff --git a/HISTORY.md b/HISTORY.md index 10e7ddc..0a3ff42 100644 --- a/HISTORY.md +++ b/HISTORY.md @@ -4,8 +4,8 @@ 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. +- Implemented API: `onEvent` triggered when an event occurs in a JSON field or +value. ## 2018-06-27, version 5.18.0 diff --git a/docs/api.md b/docs/api.md index 48680c5..4d4aefc 100644 --- a/docs/api.md +++ b/docs/api.md @@ -227,20 +227,24 @@ Constructs a new JSONEditor. ``` 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 - 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. + 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[]}`. + In case of value event, node information will be + `{field: string, path: string[], value: string}` signature should be: ```js /** - * @param {Node} the Node where event has been triggered - * @param {event} the event triggered + * @param {Node} the Node where event has been triggered + identified by {field: string, path: string[] [, value: string]}` + * @param {event} the event fired */ - function extendEvent(node, event) { + function onEvent(node, event) { ... } ``` diff --git a/examples/16_on_event_api.html b/examples/16_on_event_api.html new file mode 100644 index 0000000..f526200 --- /dev/null +++ b/examples/16_on_event_api.html @@ -0,0 +1,84 @@ + + + + + + + + + + + + +

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

+ +
+
+
+ + + + diff --git a/src/js/JSONEditor.js b/src/js/JSONEditor.js index c01df3d..9b41f4d 100644 --- a/src/js/JSONEditor.js +++ b/src/js/JSONEditor.js @@ -56,12 +56,12 @@ var util = require('./util'); * 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' + * {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) { @@ -102,7 +102,7 @@ function JSONEditor (container, options, json) { 'onChange', 'onEditable', 'onError', 'onModeChange', 'onSelectionChange', 'onTextSelectionChange', 'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation', 'sortObjectKeys', 'navigationBar', 'statusBar', 'languages', 'language', - 'extendEvent' + 'onEvent' ]; Object.keys(options).forEach(function (option) { diff --git a/src/js/Node.js b/src/js/Node.js index 968db58..c2dee6f 100644 --- a/src/js/Node.js +++ b/src/js/Node.js @@ -2370,9 +2370,8 @@ 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, extendEvent) { +Node.prototype.onEvent = function (event) { var type = event.type, target = event.target || event.srcElement, dom = this.dom, @@ -2552,8 +2551,35 @@ Node.prototype.onEvent = function (event, extendEvent) { this.onKeyDown(event); } - // Execute event extension - if (extendEvent) extendEvent(this, event); + if (typeof this.editor.options.onEvent === 'function') { + 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); + } }; /** diff --git a/src/js/treemode.js b/src/js/treemode.js index 043d92f..378961c 100644 --- a/src/js/treemode.js +++ b/src/js/treemode.js @@ -35,8 +35,9 @@ var treemode = {}; * characters are escaped. * false by default. * {Object} schema A JSON Schema for validation - * {function} extendEvent Function triggered - * after Node event. + * {function} onEvent Function triggered + * when an event occurs + * in a field or value. * @private */ treemode.create = function (container, options) { @@ -65,9 +66,6 @@ treemode.create = function (container, options) { this.history = new History(this); } - if (options.extendEvent) - this.extendEvent = this.options.extendEvent; - this._createFrame(); this._createTable(); }; @@ -125,7 +123,7 @@ treemode._setOptions = function (options) { autocomplete: null, navigationBar : true, onSelectionChange: null, - extendEvent: null + onEvent: null }; // copy all options @@ -895,7 +893,7 @@ treemode._onEvent = function (event) { } if (node) { - node.onEvent(event, this.options.extendEvent); + node.onEvent(event); } };