From bea6446c00140fa45da8f34cb2cb8d3b9a43dd1b Mon Sep 17 00:00:00 2001 From: Michael Hackstein Date: Wed, 10 Apr 2013 14:13:29 +0200 Subject: [PATCH] GraphViewer: Improved Spec and UI for GraphViewer --- .../specGraphViewer/graphViewerUISpec.js | 79 ++++++++++++++++++- html/admin/js/graphViewer/ui/graphViewerUI.js | 57 ++++++++++++- 2 files changed, 132 insertions(+), 4 deletions(-) diff --git a/html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerUISpec.js b/html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerUISpec.js index 13ce1c1c09..33b8a7d9cb 100644 --- a/html/admin/js/graphViewer/jasmine_test/specGraphViewer/graphViewerUISpec.js +++ b/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(); }); diff --git a/html/admin/js/graphViewer/ui/graphViewerUI.js b/html/admin/js/graphViewer/ui/graphViewerUI.js index 4dc6be9731..2751891a63 100644 --- a/html/admin/js/graphViewer/ui/graphViewerUI.js +++ b/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); + } \ No newline at end of file