Tab bar selection works

hacking/TabBar.js

@@ -14,8 +14,8 @@ TabBarItem.prototype = {
 
       // Test if this is a "i" tag with icon in the class name
       // TODO: This heuristic might not be sufficient
-      if(child.tagName == 'i' && /icon/.test(child.className)) {
-        this.icon = child;
+      if(child.tagName.toLowerCase() == 'i' && /icon/.test(child.className)) {
+        this.icon = child.className;
         break;
       }
 
@@ -25,19 +25,17 @@ TabBarItem.prototype = {
     this.title = this.el.innerText.trim();
 
     this._tapHandler = function(e) {
-      console.log('TAP', e);
-      _this.onTap();
+      _this.onTap && _this.onTap(e);
     };
 
-    ionic.on('click', this._tapHandler, this.el);
     ionic.on('tap', this._tapHandler, this.el);
   },
 
-  onTap: function() {},
+  onTap: function() {
+  },
 
   // Remove the event listeners from this object
   destroy: function() {
-    ionic.off('click', this._tapHandler, this.el);
     ionic.off('tap', this._tapHandler, this.el);
   },
 
@@ -68,32 +66,45 @@ TabBar = function(opts) {
 };
 
 TabBar.prototype = {
+  // get all the items for the TabBar
+  getItems: function() {
+    return this.items;
+  },
+
+  // Add an item to the tab bar
   addItem: function(item) {
     this.items.push(item);
     this._bindEventsOnItem(item);
   },
 
+  // Remove an item from the tab bar
   removeItem: function(index) {
     var item = this.items[index];
     if(!item) {
       return;
     }
-    item.onSelect = undefined;
+    item.onTap = undefined;
     item.destroy();
   },
 
-  _itemActivateHandler: function(e) {
-  },
-
   _bindEventsOnItem: function(item) {
-    item.onSelect = function() {
-      console.log(item.title + ' selected!');
+    var _this = this;
+
+    if(!this._itemTapHandler) {
+      this._itemTapHandler = function(e) {
+        console.log('TAB HANDERL', e, this);
+        _this.selectItem(this);
+      };
     }
+    item.onTap = this._itemTapHandler;
   },
 
+  // Get the currently selected item
   getSelectedItem: function() {
     return this.selectedItem;
   },
+
+  // Set the currently selected item by index
   setSelectedItem: function(index) {
     this.selectedItem = this.items[index];
 
@@ -106,10 +117,18 @@ TabBar.prototype = {
     this.selectedItem && this.selectedItem.setSelected(true);
   },
 
-  getItems: function() {
-    return this.items;
+  // Select the given item assuming we can find it in our
+  // item list.
+  selectItem: function(item) {
+    for(var i = 0, j = this.items.length; i < j; i += 1) {
+      if(this.items[i] == item) {
+        this.setSelectedItem(i);
+        return;
+      }
+    }
   },
 
+  // Build the initial items list from the given DOM node.
   _buildItems: function() {
 
     var item, items = Array.prototype.slice.call(this.el.children);
@@ -124,6 +143,14 @@ TabBar.prototype = {
       this.selectedItem = this.items[0];
     }
 
+  },
+
+  // Destroy this tab bar
+  destroy: function() {
+    for(var i = 0, j = this.items.length; i < j; i += 1) {
+      this.items[i].destroy();
+    }
+    this.items.length = 0;
   }
 };
 

hacking/TabBar.unit.js

@@ -11,11 +11,9 @@ describe('TabBar view', function() {
       el: element.get(0)
     });
 
+    items = tabBar.getItems();
   });
   it('Should read tabs', function() {
-
-    items = tabBar.getItems();
-
     expect(items.length).toEqual(3);
     expect(items[0].getTitle()).toEqual('Tab 1');
     expect(items[1].getTitle()).toEqual('Tab 2');
@@ -29,8 +27,6 @@ describe('TabBar view', function() {
   });
 
   it('Should select', function() {
-    items = tabBar.getItems();
-
     // Track selection object
     tabBar.setSelectedItem(1);
     expect(tabBar.getSelectedItem().getTitle()).toEqual('Tab 2');
@@ -53,14 +49,24 @@ describe('TabBar view', function() {
     expect(items[2].el.classList.contains('active')).toEqual(false);
   });
 
-  it('Should set item icon', function() {
-    items = tabBar.getItems();
-
-    var item = items[0];
-    expect(item.getIcon()).toBe(undefined);
-  });
 
   it('Should handle item click event', function() {
+    debugger;
+    var item = items[0];
+    spyOn(item, 'onTap');
+    spyOn(tabBar, '_itemTapHandler');
+
+    var event = new CustomEvent('tap', {
+      target: item.el
+    });
+    item.el.dispatchEvent(event);
+
+    expect(item.onTap).toHaveBeenCalled();
+    expect(tabBar._itemTapHandler).toHaveBeenCalled();
+  });
+
+
+  it('Should unbind item on destroy', function() {
     var item = items[0];
     spyOn(item, 'onTap');
 
@@ -70,8 +76,45 @@ describe('TabBar view', function() {
     item.el.dispatchEvent(event);
 
     expect(item.onTap).toHaveBeenCalled();
-  });
 
+    item.onTap.isSpy = false;
+    spyOn(item, 'onTap');
+
+    tabBar.destroy();
+
+    var event = new CustomEvent('tap', {
+      target: item.el
+    });
+    item.el.dispatchEvent(event);
+
+    expect(item.onTap).not.toHaveBeenCalled();
+  });
+});
+
+describe('TabBarItem view', function() {
+  var element, tabBar, items;
+
+  beforeEach(function() {
+    element = $('<div class="tabs">' + 
+      '<a href="#" class="tab-item"><i class="icon-home"></i> Tab 1</a>' +
+      '<a href="#" class="tab-item">Tab 2</a>' +
+      '<a href="#" class="tab-item">Tab 3</a>');
+
+    tabBar = new TabBar({
+      el: element.get(0)
+    });
+
+    items = tabBar.getItems();
+  });
+  it('Should set item title', function() {
+    var item = items[0];
+    expect(item.getTitle()).toBe('Tab 1');
+  });
+  it('Should set item icon', function() {
+
+    var item = items[0];
+    expect(item.getIcon()).toBe('icon-home');
+  });
   it('Should unbind item on destroy', function() {
     var item = items[0];
     spyOn(item, 'onTap');

hacking/TabBarController.js

@@ -1,3 +1,5 @@
+(function(window, document, ionic) {
+
 TabBarController = function(options) {
   this.tabBar = options.tabBar;
 
@@ -77,3 +79,5 @@ TabBarController.prototype = {
     this.selectController(0);
   }
 }
+
+})(this, document, ion = this.ionic || {});

hacking/tabs.html

@@ -0,0 +1,52 @@
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Tab Bars</title>
+
+    <!-- Sets initial viewport load and disables zooming  -->
+    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+    <link href="/vendor/font-awesome/css/font-awesome.css" rel="stylesheet">
+    <link rel="stylesheet" href="../dist/ionic.css">
+  </head>
+  <body>
+
+    <section>
+
+      <header class="bar bar-header bar-dark">
+        <h1 class="title">Tab Bars</h1>
+      </header>
+
+      <main class="has-header">
+        
+      </main>
+      <nav id="tab-bar" class="tabs tabs-default">
+        <a class="tab-item" href="#">
+          <i class="icon-home"></i>
+          Friends
+        </a>
+        <a class="tab-item">
+          Enemies
+        </a>
+        <a class="tab-item">
+          Settings
+        </a>
+        <a class="tab-item">
+          More
+        </a>
+      </nav>
+    </section>
+
+    <script src="../../js/ionic-events.js"></script>
+    <script src="../../js/ionic-gestures.js"></script>
+    <script src="TabBar.js"></script>
+    <script src="TabBarController.js"></script>
+    <script>
+      // Grab the sections
+      var tab = document.getElementById('tab-bar');
+
+      var c = new TabBarController({
+        tabBar: new TabBar({ el: tab })
+      });
+    </script>
+  </body>
+</html>