Implemented #183: display a checkbox left from boolean values, so you can easily switch between true/false.

HISTORY.md

@@ -7,6 +7,8 @@ https://github.com/josdejong/jsoneditor
 
 - Implemented support for JSON schema validation, powered by `ajv`. A JSON
   schema can be configured via the option `schema` or the method `setSchema`.
+- Implemented #183: display a checkbox left from boolean values, so you can
+  easily switch between true/false.
 - Added a minimalist bundle to the `dist` folder, excluding `ace` and `ajv`.
 - Fixed an error throw when switching to mode "code" via the menu.
 - Fixed interfering shortcut keys: changed quick keys to select multiple fields

README.md

@@ -34,9 +34,11 @@ Supported browsers: Chrome, Firefox, Safari, Opera, Internet Explorer 9+.
 - Format and compact JSON.
 - Colorized code (powered by [Ace](https://ace.c9.io)).
 - Inspect JSON (powered by [Ace](https://ace.c9.io)).
+- JSON schema validation (powered by [ajv](https://github.com/epoberezkin/ajv)).
 
 ### Text editor
 - Format and compact JSON.
+- JSON schema validation (powered by [ajv](https://github.com/epoberezkin/ajv)).
 
 
 ## Documentation

src/js/Node.js

@@ -980,7 +980,7 @@ Node.prototype.removeChild = function(node) {
 
 /**
  * Remove a child node node from this node
- * This method is equal to Node.removeChild, except that _remove firex an
+ * This method is equal to Node.removeChild, except that _remove fire an
  * onChange event.
  * @param {Node} node
  * @private
@@ -1184,6 +1184,29 @@ Node.prototype._updateDomValue = function () {
       domValue.title = '';
     }
 
+    // show checkbox when the value is a boolean
+    if (type === 'boolean') {
+      if (!this.dom.checkbox) {
+        this.dom.checkbox = document.createElement('input');
+        this.dom.checkbox.type = 'checkbox';
+        this.dom.tdCheckbox = document.createElement('td');
+        this.dom.tdCheckbox.className = 'jsoneditor-tree';
+        this.dom.tdCheckbox.appendChild(this.dom.checkbox);
+
+        this.dom.tdValue.parentNode.insertBefore(this.dom.tdCheckbox, this.dom.tdValue);
+      }
+
+      this.dom.checkbox.checked = this.value;
+    }
+    else {
+      // cleanup checkbox when displayed
+      if (this.dom.tdCheckbox) {
+        this.dom.tdCheckbox.parentNode.removeChild(this.dom.tdCheckbox);
+        delete this.dom.tdCheckbox;
+        delete this.dom.checkbox;
+      }
+    }
+
     // strip formatting from the contents of the editable div
     util.stripFormatting(domValue);
   }
@@ -1984,6 +2007,12 @@ Node.prototype.onEvent = function (event) {
     }
   }
 
+  // swap the value of a boolean when the checkbox displayed left is clicked
+  if (type == 'change' && target == dom.checkbox) {
+    this.dom.value.innerHTML = !this.value;
+    this._getDomValue();
+  }
+
   // value events
   var domValue = dom.value;
   if (target == domValue) {

src/js/textmode.js

@@ -397,7 +397,7 @@ textmode.validate = function () {
     // no valid JSON, don't validate
   }
 
-  // only validate the JSON when parsing the JSON succeeeded
+  // only validate the JSON when parsing the JSON succeeded
   if (doValidate && this.validateSchema) {
     //console.time('validate'); // TODO: clean up time measurement
     var valid = this.validateSchema(json);

src/js/treemode.js

@@ -370,12 +370,10 @@ treemode.validate = function () {
     return;
   }
 
-  //console.time('validate'); // TODO: clean up time measurement
+  // validate the JSON
   var valid = this.validateSchema(root.getValue());
-  //console.timeEnd('validate');
-
-  // apply all new errors
   if (!valid) {
+    // apply all new errors
     this.errorNodes = this.validateSchema.errors
         .map(function findNode (error) {
           return {

test/test_schema.html

@@ -64,7 +64,7 @@
   };
 
   var options = {
-    mode: 'text',
+    mode: 'tree',
     modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
     onError: function (err) {
       console.error(err);