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

Documented `editable` option

This commit is contained in:
jos 2014-07-28 08:45:31 +02:00
parent 24bc21e00a
commit 1671dc7da7
4 changed files with 45 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
HISTORY.md
View File

@ -7,7 +7,9 @@ https://github.com/josdejong/jsoneditor
- JSONEditor now accepts JavaScript objects as input, and can turn them into - JSONEditor now accepts JavaScript objects as input, and can turn them into
valid JSON. For example `{a:2,b:'str'}` can be turned into `{"a":2,"b":"str"}`. valid JSON. For example `{a:2,b:'str'}` can be turned into `{"a":2,"b":"str"}`.
- Implemented an option `editable`, a callback function, which allows to set
individual nodes (their field and/or value) editable or read-only.
## 2014-05-31, version 3.0.0 ## 2014-05-31, version 3.0.0

79
docs/api.md
View File

@ -10,49 +10,37 @@ Constructs a new JSONEditor.
*Parameters:* *Parameters:*
- `{Element} container` - `{Element} container`
An HTML DIV element. The JSONEditor will be created inside this container An HTML DIV element. The JSONEditor will be created inside this container element.
element. - `{Object} options`
- `{Object} options`
Optional object with options. Available options: Optional object with options. Available options:
- `{function} change`. - `{function} change`
Set a callback method triggered when the contents of the JSONEditor change. Set a callback method triggered when the contents of the JSONEditor change. Called without parameters.
Called without parameters. - `{function} editable`
- `{function} error`. 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 method triggered when an error occurs. - `{function} error`
Invoked with the error as first argument. The callback is only invoked Set a callback method 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.
- `{boolean} history`. - `{boolean} history`
Enables history, adds a button Undo and Redo to the menu of the JSONEditor. Enables history, adds a button Undo and Redo to the menu of the JSONEditor. True by default. Only applicable when `mode` is 'tree' or 'form'.
True by default. Only applicable when `mode` is 'tree' or 'form'. - `{String} mode`
- `{String} mode`. Set the editor mode. Available values: 'tree' (default), 'view', 'form', 'code', 'text'. In 'view' mode, the data and datastructure is read-only. In 'form' mode, only the value can be changed, the datastructure is read-only. Mode 'code' requires the Ace editor to be loaded on the page. Mode 'text' shows the data as plain text.
Set the editor mode. Available values: 'tree' (default), 'view', 'form', - `{String[]} modes`
'code', 'text'. In 'view' mode, the data and datastructure is read-only. Create a box in the editor menu where the user can switch between the specified modes. Available values: see option `mode`.
In 'form' mode, only the value can be changed, the datastructure is read-only. - `{String} name`
Mode 'code' requires the Ace editor to be loaded on the page. Initial field name for the root node, is undefined by default. Can also be set using `JSONEditor.setName(name)`. Only applicable when `mode` is 'tree', 'view', or 'form'.
Mode 'text' shows the data as plain text. - `{boolean} search`
- `{String[]} modes`. Enables a search box in the upper right corner of the JSONEditor. True by default. Only applicable when `mode` is 'tree', 'view', or 'form'.
Create a box in the editor menu where the user can switch between the specified - `{Number} indentation`
modes. Available values: see option `mode`. Number of indentation spaces. 2 by default. Only applicable when `mode` is 'code' or 'text'.
- `{String} name`.
Initial field name for the root node, is undefined by default.
Can also be set using `JSONEditor.setName(name)`.
Only applicable when `mode` is 'tree', 'view', or 'form'.
- `{boolean} search`.
Enables a search box in the upper right corner of the JSONEditor.
True by default.
Only applicable when `mode` is 'tree', 'view', or 'form'.
- `{Number} indentation`.
Number of indentation spaces. 2 by default.
Only applicable when `mode` is 'code' or 'text'.
- `{JSON} json` - `{JSON} json`
Initial JSON data to be loaded into the JSONEditor. Alternatively, the method `JSONEditor.set(json)` can be used to load JSON data into the editor. Initial JSON data to be loaded into the JSONEditor. Alternatively, the method `JSONEditor.set(json)` can be used to load JSON data into the editor.
*Returns:* *Returns:*
- `{JSONEditor} editor` - `{JSONEditor} editor`
New instance of a JSONEditor. New instance of a JSONEditor.
@ -81,7 +69,7 @@ Switch mode. Mode `code` requires the [Ace editor](http://ace.ajax.org/).
*Parameters:* *Parameters:*
- `{String} mode` - `{String} mode`
Available values: `tree`, 'view', `form`, `code`, `text`. Available values: `tree`, 'view', `form`, `code`, `text`.
#### `JSONEditor.setName(name)` #### `JSONEditor.setName(name)`
@ -90,7 +78,7 @@ Set a field name for the root node.
*Parameters:* *Parameters:*
- `{String | undefined} name` - `{String | undefined} name`
Field name of the root node. If undefined, the current name will be removed. Field name of the root node. If undefined, the current name will be removed.
#### `JSONEditor.setText(jsonString)` #### `JSONEditor.setText(jsonString)`
@ -98,14 +86,18 @@ Set a field name for the root node.
Set text data in the formatter. Set text data in the formatter.
*Parameters:* *Parameters:*
- `{String} jsonString` Contents of the JSONformatter as string.
- `{String} jsonString`
Contents of the JSONformatter as string.
#### `JSONEditor.get()` #### `JSONEditor.get()`
Get JSON data. Get JSON data.
*Returns:* *Returns:*
- `{JSON} json` JSON data from the JSONEditor.
- `{JSON} json`
JSON data from the JSONEditor.
#### `JSONEditor.getName()` #### `JSONEditor.getName()`
@ -113,7 +105,7 @@ Retrieve the current field name of the root node.
*Returns:* *Returns:*
- `{String | undefined} name` - `{String | undefined} name`
Current field name of the root node, or undefined if not set. Current field name of the root node, or undefined if not set.
#### `JSONEditor.getText()` #### `JSONEditor.getText()`
@ -121,7 +113,9 @@ Retrieve the current field name of the root node.
Get JSON data as string. Get JSON data as string.
*Returns:* *Returns:*
- `{String} jsonString` Contents of the JSONformatter as string.
- `{String} jsonString`
Contents of the JSONformatter as string.
### Examples ### Examples
@ -171,8 +165,7 @@ var json = editor.get(json);
## JSON parsing and stringification ## JSON parsing and stringification
In general to parse or stringify JSON data, the browsers built in JSON parser can be used. In general to parse or stringify JSON data, the browsers built in JSON parser can be used. To create a formatted string from a JSON object, use:
To create a formatted string from a JSON object, use:
```js ```js
var formattedString = JSON.stringify(json, null, 2); var formattedString = JSON.stringify(json, null, 2);

8
src/js/Node.js
View File

@ -38,10 +38,10 @@ define(['./ContextMenu', './appendNodeFactory', './util'], function (ContextMenu
}; };
if (this.editor) { if (this.editor) {
this.editable.field = this.editor.mode.edit; this.editable.field = this.editor.options.mode === 'tree';
this.editable.value = !this.editor.mode.view; this.editable.value = this.editor.options.mode !== 'view';
if (this.editor.mode.edit && (typeof this.editor.options.editable === 'function')) { if (this.editor.options.mode === 'tree' && (typeof this.editor.options.editable === 'function')) {
var editable = this.editor.options.editable({ var editable = this.editor.options.editable({
field: this.field, field: this.field,
value: this.value, value: this.value,
@ -1204,7 +1204,7 @@ define(['./ContextMenu', './appendNodeFactory', './util'], function (ContextMenu
dom.tr = document.createElement('tr'); dom.tr = document.createElement('tr');
dom.tr.node = this; dom.tr.node = this;
if (this.editor.mode.edit) { // note: we take here the global setting! if (this.editor.options.mode === 'tree') { // note: we take here the global setting!
var tdDrag = document.createElement('td'); var tdDrag = document.createElement('td');
if (this.editable.field) { if (this.editable.field) {
// create draggable area // create draggable area

11
src/js/treemode.js
View File

@ -31,7 +31,7 @@ define(['./Highlighter', './History', './SearchBox', './Node', './modeswitcher',
this._setOptions(options); this._setOptions(options);
if (this.options.history && !this.mode.view) { if (this.options.history && this.options.mode !== 'view') {
this.history = new History(this); this.history = new History(this);
} }
@ -70,13 +70,6 @@ define(['./Highlighter', './History', './SearchBox', './Node', './modeswitcher',
} }
} }
} }
// interpret the mode options
this.mode = {
edit: (this.options.mode != 'view' && this.options.mode != 'form'),
view: (this.options.mode == 'view'),
form: (this.options.mode == 'form')
};
}; };
// node currently being edited // node currently being edited
@ -682,7 +675,7 @@ define(['./Highlighter', './History', './SearchBox', './Node', './modeswitcher',
// width, and the edit columns do have a fixed width // width, and the edit columns do have a fixed width
var col; var col;
this.colgroupContent = document.createElement('colgroup'); this.colgroupContent = document.createElement('colgroup');
if (this.mode.edit) { if (this.options.mode === 'tree') {
col = document.createElement('col'); col = document.createElement('col');
col.width = "24px"; col.width = "24px";
this.colgroupContent.appendChild(col); this.colgroupContent.appendChild(col);