Skip to content

Commit fbae1ab

Browse files
author
Dan Bucholtz
committed
fix(tab): tabs are now styled directly via dom manipulations
1 parent 6478b5d commit fbae1ab

File tree

4 files changed

+71
-37
lines changed

4 files changed

+71
-37
lines changed

Diff for: ‎js/angular/controller/tabsController.js

+2
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,8 @@ function($scope, $element, $ionicHistory) {
103103
uiSref: tab.uiSref
104104
});
105105
}
106+
107+
$scope.$broadcast("tabSelected", { selectedTab: tab, selectedTabIndex: tabIndex});
106108
}
107109
};
108110

Diff for: ‎js/angular/directive/tabNav.js

+32-3
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,10 @@ IonicModule
55
replace: true,
66
require: ['^ionTabs', '^ionTab'],
77
template:
8-
'<a ng-class="{\'tab-item-active\': isTabActive(), \'has-badge\':badge, \'tab-hidden\':isHidden()}" ' +
8+
'<a ng-class="{\'has-badge\':badge, \'tab-hidden\':isHidden()}" ' +
99
' ng-disabled="disabled()" class="tab-item">' +
1010
'<span class="badge {{badgeStyle}}" ng-if="badge">{{badge}}</span>' +
11-
'<i class="icon {{getIconOn()}}" ng-if="getIconOn() && isTabActive()"></i>' +
12-
'<i class="icon {{getIconOff()}}" ng-if="getIconOff() && !isTabActive()"></i>' +
11+
'<i class="icon"></i>' +
1312
'<span class="tab-title" ng-bind-html="title"></span>' +
1413
'</a>',
1514
scope: {
@@ -57,6 +56,36 @@ IonicModule
5756
$scope.isTabActive = function() {
5857
return tabsCtrl.selectedTab() === tabCtrl.$scope;
5958
};
59+
60+
$scope.$watch("icon", function() {
61+
styleTab();
62+
});
63+
64+
$scope.$watch("iconOff", function() {
65+
styleTab();
66+
});
67+
68+
$scope.$watch("iconOn", function() {
69+
styleTab();
70+
});
71+
72+
function styleTab() {
73+
// check if tab if active
74+
if ( tabsCtrl.selectedTab() === tabCtrl.$scope ) {
75+
$element.addClass('tab-item-active');
76+
$element.find('i').removeClass($scope.getIconOff());
77+
$element.find('i').addClass($scope.getIconOn());
78+
}
79+
else {
80+
$element.removeClass('tab-item-active');
81+
$element.find('i').removeClass($scope.getIconOn());
82+
$element.find('i').addClass($scope.getIconOff());
83+
}
84+
}
85+
86+
$scope.$on("tabSelected", styleTab);
87+
88+
styleTab();
6089
}
6190
};
6291
}]);

Diff for: ‎test/unit/angular/directive/tabs.unit.js

+8-1
Original file line numberDiff line numberDiff line change
@@ -649,14 +649,21 @@ describe('tabs', function() {
649649
it('should change classes based on active', function() {
650650
var el = setup('icon-on="{{true}}" icon-off="{{false}}"');
651651

652-
el.isolateScope().isTabActive = function() { return true; };
652+
tabsCtrl.selectedTab = function(){
653+
return tabCtrl.$scope;
654+
}
653655
el.isolateScope().$apply();
656+
el.isolateScope().$broadcast("tabSelected", {});
654657
expect(el.hasClass('tab-item-active')).toBe(true);
655658
expect(el.find('.icon.true').length).toBe(1);
656659
expect(el.find('.icon.false').length).toBe(0);
657660

661+
tabsCtrl.selectedTab = function(){
662+
return "somenthing that isn't the selected tab";
663+
}
658664
el.isolateScope().isTabActive = function() { return false; };
659665
el.isolateScope().$apply();
666+
el.isolateScope().$broadcast("tabSelected", {});
660667
expect(el.hasClass('tab-item-active')).toBe(false);
661668
expect(el.find('.icon.true').length).toBe(0);
662669
expect(el.find('.icon.false').length).toBe(1);

Diff for: ‎test/unit/utils/tap.unit.js

+29-33
Original file line numberDiff line numberDiff line change
@@ -1296,53 +1296,49 @@ describe('Ionic Tap', function() {
12961296

12971297
it('Should not isKeyboardElement on date and select on Android and iPad', function() {
12981298

1299-
if ( ! /PhantomJS/.test(window.navigator.userAgent) ){
1300-
// these test cases don't work in phantom due to phantom bug, but do work in chrome
1301-
expect( ionic.tap.isKeyboardElement(null) ).toEqual(false);
1299+
expect( ionic.tap.isKeyboardElement(null) ).toEqual(false);
13021300

1303-
ionic.Platform.setPlatform('android');
1301+
ionic.Platform.setPlatform('android');
13041302

1305-
var ele = document.createElement('input');
1306-
ele.type = 'date';
1307-
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
1303+
var ele = { type:'date'};
1304+
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
13081305

1309-
ele.type = 'datetime-local';
1310-
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
1306+
ele.type = 'datetime-local';
1307+
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
13111308

1312-
ele.type = 'month';
1313-
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
1309+
ele.type = 'month';
1310+
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
13141311

1315-
ele.type = 'week';
1316-
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
1312+
ele.type = 'week';
1313+
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
13171314

1318-
ele.type = 'time';
1319-
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
1315+
ele.type = 'time';
1316+
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
13201317

1321-
ele = document.createElement('select');
1322-
expect ( ionic.tap.isKeyboardElement(ele)).toEqual(false);
1318+
ele = {};
1319+
expect ( ionic.tap.isKeyboardElement(ele)).toEqual(false);
13231320

1324-
ionic.Platform.setPlatform('ios');
1325-
ionic.Platform.ua = 'iPad';
1321+
ionic.Platform.setPlatform('ios');
1322+
ionic.Platform.ua = 'iPad';
13261323

1327-
ele = document.createElement('input');
1328-
ele.type = 'date';
1329-
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
1324+
ele = {};
1325+
ele.type = 'date';
1326+
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
13301327

1331-
ele.type = 'datetime-local';
1332-
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
1328+
ele.type = 'datetime-local';
1329+
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
13331330

1334-
ele.type = 'month';
1335-
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
1331+
ele.type = 'month';
1332+
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
13361333

1337-
ele.type = 'week';
1338-
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
1334+
ele.type = 'week';
1335+
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
13391336

1340-
ele.type = 'time';
1341-
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
1337+
ele.type = 'time';
1338+
expect( ionic.tap.isKeyboardElement(ele) ).toEqual(false);
13421339

1343-
ele = document.createElement('select');
1344-
expect ( ionic.tap.isKeyboardElement(ele)).toEqual(false);
1345-
}
1340+
ele = {};
1341+
expect ( ionic.tap.isKeyboardElement(ele)).toEqual(false);
13461342
});
13471343

13481344
it('Should isLabelWithTextInput', function() {

0 commit comments

Comments
 (0)