Commit 9552dfe6 authored by amandaghassaei's avatar amandaghassaei

added hier menu

parent bbc11d4f
......@@ -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;
......
......@@ -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>
......
......@@ -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',
......
/**
* 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
......@@ -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){
......
<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
......@@ -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(){
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment