Implemented option modes

HISTORY.md

@@ -3,6 +3,12 @@
 http://jsoneditoronline.org
 
 
+## not yet released, version 2.3.0
+
+- Implemented an option `modes`, which creates a menu in the editor
+  where the user can switch between the selected editor modes.
+
+
 ## 2013-08-01, version 2.2.2
 
 - Fixed non working option `indentation`.

Jakefile.js

@@ -48,6 +48,7 @@ task('build', ['clear'], function () {
             jsoneditorSrc + 'js/appendnode.js',
             jsoneditorSrc + 'js/contextmenu.js',
             jsoneditorSrc + 'js/history.js',
+            jsoneditorSrc + 'js/modebox.js',
             jsoneditorSrc + 'js/searchbox.js',
             jsoneditorSrc + 'js/highlighter.js',
             jsoneditorSrc + 'js/util.js',
@@ -228,6 +229,7 @@ task('webapp', ['build', 'minify'], function () {
     jake.cpR(webAppSrc + 'robots.txt', webApp);
     jake.cpR(webAppSrc + 'datapolicy.txt', webApp);
     jake.cpR(webAppSrc + 'index.html', webApp);
+    jake.cpR(webAppSrc + 'chrome_app_counter.html', webApp);
     jake.cpR(webAppSrc + 'favicon.ico', webApp);
     jake.cpR(webAppSrc + 'fileretriever.php', webApp);
     jake.cpR(webAppSrc + 'googlea47c4a0b36d11021.html', webApp);

app/web/test.html

@@ -64,6 +64,7 @@
     <script type="text/javascript" src="../../jsoneditor/js/contextmenu.js"></script>
     <script type="text/javascript" src="../../jsoneditor/js/history.js"></script>
     <script type="text/javascript" src="../../jsoneditor/js/searchbox.js"></script>
+    <script type="text/javascript" src="../../jsoneditor/js/modebox.js"></script>
     <script type="text/javascript" src="../../jsoneditor/js/highlighter.js"></script>
     <script type="text/javascript" src="../../jsoneditor/js/util.js"></script>
     <script type="text/javascript" src="../../jsoneditor/js/module.js"></script>

docs/api.md

@@ -32,6 +32,9 @@ Constructs a new JSONEditor.
     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.
+  - `{String[]} modes`.
+    Create a box in the editor menu where the user can switch between the specified
+    modes. Available values: see option `mode`.
   - `{String} name`.
     Initial field name for the root node, is undefined by default.
     Can also be set using `JSONEditor.setName(name)`.

examples/01_basic_usage.html

@@ -19,24 +19,24 @@
 
     <script type="text/javascript" >
         // create the editor
-        var container = document.getElementById("jsoneditor");
+        var container = document.getElementById('jsoneditor');
         var editor = new jsoneditor.JSONEditor(container);
 
         // set json
-        document.getElementById("setJSON").onclick = function () {
+        document.getElementById('setJSON').onclick = function () {
             var json = {
-                "array": [1, 2, 3],
+                'array': [1, 2, 3],
-                "boolean": true,
+                'boolean': true,
-                "null": null,
+                'null': null,
-                "number": 123,
+                'number': 123,
-                "object": {"a": "b", "c": "d"},
+                'object': {'a': 'b', 'c': 'd'},
-                "string": "Hello World"
+                'string': 'Hello World'
             };
             editor.set(json);
         };
 
         // get json
-        document.getElementById("getJSON").onclick = function () {
+        document.getElementById('getJSON').onclick = function () {
             var json = editor.get();
             alert(JSON.stringify(json, null, 2));
         };

examples/02_viewer.html

@@ -19,19 +19,21 @@
     <div id="jsoneditor"></div>
 
     <script type="text/javascript" >
-        // create the editor
+        var container = document.getElementById('jsoneditor');
-        var container = document.getElementById("jsoneditor");
+
         var options = {
-            mode: "view"
+            mode: 'view'
         };
+
         var json = {
-            "array": [1, 2, 3],
+            'array': [1, 2, 3],
-            "boolean": true,
+            'boolean': true,
-            "null": null,
+            'null': null,
-            "number": 123,
+            'number': 123,
-            "object": {"a": "b", "c": "d"},
+            'object': {'a': 'b', 'c': 'd'},
-            "string": "Hello World"
+            'string': 'Hello World'
         };
+
         var editor = new jsoneditor.JSONEditor(container, options, json);
     </script>
 </body>

examples/03_switch_mode.html

@@ -17,12 +17,17 @@
     <script type="text/javascript" src="../lib/jsonlint/jsonlint.js"></script>
 
     <style type="text/css">
-        body, select {
+        body {
-            font: 10pt arial;
+            font: 10.5pt arial;
-            font-family: arial, sans-serif;
+            color: #4d4d4d;
-            font-size: 11pt;
+            line-height: 150%;
-
+            width: 500px;
         }
+
+        code {
+            background-color: #f5f5f5;
+        }
+
         #jsoneditor {
             width: 500px;
             height: 500px;
@@ -32,33 +37,24 @@
 <body>
 
 <p>
-    <label for="mode">Switch mode:</label>
+    Switch editor mode using the mode box.
-    <select id="mode">
+    Note that the mode can be changed programmatically as well using the method
-        <option value="tree">tree</option>
+    <code>editor.setMode(mode)</code>, try it in the console of your browser.
-        <option value="view">view</option>
-        <option value="form">form</option>
-        <option value="code">code</option>
-        <option value="text">text</option>
-    </select>
 </p>
 
 <div id="jsoneditor"></div>
 
 <script type="text/javascript" >
-    // create switchable mode
+    var container = document.getElementById('jsoneditor');
-    var mode = document.getElementById('mode');
-    mode.onchange = function () {
-        editor.setMode(mode.value);
-    };
 
-    // create the editor
-    var container = document.getElementById("jsoneditor");
     var options = {
-        mode: mode.value,
+        mode: 'tree',
+        modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
         error: function (err) {
             alert(err.toString());
         }
     };
+
     var json = {
         "array": [1, 2, 3],
         "boolean": true,
@@ -67,6 +63,7 @@
         "object": {"a": "b", "c": "d"},
         "string": "Hello World"
     };
+
     var editor = new jsoneditor.JSONEditor(container, options, json);
 </script>
 </body>

examples/requirejs_demo/scripts/main.js

@@ -1,24 +1,24 @@
-var module = "../../../jsoneditor";
+var module = '../../../jsoneditor';
 require([module], function (jsoneditor) {
     // create the editor
-    var container = document.getElementById("jsoneditor");
+    var container = document.getElementById('jsoneditor');
     var editor = new jsoneditor.JSONEditor(container);
 
     // set json
-    document.getElementById("setJSON").onclick = function () {
+    document.getElementById('setJSON').onclick = function () {
         var json = {
-            "array": [1, 2, 3],
+            'array': [1, 2, 3],
-            "boolean": true,
+            'boolean': true,
-            "null": null,
+            'null': null,
-            "number": 123,
+            'number': 123,
-            "object": {"a": "b", "c": "d"},
+            'object': {'a': 'b', 'c': 'd'},
-            "string": "Hello World"
+            'string': 'Hello World'
         };
         editor.set(json);
     };
 
     // get json
-    document.getElementById("getJSON").onclick = function () {
+    document.getElementById('getJSON').onclick = function () {
         var json = editor.get();
         alert(JSON.stringify(json, null, 2));
     };

jsoneditor.css

@@ -252,7 +252,7 @@ div.jsoneditor {
     color: #4d4d4d;
     background: transparent;
 
-    line-height: 24px;
+    line-height: 26px;
     text-align: left;
 }
 
@@ -365,7 +365,7 @@ div.jsoneditor {
 
 /* ContextMenu - sub menu */
 
-.jsoneditor-contextmenu ul li ul li .selected {
+.jsoneditor-contextmenu ul li .selected {
     background-color: #D5DDF6;
 }
 
@@ -439,6 +439,11 @@ div.jsoneditor {
     background-position: -96px 0;
 }
 
+.jsoneditor-contextmenu button.type-modes > .icon {
+    background-image: none;
+    width: 6px;
+}
+
 
 .jsoneditor .menu {
     width: 100%;
@@ -459,10 +464,17 @@ div.jsoneditor {
     width: 26px;
     height: 26px;
     margin: 2px;
-    padding: 2px;
+    padding: 0;
     border-radius: 2px;
     border: 1px solid #aec0f8;
     background: #e3eaf6 url('img/jsoneditor-icons.png');
+    color: #4D4D4D;
+    opacity: 0.8;
+
+    font-family: arial, sans-serif;
+    font-size: 10pt;
+
+    float: left;
 }
 
 .jsoneditor .menu button:hover {
@@ -500,6 +512,17 @@ div.jsoneditor {
     background-position: -72px -120px;
 }
 
+.jsoneditor .menu button.modes {
+    background-image: none;
+    width: auto;
+    padding-left: 6px;
+    padding-right: 6px;
+}
+
+.jsoneditor .menu button.separator {
+    margin-left: 10px;
+}
+
 .jsoneditor .menu a {
     font-family: arial, sans-serif;
     font-size: 10pt;

jsoneditor.js

@@ -27,8 +27,8 @@
  * Copyright (c) 2011-2013 Jos de Jong, http://jsoneditoronline.org
  *
  * @author  Jos de Jong, <wjosdejong@gmail.com>
- * @version 2.2.2
+ * @version 2.3.0-SNAPSHOT
- * @date    2013-08-01
+ * @date    2013-08-27
  */
 (function () {
 
@@ -787,14 +787,9 @@ TreeEditor.prototype._createFrame = function () {
 
     // create undo/redo buttons
     if (this.history) {
-        // create separator
-        var separator = document.createElement('span');
-        separator.innerHTML = '&nbsp;';
-        this.menu.appendChild(separator);
-
         // create undo button
         var undo = document.createElement('button');
-        undo.className = 'undo';
+        undo.className = 'undo separator';
         undo.title = 'Undo last action (Ctrl+Z)';
         undo.onclick = function () {
             editor._onUndo();
@@ -820,6 +815,12 @@ TreeEditor.prototype._createFrame = function () {
         this.history.onChange();
     }
 
+    // create mode box
+    if (this.options && this.options.modes && this.options.modes.length) {
+        var modeBox = createModeBox(this, this.options.modes, this.options.mode);
+        this.menu.appendChild(modeBox);
+    }
+
     // create search box
     if (this.options.search) {
         this.searchBox = new SearchBox(this, this.menu);
@@ -1094,10 +1095,8 @@ TextEditor.prototype._create = function (container, options, json) {
 
     // create format button
     var buttonFormat = document.createElement('button');
-    //buttonFormat.innerHTML = 'Format';
     buttonFormat.className = 'format';
     buttonFormat.title = 'Format JSON data, with proper indentation and line feeds';
-    //buttonFormat.className = 'jsoneditor-button';
     this.menu.appendChild(buttonFormat);
     buttonFormat.onclick = function () {
         try {
@@ -1110,10 +1109,8 @@ TextEditor.prototype._create = function (container, options, json) {
 
     // create compact button
     var buttonCompact = document.createElement('button');
-    //buttonCompact.innerHTML = 'Compact';
     buttonCompact.className = 'compact';
     buttonCompact.title = 'Compact JSON data, remove all whitespaces';
-    //buttonCompact.className = 'jsoneditor-button';
     this.menu.appendChild(buttonCompact);
     buttonCompact.onclick = function () {
         try {
@@ -1124,6 +1121,12 @@ TextEditor.prototype._create = function (container, options, json) {
         }
     };
 
+    // create mode box
+    if (this.options && this.options.modes && this.options.modes.length) {
+        var modeBox = createModeBox(this, this.options.modes, this.options.mode);
+        this.menu.appendChild(modeBox);
+    }
+
     this.content = document.createElement('div');
     this.content.className = 'outer';
     this.frame.appendChild(this.content);
@@ -5061,6 +5064,86 @@ History.prototype.redo = function () {
     }
 };
 
+/**
+ * create a mode box to be used in the editor menu's
+ * @param {JSONEditor} editor
+ * @param {String[]} modes  Available modes: 'code', 'form', 'text', 'tree', 'view'
+ * @param {String} current  Available modes: 'code', 'form', 'text', 'tree', 'view'
+ * @returns {HTMLElement} box
+ */
+function createModeBox(editor, modes, current) {
+    // available modes
+    var availableModes = {
+        code: {
+            'text': 'Code',
+            'title': 'Switch to code highlighter',
+            'click': function () {
+                editor.setMode('code');
+            }
+        },
+        form: {
+            'text': 'Form',
+            'title': 'Switch to form editor',
+            'click': function () {
+                editor.setMode('form');
+            }
+        },
+        text: {
+            'text': 'Text',
+            'title': 'Switch to plain text editor',
+            'click': function () {
+                editor.setMode('text');
+            }
+        },
+        tree: {
+            'text': 'Tree',
+            'title': 'Switch to tree editor',
+            'click': function () {
+                editor.setMode('tree');
+            }
+        },
+        view: {
+            'text': 'View',
+            'title': 'Switch to tree view',
+            'click': function () {
+                editor.setMode('view');
+            }
+        }
+    };
+
+    // list the selected modes
+    var items = [];
+    for (var i = 0; i < modes.length; i++) {
+        var mode = modes[i];
+        var item = availableModes[mode];
+        if (!item) {
+            throw new Error('Unknown mode "' + mode + '"');
+        }
+
+        item.className = 'type-modes' + ((current == mode) ? ' selected' : '');
+        items.push(item);
+    }
+
+    // retrieve the title of current mode
+    var currentMode = availableModes[current];
+    if (!currentMode) {
+        throw new Error('Unknown mode "' + current + '"');
+    }
+    var currentTitle = currentMode.text;
+
+    // create the html element
+    var box = document.createElement('button');
+    box.className = 'modes separator';
+    box.innerHTML = currentTitle + ' &#x25BE;';
+    box.title = 'Switch editor mode';
+    box.onclick = function () {
+        var menu = new ContextMenu(items);
+        menu.show(box);
+    };
+
+    return box;
+}
+
 /**
  * @constructor SearchBox
  * Create a search box in given HTML container

jsoneditor/css/contextmenu.css

@@ -31,7 +31,7 @@
     color: #4d4d4d;
     background: transparent;
 
-    line-height: 24px;
+    line-height: 26px;
     text-align: left;
 }
 
@@ -144,7 +144,7 @@
 
 /* ContextMenu - sub menu */
 
-.jsoneditor-contextmenu ul li ul li .selected {
+.jsoneditor-contextmenu ul li .selected {
     background-color: #D5DDF6;
 }
 
@@ -217,3 +217,8 @@
 .jsoneditor-contextmenu button.type-array.selected > .icon{
     background-position: -96px 0;
 }
+
+.jsoneditor-contextmenu button.type-modes > .icon {
+    background-image: none;
+    width: 6px;
+}

jsoneditor/css/menu.css

@@ -18,10 +18,17 @@
     width: 26px;
     height: 26px;
     margin: 2px;
-    padding: 2px;
+    padding: 0;
     border-radius: 2px;
     border: 1px solid #aec0f8;
     background: #e3eaf6 url('img/jsoneditor-icons.png');
+    color: #4D4D4D;
+    opacity: 0.8;
+
+    font-family: arial, sans-serif;
+    font-size: 10pt;
+
+    float: left;
 }
 
 .jsoneditor .menu button:hover {
@@ -59,6 +66,17 @@
     background-position: -72px -120px;
 }
 
+.jsoneditor .menu button.modes {
+    background-image: none;
+    width: auto;
+    padding-left: 6px;
+    padding-right: 6px;
+}
+
+.jsoneditor .menu button.separator {
+    margin-left: 10px;
+}
+
 .jsoneditor .menu a {
     font-family: arial, sans-serif;
     font-size: 10pt;

jsoneditor/js/modebox.js

@@ -0,0 +1,79 @@
+/**
+ * create a mode box to be used in the editor menu's
+ * @param {JSONEditor} editor
+ * @param {String[]} modes  Available modes: 'code', 'form', 'text', 'tree', 'view'
+ * @param {String} current  Available modes: 'code', 'form', 'text', 'tree', 'view'
+ * @returns {HTMLElement} box
+ */
+function createModeBox(editor, modes, current) {
+    // available modes
+    var availableModes = {
+        code: {
+            'text': 'Code',
+            'title': 'Switch to code highlighter',
+            'click': function () {
+                editor.setMode('code');
+            }
+        },
+        form: {
+            'text': 'Form',
+            'title': 'Switch to form editor',
+            'click': function () {
+                editor.setMode('form');
+            }
+        },
+        text: {
+            'text': 'Text',
+            'title': 'Switch to plain text editor',
+            'click': function () {
+                editor.setMode('text');
+            }
+        },
+        tree: {
+            'text': 'Tree',
+            'title': 'Switch to tree editor',
+            'click': function () {
+                editor.setMode('tree');
+            }
+        },
+        view: {
+            'text': 'View',
+            'title': 'Switch to tree view',
+            'click': function () {
+                editor.setMode('view');
+            }
+        }
+    };
+
+    // list the selected modes
+    var items = [];
+    for (var i = 0; i < modes.length; i++) {
+        var mode = modes[i];
+        var item = availableModes[mode];
+        if (!item) {
+            throw new Error('Unknown mode "' + mode + '"');
+        }
+
+        item.className = 'type-modes' + ((current == mode) ? ' selected' : '');
+        items.push(item);
+    }
+
+    // retrieve the title of current mode
+    var currentMode = availableModes[current];
+    if (!currentMode) {
+        throw new Error('Unknown mode "' + current + '"');
+    }
+    var currentTitle = currentMode.text;
+
+    // create the html element
+    var box = document.createElement('button');
+    box.className = 'modes separator';
+    box.innerHTML = currentTitle + ' &#x25BE;';
+    box.title = 'Switch editor mode';
+    box.onclick = function () {
+        var menu = new ContextMenu(items);
+        menu.show(box);
+    };
+
+    return box;
+}

jsoneditor/js/texteditor.js

@@ -82,10 +82,8 @@ TextEditor.prototype._create = function (container, options, json) {
 
     // create format button
     var buttonFormat = document.createElement('button');
-    //buttonFormat.innerHTML = 'Format';
     buttonFormat.className = 'format';
     buttonFormat.title = 'Format JSON data, with proper indentation and line feeds';
-    //buttonFormat.className = 'jsoneditor-button';
     this.menu.appendChild(buttonFormat);
     buttonFormat.onclick = function () {
         try {
@@ -98,10 +96,8 @@ TextEditor.prototype._create = function (container, options, json) {
 
     // create compact button
     var buttonCompact = document.createElement('button');
-    //buttonCompact.innerHTML = 'Compact';
     buttonCompact.className = 'compact';
     buttonCompact.title = 'Compact JSON data, remove all whitespaces';
-    //buttonCompact.className = 'jsoneditor-button';
     this.menu.appendChild(buttonCompact);
     buttonCompact.onclick = function () {
         try {
@@ -112,6 +108,12 @@ TextEditor.prototype._create = function (container, options, json) {
         }
     };
 
+    // create mode box
+    if (this.options && this.options.modes && this.options.modes.length) {
+        var modeBox = createModeBox(this, this.options.modes, this.options.mode);
+        this.menu.appendChild(modeBox);
+    }
+
     this.content = document.createElement('div');
     this.content.className = 'outer';
     this.frame.appendChild(this.content);

jsoneditor/js/treeeditor.js

@@ -546,14 +546,9 @@ TreeEditor.prototype._createFrame = function () {
 
     // create undo/redo buttons
     if (this.history) {
-        // create separator
-        var separator = document.createElement('span');
-        separator.innerHTML = ' ';
-        this.menu.appendChild(separator);
-
         // create undo button
         var undo = document.createElement('button');
-        undo.className = 'undo';
+        undo.className = 'undo separator';
         undo.title = 'Undo last action (Ctrl+Z)';
         undo.onclick = function () {
             editor._onUndo();
@@ -579,6 +574,12 @@ TreeEditor.prototype._createFrame = function () {
         this.history.onChange();
     }
 
+    // create mode box
+    if (this.options && this.options.modes && this.options.modes.length) {
+        var modeBox = createModeBox(this, this.options.modes, this.options.mode);
+        this.menu.appendChild(modeBox);
+    }
+
     // create search box
     if (this.options.search) {
         this.searchBox = new SearchBox(this, this.menu);