Documented `editable` option

HISTORY.md

@@ -7,6 +7,8 @@ https://github.com/josdejong/jsoneditor
 
 - 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"}`.
+- 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

docs/api.md

@@ -11,41 +11,29 @@ Constructs a new JSONEditor.
 *Parameters:*
 
 - `{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`  
   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.
-  - `{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`  
   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.
@@ -98,14 +86,18 @@ Set a field name for the root node.
 Set text data in the formatter.
 
 *Parameters:*
-- `{String} jsonString` Contents of the JSONformatter as string.
+
+- `{String} jsonString`  
+  Contents of the JSONformatter as string.
 
 #### `JSONEditor.get()`
 
 Get JSON data.
 
 *Returns:*
-- `{JSON} json` JSON data from the JSONEditor.
+
+- `{JSON} json`  
+  JSON data from the JSONEditor.
 
 #### `JSONEditor.getName()`
 
@@ -121,7 +113,9 @@ Retrieve the current field name of the root node.
 Get JSON data as string.
 
 *Returns:*
-- `{String} jsonString` Contents of the JSONformatter as string.
+
+- `{String} jsonString`  
+  Contents of the JSONformatter as string.
 
 
 ### Examples
@@ -171,8 +165,7 @@ var json = editor.get(json);
 
 ## 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
 var formattedString = JSON.stringify(json, null, 2);

src/js/Node.js

@@ -38,10 +38,10 @@ define(['./ContextMenu', './appendNodeFactory', './util'], function (ContextMenu
     };
 
     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({
           field: this.field,
           value: this.value,
@@ -1204,7 +1204,7 @@ define(['./ContextMenu', './appendNodeFactory', './util'], function (ContextMenu
     dom.tr = document.createElement('tr');
     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');
       if (this.editable.field) {
         // create draggable area

src/js/treemode.js

@@ -31,7 +31,7 @@ define(['./Highlighter', './History', './SearchBox', './Node', './modeswitcher',
 
     this._setOptions(options);
 
-    if (this.options.history && !this.mode.view) {
+    if (this.options.history && this.options.mode !== 'view') {
       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
@@ -682,7 +675,7 @@ define(['./Highlighter', './History', './SearchBox', './Node', './modeswitcher',
     // width, and the edit columns do have a fixed width
     var col;
     this.colgroupContent = document.createElement('colgroup');
-    if (this.mode.edit) {
+    if (this.options.mode === 'tree') {
       col = document.createElement('col');
       col.width = "24px";
       this.colgroupContent.appendChild(col);