Create option to hide the blue main menu bar on top (#596)

* ability to hide main menu bar; minor fixes for typos, JSDoc etc.

* fix CSS issue when mainMenuBar is hidden in all modes; other minor refactoring

docs/api.md

@@ -234,6 +234,10 @@ Constructs a new JSONEditor.
      - Can return an object `{startFrom: number, options: string[]}`. Here `startFrom` determines the start character from where the existing text will be replaced. `startFrom` is `0` by default, replacing the whole text.
      - Can return a `Promise` resolving one of the return types above to support asynchronously retrieving a list with options.
 
+- `{boolean} mainMenuBar`
+
+  Adds main menu bar - Contains format, sort, transform, search etc. functionality. True by default. Applicable in all types of `mode`.
+
 - `{boolean} navigationBar`
 
   Adds navigation bar to the menu - the navigation bar visualize the current position on the tree structure as well as allows breadcrumbs navigation. True by default. Only applicable when `mode` is 'tree', 'form' or 'view'.

src/css/jsoneditor.css

@@ -253,8 +253,8 @@ div.jsoneditor-outer {
   position: static;
   width: 100%;
   height: 100%;
-  margin: -35px 0 0 0;
+  margin: 0;
-  padding: 35px 0 0 0;
+  padding: 0;
 
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -262,13 +262,23 @@ div.jsoneditor-outer {
 }
 
 div.jsoneditor-outer.has-nav-bar {
-  margin: -61px 0 0 0;
+  margin-top: -26px;
-  padding: 61px 0 0 0;
+  padding-top: 26px;
 }
 
 div.jsoneditor-outer.has-status-bar {
-  margin: -35px 0 -26px 0;
+  margin-bottom: -26px;
-  padding: 35px 0 26px 0;
+  padding-bottom: 26px;
+}
+
+div.jsoneditor-outer.has-main-menu-bar {
+  margin-top: -35px;
+  padding-top: 35px;
+}
+
+div.jsoneditor-outer.has-nav-bar.has-main-menu-bar {
+  margin-top: -61px;
+  padding-top: 61px;
 }
 
 textarea.jsoneditor-text,

src/js/JSONEditor.js

@@ -167,7 +167,7 @@ JSONEditor.VALID_OPTIONS = [
   'colorPicker', 'onColorPicker',
   'timestampTag',
   'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation',
-  'sortObjectKeys', 'navigationBar', 'statusBar', 'languages', 'language', 'enableSort', 'enableTransform'
+  'sortObjectKeys', 'navigationBar', 'statusBar', 'mainMenuBar', 'languages', 'language', 'enableSort', 'enableTransform'
 ];
 
 /**

src/js/Node.js

@@ -1396,7 +1396,7 @@ Node.prototype.changeType = function (newType) {
         this.childs = [];
       }
 
-      this.childs.forEach(function (child, index) {
+      this.childs.forEach(function (child) {
         child.clearDom();
         delete child.index;
         child.fieldEditable = true;
@@ -3372,7 +3372,7 @@ Node.prototype._showColorPicker = function () {
       }
     });
   }
-}
+};
 
 /**
  * Remove nodes
@@ -3870,7 +3870,7 @@ Node.targetIsColorPicker = function (target) {
   }
 
   return false;
-}
+};
 
 /**
  * Remove the focus of given nodes, and move the focus to the (a) node before,

src/js/textmode.js

@@ -45,6 +45,9 @@ textmode.create = function (container, options) {
     options.statusBar = true;
   }
 
+  // setting default for textmode
+  options.mainMenuBar = options.mainMenuBar !== false;
+
   this.options = options;
 
   // indentation
@@ -109,6 +112,12 @@ textmode.create = function (container, options) {
     me._onKeyDown(event);
   };
 
+  this.content = document.createElement('div');
+  this.content.className = 'jsoneditor-outer';
+
+  if (this.options.mainMenuBar) {
+    util.addClassName(this.content, 'has-main-menu-bar');
+
     // create menu
     this.menu = document.createElement('div');
     this.menu.className = 'jsoneditor-menu';
@@ -171,15 +180,28 @@ textmode.create = function (container, options) {
       });
     }
 
+    if (this.mode == 'code') {
+      var poweredBy = document.createElement('a');
+      poweredBy.appendChild(document.createTextNode('powered by ace'));
+      poweredBy.href = 'http://ace.ajax.org';
+      poweredBy.target = '_blank';
+      poweredBy.className = 'jsoneditor-poweredBy';
+      poweredBy.onclick = function () {
+        // TODO: this anchor falls below the margin of the content,
+        // therefore the normal a.href does not work. We use a click event
+        // for now, but this should be fixed.
+        window.open(poweredBy.href, poweredBy.target);
+      };
+      this.menu.appendChild(poweredBy);
+    }
+  }
+
   var emptyNode = {};
   var isReadOnly = (this.options.onEditable
   && typeof(this.options.onEditable === 'function')
   && !this.options.onEditable(emptyNode));
 
-  this.content = document.createElement('div');
-  this.content.className = 'jsoneditor-outer';
   this.frame.appendChild(this.content);
-
   this.container.appendChild(this.frame);
 
   if (this.mode == 'code') {
@@ -224,19 +246,6 @@ textmode.create = function (container, options) {
       });
     }
 
-    var poweredBy = document.createElement('a');
-    poweredBy.appendChild(document.createTextNode('powered by ace'));
-    poweredBy.href = 'http://ace.ajax.org';
-    poweredBy.target = '_blank';
-    poweredBy.className = 'jsoneditor-poweredBy';
-    poweredBy.onclick = function () {
-      // TODO: this anchor falls below the margin of the content,
-      // therefore the normal a.href does not work. We use a click event
-      // for now, but this should be fixed.
-      window.open(poweredBy.href, poweredBy.target);
-    };
-    this.menu.appendChild(poweredBy);
-
     // register onchange event
     aceEditor.on('change', this._onChange.bind(this));
     aceEditor.on('changeSelection', this._onSelect.bind(this));
@@ -269,12 +278,12 @@ textmode.create = function (container, options) {
   this.dom.validationErrorsContainer = validationErrorsContainer;
   this.frame.appendChild(validationErrorsContainer);
 
-  var additinalErrorsIndication = document.createElement('div');
+  var additionalErrorsIndication = document.createElement('div');
-  additinalErrorsIndication.style.display = 'none';
+  additionalErrorsIndication.style.display = 'none';
-  additinalErrorsIndication.className = "jsoneditor-additional-errors fadein";
+  additionalErrorsIndication.className = "jsoneditor-additional-errors fadein";
-  additinalErrorsIndication.innerHTML = "Scroll for more ▿";
+  additionalErrorsIndication.innerHTML = "Scroll for more ▿";
-  this.dom.additinalErrorsIndication = additinalErrorsIndication;
+  this.dom.additionalErrorsIndication = additionalErrorsIndication;
-  validationErrorsContainer.appendChild(additinalErrorsIndication);
+  validationErrorsContainer.appendChild(additionalErrorsIndication);
 
   if (options.statusBar) {
     util.addClassName(this.content, 'has-status-bar');
@@ -428,20 +437,18 @@ textmode._onKeyDown = function (event) {
 
 /**
  * Event handler for mousedown.
- * @param {Event} event
  * @private
  */
-textmode._onMouseDown = function (event) {
+textmode._onMouseDown = function () {
   this._updateCursorInfo();
   this._emitSelectionChange();
 };
 
 /**
  * Event handler for blur.
- * @param {Event} event
  * @private
  */
-textmode._onBlur = function (event) {
+textmode._onBlur = function () {
   var me = this;
   // this allows to avoid blur when clicking inner elements (like the errors panel)
   // just make sure to set the isFocused to true on the inner element onclick callback
@@ -481,7 +488,7 @@ textmode._updateCursorInfo = function () {
         line: line,
         column: col,
         count: count
-      }
+      };
 
       if(me.options.statusBar) {
         updateDisplay();
@@ -500,7 +507,7 @@ textmode._updateCursorInfo = function () {
       line: line,
       column: col,
       count: count
-    }
+    };
 
     if(this.options.statusBar) {
       updateDisplay();
@@ -528,7 +535,7 @@ textmode._emitSelectionChange = function () {
     var currentSelection = this.getTextSelection();
     this._selectionChangedHandler(currentSelection.start, currentSelection.end, currentSelection.text);
   }
-}
+};
 
 /**
  * refresh ERROR annotations state
@@ -543,7 +550,7 @@ textmode._refreshAnnotations = function () {
     var errEnnotations = session.getAnnotations().filter(function(annotation) {return annotation.type === 'error' });
     session.setAnnotations(errEnnotations);
   }
-}
+};
 
 /**
  * Destroy the editor. Clean up DOM, event listeners, and web workers.
@@ -848,7 +855,7 @@ textmode._renderErrors = function(errors) {
   if (this.dom.validationErrors) {
     this.dom.validationErrors.parentNode.removeChild(this.dom.validationErrors);
     this.dom.validationErrors = null;
-    this.dom.additinalErrorsIndication.style.display = 'none';
+    this.dom.additionalErrorsIndication.style.display = 'none';
 
     this.content.style.marginBottom = '';
     this.content.style.paddingBottom = '';
@@ -933,12 +940,12 @@ textmode._renderErrors = function(errors) {
 
       this.dom.validationErrors = validationErrors;
       this.dom.validationErrorsContainer.appendChild(validationErrors);
-      this.dom.additinalErrorsIndication.title = errors.length + " errors total";
+      this.dom.additionalErrorsIndication.title = errors.length + " errors total";
 
       if (this.dom.validationErrorsContainer.clientHeight < this.dom.validationErrorsContainer.scrollHeight) {
-        this.dom.additinalErrorsIndication.style.display = 'block';
+        this.dom.additionalErrorsIndication.style.display = 'block';
         this.dom.validationErrorsContainer.onscroll = function () {
-          me.dom.additinalErrorsIndication.style.display = 
+          me.dom.additionalErrorsIndication.style.display =
             (me.dom.validationErrorsContainer.clientHeight > 0 && me.dom.validationErrorsContainer.scrollTop === 0) ? 'block' : 'none';
         }
       } else {
@@ -1027,13 +1034,10 @@ textmode.getTextSelection = function () {
 };
 
 /**
- * Callback registraion for selection change
+ * Callback registration for selection change
  * @param {selectionCallback} callback
  * 
  * @callback selectionCallback
- * @param {{row:Number, column:Number}} startPos selection start position
- * @param {{row:Number, column:Number}} endPos selected end position
- * @param {String} text selected text
  */
 textmode.onTextSelectionChange = function (callback) {
   if (typeof callback === 'function') {

src/js/treemode.js

@@ -129,8 +129,6 @@ treemode.destroy = function () {
  * @private
  */
 treemode._setOptions = function (options) {
-  var editor = this;
-
   this.options = {
     search: true,
     history: true,
@@ -140,6 +138,7 @@ treemode._setOptions = function (options) {
     schemaRefs: null,
     autocomplete: null,
     navigationBar : true,
+    mainMenuBar: true,
     onSelectionChange: null,
     colorPicker: true,
     onColorPicker: function (parent, color, onChange) {
@@ -149,11 +148,11 @@ treemode._setOptions = function (options) {
           color: color,
           popup: 'bottom',
           onDone: function (color) {
-            var alpha = color.rgba[3]
+            var alpha = color.rgba[3];
             var hex = (alpha === 1)
                 ? color.hex.substr(0, 7)  // return #RRGGBB
-                : color.hex               // return #RRGGBBAA
+                : color.hex;               // return #RRGGBBAA
-            onChange(hex)
+            onChange(hex);
           }
         }).show();
       }
@@ -942,6 +941,9 @@ treemode._createFrame = function () {
   this.frame.className = 'jsoneditor jsoneditor-mode-' + this.options.mode;
   this.container.appendChild(this.frame);
 
+  this.contentOuter = document.createElement('div');
+  this.contentOuter.className = 'jsoneditor-outer';
+
   // create one global event listener to handle all events from all nodes
   var editor = this;
   function onEvent(event) {
@@ -980,6 +982,9 @@ treemode._createFrame = function () {
   this.frame.onfocusin = onEvent;  // for IE
   this.frame.onfocusout = onEvent; // for IE
 
+  if (this.options.mainMenuBar) {
+    util.addClassName(this.contentOuter, 'has-main-menu-bar');
+
     // create menu
     this.menu = document.createElement('div');
     this.menu.className = 'jsoneditor-menu';
@@ -1077,6 +1082,7 @@ treemode._createFrame = function () {
     if (this.options.search) {
       this.searchBox = new SearchBox(this, this.menu);
     }
+  }
 
   if (this.options.navigationBar) {
     // create second menu row for treepath
@@ -1209,7 +1215,7 @@ treemode._updateTreePath = function (pathNodes) {
         name: getName(node),
         node: node,
         children: []
-      }
+      };
       if (node.childs && node.childs.length) {
         node.childs.forEach(function (childNode) {
           pathObj.children.push({
@@ -1373,10 +1379,9 @@ treemode._onMultiSelect = function (event) {
 
 /**
  * End of multiselect nodes by dragging
- * @param event
  * @private
  */
-treemode._onMultiSelectEnd = function (event) {
+treemode._onMultiSelectEnd = function () {
   // set focus to the context menu button of the first node
   if (this.multiselection.nodes[0]) {
     this.multiselection.nodes[0].dom.menu.focus();
@@ -1600,16 +1605,13 @@ treemode._onKeyDown = function (event) {
  * @private
  */
 treemode._createTable = function () {
-  var contentOuter = document.createElement('div');
-  contentOuter.className = 'jsoneditor-outer';
   if (this.options.navigationBar) {
-    util.addClassName(contentOuter, 'has-nav-bar');
+    util.addClassName(this.contentOuter, 'has-nav-bar');
   }
-  this.contentOuter = contentOuter;
 
   this.scrollableContent = document.createElement('div');
   this.scrollableContent.className = 'jsoneditor-tree';
-  contentOuter.appendChild(this.scrollableContent);
+  this.contentOuter.appendChild(this.scrollableContent);
 
   // the jsoneditor-tree-inner div with bottom padding is here to
   // keep space for the action menu dropdown. It's created as a
@@ -1643,7 +1645,7 @@ treemode._createTable = function () {
   this.tbody = document.createElement('tbody');
   this.table.appendChild(this.tbody);
 
-  this.frame.appendChild(contentOuter);
+  this.frame.appendChild(this.contentOuter);
 };
 
 /**
@@ -1707,12 +1709,10 @@ treemode.getSelection = function () {
 };
 
 /**
- * Callback registraion for selection change
+ * Callback registration for selection change
  * @param {selectionCallback} callback 
  * 
  * @callback selectionCallback
- * @param {SerializableNode=} start
- * @param {SerializableNode=} end
  */
 treemode.onSelectionChange = function (callback) {
   if (typeof callback === 'function') {
@@ -1731,7 +1731,7 @@ treemode.onSelectionChange = function (callback) {
 treemode.setSelection = function (start, end) {
   // check for old usage
   if (start && start.dom && start.range) {
-    console.warn('setSelection/getSelection usage for text selection is depracated and should not be used, see documantaion for supported selection options');
+    console.warn('setSelection/getSelection usage for text selection is deprecated and should not be used, see documentation for supported selection options');
     this.setDomSelection(start);
   }
 
@@ -1747,7 +1747,7 @@ treemode.setSelection = function (start, end) {
  * Returns a set of Nodes according to a range of selection
  * @param {{path: Array.<String>}} start object contains the path for range start 
  * @param {{path: Array.<String>}=} end object contains the path for range end
- * @return {Array.<Node>} Node intances on the given range
+ * @return {Array.<Node>} Node instances on the given range
  * @private
  */
 treemode._getNodeInstancesByRange = function (start, end) {