d

assets/diagram-js-code-editor.css

@@ -4,6 +4,7 @@
    right: 20px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.9);
+   color: rgb(0, 0, 0);
    border: solid 1px #CCC;
    border-radius: 2px;
    box-sizing: border-box;
@@ -18,50 +19,95 @@
    pointer-events: none;
  }
 
- .djs-editor.enabled {
-   color: rgb(0, 0, 0);
- }
-
  .djs-editor:not(.open) {
    overflow: hidden;
  }
-.toolbar #run {
-font-family: "Material Icons", sans-serif;
-
-}
-
- .run:before {
-   content: "build" !important;
-   
-   width: 35px;
-   height: 35px;
- }
-
- /* Style the buttons inside the navigation bar */
 
  .toolbar {
    display: none;
-   width: 620px;
+   width: 50%;
-   height: 135px;
+   height: 35px;
-   margin-left: 40px;
+   list-style-type: none;
+   padding: 0;
  }
 
- .toolbar button {
+ .djs-editor.open .toolbar {
-   color: #180101;
+  display: block;
-   text-align: center;
+  text-align: left;
-   font-size: 24px;
+  line-height: 35px;
-   display: inline-block;
+}
+ 
+.toolbar {
+  width: 100%;
+  float: left;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background-color: #f2f2f2;
+  border-bottom: 1px solid #ccc;
+  border-top: 1px solid #ccc;
+}
+.toolbar > div {
+  float: left;
+  display: block;
+  padding: 0px 15px;
+  border-right: 1px solid #ccc;
+}
+
+.toolbar div {
+  text-decoration: none;
+  font-weight: bold;
+  color: #069;
+}
+.toolbar div:hover {
+  color: #c00;
+  background-color: #fff;
+}
+
+.toolbar div.active {
+  background-color: rgb(201, 205, 248);
+}
+
+.trigger {
+  border: none;
+}
+
+.dropdown {
+  /* display: inline-block; */
+  position: relative;
+}
+
+.dropdown .dropdown-content {
+  display: none;
+  position: absolute;
+  background-color: #f2f2f2;
+  /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
+  z-index: 1;
+}
+
+.dropdown-content a {
+  text-decoration: none;
+  display: block;
+}
+
+.dropdown-content a:hover {background-color: #f1f1f1}
+
+.dropdown:hover .dropdown-content {
+  display: block;
+}
+
+ #run_btn {
+   font-family: "Material Icons", sans-serif;
  }
 
- /* Change the color of buttons on hover */
+ #run_btn:before {
-
+   content: "build";
- .toolbar button:hover {
-   color: rgb(34, 226, 89);
  }
 
  .djs-editor .ide {
    display: none;
-   width: 620px;
+   width: 100%;
+   min-width: 420px;
    height: 280px;
  }
 
@@ -69,12 +115,6 @@ font-family: "Material Icons", sans-serif;
    display: block;
  }
 
- .djs-editor.open .toolbar {
-   display: block;
-   text-align: left;
-   line-height: 35px;
- }
-
  .djs-editor:not(.open) .toggle {
    width: 46px;
    height: 46px;
@@ -106,45 +146,6 @@ font-family: "Material Icons", sans-serif;
    z-index: 1;
  }
 
-/* Dropdown Button */
-.dropbtn {
-  background-color: #04AA6D;
-  height: 35px;
-  color: white;
-  border: none;
-}
 
