From 738ace89695b0c66340bde0f46a9fcd619eb10bf Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Tue, 4 Feb 2014 20:57:57 -0600 Subject: [PATCH] fix(navBar): Back button w/ text to use inner --- dist/js/ionic-angular.js | 134 ++++++++++-------- .../angular/src/directive/ionicViewState.js | 134 ++++++++++-------- .../angular/test/directive/ionicView.unit.js | 38 +++++ 3 files changed, 180 insertions(+), 126 deletions(-) diff --git a/dist/js/ionic-angular.js b/dist/js/ionic-angular.js index 50332a1a17..7fa828b002 100644 --- a/dist/js/ionic-angular.js +++ b/dist/js/ionic-angular.js @@ -2718,7 +2718,7 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu }, template: '', - link: function($scope, $element, $attr) { - // Create the back button content and show/hide it based on scope settings - $scope.enableBackButton = true; - $scope.backButtonClass = $attr.backButtonType; - if($attr.backButtonIcon) { - $scope.backButtonClass += ' icon ' + $attr.backButtonIcon; + compile: function(tElement, tAttrs) { + var backBtnEle = tElement.find('div').find('button'); + if(tAttrs.backButtonType) backBtnEle.addClass(tAttrs.backButtonType); + + if(tAttrs.backButtonIcon && tAttrs.backButtonLabel) { + backBtnEle.html(' ' + tAttrs.backButtonLabel); + } else if(tAttrs.backButtonLabel) { + backBtnEle.html(tAttrs.backButtonLabel); + } else if(tAttrs.backButtonIcon) { + backBtnEle.addClass('icon'); + backBtnEle.addClass(tAttrs.backButtonIcon); } - $rootScope.$on('viewState.showNavBar', function(e, showNavBar) { - if(showNavBar === false) { - $element[0].classList.add('invisible'); - } else { - $element[0].classList.remove('invisible'); - } - }); + if(tAttrs.type) tElement.addClass(tAttrs.type); - // Initialize our header bar view which will handle resizing and aligning our title labels - var hb = new ionic.views.HeaderBar({ - el: $element[0], - alignTitle: $scope.alignTitle || 'center' - }); - $scope.headerBarView = hb; + return function link($scope, $element, $attr) { + $scope.enableBackButton = true; - // Add the type of header bar class to this element - $element.addClass($scope.type); - - var updateHeaderData = function(data) { - $scope.oldTitle = $scope.currentTitle; - - $scope.currentTitle = (data && data.title ? data.title : ''); - - $scope.leftButtons = data.leftButtons; - $scope.rightButtons = data.rightButtons; - - if(typeof data.hideBackButton !== 'undefined') { - $scope.enableBackButton = data.hideBackButton !== true; - } - - if(data.animate !== false && $attr.animation && data.title && data.navDirection) { - - $element[0].classList.add($attr.animation); - if(data.navDirection === 'back') { - $element[0].classList.add('reverse'); + $rootScope.$on('viewState.showNavBar', function(e, showNavBar) { + if(showNavBar === false) { + $element[0].classList.add('invisible'); } else { - $element[0].classList.remove('reverse'); + $element[0].classList.remove('invisible'); + } + }); + + // Initialize our header bar view which will handle resizing and aligning our title labels + var hb = new ionic.views.HeaderBar({ + el: $element[0], + alignTitle: $scope.alignTitle || 'center' + }); + $scope.headerBarView = hb; + + var updateHeaderData = function(data) { + $scope.oldTitle = $scope.currentTitle; + + $scope.currentTitle = (data && data.title ? data.title : ''); + + $scope.leftButtons = data.leftButtons; + $scope.rightButtons = data.rightButtons; + + if(typeof data.hideBackButton !== 'undefined') { + $scope.enableBackButton = data.hideBackButton !== true; } - animate($scope, $element, $scope.oldTitle, data, function() { + if(data.animate !== false && $attr.animation && data.title && data.navDirection) { + + $element[0].classList.add($attr.animation); + if(data.navDirection === 'back') { + $element[0].classList.add('reverse'); + } else { + $element[0].classList.remove('reverse'); + } + + animate($scope, $element, $scope.oldTitle, data, function() { + hb.align(); + }); + } else { hb.align(); - }); - } else { - hb.align(); - } + } + }; + + $rootScope.$on('viewState.viewEnter', function(e, data) { + updateHeaderData(data); + }); + + $rootScope.$on('viewState.titleUpdated', function(e, data) { + $scope.currentTitle = (data && data.title ? data.title : ''); + }); + + // If a nav page changes the left or right buttons, update our scope vars + $scope.$parent.$on('viewState.leftButtonsChanged', function(e, data) { + $scope.leftButtons = data; + }); + $scope.$parent.$on('viewState.rightButtonsChanged', function(e, data) { + $scope.rightButtons = data; + }); + }; - - $rootScope.$on('viewState.viewEnter', function(e, data) { - updateHeaderData(data); - }); - - $rootScope.$on('viewState.titleUpdated', function(e, data) { - $scope.currentTitle = (data && data.title ? data.title : ''); - }); - - // If a nav page changes the left or right buttons, update our scope vars - $scope.$parent.$on('viewState.leftButtonsChanged', function(e, data) { - $scope.leftButtons = data; - }); - $scope.$parent.$on('viewState.rightButtonsChanged', function(e, data) { - $scope.rightButtons = data; - }); - } }; }]) diff --git a/js/ext/angular/src/directive/ionicViewState.js b/js/ext/angular/src/directive/ionicViewState.js index f235c095c3..f5de82c73e 100644 --- a/js/ext/angular/src/directive/ionicViewState.js +++ b/js/ext/angular/src/directive/ionicViewState.js @@ -69,7 +69,7 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu }, template: '', - link: function($scope, $element, $attr) { - // Create the back button content and show/hide it based on scope settings - $scope.enableBackButton = true; - $scope.backButtonClass = $attr.backButtonType; - if($attr.backButtonIcon) { - $scope.backButtonClass += ' icon ' + $attr.backButtonIcon; + compile: function(tElement, tAttrs) { + var backBtnEle = tElement.find('div').find('button'); + if(tAttrs.backButtonType) backBtnEle.addClass(tAttrs.backButtonType); + + if(tAttrs.backButtonIcon && tAttrs.backButtonLabel) { + backBtnEle.html(' ' + tAttrs.backButtonLabel); + } else if(tAttrs.backButtonLabel) { + backBtnEle.html(tAttrs.backButtonLabel); + } else if(tAttrs.backButtonIcon) { + backBtnEle.addClass('icon'); + backBtnEle.addClass(tAttrs.backButtonIcon); } - $rootScope.$on('viewState.showNavBar', function(e, showNavBar) { - if(showNavBar === false) { - $element[0].classList.add('invisible'); - } else { - $element[0].classList.remove('invisible'); - } - }); + if(tAttrs.type) tElement.addClass(tAttrs.type); - // Initialize our header bar view which will handle resizing and aligning our title labels - var hb = new ionic.views.HeaderBar({ - el: $element[0], - alignTitle: $scope.alignTitle || 'center' - }); - $scope.headerBarView = hb; + return function link($scope, $element, $attr) { + $scope.enableBackButton = true; - // Add the type of header bar class to this element - $element.addClass($scope.type); - - var updateHeaderData = function(data) { - $scope.oldTitle = $scope.currentTitle; - - $scope.currentTitle = (data && data.title ? data.title : ''); - - $scope.leftButtons = data.leftButtons; - $scope.rightButtons = data.rightButtons; - - if(typeof data.hideBackButton !== 'undefined') { - $scope.enableBackButton = data.hideBackButton !== true; - } - - if(data.animate !== false && $attr.animation && data.title && data.navDirection) { - - $element[0].classList.add($attr.animation); - if(data.navDirection === 'back') { - $element[0].classList.add('reverse'); + $rootScope.$on('viewState.showNavBar', function(e, showNavBar) { + if(showNavBar === false) { + $element[0].classList.add('invisible'); } else { - $element[0].classList.remove('reverse'); + $element[0].classList.remove('invisible'); + } + }); + + // Initialize our header bar view which will handle resizing and aligning our title labels + var hb = new ionic.views.HeaderBar({ + el: $element[0], + alignTitle: $scope.alignTitle || 'center' + }); + $scope.headerBarView = hb; + + var updateHeaderData = function(data) { + $scope.oldTitle = $scope.currentTitle; + + $scope.currentTitle = (data && data.title ? data.title : ''); + + $scope.leftButtons = data.leftButtons; + $scope.rightButtons = data.rightButtons; + + if(typeof data.hideBackButton !== 'undefined') { + $scope.enableBackButton = data.hideBackButton !== true; } - animate($scope, $element, $scope.oldTitle, data, function() { + if(data.animate !== false && $attr.animation && data.title && data.navDirection) { + + $element[0].classList.add($attr.animation); + if(data.navDirection === 'back') { + $element[0].classList.add('reverse'); + } else { + $element[0].classList.remove('reverse'); + } + + animate($scope, $element, $scope.oldTitle, data, function() { + hb.align(); + }); + } else { hb.align(); - }); - } else { - hb.align(); - } + } + }; + + $rootScope.$on('viewState.viewEnter', function(e, data) { + updateHeaderData(data); + }); + + $rootScope.$on('viewState.titleUpdated', function(e, data) { + $scope.currentTitle = (data && data.title ? data.title : ''); + }); + + // If a nav page changes the left or right buttons, update our scope vars + $scope.$parent.$on('viewState.leftButtonsChanged', function(e, data) { + $scope.leftButtons = data; + }); + $scope.$parent.$on('viewState.rightButtonsChanged', function(e, data) { + $scope.rightButtons = data; + }); + }; - - $rootScope.$on('viewState.viewEnter', function(e, data) { - updateHeaderData(data); - }); - - $rootScope.$on('viewState.titleUpdated', function(e, data) { - $scope.currentTitle = (data && data.title ? data.title : ''); - }); - - // If a nav page changes the left or right buttons, update our scope vars - $scope.$parent.$on('viewState.leftButtonsChanged', function(e, data) { - $scope.leftButtons = data; - }); - $scope.$parent.$on('viewState.rightButtonsChanged', function(e, data) { - $scope.rightButtons = data; - }); - } }; }]) diff --git a/js/ext/angular/test/directive/ionicView.unit.js b/js/ext/angular/test/directive/ionicView.unit.js index e576f8bdd1..6be0b3958c 100644 --- a/js/ext/angular/test/directive/ionicView.unit.js +++ b/js/ext/angular/test/directive/ionicView.unit.js @@ -77,5 +77,43 @@ describe('Ionic View', function() { expect(navBar.hasClass('invisible')).toEqual(false); }); + it('should set the navBar type', function() { + var element = compile('')(scope); + scope.$digest(); + expect(element.hasClass('bar-positive')).toEqual(true); + }); + + it('should set just a back button icon, no text', function() { + var element = compile('')(scope); + scope.$digest(); + var backButton = element.find('div').find('button'); + expect(backButton.hasClass('button')).toEqual(true); + expect(backButton.hasClass('button-icon')).toEqual(true); + expect(backButton.hasClass('icon')).toEqual(true); + expect(backButton.hasClass('ion-back')).toEqual(true); + expect(backButton.html()).toEqual(''); + }); + + it('should set just a back button with only text, button-clear', function() { + var element = compile('')(scope); + scope.$digest(); + var backButton = element.find('div').find('button'); + expect(backButton.hasClass('button')).toEqual(true); + expect(backButton.hasClass('button-clear')).toEqual(true); + expect(backButton.hasClass('icon')).toEqual(false); + expect(backButton.html()).toEqual('Back'); + }); + + it('should set a back button with an icon and text, button-clear', function() { + var element = compile('')(scope); + scope.$digest(); + var backButton = element.find('div').find('button'); + expect(backButton.hasClass('button')).toEqual(true); + expect(backButton.hasClass('button-icon')).toEqual(true); + var icon = backButton.find('i'); + expect(icon.hasClass('icon')).toEqual(true); + expect(backButton.html()).toEqual(' Back'); + }); + });