fix(tab): tabs are now styled directly via dom manipulations

ionic-team · Apr 11, 2016 · fbae1ab · fbae1ab
1 parent 6478b5d
commit fbae1ab
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 37 deletions.
diff --git a/js/angular/controller/tabsController.js b/js/angular/controller/tabsController.js
@@ -103,6 +103,8 @@ function($scope, $element, $ionicHistory) {
           uiSref: tab.uiSref
         });
       }
+
+      $scope.$broadcast("tabSelected", { selectedTab: tab, selectedTabIndex: tabIndex});
     }
   };
 

diff --git a/js/angular/directive/tabNav.js b/js/angular/directive/tabNav.js
@@ -5,11 +5,10 @@ IonicModule
     replace: true,
     require: ['^ionTabs', '^ionTab'],
     template:
-    '<a ng-class="{\'tab-item-active\': isTabActive(), \'has-badge\':badge, \'tab-hidden\':isHidden()}" ' +
+    '<a ng-class="{\'has-badge\':badge, \'tab-hidden\':isHidden()}" ' +
       ' ng-disabled="disabled()" class="tab-item">' +
       '<span class="badge {{badgeStyle}}" ng-if="badge">{{badge}}</span>' +
-      '<i class="icon {{getIconOn()}}" ng-if="getIconOn() && isTabActive()"></i>' +
-      '<i class="icon {{getIconOff()}}" ng-if="getIconOff() && !isTabActive()"></i>' +
+      '<i class="icon"></i>' +
       '<span class="tab-title" ng-bind-html="title"></span>' +
     '</a>',
     scope: {
@@ -57,6 +56,36 @@ IonicModule
       $scope.isTabActive = function() {
         return tabsCtrl.selectedTab() === tabCtrl.$scope;
       };
+
+      $scope.$watch("icon", function() {
+        styleTab();
+      });
+
+      $scope.$watch("iconOff", function() {
+        styleTab();
+      });
+
+      $scope.$watch("iconOn", function() {
+        styleTab();
+      });
+
+      function styleTab() {
+        // check if tab if active
+        if ( tabsCtrl.selectedTab() === tabCtrl.$scope ) {
+          $element.addClass('tab-item-active');
+          $element.find('i').removeClass($scope.getIconOff());
+          $element.find('i').addClass($scope.getIconOn());
+        }
+        else {
+          $element.removeClass('tab-item-active');
+          $element.find('i').removeClass($scope.getIconOn());
+          $element.find('i').addClass($scope.getIconOff());
+        }
+      }
+
+      $scope.$on("tabSelected", styleTab);
+
+      styleTab();
     }
   };
 }]);
diff --git a/test/unit/angular/directive/tabs.unit.js b/test/unit/angular/directive/tabs.unit.js
@@ -649,14 +649,21 @@ describe('tabs', function() {
     it('should change classes based on active', function() {
       var el = setup('icon-on="{{true}}" icon-off="{{false}}"');
 
-      el.isolateScope().isTabActive = function() { return true; };
+      tabsCtrl.selectedTab = function(){
+          return tabCtrl.$scope;
+      }
       el.isolateScope().$apply();
+      el.isolateScope().$broadcast("tabSelected", {});
       expect(el.hasClass('tab-item-active')).toBe(true);
       expect(el.find('.icon.true').length).toBe(1);
       expect(el.find('.icon.false').length).toBe(0);
 
+      tabsCtrl.selectedTab = function(){
+          return "somenthing that isn't the selected tab";
+      }
       el.isolateScope().isTabActive = function() { return false; };
       el.isolateScope().$apply();
+      el.isolateScope().$broadcast("tabSelected", {});
       expect(el.hasClass('tab-item-active')).toBe(false);
       expect(el.find('.icon.true').length).toBe(0);
       expect(el.find('.icon.false').length).toBe(1);

diff --git a/test/unit/utils/tap.unit.js b/test/unit/utils/tap.unit.js
@@ -1296,53 +1296,49 @@ describe('Ionic Tap', function() {
 
   it('Should not isKeyboardElement on date and select on Android and iPad', function() {
 
-    if ( ! /PhantomJS/.test(window.navigator.userAgent) ){
-      // these test cases don't work in phantom due to phantom bug, but do work in chrome
-      expect( ionic.tap.isKeyboardElement(null) ).toEqual(false);
+    expect( ionic.tap.isKeyboardElement(null) ).toEqual(false);
 
-      ionic.Platform.setPlatform('android');
+    ionic.Platform.setPlatform('android');
 
-      var ele = document.createElement('input');
-      ele.type = 'date';
-      expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
+    var ele = { type:'date'};
+    expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
 
-      ele.type = 'datetime-local';
-      expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
+    ele.type = 'datetime-local';
+    expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
 
-      ele.type = 'month';
-      expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
+    ele.type = 'month';
+    expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
 
-      ele.type = 'week';
-      expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
+    ele.type = 'week';
+    expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
 
-      ele.type = 'time';
-      expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
+    ele.type = 'time';
+    expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
 
-      ele = document.createElement('select');
-      expect ( ionic.tap.isKeyboardElement(ele)).toEqual(false);
+    ele = {};
+    expect ( ionic.tap.isKeyboardElement(ele)).toEqual(false);
 
-      ionic.Platform.setPlatform('ios');
-      ionic.Platform.ua = 'iPad';
+    ionic.Platform.setPlatform('ios');
+    ionic.Platform.ua = 'iPad';
 
-      ele = document.createElement('input');
-      ele.type = 'date';
-      expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
+    ele = {};
+    ele.type = 'date';
+    expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
 
-      ele.type = 'datetime-local';
-      expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
+    ele.type = 'datetime-local';
+    expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
 
-      ele.type = 'month';
-      expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
+    ele.type = 'month';
+    expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
 
-      ele.type = 'week';
-      expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
+    ele.type = 'week';
+    expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
 
-      ele.type = 'time';
-      expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
+    ele.type = 'time';
+    expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
 
-      ele = document.createElement('select');
-      expect ( ionic.tap.isKeyboardElement(ele)).toEqual(false);
-    }
+    ele = {};
+    expect ( ionic.tap.isKeyboardElement(ele)).toEqual(false);
   });
 
   it('Should isLabelWithTextInput', function() {