-/* The container <div> - needed to position the dropdown content */
+ /*  */
-.dropdown {
+ 
-  display: inline-block;
-}
-
-/* Dropdown Content (Hidden by Default) */
-.dropdown-content {
-  display: none;
-  position: absolute;
-  background-color: #f1f1f1;
-  /* min-width: 160px; */
-  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
-  z-index: 3;
-}
-
-/* Links inside the dropdown */
-.dropdown-content a {
-  color: black;
-  /* padding: 12px 16px; */
-  /* text-decoration: none; */
-  display: block;
-}
-.dropdown-content button {
-  display: block;
-  z-index: 2;
-}
-/* Change color of dropdown links on hover */
-.dropdown-content a:hover {background-color: #ddd;}
-
-/* Show the dropdown menu on hover */
-.dropdown:hover .dropdown-content {display: block;}
-
-/* Change the background color of the dropdown button when the dropdown content is shown */
-.dropdown:hover .dropbtn {background-color: #3e8e41;}

lib/Editor.js

@@ -47,9 +47,8 @@ export default function Editor(
 
     self.toggle();
   });
-  // ! Remove in prod
+
-  this._run = this._toggle;
+  domEvent.bind(this._run_btn, 'click', function (event) {
-  domEvent.bind(this._run, 'click', function (event) {
     event.preventDefault();
     event.stopPropagation();
 
@@ -78,21 +77,35 @@ export default function Editor(
     } else {
       response.msg; // Show Error Response
     }
+    self._eventBus.fire("editor.toolbar.update");
   });
 
   eventBus.on('editor.scripts.response', function (response) {
     if(response.type == "error"){
-      this.scripts = [{name:"No Scripts Available", description:"Either pound sand or contact your system administrator "}];
+      self.scripts = [{name:"No Scripts Available", description:"Either pound sand or contact your system administrator "}];
     } else {
-      this.scripts = response.scripts;
+      self.scripts = response.scripts;
     }
-    self._toolbar.innerHTML = "<button class='run'></button>" + generateScriptDropdown(this.scripts);
+    console.log(23);
+        self._eventBus.fire("editor.toolbar.update");
   });
 
-  eventBus.on('editor.toolbar.update', function (updates) {
+  eventBus.on('editor.objects.response', function (response) {
-  
+    if(response.type == "error"){
+      self.objects = [{name:"No Objects Available", description:"Either pound sand or contact your system administrator "}];
+    } else {
+      self.objects = response.objects;
+    }
+    self._eventBus.fire("editor.toolbar.update");
+  });
+
+  eventBus.on('editor.toolbar.update', function () {
+    self.scripts_menu.innerHTML = "";
+    self.scripts.forEach(element =>
+      self.scripts_menu.innerHTML += `<a>${element.name}</a>`);
   });
   
+  eventBus.fire('editor.objects.request');
   eventBus.fire('editor.scripts.request');
 }
 
@@ -112,7 +125,7 @@ Editor.prototype._init = function () {
   var parent = this._parent = document.createElement('div');
 
   // prevent drag propagation
-  domEvent.bind(parent, 'mousemove', function (event) {
+  domEvent.bind(parent, 'mousedown', function (event) {
     event.stopPropagation();
   });
 
@@ -135,13 +148,42 @@ Editor.prototype._init = function () {
   var run_btn = this._run_btn = document.createElement('div');
   run_btn.setAttribute("id", "run_btn");
 
-  var scripts_menu = this._scripts_menu = document.createElement('div');
-  scripts_menu.setAttribute("id", "scripts_menu");
-  domClasses(scripts_menu).add('dropdown');
 
+  var scripts_menu_container = document.createElement('div');
+  domClasses(scripts_menu_container).add('dropdown');
+
+  var scripts_menu_trigger = document.createElement('div');
+  scripts_menu_trigger.innerHTML = "Scripts";
+  domClasses(scripts_menu_trigger).add('trigger');
+
+  scripts_menu_container.appendChild(scripts_menu_trigger);
+  
+  var scripts_menu = this._scripts_menu = document.createElement('div');
+  domClasses(scripts_menu).add('dropdown-content');
+  scripts_menu.innerHTML = `
+  <a href="#">Link 1</a>
+  <a href="#">Link 2</a>
+  <a href="#">Link 3</a>`;
+
+  scripts_menu_container.appendChild(scripts_menu);
+
+  var objects_menu_container = document.createElement('div');
+  domClasses(objects_menu_container).add('dropdown');
+
+  var objects_menu_trigger = document.createElement('div');
+  objects_menu_trigger.innerHTML = "Data";
+  domClasses(objects_menu_trigger).add('trigger');
+
+  objects_menu_container.appendChild(objects_menu_trigger);
+  
   var objects_menu = this._objects_menu = document.createElement('div');
-  objects_menu.setAttribute("id", "objects_menu");
+  domClasses(objects_menu).add('dropdown-content');
-  domClasses(objects_menu).add('dropdown');
+  objects_menu.innerHTML = `
+  <a href="#">Link 1</a>
+  <a href="#">Link 2</a>
+  <a href="#">Link 3</a>`;
+
+  objects_menu_container.appendChild(objects_menu);
 
   // create ide textarea
   var ide_window = document.createElement('div');
@@ -149,14 +191,21 @@ Editor.prototype._init = function () {
   domClasses(ide_window).add('ide');
 
   toolbar.appendChild(run_btn);
-  toolbar.appendChild(scripts_menu);
+  toolbar.appendChild(objects_menu_container);
-  toolbar.appendChild(objects_menu);
+  toolbar.appendChild(scripts_menu_container);
 
   parent.appendChild(toolbar);
   parent.appendChild(ide_window);
 
   this._eventBus.fire('editor.toolbar.update');
 };
+Editor.prototype.updateObjectsMenu = function(){
+
+}
+
+Editor.prototype.updateScriptsMenu = function(){
+
+}
 
 Editor.prototype.validate = function () {
   this._eventBus.fire('editor.validate.request', { code: this._codestore.value });
@@ -227,16 +276,6 @@ Editor.prototype.isOpen = function () {
   return this._state.isOpen;
 };
 
-function generateScriptDropdown(scripts) {
-  let template = `<div class="dropdown">
-  <button class="dropbtn">Scripts</button>
-  <div class="dropdown-content">`;
-  scripts.forEach(element =>
-    template += `<button>${element.name}</button>`);
-  return template + '</div></div>';
-}
-
-
 /**
  * Triggers a change event
  *