added hier menu

css/main.css

@@ -406,7 +406,7 @@ label {
     padding-bottom: 20px;
 }
 
-#navViewMenu .dropdown-menu span{
+#navViewMenu .dropdown-menu span, #navHierarchicalMenu span{
     margin-right:10px;
 }
 
@@ -499,6 +499,16 @@ label {
     padding: 6px 9px;
 }
 
+.navbar-inverse .navbar-nav > .navSelectedTab > a, .navbar-inverse .navbar-nav > .navSelectedTab > a:hover, .navbar-inverse .navbar-nav > .navSelectedTab > a:focus{
+    color: #fff;
+    background-color: #aaa;
+    border-left-color: transparent;
+}
+
+#navDesignTab>.dropdown-menu{
+    min-width: 112px;
+}
+
 .navbar-inverse .navbar-nav > .dropdown > a .caret {
     border-top-color: #ddd;
     border-bottom-color: #ddd;

index.html

@@ -114,7 +114,13 @@
               <li><a id="exportSTL" href="#">Export STL</a></li>
           </ul>
         </li>
-        <li><a data-menu-id="navDesign" class="menuHoverControls" href="#">Design</a></li>
+          <li class="dropdown navDropdown" id="navDesignTab">
+          <a href="#" data-menu-id="navDesign" class="menuHoverControls">Design <b class="caret"></b></a>
+          <span class="dropdown-arrow"></span>
+          <ul id="navHierarchicalMenu" class="dropdown-menu">
+          </ul>
+        </li>
+        <!--<li><a data-menu-id="navDesign" class="menuHoverControls" href="#">Design</a></li>-->
         <li><a data-menu-id="navSim" class="menuHoverControls" href="#">Simulate</a></li>
         <li class="dropdown navDropdown">
           <a href="#" class="dropdown-toggle" id="viewMenuDropdown" data-toggle="dropdown">View <b class="caret"></b></a>

js/main.js

@@ -79,6 +79,7 @@ require.config({
         //UI
         navbar: 'menus/otherUI/Navbar',
         navViewMenu: 'menus/otherUI/NavViewMenu',//view dropdown
+        navHierarchicalMenu: 'menus/otherUI/NavHierarchicalMenu',//design dropdown
         ribbon: 'menus/otherUI/Ribbon',
         modalView: 'menus/otherUI/ModalView',
         console: 'menus/otherUI/Console',

js/menus/otherUI/NavHierarchicalMenu.js

+/**
+ * Created by ghassaei on 5/21/16.
+ */
+
+define(['jquery', 'underscore', 'backbone', 'text!menus/templates/NavHierarchicalMenu.html'],
+    function($, _, Backbone, template){
+
+    return Backbone.View.extend({
+
+        el: "#navHierarchicalMenu",
+
+        events: {
+            "click a":                                                    "_makeSelection"
+        },
+
+        initialize: function(){
+            _.bindAll(this, "render");
+        },
+
+
+
+        _makeSelection: function(e){
+            e.preventDefault();
+            var $target = $(e.target);
+            if ($target.data("hierlevel")) this.model.set("hierLevel", $target.data("hierlevel"));
+            console.log(this.model.get("hierLevel"));
+        },
+
+
+        render: function(){
+            this.$el.html(this.template(this.model.toJSON()));
+        },
+
+        template: _.template(template)
+    });
+});
\ No newline at end of file

js/menus/otherUI/Navbar.js

@@ -3,8 +3,8 @@
  */
 
 
-define(['jquery', 'underscore', 'backbone', 'fileSaver', 'navViewMenu', 'appState', 'plist', 'threeModel'],
-    function($, _, Backbone, fileSaver, NavViewMenu, appState, plist, three){
+define(['jquery', 'underscore', 'backbone', 'fileSaver', 'navViewMenu', 'navHierarchicalMenu', 'appState', 'plist', 'threeModel'],
+    function($, _, Backbone, fileSaver, NavViewMenu, NavHierarchicalMenu, appState, plist, three){
 
     return Backbone.View.extend({
 
@@ -13,6 +13,7 @@ define(['jquery', 'underscore', 'backbone', 'fileSaver', 'navViewMenu', 'appStat
         events: {
             "click #showHideMenu":                                  "_setMenuVisibility",
             "click .menuHoverControls":                             "_setNavSelection",
+            "click .hierDropdown":                                  "_setHierarchicalLevel",
             "shown.bs.modal .modal":                                "_showModal",
             "hide.bs.modal .modal":                                 "_hideModal",
 
@@ -37,6 +38,7 @@ define(['jquery', 'underscore', 'backbone', 'fileSaver', 'navViewMenu', 'appStat
         initialize: function(){
 
             this.viewMenu = new NavViewMenu({model:this.model});
+            this.hierarchicalMenu = new NavHierarchicalMenu({model:this.model});
 
             _.bindAll(this, "_setMenuVisibility", "_setNavSelection");
 
@@ -63,8 +65,9 @@ define(['jquery', 'underscore', 'backbone', 'fileSaver', 'navViewMenu', 'appStat
             if (navSelection == "navSim"){//choose which simulation package to pull up
                 this.model.set("currentNav", appState.get("materialClass") + "NavSim");
                 return;
-            } else if (navSelection == "navAssemble"){//choose which assembly package to pull up
-                if (this.model.get("materialClass") == "dna") navSelection = "navDNAAssemble";
+            } else if (navSelection == "navDesign" && appState.get("currentNav") == "navDesign"){//optionally show the design dropdown
+                this.hierarchicalMenu.render();
+                $(e.target).parent().addClass("open");
             }
 
             if (navSelection) this.model.set("currentNav", navSelection);
@@ -77,10 +80,15 @@ define(['jquery', 'underscore', 'backbone', 'fileSaver', 'navViewMenu', 'appStat
             else if (plist.allMenus[navSelection].parent) navSelection = plist.allMenus[navSelection].parent;
             _.each($(".menuHoverControls"), function(link){
                 var $link = $(link);
-                if ($link.data("menuId") == navSelection) $link.parent().addClass("open");//highlight
+                if ($link.data("menuId") == navSelection) $link.parent().addClass("navSelectedTab");//highlight
             });
         },
 
+        _setHierarchicalLevel: function(e){
+            e.preventDefault();
+            $(".open").removeClass("open");
+        },
+
         _logo: function(){
             var $logo = $("#logo");
             $logo.mouseover(function(){
@@ -93,6 +101,7 @@ define(['jquery', 'underscore', 'backbone', 'fileSaver', 'navViewMenu', 'appStat
 
         _deselectAllNavItems: function(){
             $(".open").removeClass("open");//no highlight
+            $(".navSelectedTab").removeClass("navSelectedTab");//no highlight
         },
 
         _showModal: function(e){

js/menus/templates/NavHierarchicalMenu.html

+<li><a class="hierDropdown" data-hierlevel="element" href="#"><%if (hierLevel=="element"){ %><span class="fui-check"></span> <% } %>Element</a></li>
+<li><a class="hierDropdown" data-hierlevel="function" href="#"><%if (hierLevel=="function"){ %><span class="fui-check"></span> <% } %>Function</a></li>
+<li><a class="hierDropdown" data-hierlevel="module" href="#"><%if (hierLevel=="module"){ %><span class="fui-check"></span> <% } %>Module</a></li>
+<li><a class="hierDropdown" data-hierlevel="system" href="#"><%if (hierLevel=="system"){ %><span class="fui-check"></span> <% } %>System</a></li>
\ No newline at end of file

js/models/AppState.js

@@ -37,7 +37,10 @@ define(['underscore', 'backbone', 'threeModel', 'three', 'plist', 'globals'],
 
             realisticColorScheme: false,
             materialType: null,
-            materialClass: null
+            materialClass: null,
+
+            //hierarchy
+            hierLevel: "function"//element, function, module, system
         },
 
         initialize: function(){