menu2 -> navBar

2017-09-18 18:25:09 +03:00 · 2017-09-18 18:25:09 +03:00 · 05dda45265
parent 5d2b5e5202
commit 05dda45265
9 changed files with 165 additions and 198 deletions
--- a/gulpfile.js
+++ b/gulpfile.js
@ -132,7 +132,9 @@ gulp.task('bundle-css', ['mkdir'], function () {
    'src/css/menu.css',
    'src/css/searchbox.css',
    'src/css/autocomplete.css',
-    'src/css/treepath.css'
+    'src/css/treepath.css',
+    'src/css/statusbar.css',
+    'src/css/navigationbar.css'
  ])
      .pipe(concatCss(NAME + '.css'))
      .pipe(gulp.dest(DIST))
--- a/src/css/jsoneditor.css
+++ b/src/css/jsoneditor.css
@ -210,11 +210,16 @@ div.jsoneditor-outer {
  box-sizing: border-box;
 }

-div.jsoneditor-menu2 + div.jsoneditor-outer {
+div.jsoneditor-outer.has-nav-bar {
  margin: -61px 0 0 0;
  padding: 61px 0 0 0;
 }

+div.jsoneditor-outer.has-status-bar {
+  margin: -35px 0 -16px 0;
+  padding: 35px 0 16px 0;
+}
+
 textarea.jsoneditor-text,
 .ace-jsoneditor {
  min-height: 150px;
--- a/src/css/menu.css
+++ b/src/css/menu.css
@ -89,28 +89,6 @@ div.jsoneditor-menu > div.jsoneditor-modes > button.jsoneditor-separator {
  margin-left: 10px;
 }

-div.jsoneditor-menu > div.jsoneditor-curserinfo {
-  line-height: 30px;
-}
-
-div.jsoneditor-menu > div.jsoneditor-curserinfo > .jsoneditor-curserinfo-label {
-  margin: 0 2px 0 4px;
-}
-
-div.jsoneditor-menu > div.jsoneditor-curserinfo > .jsoneditor-curserinfo-val {
-  margin-right: 4px;
-}
-
-div.jsoneditor-menu > div.jsoneditor-curserinfo > .jsoneditor-curserinfo-count {
-  margin-left: 4px;
-}
-
-div.jsoneditor-menu > div.jsoneditor-curserinfo > span {
-  color: white;
-  opacity: 0.8;
-  font-size: 10pt;
-}
-
 div.jsoneditor-menu a {
  font-family: arial, sans-serif;
  font-size: 10pt;
@ -130,27 +108,3 @@ div.jsoneditor-menu a.jsoneditor-poweredBy {
  top: 0;
  padding: 10px;
 }
-
-div.jsoneditor-menu2 {
-  width: 100%;
-  height: 26px;
-  padding: 2px;
-  margin: 0;
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-  color: #1A1A1A;
-  background-color: #e6e6e6;
-  border-bottom: 1px solid #3883fa;
-}
-
-div.jsoneditor-menu2:before {
-  content: '';
-  width: 100%;
-  height: 1px;
-  background-color: white;
-  opacity: 0.8;
-  position: absolute;
-  left: 0;
-  margin-top: -3px;
-}
--- a/src/css/navigationbar.css
+++ b/src/css/navigationbar.css
@ -0,0 +1,31 @@
+div.jsoneditor-navigation-bar {
+  width: 100%;
+  height: 26px;
+  padding: 2px;
+  margin: 0;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #1A1A1A;
+  background-color: #e6e6e6;
+  border-bottom: 1px solid #3883fa;
+}
+
+div.jsoneditor-navigation-bar:before {
+  content: '';
+  width: 100%;
+  height: 1px;
+  background-color: white;
+  opacity: 0.8;
+  position: absolute;
+  left: 0;
+  margin-top: -3px;
+}
+
+div.jsoneditor-navigation-bar.nav-bar-empty:after {
+  content: 'Select a node ...';
+  color: rgba(104, 104, 91, 0.56);
+  position: absolute;
+  margin-left: 6px;
+  margin-top: -1px;
+}
--- a/src/css/statusbar.css
+++ b/src/css/statusbar.css
@ -0,0 +1,34 @@
+div.jsoneditor-statusbar {
+  line-height: 16px;
+  height: 17px;
+  color: #1A1A1A;
+  background-color: #e6e6e6;
+  margin-top: -17px;
+}
+
+div.jsoneditor-statusbar:before {
+  content: '';
+  width: 100%;
+  height: 1px;
+  background-color: #3883fa;  
+  position: absolute;
+  left: 0;
+  margin-top: 1px;
+  z-index: 999;
+}
+
+div.jsoneditor-statusbar > .jsoneditor-curserinfo-label {
+  margin: 0 2px 0 4px;
+}
+
+div.jsoneditor-statusbar > .jsoneditor-curserinfo-val {
+  margin-right: 4px;
+}
+
+div.jsoneditor-statusbar > .jsoneditor-curserinfo-count {
+  margin-left: 4px;
+}
+
+div.jsoneditor-statusbar > span {
+  font-size: 12px;
+}
--- a/src/js/JSONEditor.js
+++ b/src/js/JSONEditor.js
@ -82,7 +82,8 @@ function JSONEditor (container, options, json) {
        'ajv', 'schema', 'schemaRefs','templates',
        'ace', 'theme','autocomplete',
        'onChange', 'onEditable', 'onError', 'onModeChange',
-        'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation', 'sortObjectKeys', 'navigationBar'
+        'escapeUnicode', 'history', 'search', 'mode', 'modes', 'name', 'indentation', 
+        'sortObjectKeys', 'navigationBar', 'statusBar'
      ];

      Object.keys(options).forEach(function (option) {
--- a/src/js/textmode.js
+++ b/src/js/textmode.js
@ -36,6 +36,11 @@ var DEFAULT_THEME = 'ace/theme/jsoneditor';
 textmode.create = function (container, options) {
  // read options
  options = options || {};
+  
+  if(typeof options.statusBar === 'undefined') {
+    options.statusBar = true;
+  }
+
  this.options = options;

  // indentation
@ -77,7 +82,6 @@ textmode.create = function (container, options) {
  this.aceEditor = undefined;  // ace code editor
  this.textarea = undefined;  // plain text editor (fallback when Ace is not available)
  this.validateSchema = null;
-  this.curserInfoElements = {};

  // create a debounced validate function
  this._debouncedValidate = util.debounce(this.validate.bind(this), this.DEBOUNCE_INTERVAL);
@ -141,11 +145,6 @@ textmode.create = function (container, options) {
    });
  }

-  // create curser and count info
-  var curserAndCountInfo = document.createElement('div');
-  curserAndCountInfo.className = 'jsoneditor-curserinfo';
-  this.menu.appendChild(curserAndCountInfo);
-
  var emptyNode = {};
  var isReadOnly = (this.options.onEditable
  && typeof(this.options.onEditable === 'function')
@ -191,31 +190,6 @@ textmode.create = function (container, options) {
      });
    }

-    var lnLabel = document.createElement('span');
-    lnLabel.className = 'jsoneditor-curserinfo-label';
-    lnLabel.innerText = 'Ln:';
-
-    var lnVal = document.createElement('span');
-    lnVal.className = 'jsoneditor-curserinfo-val';
-    lnVal.innerText = 0;
-
-    curserAndCountInfo.appendChild(lnLabel);
-    curserAndCountInfo.appendChild(lnVal);
-
-    var colLabel = document.createElement('span');
-    colLabel.className = 'jsoneditor-curserinfo-label';
-    colLabel.innerText = 'Col:';
-
-    var colVal = document.createElement('span');
-    colVal.className = 'jsoneditor-curserinfo-val';
-    colVal.innerText = 0;
-
-    curserAndCountInfo.appendChild(colLabel);
-    curserAndCountInfo.appendChild(colVal);
-
-    this.curserInfoElements.colVal = colVal;
-    this.curserInfoElements.lnVal = lnVal;
-
    var poweredBy = document.createElement('a');
    poweredBy.appendChild(document.createTextNode('powered by ace'));
    poweredBy.href = 'http://ace.ajax.org';
@ -256,23 +230,60 @@ textmode.create = function (container, options) {
    textarea.onblur = this._onBlur.bind(this);
  }

-  var countLabel = document.createElement('span');
-  countLabel.className = 'jsoneditor-curserinfo-label';
-  countLabel.innerText = 'selected';
-  countLabel.style.display = 'none';
+  if (options.statusBar) {
+      
+      util.addClassName(this.content, 'has-status-bar');

-  var countVal = document.createElement('span');
-  countVal.className = 'jsoneditor-curserinfo-count';
-  countVal.innerText = 0;
-  countVal.style.display = 'none';
+      this.curserInfoElements = {};      
+      var statusBar = document.createElement('div');
+      statusBar.className = 'jsoneditor-statusbar';
+      this.frame.appendChild(statusBar);

-  this.curserInfoElements.countLabel = countLabel;
-  this.curserInfoElements.countVal = countVal;
+      if (this.mode == 'code') {
+        var lnLabel = document.createElement('span');
+        lnLabel.className = 'jsoneditor-curserinfo-label';
+        lnLabel.innerText = 'Ln:';
+  
+        var lnVal = document.createElement('span');
+        lnVal.className = 'jsoneditor-curserinfo-val';
+        lnVal.innerText = 0;
+  
+        statusBar.appendChild(lnLabel);
+        statusBar.appendChild(lnVal);
+  
+        var colLabel = document.createElement('span');
+        colLabel.className = 'jsoneditor-curserinfo-label';
+        colLabel.innerText = 'Col:';
+  
+        var colVal = document.createElement('span');
+        colVal.className = 'jsoneditor-curserinfo-val';
+        colVal.innerText = 0;
+  
+        statusBar.appendChild(colLabel);
+        statusBar.appendChild(colVal);
+  
+        this.curserInfoElements.colVal = colVal;
+        this.curserInfoElements.lnVal = lnVal;
+      } 
+    
+      var countLabel = document.createElement('span');
+      countLabel.className = 'jsoneditor-curserinfo-label';
+      countLabel.innerText = 'selected';
+      countLabel.style.display = 'none';

-  curserAndCountInfo.appendChild(countVal);
-  curserAndCountInfo.appendChild(countLabel);
+      var countVal = document.createElement('span');
+      countVal.className = 'jsoneditor-curserinfo-count';
+      countVal.innerText = 0;
+      countVal.style.display = 'none';

-  this.setSchema(this.options.schema, this.options.schemaRefs);
+      this.curserInfoElements.countLabel = countLabel;
+      this.curserInfoElements.countVal = countVal;
+
+      statusBar.appendChild(countVal);
+      statusBar.appendChild(countLabel);    
+  }
+
+  this.setSchema(this.options.schema, this.options.schemaRefs);  
 };

 /**
@ -302,20 +313,19 @@ textmode._onChange = function () {
 * @private
 */
 textmode._onSelect = function () {
-  var selectionRange = {};
-    
-  if (this.textarea) {    
-    selectionRange = util.getInputSelection(this.textarea);
-  } else if (this.aceEditor) {
-    var curserPos = this.aceEditor.getCursorPosition();
-    var selectedText = this.aceEditor.getSelectedText();
-    this.curserInfoElements.lnVal.innerText = curserPos.row + 1;
-    this.curserInfoElements.colVal.innerText = curserPos.column + 1;
-    this._setSelectionCountDisplay(selectedText.length);
-  }
-
-  if (selectionRange.start !== selectionRange.end) {
-    this._setSelectionCountDisplay(Math.abs(selectionRange.end - selectionRange.start));
+  if(this.options.statusBar) {
+    if (this.textarea) {
+      var selectionRange = util.getInputSelection(this.textarea);
+      if (selectionRange.start !== selectionRange.end) {
+        this._setSelectionCountDisplay(Math.abs(selectionRange.end - selectionRange.start));
+      }
+    } else if (this.aceEditor) {
+      var curserPos = this.aceEditor.getCursorPosition();
+      var selectedText = this.aceEditor.getSelectedText();
+      this.curserInfoElements.lnVal.innerText = curserPos.row + 1;
+      this.curserInfoElements.colVal.innerText = curserPos.column + 1;
+      this._setSelectionCountDisplay(selectedText.length);
+    }
  }
 };

@ -367,13 +377,15 @@ textmode._onBlur = function (event) {
 };

 textmode._setSelectionCountDisplay = function (value) {
-  if(value && this.curserInfoElements.countVal) {
-    this.curserInfoElements.countVal.innerText = value;
-    this.curserInfoElements.countVal.style.display = 'inline';
-    this.curserInfoElements.countLabel.style.display = 'inline';
-  } else {
-    this.curserInfoElements.countVal.style.display = 'none';
-    this.curserInfoElements.countLabel.style.display = 'none';
+  if (this.options.statusBar) {
+    if (value && this.curserInfoElements.countVal) {
+      this.curserInfoElements.countVal.innerText = value;
+      this.curserInfoElements.countVal.style.display = 'inline';
+      this.curserInfoElements.countLabel.style.display = 'inline';
+    } else {
+      this.curserInfoElements.countVal.style.display = 'none';
+      this.curserInfoElements.countLabel.style.display = 'none';
+    }
  }
 };

--- a/src/js/treemode.js
+++ b/src/js/treemode.js
@ -115,7 +115,7 @@ treemode._setOptions = function (options) {
    schema: null,
    schemaRefs: null,
    autocomplete: null,
-    navigationBar : false
+    navigationBar : true
  };

  // copy all options
@ -762,11 +762,11 @@ treemode._createFrame = function () {

  if(this.options.navigationBar) {
    // create second menu row for treepath
-    var menu2 = document.createElement('div');
-    menu2.className = 'jsoneditor-menu2';
-    this.frame.appendChild(menu2);
+    this.navBar = document.createElement('div');
+    this.navBar.className = 'jsoneditor-navigation-bar nav-bar-empty';
+    this.frame.appendChild(this.navBar);

-    this.treePath = new TreePath(menu2);
+    this.treePath = new TreePath(this.navBar);
    this.treePath.onSectionSelected(this._onTreePathSectionSelected.bind(this));
    this.treePath.onContextMenuItemSelected(this._onTreePathMenuItemSelected.bind(this));
  }
@ -874,6 +874,8 @@ treemode._onEvent = function (event) {
 */
 treemode._updateTreePath = function (pathNodes) {
  if (pathNodes && pathNodes.length) {
+    util.removeClassName(this.navBar, 'nav-bar-empty');
+    
    var pathObjs = [];
    pathNodes.forEach(function (node) {
      var pathObj = {
@ -892,6 +894,8 @@ treemode._updateTreePath = function (pathNodes) {
      pathObjs.push(pathObj);
    });
    this.treePath.setPath(pathObjs);
+  } else {
+    util.addClassName(this.navBar, 'nav-bar-empty');
  }

  function getName(node) {
@ -1242,6 +1246,9 @@ treemode._onKeyDown = function (event) {
 treemode._createTable = function () {
  var contentOuter = document.createElement('div');
  contentOuter.className = 'jsoneditor-outer';
+  if(this.options.navigationBar) {
+    util.addClassName(contentOuter, 'has-nav-bar');
+  }
  this.contentOuter = contentOuter;

  this.content = document.createElement('div');
--- a/test/test_navigationBar.html
+++ b/test/test_navigationBar.html
@ -1,79 +0,0 @@
-<!DOCTYPE HTML>
-<html>
-<head>
-  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
-
-  <link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
-  <script src="../dist/jsoneditor.js"></script>
-
-  <style type="text/css">
-    body {
-      font: 10.5pt arial;
-      color: #4d4d4d;
-      line-height: 150%;
-      width: 500px;
-      padding-left: 40px;
-    }
-
-    code {
-      background-color: #f5f5f5;
-    }
-
-    #jsoneditor {
-      width: 500px;
-      height: 500px;
-    }
-  </style>
-</head>
-<body>
-
-<p>
-  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>
-
-<form>
-  <div id="jsoneditor"></div>
-</form>
-
-<script>
-  var container, options, json, editor;
-
-  container = document.getElementById('jsoneditor');
-
-  options = {
-    mode: 'tree',
-    modes: ['code', 'form', 'text', 'tree', 'view'], // allowed modes
-    onError: function (err) {
-      alert(err.toString());
-    },
-    onChange: function () {
-      console.log('change');
-    },
-    indentation: 4,
-    escapeUnicode: true,
-    navigationBar: true
-  };
-
-  json = {
-    "array": [1, 2, [3,4,5]],
-    "boolean": true,
-    "htmlcode": '&quot;',
-    "escaped_unicode": '\\u20b9',
-    "unicode": '\u20b9,\uD83D\uDCA9',
-    "return": '\n',
-    "null": null,
-    "number": 123,
-    "object": {"a": "b", "c": "d"},
-    "string": "Hello World",
-    "url": "http://jsoneditoronline.org"
-  };
-
-  editor = new JSONEditor(container, options, json);
-
-  console.log('json', json);
-  console.log('string', JSON.stringify(json));
-</script>
-</body>
-</html>