Renamed options `change`, `editable`, `error` to respectively `onChange`, `onEditable`, and `onError`. Implemented `onModeChange` and `getMode`.
This commit is contained in:
parent
75994c8035
commit
de314b897e
|
@ -3,11 +3,17 @@
|
||||||
https://github.com/josdejong/jsoneditor
|
https://github.com/josdejong/jsoneditor
|
||||||
|
|
||||||
|
|
||||||
## not yet released, version 4.2.2
|
## not yet released, version 5.0.0
|
||||||
|
|
||||||
- Replaced the PNG icon images with SVG. Thanks @1j01.
|
- Replaced the PNG icon images with SVG. Thanks @1j01.
|
||||||
- Implemented a new option `escapeUnicode`, which will show the hexadecimal
|
- Implemented a new option `escapeUnicode`, which will show the hexadecimal
|
||||||
unicode instead of the character itself. (See #93 and #230).
|
unicode instead of the character itself. (See #93 and #230).
|
||||||
|
- Implemented method `getMode`.
|
||||||
|
- Implemented option `onModeChange(oldMode, newMode)`.
|
||||||
|
- Renamed options `change`, `editable`, `error` to respectively `onChange`,
|
||||||
|
`onEditable`, and `onError`. Old options are still working and give a
|
||||||
|
deprecation warning.
|
||||||
|
- JSONEditor new throws a warning in the console in case of unknown options.
|
||||||
- Fixed #93 and #227: html codes like `&` not escaped.
|
- Fixed #93 and #227: html codes like `&` not escaped.
|
||||||
- Fixed #149: Memory leak when switching mode from/to `code` mode, web worker
|
- Fixed #149: Memory leak when switching mode from/to `code` mode, web worker
|
||||||
of Ace editor wasn't cleaned up.
|
of Ace editor wasn't cleaned up.
|
||||||
|
|
26
docs/api.md
26
docs/api.md
|
@ -17,13 +17,16 @@ Constructs a new JSONEditor.
|
||||||
|
|
||||||
- `{Object} ace`
|
- `{Object} ace`
|
||||||
Provide a custom version of the [Ace editor](http://ace.c9.io/) and use this instead of the version that comes embedded with JSONEditor. Only applicable when `mode` is `code`.
|
Provide a custom version of the [Ace editor](http://ace.c9.io/) and use this instead of the version that comes embedded with JSONEditor. Only applicable when `mode` is `code`.
|
||||||
- `{function} change`
|
- `{function} onChange`
|
||||||
Set a callback method triggered when the contents of the JSONEditor change. Called without parameters. Will only be triggered on changes made by the user, not in case of programmatic changes via the functions `set` or `setText`.
|
Set a callback function triggered when the contents of the JSONEditor change. Called without parameters. Will only be triggered on changes made by the user, not in case of programmatic changes via the functions `set` or `setText`.
|
||||||
- `{function} editable`
|
- `{function} onEditable`
|
||||||
Set a callback method to determine whether individual nodes are editable or read-only. Only applicable when option `mode` is `tree`. The callback is invoked as `editable(node)`, where `node` is an object `{field: string, value: string, path: string[]}`. The function must either return a boolean value to set both the nodes field and value editable or read-only, or return an object `{field: boolean, value: boolean}`.
|
Set a callback function to determine whether individual nodes are editable or read-only. Only applicable when option `mode` is `tree`. The callback is invoked as `editable(node)`, where `node` is an object `{field: string, value: string, path: string[]}`. The function must either return a boolean value to set both the nodes field and value editable or read-only, or return an object `{field: boolean, value: boolean}`.
|
||||||
- `{function} error`
|
- `{function} onError`
|
||||||
Set a callback method triggered when an error occurs. Invoked with the error as first argument. The callback is only invoked
|
Set a callback function triggered when an error occurs. Invoked with the error as first argument. The callback is only invoked
|
||||||
for errors triggered by a users action.
|
for errors triggered by a users action, like switching from code mode to tree mode or clicking the Format button whilst the editor doesn't contain valid JSON.
|
||||||
|
- `{function} onModeChange(newMode, oldMode)`
|
||||||
|
Set a callback function triggered right after the mode is changed by the user. Only applicable when
|
||||||
|
the mode can be changed by the user (i.e. when option `modes` is set).
|
||||||
- `{boolean} escapeUnicode`
|
- `{boolean} escapeUnicode`
|
||||||
If true, unicode characters are escaped and displayed as their code instead
|
If true, unicode characters are escaped and displayed as their code instead
|
||||||
of the character. False by default.
|
of the character. False by default.
|
||||||
|
@ -116,6 +119,15 @@ which can be the case when the editor is in mode `code` or `text`.
|
||||||
- `{JSON} json`
|
- `{JSON} json`
|
||||||
JSON data from the JSONEditor.
|
JSON data from the JSONEditor.
|
||||||
|
|
||||||
|
#### `JSONEditor.getMode()`
|
||||||
|
|
||||||
|
Retrieve the current mode of the editor.
|
||||||
|
|
||||||
|
*Returns:*
|
||||||
|
|
||||||
|
- `{String} mode`
|
||||||
|
Current mode of the editor for example `tree` or `code`.
|
||||||
|
|
||||||
#### `JSONEditor.getName()`
|
#### `JSONEditor.getName()`
|
||||||
|
|
||||||
Retrieve the current field name of the root node.
|
Retrieve the current field name of the root node.
|
||||||
|
|
|
@ -43,8 +43,11 @@
|
||||||
var options = {
|
var options = {
|
||||||
mode: 'tree',
|
mode: 'tree',
|
||||||
modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
|
modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
|
||||||
error: function (err) {
|
onError: function (err) {
|
||||||
alert(err.toString());
|
alert(err.toString());
|
||||||
|
},
|
||||||
|
onModeChange: function (newMode, oldMode) {
|
||||||
|
console.log('Mode switched from', oldMode, 'to', newMode);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<!DOCTYPE HTML>
|
<!DOCTYPE HTML>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>JSONEditor | Basic usage</title>
|
<title>JSONEditor | Custom editable fields</title>
|
||||||
|
|
||||||
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
|
<link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
|
||||||
<script src="../dist/jsoneditor.js"></script>
|
<script src="../dist/jsoneditor.js"></script>
|
||||||
|
@ -28,7 +28,7 @@
|
||||||
var container = document.getElementById('jsoneditor');
|
var container = document.getElementById('jsoneditor');
|
||||||
|
|
||||||
var options = {
|
var options = {
|
||||||
editable: function (node) {
|
onEditable: function (node) {
|
||||||
// node is an object like:
|
// node is an object like:
|
||||||
// {
|
// {
|
||||||
// field: 'FIELD',
|
// field: 'FIELD',
|
||||||
|
|
|
@ -9,8 +9,10 @@ var util = require('./util');
|
||||||
* {String} mode Editor mode. Available values:
|
* {String} mode Editor mode. Available values:
|
||||||
* 'tree' (default), 'view',
|
* 'tree' (default), 'view',
|
||||||
* 'form', 'text', and 'code'.
|
* 'form', 'text', and 'code'.
|
||||||
* {function} change Callback method, triggered
|
* {function} onChange Callback method, triggered
|
||||||
* on change of contents
|
* on change of contents
|
||||||
|
* {function} onError Callback method, triggered
|
||||||
|
* when an error occurs
|
||||||
* {Boolean} search Enable search box.
|
* {Boolean} search Enable search box.
|
||||||
* True by default
|
* True by default
|
||||||
* Only applicable for modes
|
* Only applicable for modes
|
||||||
|
@ -43,6 +45,40 @@ function JSONEditor (container, options, json) {
|
||||||
'Please install the newest version of your browser.');
|
'Please install the newest version of your browser.');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (options) {
|
||||||
|
// check for deprecated options
|
||||||
|
if (options.error) {
|
||||||
|
console.warn('Option "error" has been renamed to "onError"');
|
||||||
|
options.onError = options.error;
|
||||||
|
delete options.error;
|
||||||
|
}
|
||||||
|
if (options.change) {
|
||||||
|
console.warn('Option "change" has been renamed to "onChange"');
|
||||||
|
options.onChange = options.change;
|
||||||
|
delete options.change;
|
||||||
|
}
|
||||||
|
if (options.editable) {
|
||||||
|
console.warn('Option "editable" has been renamed to "onEditable"');
|
||||||
|
options.onEditable = options.editable;
|
||||||
|
delete options.editable;
|
||||||
|
}
|
||||||
|
|
||||||
|
// validate options
|
||||||
|
if (options) {
|
||||||
|
var VALID_OPTIONS = [
|
||||||
|
'ace',
|
||||||
|
'onChange', 'onEditable', 'onError', 'onModeChange',
|
||||||
|
'escapeUnicode', 'history', 'mode', 'modes', 'name', 'indentation', 'theme'
|
||||||
|
];
|
||||||
|
|
||||||
|
Object.keys(options).forEach(function (option) {
|
||||||
|
if (VALID_OPTIONS.indexOf(option) === -1) {
|
||||||
|
console.warn('Unknown option "' + option + '". This option will be ignored');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (arguments.length) {
|
if (arguments.length) {
|
||||||
this._create(container, options, json);
|
this._create(container, options, json);
|
||||||
}
|
}
|
||||||
|
@ -145,10 +181,11 @@ JSONEditor.prototype.getName = function () {
|
||||||
* 'text', and 'code'.
|
* 'text', and 'code'.
|
||||||
*/
|
*/
|
||||||
JSONEditor.prototype.setMode = function (mode) {
|
JSONEditor.prototype.setMode = function (mode) {
|
||||||
var container = this.container,
|
var container = this.container;
|
||||||
options = util.extend({}, this.options),
|
var options = util.extend({}, this.options);
|
||||||
data,
|
var oldMode = options.mode;
|
||||||
name;
|
var data;
|
||||||
|
var name;
|
||||||
|
|
||||||
options.mode = mode;
|
options.mode = mode;
|
||||||
var config = JSONEditor.modes[mode];
|
var config = JSONEditor.modes[mode];
|
||||||
|
@ -170,14 +207,18 @@ JSONEditor.prototype.setMode = function (mode) {
|
||||||
try {
|
try {
|
||||||
config.load.call(this);
|
config.load.call(this);
|
||||||
}
|
}
|
||||||
catch (err) {}
|
catch (err) {
|
||||||
|
console.error(err);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof options.onMode === 'function') {
|
if (typeof options.onModeChange === 'function' && mode !== oldMode) {
|
||||||
try {
|
try {
|
||||||
options.onMode(options.mode);
|
options.onModeChange(mode, oldMode);
|
||||||
|
}
|
||||||
|
catch (err) {
|
||||||
|
console.error(err);
|
||||||
}
|
}
|
||||||
catch (err) {}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
catch (err) {
|
catch (err) {
|
||||||
|
@ -189,6 +230,14 @@ JSONEditor.prototype.setMode = function (mode) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get the current mode
|
||||||
|
* @return {string}
|
||||||
|
*/
|
||||||
|
JSONEditor.prototype.getMode = function () {
|
||||||
|
return this.options.mode;
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Throw an error. If an error callback is configured in options.error, this
|
* Throw an error. If an error callback is configured in options.error, this
|
||||||
* callback will be invoked. Else, a regular error is thrown.
|
* callback will be invoked. Else, a regular error is thrown.
|
||||||
|
@ -196,15 +245,8 @@ JSONEditor.prototype.setMode = function (mode) {
|
||||||
* @private
|
* @private
|
||||||
*/
|
*/
|
||||||
JSONEditor.prototype._onError = function(err) {
|
JSONEditor.prototype._onError = function(err) {
|
||||||
// TODO: onError is deprecated since version 2.2.0. cleanup some day
|
if (this.options && typeof this.options.onError === 'function') {
|
||||||
if (typeof this.onError === 'function') {
|
this.options.onError(err);
|
||||||
util.log('WARNING: JSONEditor.onError is deprecated. ' +
|
|
||||||
'Use options.error instead.');
|
|
||||||
this.onError(err);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.options && typeof this.options.error === 'function') {
|
|
||||||
this.options.error(err);
|
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
throw err;
|
throw err;
|
||||||
|
|
|
@ -43,8 +43,8 @@ Node.prototype._updateEditability = function () {
|
||||||
this.editable.field = this.editor.options.mode === 'tree';
|
this.editable.field = this.editor.options.mode === 'tree';
|
||||||
this.editable.value = this.editor.options.mode !== 'view';
|
this.editable.value = this.editor.options.mode !== 'view';
|
||||||
|
|
||||||
if (this.editor.options.mode === 'tree' && (typeof this.editor.options.editable === 'function')) {
|
if (this.editor.options.mode === 'tree' && (typeof this.editor.options.onEditable === 'function')) {
|
||||||
var editable = this.editor.options.editable({
|
var editable = this.editor.options.onEditable({
|
||||||
field: this.field,
|
field: this.field,
|
||||||
value: this.value,
|
value: this.value,
|
||||||
path: this.path()
|
path: this.path()
|
||||||
|
|
|
@ -21,9 +21,9 @@ var textmode = {};
|
||||||
* or "code".
|
* or "code".
|
||||||
* {Number} indentation Number of indentation
|
* {Number} indentation Number of indentation
|
||||||
* spaces. 2 by default.
|
* spaces. 2 by default.
|
||||||
* {function} change Callback method
|
* {function} onChange Callback method
|
||||||
* triggered on change
|
* triggered on change
|
||||||
* {function} onMode Callback method
|
* {function} onModeChange Callback method
|
||||||
* triggered after setMode
|
* triggered after setMode
|
||||||
* {Object} ace A custom instance of
|
* {Object} ace A custom instance of
|
||||||
* Ace editor.
|
* Ace editor.
|
||||||
|
@ -159,11 +159,9 @@ textmode.create = function (container, options) {
|
||||||
};
|
};
|
||||||
this.menu.appendChild(poweredBy);
|
this.menu.appendChild(poweredBy);
|
||||||
|
|
||||||
if (options.change) {
|
if (options.onChange) {
|
||||||
// register onchange event
|
// register onchange event
|
||||||
editor.on('change', function () {
|
editor.on('change', options.onChange);
|
||||||
options.change();
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
|
@ -174,18 +172,14 @@ textmode.create = function (container, options) {
|
||||||
this.content.appendChild(textarea);
|
this.content.appendChild(textarea);
|
||||||
this.textarea = textarea;
|
this.textarea = textarea;
|
||||||
|
|
||||||
if (options.change) {
|
if (options.onChange) {
|
||||||
// register onchange event
|
// register onchange event
|
||||||
if (this.textarea.oninput === null) {
|
if (this.textarea.oninput === null) {
|
||||||
this.textarea.oninput = function () {
|
this.textarea.oninput = options.onChange();
|
||||||
options.change();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
// oninput is undefined. For IE8-
|
// oninput is undefined. For IE8-
|
||||||
this.textarea.onchange = function () {
|
this.textarea.onchange = options.onChange();
|
||||||
options.change();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -231,28 +225,6 @@ textmode._delete = function () {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
|
||||||
* Throw an error. If an error callback is configured in options.error, this
|
|
||||||
* callback will be invoked. Else, a regular error is thrown.
|
|
||||||
* @param {Error} err
|
|
||||||
* @private
|
|
||||||
*/
|
|
||||||
textmode._onError = function(err) {
|
|
||||||
// TODO: onError is deprecated since version 2.2.0. cleanup some day
|
|
||||||
if (typeof this.onError === 'function') {
|
|
||||||
util.log('WARNING: JSONEditor.onError is deprecated. ' +
|
|
||||||
'Use options.error instead.');
|
|
||||||
this.onError(err);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.options && typeof this.options.error === 'function') {
|
|
||||||
this.options.error(err);
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Compact the code in the formatter
|
* Compact the code in the formatter
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -19,7 +19,7 @@ var treemode = {};
|
||||||
* True by default
|
* True by default
|
||||||
* {Boolean} history Enable history (undo/redo).
|
* {Boolean} history Enable history (undo/redo).
|
||||||
* True by default
|
* True by default
|
||||||
* {function} change Callback method, triggered
|
* {function} onChange Callback method, triggered
|
||||||
* on change of contents
|
* on change of contents
|
||||||
* {String} name Field name for the root node.
|
* {String} name Field name for the root node.
|
||||||
* {boolean} escapeUnicode If true, unicode
|
* {boolean} escapeUnicode If true, unicode
|
||||||
|
@ -305,9 +305,9 @@ treemode._onAction = function (action, params) {
|
||||||
}
|
}
|
||||||
|
|
||||||
// trigger the onChange callback
|
// trigger the onChange callback
|
||||||
if (this.options.change) {
|
if (this.options.onChange) {
|
||||||
try {
|
try {
|
||||||
this.options.change();
|
this.options.onChange();
|
||||||
}
|
}
|
||||||
catch (err) {
|
catch (err) {
|
||||||
util.log('Error in change callback: ', err);
|
util.log('Error in change callback: ', err);
|
||||||
|
@ -589,8 +589,8 @@ treemode._onUndo = function () {
|
||||||
this.history.undo();
|
this.history.undo();
|
||||||
|
|
||||||
// trigger change callback
|
// trigger change callback
|
||||||
if (this.options.change) {
|
if (this.options.onChange) {
|
||||||
this.options.change();
|
this.options.onChange();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -605,8 +605,8 @@ treemode._onRedo = function () {
|
||||||
this.history.redo();
|
this.history.redo();
|
||||||
|
|
||||||
// trigger change callback
|
// trigger change callback
|
||||||
if (this.options.change) {
|
if (this.options.onChange) {
|
||||||
this.options.change();
|
this.options.onChange();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -42,7 +42,7 @@
|
||||||
options = {
|
options = {
|
||||||
mode: 'tree',
|
mode: 'tree',
|
||||||
modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
|
modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
|
||||||
error: function (err) {
|
onError: function (err) {
|
||||||
alert(err.toString());
|
alert(err.toString());
|
||||||
},
|
},
|
||||||
indentation: 4,
|
indentation: 4,
|
||||||
|
|
Loading…
Reference in New Issue