Add option for show all path on the navigation bar (tree mode) (#628)

* navigation bar - allow to see all path when there is no space

* fix: ellipsis was not presented on some cases

* some code cleaning

src/css/treepath.css

@@ -2,6 +2,17 @@
 div.jsoneditor-treepath {
   padding: 0 5px;
   overflow: hidden;
+  white-space: nowrap;
+  outline: none;
+}
+
+div.jsoneditor-treepath.show-all {
+  word-wrap: break-word;
+  white-space: normal;
+  position: absolute;
+  background-color: #ebebeb;
+  z-index: 999;
+  box-shadow: 2px 2px 12px rgba(128, 128, 128, 0.3);
 }
 
 div.jsoneditor-treepath div.jsoneditor-contextmenu-root {
@@ -9,6 +20,19 @@ div.jsoneditor-treepath div.jsoneditor-contextmenu-root {
   left: 0;
 }
 
+div.jsoneditor-treepath span.jsoneditor-treepath-show-all-btn {
+  position: absolute;
+  background-color: #ebebeb;
+  left: 0;
+  height: 20px;
+  padding: 0 3px;
+  cursor: pointer;
+}
+
+div.jsoneditor-treepath.show-all span.jsoneditor-treepath-show-all-btn {
+  display: none;
+}
+
 div.jsoneditor-treepath span.jsoneditor-treepath-element{
   margin: 1px;
   font-family: arial, sans-serif;

src/js/ContextMenu.js

@@ -195,10 +195,11 @@ ContextMenu.visibleMenu = undefined;
 
 /**
  * Attach the menu to an anchor
- * @param {HTMLElement} anchor  Anchor where the menu will be attached as sibling.
- * @param {HTMLElement} frame   The root of the JSONEditor window
+ * @param {HTMLElement} anchor    Anchor where the menu will be attached as sibling.
+ * @param {HTMLElement} frame     The root of the JSONEditor window
+ * @param {Boolean=} ignoreParent ignore anchor parent in regard to the calculation of the position, needed when the parent position is absolute
  */
-ContextMenu.prototype.show = function (anchor, frame) {
+ContextMenu.prototype.show = function (anchor, frame, ignoreParent) {
   this.hide();
 
   // determine whether to display the menu below or above the anchor
@@ -224,7 +225,7 @@ ContextMenu.prototype.show = function (anchor, frame) {
     // doesn't fit above nor below -> show below
   }
 
-  var topGap = anchorRect.top - parentRect.top;
+  var topGap = ignoreParent ? 0 : (anchorRect.top - parentRect.top);
 
   // position the menu
   if (showBelow) {

src/js/TreePath.js

@@ -2,6 +2,7 @@
 
 var ContextMenu = require('./ContextMenu');
 var translate = require('./i18n').translate;
+var util = require('./util');
 
 /**
  * Creates a component that visualize path selection in tree based editors
@@ -14,6 +15,8 @@ function TreePath(container, root) {
     this.root = root;
     this.path = document.createElement('div');
     this.path.className = 'jsoneditor-treepath';
+    this.path.setAttribute('tabindex',0);
+    this.contentMenuClicked;
     container.appendChild(this.path);
     this.reset();
   }
@@ -52,6 +55,7 @@ TreePath.prototype.setPath = function (pathObjs) {
         sepEl.innerHTML = '►';
 
         sepEl.onclick = function () {
+          me.contentMenuClicked = true;
           var items = [];
           pathObj.children.forEach(function (child) {
             items.push({
@@ -61,21 +65,47 @@ TreePath.prototype.setPath = function (pathObjs) {
             });
           });
           var menu = new ContextMenu(items);
-          menu.show(sepEl, me.root);
+          menu.show(sepEl, me.root, true);
         };
 
         me.path.appendChild(sepEl);
       }
 
       if(idx === pathObjs.length - 1) {
-        var leftRectPos = (sepEl || pathEl).getBoundingClientRect().left;
+        var leftRectPos = (sepEl || pathEl).getBoundingClientRect().right;
         if(me.path.offsetWidth < leftRectPos) {
           me.path.scrollLeft = leftRectPos;
         }
+
+        if (me.path.scrollLeft) {
+          var showAllBtn = document.createElement('span');
+          showAllBtn.className = 'jsoneditor-treepath-show-all-btn';
+          showAllBtn.title = 'show all path';
+          showAllBtn.innerHTML = '...';
+          showAllBtn.onclick = _onShowAllClick.bind(me, pathObjs);
+          me.path.insertBefore(showAllBtn, me.path.firstChild);
+        }
       }
     });
   }
 
+  function _onShowAllClick(pathObjs) {
+    me.contentMenuClicked = false;
+    util.addClassName(me.path, 'show-all');
+    me.path.style.width = me.path.parentNode.getBoundingClientRect().width - 10 + 'px';
+    me.path.onblur = function() {
+      if (me.contentMenuClicked) {
+        me.contentMenuClicked = false;
+        me.path.focus();
+        return;
+      }
+      util.removeClassName(me.path, 'show-all');
+      me.path.onblur = undefined;
+      me.path.style.width = '';
+      me.setPath(pathObjs);
+    };
+  }
+
   function _onSegmentClick(pathObj) {
     if (this.selectionCallback) {
       this.selectionCallback(pathObj);