From 484d548d20d89d8f8706c2e8721980a4a75740ac Mon Sep 17 00:00:00 2001
From: Amanda Ghassaei <amandaghassaei@gmail.com>
Date: Thu, 29 Jan 2015 16:28:47 -0500
Subject: [PATCH] nav bar view working
---
js/main.js | 10 ++--
js/menus/MenuWrapperView.js | 25 ++++++---
js/menus/navbar.js | 100 +++++++++++++++++-------------------
js/models/AppState.js | 3 +-
main.html | 4 +-
5 files changed, 74 insertions(+), 68 deletions(-)
diff --git a/js/main.js b/js/main.js
index 678da2b2..fe93ef88 100644
--- a/js/main.js
+++ b/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));
});
diff --git a/js/menus/MenuWrapperView.js b/js/menus/MenuWrapperView.js
index e28a62f7..378ee3ad 100644
--- a/js/menus/MenuWrapperView.js
+++ b/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"});
},
diff --git a/js/menus/navbar.js b/js/menus/navbar.js
index 68d3c407..c18df0fe 100644
--- a/js/menus/navbar.js
+++ b/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
diff --git a/js/models/AppState.js b/js/models/AppState.js
index debdc8f2..063bff72 100644
--- a/js/models/AppState.js
+++ b/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(){
diff --git a/main.html b/main.html
index cccacafc..13519dae 100644
--- a/main.html
+++ b/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 -->
--
GitLab