Make "Select a node..." text translatable

src/css/navigationbar.css

@@ -11,12 +11,7 @@ div.jsoneditor-navigation-bar {
   color: #808080;
   background-color: #ebebeb;
   overflow: hidden;
+
+  font-family: arial, sans-serif;
   font-size: 10pt;
 }
-
-div.jsoneditor-navigation-bar.nav-bar-empty:after {
-  content: 'Select a node ...';
-  color: rgba(104, 104, 91, 0.56);
-  position: absolute;
-  margin-left: 5px;
-}

src/js/Node.js

@@ -3732,7 +3732,6 @@ Node.prototype.showContextMenu = function (anchor, onClose) {
 Node.prototype._showSortModal = function () {
   var node = this;
 
-  // TODO: escape the translated text
   var content = '<div class="pico-modal-contents">' +
       '<div class="pico-modal-header">' + translate('sort') + '</div>' +
       '<form>' +

src/js/TreePath.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var ContextMenu = require('./ContextMenu');
+var translate = require('./i18n').translate;
 
 /**
  * Creates a component that visualize path selection in tree based editors
@@ -14,23 +15,25 @@ function TreePath(container) {
     container.appendChild(this.path);
     this.reset();
   }
-};
+}
 
 /**
  * Reset component to initial status
  */
 TreePath.prototype.reset = function () {
-  this.path.innerHTML = '';
-}
+  this.path.innerHTML = translate('selectNode');
+};
 
 /**
  * Renders the component UI according to a given path objects
- * @param {Array<name: String, childs: Array>} pathObjs a list of path objects
+ * @param {Array<{name: String, childs: Array}>} pathObjs a list of path objects
  * 
  */
 TreePath.prototype.setPath = function (pathObjs) {
   var me = this;
-  this.reset();
+
+  this.path.innerHTML = '';
+
   if (pathObjs && pathObjs.length) {
     pathObjs.forEach(function (pathObj, idx) {
       var pathEl = document.createElement('span');
@@ -75,13 +78,13 @@ TreePath.prototype.setPath = function (pathObjs) {
     if (this.selectionCallback) {
       this.selectionCallback(pathObj);
     }
-  };
+  }
 
   function _onContextMenuItemClick(pathObj, selection) {
     if (this.contextMenuCallback) {
       this.contextMenuCallback(pathObj, selection);
     }
-  };
+  }
 };
 
 /**

src/js/i18n.js

@@ -33,6 +33,7 @@ var _defs = {
         'removeText': 'Remove',
         'removeTitle': 'Remove selected fields (Ctrl+Del)',
         'removeField': 'Remove this field (Ctrl+Del)',
+        'selectANode': 'Select a node...',
         'showAll': 'show all',
         'showMore': 'show more',
         'showMoreStatus': 'displaying ${visibleChilds} of ${totalChilds} items.',
@@ -93,6 +94,8 @@ var _defs = {
         'removeText': 'Remover',
         'removeTitle': 'Remover campos selecionados (Ctrl+Del)',
         'removeField': 'Remover este campo (Ctrl+Del)',
+        // TODO: correctly translate selectNode
+        'selectNode': 'Select a node...',
         // TODO: correctly translate showAll
         'showAll': 'mostre tudo',
         // TODO: correctly translate showMore

src/js/treemode.js

@@ -296,6 +296,10 @@ treemode.clear = function () {
     this.tbody.removeChild(this.node.getDom());
     delete this.node;
   }
+
+  if (this.treePath) {
+    this.treePath.reset();
+  }
 };
 
 /**