refactor(navBar): use class interpolation

ionic-team · Feb 13, 2014 · 35ad051 · 35ad051
1 parent 65e10af
commit 35ad051
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 10 deletions.
diff --git a/js/ext/angular/src/directive/ionicViewState.js b/js/ext/angular/src/directive/ionicViewState.js
@@ -65,10 +65,9 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
       backButtonType: '@',
       backButtonLabel: '@',
       backButtonIcon: '@',
-      alignTitle: '@',
-      barType: '@type'
+      alignTitle: '@'
     },
-    template: '<header class="bar bar-header nav-bar invisible" ng-class="barType">' +
+    template: '<header class="bar bar-header nav-bar {{type}} {{isInvisible ? \'invisible\' : \'\'}}">' +
         '<div class="buttons"> ' +
           '<button view-back class="back-button button hide" ng-if="enableBackButton"></button>' +
           '<button ng-click="button.tap($event)" ng-repeat="button in leftButtons" class="button no-animation {{button.type}}" bind-html-unsafe="button.content"></button>' +
@@ -97,14 +96,16 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
         var canHaveBackButton = !(!tAttrs.backButtonType && !tAttrs.backButtonLabel && !tAttrs.backButtonIcon);
         $scope.enableBackButton = canHaveBackButton;
 
+        $scope.isInvisible = true;
         $rootScope.$on('viewState.showNavBar', function(e, showNavBar) {
-          if(showNavBar === false) {
-            $element[0].classList.add('invisible');
-          } else {
-            $element[0].classList.remove('invisible');
-          }
+          $scope.isInvisible = !showNavBar;
         });
 
+        function setBarType(value, oldValue) {
+          if (oldValue) $element.removeClass(oldValue);
+          $element.addClass(value);
+        }
+
         // Initialize our header bar view which will handle resizing and aligning our title labels
         var hb = new ionic.views.HeaderBar({
           el: $element[0],

diff --git a/js/ext/angular/test/directive/ionicView.unit.js b/js/ext/angular/test/directive/ionicView.unit.js
@@ -56,6 +56,7 @@ describe('Ionic View', function() {
 
   it('should show/hide navBar', function() {
     var element = compile('<nav-bar></nav-bar>')(scope);
+    scope.$digest();
     expect(element.hasClass('invisible')).toEqual(true);
     scope.$broadcast('viewState.showNavBar', true);
     scope.$digest();
@@ -70,10 +71,12 @@ describe('Ionic View', function() {
     scope.$digest();
     var navBar = element.find('header')
     expect(navBar.hasClass('invisible')).toEqual(true);
+  });
 
-    element = compile('<div><nav-bar></nav-bar><view></view></div>')(scope);
+  it('should show navbar when not using view attr', function() {
+    var element = compile('<div><nav-bar></nav-bar><view></view></div>')(scope);
     scope.$digest();
-    navBar = element.find('header')
+    var navBar = element.find('header')
     expect(navBar.hasClass('invisible')).toEqual(false);
   });