GraphViewer: Improved Spec and UI for GraphViewer

html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerUISpec.js

@@ -48,10 +48,82 @@
       div.id = "contentDiv";
       document.body.appendChild(div);
       ui = new GraphViewerUI(div);
+      this.addMatchers({
+        
+        toBeADropdownMenu: function() {
+          var div = this.actual,
+            btn = div.children[0],
+            list = div.children[1],
+            msg = "";
+          this.message = function() {
+            return msg;
+          };
+          if (div.className !== "dropdown") {
+            msg = "div class to be dropdown";
+            return false;
+          }
+          // Check the toggle button
+          if (btn === undefined || btn.tagName.toLowerCase() !== "a") {
+            msg = "first element has to be a link";
+            return false;
+          }
+          if (btn.className !== "dropdown-toggle") {
+            msg = "first elements class to be dropdown-toggle";
+            return false;
+          }
+          if (btn.role !== "button") {
+            msg = "first elements role to be button";
+            return false;
+          }
+          if (btn["data-toggle"] !== "dropdown") {
+            msg = "first elements data-toggle to be dropdown";
+            return false;
+          }
+          if (btn["data-target"] !== "#") {
+            msg = "first elements data-target to be a link";
+            return false;
+          }
+          if (btn.children[0].tagName.toLowerCase() !== "b" && btn.children[0].className !== "caret") {
+            msg = "first element to contain a caret";
+            return false;
+          }
+
+          // Check the list
+          if (list.className !== "dropdown-menu") {
+            msg = "list element to be of class dropdown-menu";
+            return false;
+          }
+          if (list.role !== "menu") {
+            msg = "list elements role to be menu";
+            return false;
+          }
+          if (list["aria-labelledby"] !== btn.id) {
+            msg = "list elements aria-labelledby to be same as button id";
+            return false;
+          }
+          return true;
+        }
+      });
     });
     
     afterEach(function() {
-      document.removeChild(div);
+      document.body.removeChild(div);
+    });
+    
+    it('should throw an error if no container element is given', function() {
+      expect(
+        function() {
+          var t = new GraphViewerUI();
+        }
+      ).toThrow("A parent element has to be given.");
+    });
+    
+    it('should throw an error if the container element has no id', function() {
+      expect(
+        function() {
+          var t = new GraphViewerUI(document.createElement("div"));
+        }
+      ).toThrow("The parent element needs an unique id.");
     });
     
     it('should append a svg to the given parent', function() {
@@ -66,7 +138,6 @@
       });
       
       it('should contain the objects from eventDispatcher', function() {
-        
         expect($(toolboxSelector + " #control_drag").length).toEqual(1);
         expect($(toolboxSelector + " #control_edit").length).toEqual(1);
         expect($(toolboxSelector + " #control_expand").length).toEqual(1);
@@ -84,6 +155,7 @@
       it('should contain a menu for the node shapes', function() {
         var menuSelector = "#contentDiv #menubar #nodeshapermenu";
         expect($(menuSelector).length).toEqual(1);
+        expect($(menuSelector)[0]).toBeADropdownMenu();
         expect($(menuSelector +  " #control_none").length).toEqual(1);
         expect($(menuSelector +  " #control_circle").length).toEqual(1);
         expect($(menuSelector +  " #control_rect").length).toEqual(1);
@@ -96,6 +168,7 @@
       it('should contain a menu for the edge shapes', function() {
         var menuSelector = "#contentDiv #menubar #edgeshapermenu";
         expect($(menuSelector).length).toEqual(1);
+        expect($(menuSelector)[0]).toBeADropdownMenu();
         expect($(menuSelector + " #control_none").length).toEqual(1);
         expect($(menuSelector + " #control_arrow").length).toEqual(1);
         expect($(menuSelector + " #control_label").length).toEqual(1);
@@ -107,7 +180,7 @@
       it('should contain a menu for the adapter', function() {
         var menuSelector = "#contentDiv #menubar #adaptermenu";
         expect($(menuSelector).length).toEqual(1);
-        
+        expect($(menuSelector)[0]).toBeADropdownMenu();
         expect(false).toBeTruthy();
       });
       

html/admin/js/graphViewer/ui/graphViewerUI.js

@@ -27,8 +27,63 @@
 /// @author Copyright 2011-2013, triAGENS GmbH, Cologne, Germany
 ////////////////////////////////////////////////////////////////////////////////
 
-function GraphViewerUI(list, shaper) {
+function GraphViewerUI(container) {
   "use strict";
   
+  if (container === undefined) {
+    throw "A parent element has to be given.";
+  }
+  if (!container.id) {
+    throw "The parent element needs an unique id.";
+  }
+  
+  var makeBootstrapDropdown = function (div, id, title) {
+      var btn, caret, list;
+      div.className = "dropdown";
+      btn = document.createElement("a");
+      btn.className = "dropdown-toggle";
+      btn.id = id;
+      btn.role = "button";
+      btn["data-toggle"] = "dropdown";
+      btn["data-target"] = "#";
+      btn.appendChild(document.createTextNode(title));
+      caret = document.createElement("b");
+      caret.className = "caret";
+      btn.appendChild(caret);
+      list = document.createElement("ul");
+      list.className = "dropdown-menu";
+      list.role = "menu";
+      list["aria-labelledby"] = id;
+      div.appendChild(btn);
+      div.appendChild(list);
+      return list;
+    },
+    svg = document.createElement("svg"),
+    toolbox = document.createElement("div"),
+    menucontainer = document.createElement("div"),
+    menubar = document.createElement("ul"),
+    nodeShaperDropDown = document.createElement("div"),
+    
+    nodeShaperList = makeBootstrapDropdown(nodeShaperDropDown, "nodeshaperdropdown", "Node Shaper"),
+    
+    edgeShaperDropDown = document.createElement("div"),
+    edgeShaperList = makeBootstrapDropdown(edgeShaperDropDown, "edgeshaperdropdown", "Edge Shaper");
+    
+  
+  toolbox.id = "toolbox";
+  toolbox.className = "toolbox";
+  menubar.id = "menubar";
+  nodeShaperDropDown.id = "nodeshapermenu";
+  edgeShaperDropDown.id = "edgeshapermenu";
+  
+
+  // Append all elements
+  container.appendChild(svg);
+  container.appendChild(toolbox);
+  container.appendChild(menucontainer);
+  menucontainer.appendChild(menubar);
+  menubar.appendChild(nodeShaperDropDown);
+  menubar.appendChild(edgeShaperDropDown);
+  
   
 }