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],
-                "boolean": true,
-                "null": null,
-                "number": 123,
-                "object": {"a": "b", "c": "d"},
-                "string": "Hello World"
+                'array': [1, 2, 3],
+                'boolean': true,
+                'null': null,
+                'number': 123,
+                'object': {'a': 'b', 'c': 'd'},
+                '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],
-            "boolean": true,
-            "null": null,
-            "number": 123,
-            "object": {"a": "b", "c": "d"},
-            "string": "Hello World"
+            'array': [1, 2, 3],
+            'boolean': true,
+            'null': null,
+            'number': 123,
+            'object': {'a': 'b', 'c': 'd'},
+            '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 {
-            font: 10pt arial;
-            font-family: arial, sans-serif;
-            font-size: 11pt;
+        body {
+            font: 10.5pt arial;
+            color: #4d4d4d;
+            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>
-    <select id="mode">
-        <option value="tree">tree</option>
-        <option value="view">view</option>
-        <option value="form">form</option>
-        <option value="code">code</option>
-        <option value="text">text</option>
-    </select>
+    Switch editor mode using the mode box.
+    Note that the mode can be changed programmatically as well using the method
+    <code>editor.setMode(mode)</code>, try it in the console of your browser.
 </p>
 
 <div id="jsoneditor"></div>
 
 <script type="text/javascript" >
-    // create switchable mode
-    var mode = document.getElementById('mode');
-    mode.onchange = function () {
-        editor.setMode(mode.value);
-    };
+    var container = document.getElementById('jsoneditor');
 
-    // 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],
-            "boolean": true,
-            "null": null,
-            "number": 123,
-            "object": {"a": "b", "c": "d"},
-            "string": "Hello World"
+            'array': [1, 2, 3],
+            'boolean': true,
+            'null': null,
+            'number': 123,
+            'object': {'a': 'b', 'c': 'd'},
+            '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;