nav bar view working

js/main.js

@@ -5,20 +5,18 @@
 
 $(function(){
 
+    //init web workers
     window.workers = persistentWorkers(8);
 
-
-    //init threeJS
+    //init threeJS and geometry models
     window.three = new ThreeModel();
-
     var lattice = new Lattice();
     new ThreeView({model:window.three, lattice:lattice});
 
-
     //setup ui
     var appState = new AppState();
-    var menu = new MenuWrapper({lattice:lattice, model:appState});
-    NavBar(menu);
+    new MenuWrapper({lattice:lattice, model:appState});
+    new NavBar({model:appState});
 
     lattice.addCell(new THREE.Vector3(0,0,0));
 });

js/menus/MenuWrapperView.js

@@ -13,7 +13,7 @@ MenuWrapper = Backbone.View.extend({
 
     initialize: function(options){
 
-        _.bindAll(this, "render");
+        _.bindAll(this, "render", "_updateCurrentTab", "_setVisibility");
 
         //init all tab view controllers
         this.latticeMenu = new LatticeMenuView({model:options.lattice});
@@ -28,9 +28,11 @@ MenuWrapper = Backbone.View.extend({
         this.assemMenuTabs = {assembler:"Assembler", animate:"Animate"};
 
         //bind events
+        this.listenTo(this.model, "change:currentNav", this.render);
         this.listenTo(this.model, "change:currentTab", this._updateCurrentTab);
+        this.listenTo(this.model, "change:menuIsVisible", this._setVisibility);
 
-        this._populateAndShow();
+        if (this.model.get("menuIsVisible")) this._populateAndShow();
     },
 
     _tabWasSelected: function(e){
@@ -64,11 +66,12 @@ MenuWrapper = Backbone.View.extend({
             this.scriptMenu.render();
         } else {
             console.warn("no tab initialized!");
-            $("menuContent").html('');//clear out content from menu
+            $("#menuContent").html('');//clear out content from menu
         }
 
     },
 
+    //todo get rid of this!!
     _deselectAllMenus: function(){
         this.latticeMenu.currentlySelected = false;
         this.importMenu.currentlySelected = false;
@@ -79,7 +82,7 @@ MenuWrapper = Backbone.View.extend({
 
     render: function(){
         var self = this;
-        this.hide(function(){
+        this._hide(function(){
             self._populateAndShow();
         });
     },
@@ -90,14 +93,22 @@ MenuWrapper = Backbone.View.extend({
             simMenuTabs:this.simMenuTabs,
             assemMenuTabs:this.assemMenuTabs})));
         this._updateCurrentTab();
-        this.show();
+        this._show();
     },
 
-    hide: function(callback){
+    _setVisibility: function(){
+        if(this.model.get("menuIsVisible")){
+            this._populateAndShow();
+        } else {
+            this._hide();
+        }
+    },
+
+    _hide: function(callback){
         this.$el.parent().animate({right: "-400"}, {done: callback});
     },
 
-    show: function(){
+    _show: function(){
         this.$el.parent().animate({right: "0"});
     },
 

js/menus/navbar.js

@@ -3,66 +3,62 @@
  */
 
 
-function NavBar(menu){
+//model is appState
+//not templating this view yet
 
-    var allMenus = $(".navMenu");
-    var allNavMenuLinks = $(".menuHoverControls");
-    var allNavDropdownMenus = $(".navDropdown");
-    var allNavTitles = $(".navbar-nav li a");
+NavBar = Backbone.View.extend({
 
-    allNavMenuLinks.mouseover(function(){
-        deselectAllNavItems();
-        $(this).parent().addClass("open");//highlight
-        var menuId = "#" + $(this).data("menuId");
-//        $(menuId).show();
-    });
+    el: "#globalNav",
 
-    var showHideMenuBtn = $("#showHideMenu");
-    showHideMenuBtn.mouseout(function(){
-        $(this).parent().removeClass("open");
-    });
-    //show/hide menu
-    showHideMenuBtn.click(function(e){
+    events: {
+        "click #showHideMenu":                          "_setMenuVis",
+        "click .menuHoverControls":                     "_setNavSelection",
+        "click .navDropdown":                           "_deselectAllNavItems"
+    },
+
+    initialize: function(){
+
+        _.bindAll(this, "_setMenuVis");
+
+        this._uiStuff();
+
+    },
+
+    _setMenuVis: function(e){
         e.preventDefault();
-        var $this = $(this);
-        var state = $this.data('state');
+        var $button = $(e.target);
+        var state = this.model.get("menuIsVisible");
         if(state){
-            $this.html("<< Show Menu");
-            menu.hide();
+            $button.html("<< Show Menu");
         } else {
-            $this.html("Hide Menu >>");
-            menu.show();
+            $button.html("Hide Menu >>");
         }
-        $this.data('state', !state);
-        $this.blur();
-    });
+        this.model.set("menuIsVisible", !state);
+        $button.blur();
+    },
 
-    function deselectAllNavItems(){
-        allNavMenuLinks.parent().removeClass("open");//no highlight
-        allNavDropdownMenus.removeClass("open");//no highlight
-        allNavTitles.blur();
-    }
-
-//    $("#threeContainer").mousedown(function(){
-//        hideAllMenus();
-//    });
-    allNavDropdownMenus.mouseover(function(){
-        deselectAllNavItems();
-        $(this).addClass("open");
-    });
-
-    //remove nav text coloring on click
-    allNavTitles.click(function(e){
+    _setNavSelection: function(e){
         e.preventDefault();
-        return false;
-    });
+        var $link = $(e.target);
+        this._deselectAllNavItems();
+        $link.parent().addClass("open");//highlight
+        var navSelection = $link.data("menuId");
+        if (navSelection == "about") return;
+        if (navSelection) this.model.set("currentNav", navSelection);
+    },
 
-    var $logo = $("#logo");
-    $logo.mouseover(function(){
-        $logo.attr("src","assets/logo-active.png");
-    });
-    $logo.mouseout(function(){
-        $logo.attr("src","assets/logo.png");
-    });
+    _uiStuff: function(){
+        var $logo = $("#logo");
+        $logo.mouseover(function(){
+            $logo.attr("src","assets/logo-active.png");
+        });
+        $logo.mouseout(function(){
+            $logo.attr("src","assets/logo.png");
+        });
+    },
+
+    _deselectAllNavItems: function(){
+        $(".menuHoverControls").parent().removeClass("open");//no highlight
+    }
 
-}
\ No newline at end of file
+});
\ No newline at end of file

js/models/AppState.js

@@ -9,7 +9,8 @@ AppState = Backbone.Model.extend({
 
     defaults: {
         currentNav:"design",//design, sim, assemble
-        currentTab:"lattice"
+        currentTab:"lattice",
+        menuIsVisible: true
     },
 
     initialize: function(){

main.html

@@ -74,7 +74,7 @@
 </head>
 <body>
 
-<nav class="navbar navbar-inverse navbar-embossed" role="navigation">
+<nav id="globalNav" class="navbar navbar-inverse navbar-embossed" role="navigation">
     <div class="navbar-header">
       <a id="mainNavLink" class="navbar-brand" target="_blank" href="http://cba.mit.edu"><img id="logo" src="assets/logo.png"></a>
     </div>
@@ -97,7 +97,7 @@
         <li><a data-menu-id="about" class="menuHoverControls" href="#">About</a></li>
        </ul>
         <ul class="nav navbar-nav pull-right">
-            <li><a id="showHideMenu" data-state=true href="#">Hide Menu >></a></li>
+            <li><a id="showHideMenu" href="#">Hide Menu >></a></li>
         </ul>
 
     </div><!-- /.navbar-collapse -->