make navbar more generic

build/vk.css

@@ -17,7 +17,9 @@
 .vk-container a { text-decoration: none; outline: 0; line-height: inherit; }
 .topNav { z-index: 666; width: 100%; height: 49px; border-bottom: 1px solid #6d8f75; position: fixed; top: 0px; background-color: #e4e4e4; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#96c7a2), to(#87b492)); border-top-right-radius: 5px; border-top-left-radius: 5px;}
 .nav-button.action .sprite.icon-refresh { margin: 0px 10px; }
-.bottomNav { height: 55px; z-index: 666; position: fixed; bottom: 0px; left: 0px; right: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: #464646; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#313131), to(#464646)); display: -webkit-box; display: -moz-box; display: box; }
+.bottomNav { height: 55px; z-index: 666; position: fixed; bottom: 0px; left: 0px; right: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: #464646; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#313131), to(#464646)); }
+.bottomNav .center.buttons { display: -webkit-box; display: -moz-box; display: box; }
+.bottomNav .right.buttons { height: 53px; float: right; }
 .bottomNav .selected { color: #111111; text-shadow: 0 1px 0 white; border-radius: 3px; background: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F;}
 .bottomNav .refreshIcon { width: 38px; height: 38px; border-radius: 3px; background: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F; }
 .bottomNav .refreshIcon:active { background-color: #C7DECC; }
@@ -46,9 +48,9 @@
 
 /*.nav-button.action span { display: inline-block; position: relative; top: 6px; }
 */
-.left-buttons a { float: left; }
-.right-buttons a { float: right; }
-.right-buttons a:active div { }
+.left.buttons a { float: left; }
+.right.buttons a { float: right; }
+.right.buttons a:active div { }
 .nav-button.action .sprite.icon-refresh { margin: 0px 10px; }
 .bottomNav a { display: block; line-height: 36px; text-align: center; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1;}
 .bottomNav a.refreshButton { width: 38px; height: 38px; display: block; margin: 8px 0px 7px 4px; }

build/vk.js

@@ -1538,7 +1538,7 @@ function Container(options) {
 
 util.inherits(Container, events.EventEmitter)
 })(vk);
-;(function(exports){
+;(function(exports, template){
 /**
  * Expose `NavBar`.
  */
@@ -1549,19 +1549,29 @@ exports.NavBar = NavBar
  * Create a new `NavBar`.
  */
 
-exports.navBar = function(target) {
-  return new NavBar(target)
+exports.navBar = function(target, className) {
+  return new NavBar(target, className)
 }
 
 /**
  * Initialize a new `NavBar`
  */
 
-function NavBar(target) {
+function NavBar(target, className) {
+  // grab from global scope
+  this.template = template
+  $(target).html(template)
   events.EventEmitter.call(this)
-
+  if (className) {
+    this.className = className
+    $(target).addClass(className)
+  }
   this.target = target
-  this.items = []
+  this.items = {
+    left: [],
+    center: [],
+    right: []
+  }
 }
 
 /**
@@ -1575,115 +1585,36 @@ util.inherits(NavBar, events.EventEmitter)
  */
 
 NavBar.prototype.render = function() {
+  var self = this
   var target = $(this.target)
-  target.html('')
-  target.append(this.build())
+  target.html(this.template)
+  Object.keys(this.items).forEach(function(side) {
+    var container = target.find('.' + side)
+    container.append(self.build(side))    
+  })
+
 }
 
 /**
  * returns new jQuery collection
  */
 
-NavBar.prototype.build = function() {
-  var output = []
-  this.items.forEach(function(item) {
-    output.push($(item.build())[0])
+NavBar.prototype.build = function(side) {
+  return this.items[side || 'center'].map(function(item) {
+    return $(item.build())[0]
   })
-  return output
 }
 
 /**
  * Add an item to this nav bar
  */
 
-NavBar.prototype.add = function(item) {
-  this.items.push(item)
+NavBar.prototype.add = function(item, side) {
+  this.items[side || 'center'].push(item)
   this.render()
 }
 
-})(vk);
-;(function(exports, template){
-/**
- * Expose `TopNav`.
- */
-
-exports.TopNav = TopNav
-
-/**
- * Create a new `TopNav`.
- */
-
-exports.topNav = function(target) {
-  return new TopNav(target)
-}
-
-/**
- * Initialize a new `TopNav`
- */
-
-function TopNav(target) {
-  this.template = template
-  vk.NavBar.apply(this, arguments)
-}
-
-/**
- * Inherit from NavBar
- */
-
-util.inherits(TopNav, vk.NavBar)
-
-/**
- * Render into HTML
- */
-
-TopNav.prototype.render = function() {
-  var target = $(this.target)
-  target.html(mustache.to_html(this.template))
-  this.items.forEach(function(item) {
-    $(item.options.target).append(item.build())
-  })
-}
-
-/**
- * Add a menu item
- */
-
-TopNav.prototype.add = function(button) {
-  this.items.push(button)
-  this.render()
-}
-
-})(vk, "<div class=\"topNav\">\n  <div class=\"left-buttons\"></div>\n  <div class=\"right-buttons\"></div>\n</div>");
-;(function(exports){
-/**
- * Expose `BottomNav`.
- */
-
-exports.BottomNav = BottomNav
-
-/**
- * Create a new `BottomNav`.
- */
-
-exports.bottomNav = function(target) {
-  return new BottomNav(target)
-}
-
-/**
- * Initialize a new `BottomNav`
- */
-
-function BottomNav(target) {
-  vk.NavBar.apply(this, arguments)
-  $(this.target).addClass('bottomNav')
-}
-
-/**
- * Inherit from NavBar
- */
-
-util.inherits(BottomNav, vk.NavBar)
-})(vk);
+})(vk, "<div class=\"{{className}}\">\n  <div class=\"left buttons\"></div>\n  <div class=\"center buttons\"></div>\n  <div class=\"right buttons\"></div>\n</div>");
 ;(function(exports){
 /**
  * Expose `Button`
@@ -1746,7 +1677,7 @@ exports.actionButton = function(options) {
  */
 
 function ActionButton(options) {
-  this.options = {target: '.right-buttons', className: 'action'}
+  this.options = {target: '.right.buttons', className: 'action'}
   vk.Button.apply(this, arguments)
   // grab from current scope if available
   if (typeof template !== "undefined") this.template = template

index.html

@@ -18,21 +18,20 @@
     <div class="footer"></div>
     <script type="text/javascript">
       var container = vk.container()
-      var nav = vk.topNav('.nav')
+      var nav = vk.navBar('.nav', 'topNav')
       var button = vk.actionButton({href: "#/submit!", id: "start", text: "Save"})
       nav.add(button)
 
-      var button2 = vk.actionButton({target: '.left-buttons', href: "#/submit!", id: "home", text: "Home"})
+      var button2 = vk.actionButton({target: '.left.buttons', href: "#/submit!", id: "home", text: "Home"})
       nav.add(button2)
 
       var body = vk.scrollArea('.body')
 
-      var footer = vk.bottomNav('.footer')
+      var footer = vk.navBar('.footer', 'bottomNav')
       var button3 = vk.navButton({href: "#/list", id: "list", text: "List"})
       footer.add(button3)
       var button4 = vk.navButton({href: "#/map", id: "map", text: "Map"})
       footer.add(button4)
-
     </script>
   </body>
-</html>
+</html>

lib/components/actionbutton/actionbutton.css

@@ -18,7 +18,7 @@
 
 /*.nav-button.action span { display: inline-block; position: relative; top: 6px; }
 */
-.left-buttons a { float: left; }
-.right-buttons a { float: right; }
-.right-buttons a:active div { }
+.left.buttons a { float: left; }
+.right.buttons a { float: right; }
+.right.buttons a:active div { }
 .nav-button.action .sprite.icon-refresh { margin: 0px 10px; }

lib/components/actionbutton/actionbutton.js

@@ -17,7 +17,7 @@ exports.actionButton = function(options) {
  */
 
 function ActionButton(options) {
-  this.options = {target: '.right-buttons', className: 'action'}
+  this.options = {target: '.right.buttons', className: 'action'}
   vk.Button.apply(this, arguments)
   // grab from current scope if available
   if (typeof template !== "undefined") this.template = template

lib/components/bottomnav/bottomnav.css

@@ -1,5 +1,7 @@
 .nav-button.action .sprite.icon-refresh { margin: 0px 10px; }
-.bottomNav { height: 55px; z-index: 666; position: fixed; bottom: 0px; left: 0px; right: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: #464646; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#313131), to(#464646)); display: -webkit-box; display: -moz-box; display: box; }
+.bottomNav { height: 55px; z-index: 666; position: fixed; bottom: 0px; left: 0px; right: 0px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: #464646; background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#313131), to(#464646)); }
+.bottomNav .center.buttons { display: -webkit-box; display: -moz-box; display: box; }
+.bottomNav .right.buttons { height: 53px; float: right; }
 .bottomNav .selected { color: #111111; text-shadow: 0 1px 0 white; border-radius: 3px; background: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F;}
 .bottomNav .refreshIcon { width: 38px; height: 38px; border-radius: 3px; background: #96C7A2; border-left: 1px solid #6F816F; border-right: 1px solid #6F816F; }
 .bottomNav .refreshIcon:active { background-color: #C7DECC; }

lib/components/navbar/navbar.html

@@ -0,0 +1,5 @@
+<div class="{{className}}">
+  <div class="left buttons"></div>
+  <div class="center buttons"></div>
+  <div class="right buttons"></div>
+</div>

lib/components/navbar/navbar.js

@@ -8,19 +8,29 @@ exports.NavBar = NavBar
  * Create a new `NavBar`.
  */
 
-exports.navBar = function(target) {
-  return new NavBar(target)
+exports.navBar = function(target, className) {
+  return new NavBar(target, className)
 }
 
 /**
  * Initialize a new `NavBar`
  */
 
-function NavBar(target) {
+function NavBar(target, className) {
+  // grab from global scope
+  this.template = template
+  $(target).html(template)
   events.EventEmitter.call(this)
-
+  if (className) {
+    this.className = className
+    $(target).addClass(className)
+  }
   this.target = target
-  this.items = []
+  this.items = {
+    left: [],
+    center: [],
+    right: []
+  }
 }
 
 /**
@@ -34,28 +44,31 @@ util.inherits(NavBar, events.EventEmitter)
  */
 
 NavBar.prototype.render = function() {
+  var self = this
   var target = $(this.target)
-  target.html('')
-  target.append(this.build())
+  target.html(this.template)
+  Object.keys(this.items).forEach(function(side) {
+    var container = target.find('.' + side)
+    container.append(self.build(side))    
+  })
+
 }
 
 /**
  * returns new jQuery collection
  */
 
-NavBar.prototype.build = function() {
-  var output = []
-  this.items.forEach(function(item) {
-    output.push($(item.build())[0])
+NavBar.prototype.build = function(side) {
+  return this.items[side || 'center'].map(function(item) {
+    return $(item.build())[0]
   })
-  return output
 }
 
 /**
  * Add an item to this nav bar
  */
 
-NavBar.prototype.add = function(item) {
-  this.items.push(item)
+NavBar.prototype.add = function(item, side) {
+  this.items[side || 'center'].push(item)
   this.render()
 }