Fixed #203: Objects and arrays in mode `form` and `view` are now expandable by clicking the field names too.

HISTORY.md

@@ -5,11 +5,13 @@ https://github.com/josdejong/jsoneditor
 
 ## not yet released, version 5.0.0
 
-- Replaced the PNG icon images with SVG. Thanks @1j01.
 - Implemented a new option `escapeUnicode`, which will show the hexadecimal 
   unicode instead of the character itself. (See #93 and #230).
 - Implemented method `getMode`.
 - Implemented option `onModeChange(oldMode, newMode)`.
+- Implemented #203: Objects and arrays in mode `form` and `view` are now
+  expandable by clicking the field names too.
+- Replaced the PNG icon images with SVG. Thanks @1j01.
 - Renamed options `change`, `editable`, `error` to respectively `onChange`,
   `onEditable`, and `onError`. Old options are still working and give a 
   deprecation warning.

src/css/jsoneditor.css

@@ -97,6 +97,11 @@
   background: transparent url('img/jsoneditor-icons.svg');
 }
 
+.jsoneditor.mode-view tr.expandable,
+.jsoneditor.mode-form tr.expandable {
+  cursor: pointer;
+}
+
 .jsoneditor div.tree button.collapsed {
   background-position: 0 -48px;
 }

src/js/Node.js

@@ -1574,12 +1574,15 @@ Node.prototype.updateDom = function (options) {
     var count = this.childs ? this.childs.length : 0;
     if (this.type == 'array') {
       domValue.innerHTML = '[' + count + ']';
+      this.dom.tr.className = 'expandable';
     }
     else if (this.type == 'object') {
       domValue.innerHTML = '{' + count + '}';
+      this.dom.tr.className = 'expandable';
     }
     else {
       domValue.innerHTML = this._escapeHTML(this.value);
+      this.dom.tr.className = '';
     }
   }
 
@@ -1756,7 +1759,7 @@ Node.prototype._createDomTree = function () {
 };
 
 /**
- * Handle an event. The event is catched centrally by the editor
+ * Handle an event. The event is caught centrally by the editor
  * @param {Event} event
  */
 Node.prototype.onEvent = function (event) {
@@ -1797,7 +1800,8 @@ Node.prototype.onEvent = function (event) {
   }
 
   // expand events
-  if (type == 'click' && target == dom.expand) {
+  if (type == 'click' &&
+      (target == dom.expand || node.editor.options.mode === 'view' || node.editor.options.mode === 'form')) {
     if (expandable) {
       var recurse = event.ctrlKey; // with ctrl-key, expand/collapse all
       this._onExpand(recurse);

src/js/textmode.js

@@ -72,7 +72,7 @@ textmode.create = function (container, options) {
   this.height = container.clientHeight;
 
   this.frame = document.createElement('div');
-  this.frame.className = 'jsoneditor';
+  this.frame.className = 'jsoneditor mode-' + this.options.mode;
   this.frame.onclick = function (event) {
     // prevent default submit action when the editor is located inside a form
     event.preventDefault();

src/js/treemode.js

@@ -476,7 +476,7 @@ treemode.scrollTo = function (top, callback) {
 treemode._createFrame = function () {
   // create the frame
   this.frame = document.createElement('div');
-  this.frame.className = 'jsoneditor';
+  this.frame.className = 'jsoneditor mode-' + this.options.mode;
   this.container.appendChild(this.frame);
 
   // create one global event listener to handle all events from all nodes