fixed issue #2509, updated jsoneditor lib

js/apps/system/_admin/aardvark/APP/frontend/js/routers/router.js

@@ -49,21 +49,31 @@
 
     execute: function (callback, args) {
       if (this.lastRoute === '#queries') {
+        // cleanup input editors
+        this.queryView.removeInputEditors();
         // cleanup old canvas elements
         this.queryView.cleanupGraphs();
+        // cleanup old ace instances
+        this.queryView.removeResults();
       }
 
-      if (this.lastRoute === '#dasboard' || window.location.hash.substr(0, 5) === '#node') {
-        // dom graph cleanup
-        d3.selectAll('svg > *').remove();
-      }
-
-      if (this.lastRoute === '#logger') {
-        if (this.loggerView.logLevelView) {
-          this.loggerView.logLevelView.remove();
+      if (this.lastRoute) {
+        if (this.lastRoute.substr(0, 11) === '#collection' && this.lastRoute.split('/').length === 3) {
+          this.documentView.cleanupEditor();
         }
-        if (this.loggerView.logTopicView) {
-          this.loggerView.logTopicView.remove();
+
+        if (this.lastRoute === '#dasboard' || window.location.hash.substr(0, 5) === '#node') {
+          // dom graph cleanup
+          d3.selectAll('svg > *').remove();
+        }
+
+        if (this.lastRoute === '#logger') {
+          if (this.loggerView.logLevelView) {
+            this.loggerView.logLevelView.remove();
+          }
+          if (this.loggerView.logTopicView) {
+            this.loggerView.logTopicView.remove();
+          }
         }
       }
 

js/apps/system/_admin/aardvark/APP/frontend/js/views/documentView.js

@@ -207,13 +207,14 @@
 
       var container = document.getElementById('documentEditor');
       var options = {
-        change: function () {
+        onChange: function () {
           self.jsonContentChanged();
         },
         search: true,
         mode: 'tree',
         modes: ['tree', 'code'],
-        iconlib: 'fontawesome4'
+        ace: window.ace
+        // iconlib: 'fontawesome4'
       };
       this.editor = new JSONEditor(container, options);
       if (this.defaultMode) {
@@ -223,6 +224,12 @@
       return this;
     },
 
+    cleanupEditor: function () {
+      if (this.editor) {
+        this.editor.destroy();
+      }
+    },
+
     removeReadonlyKeys: function (object) {
       return _.omit(object, ['_key', '_id', '_from', '_to', '_rev']);
     },

js/apps/system/_admin/aardvark/APP/frontend/scss/_jsonEditor.scss

@@ -3,7 +3,7 @@
   background-color: $c-white !important;
   border: 0 solid $c-semi-transp !important;
 
-  .menu {
+  .jsoneditor-menu {
     background-color: $c-white !important;
     border-bottom: 1px solid $c-c2grey !important;
     border-left: 0 !important;
@@ -12,20 +12,83 @@
 
     button {
       border: 0 !important;
+      color: $c-black;
+      opacity: .4 !important;
+
+      &:hover {
+        background-color: $c-positive;
+        color: $c-white !important;
+        cursor: pointer;
+        opacity: 1 !important;
+      }
+
+      &.jsoneditor-selected {
+        background-color: $c-positive !important;
+        color: $c-white !important;
+        opacity: 1 !important;
+      }
+
+      &.jsoneditor-undo,
+      &.jsoneditor-redo {
+        opacity: 1 !important;
+      }
+
+      &.jsoneditor-format,
+      &.jsoneditor-expand-all,
+      &.jsoneditor-collapse-all,
+      &.jsoneditor-compact {
+        background-color: $c-black !important;
+        filter: invert(100%);
+
+        &:hover {
+          background-color: $c-positive !important;
+          color: $c-white !important;
+          filter: invert(0%);
+        }
+      }
     }
 
-    button:hover {
-      background-color: $c-positive;
-      color: $c-white;
-    }
+    .jsoneditor-modes {
+      button {
+        border: 0 !important;
+        color: $c-black;
+        opacity: .4 !important;
 
+        &:hover {
+          background-color: $c-positive;
+          color: $c-white !important;
+          cursor: pointer;
+          opacity: 1 !important;
+        }
+
+        &.jsoneditor-selected {
+          background-color: $c-positive !important;
+          color: $c-white !important;
+          opacity: 1 !important;
+        }
+      }
+    }
   }
 
-  .search {
-
-    .frame {
+  .jsoneditor-search {
+    .jsoneditor-frame {
       border: 0 !important;
-      margin: 3px !important;
+      margin-top: -1px !important;
+
+      button {
+        border-radius: 2px;
+
+        &.jsoneditor-refresh {
+          background-position: -96px -72px;
+          margin-right: -10px;
+          margin-top: 1px;
+          width: 25px;
+        }
+
+        &.jsoneditor-next {
+          margin-left: -10px;
+        }
+      }
 
       .refresh {
         background-position: -96px -73px;
@@ -38,8 +101,11 @@
         margin-left: 15px;
         margin-right: 15px;
         margin-top: 0;
-      }
 
+        &:focus {
+          border: 2px solid $c-positive !important;
+        }
+      }
     }
 
     .results {