diff --git a/HISTORY.md b/HISTORY.md index 3099655..cbeb500 100644 --- a/HISTORY.md +++ b/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. diff --git a/src/css/jsoneditor.css b/src/css/jsoneditor.css index 7e0d621..0c26f6c 100644 --- a/src/css/jsoneditor.css +++ b/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; } diff --git a/src/js/Node.js b/src/js/Node.js index 0c9051e..1cd5847 100644 --- a/src/js/Node.js +++ b/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); diff --git a/src/js/textmode.js b/src/js/textmode.js index 782cea7..c0b4e6a 100644 --- a/src/js/textmode.js +++ b/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(); diff --git a/src/js/treemode.js b/src/js/treemode.js index 62acb27..7e9232f 100644 --- a/src/js/treemode.js +++ b/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