javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(navBar): do not animate if there is no navDirection

Browse Source
This commit is contained in:
Andy Joslin
2014-02-17 22:05:49 -05:00
parent e5340d8e2c
commit 7cf4eef961
2 changed files with 33 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
js/ext/angular/src/directive/ionicViewState.js vendored
View File

@@ -38,7 +38,8 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
},
controller: function() {},
template:
'<header class="bar bar-header nav-bar{{navBarClass()}}">' +
'<header class="bar bar-header nav-bar {{type}} {{isReverse ? \'reverse\' : \'\'}} ' +
'{{isInvisible ? \'invisible\' : \'\'}} {{animateEnabled ? animation : \'\'}}">' +
'<nav-back-button ng-if="backButtonEnabled && (backType || backLabel || backIcon)" ' +
'type="backType" label="backLabel" icon="backIcon" class="invisible" async-visible>' +
'</nav-back-button>' +
@@ -62,20 +63,12 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
compile: function(tElement, tAttrs) {
return function link($scope, $element, $attr) {
$scope.backButtonEnabled = true;
var animationDisabled = false;
$scope.titles = [];
$scope.navBarClass = function() {
return ($scope.type ? ' ' + $scope.type : '') +
($scope.isReverse ? ' reverse' : '') +
($scope.isInvisible ? ' invisible' : '') +
(!animationDisabled && $scope.animation ? ' ' + $scope.animation : '');
};
$scope.isReverse = false; //default
$scope.isInvisible = true; //default
//defaults
$scope.backButtonEnabled = true;
$scope.animateEnabled = true;
$scope.isReverse = false;
$scope.isInvisible = true;
// Initialize our header bar view which will handle
// resizing and aligning our title labels
@@ -86,15 +79,15 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
$scope.headerBarView = hb;
//Navbar events
$scope.$on('viewState.showNavBar', function(e, showNavBar) {
$scope.isInvisible = !showNavBar;
});
$scope.$on('viewState.viewEnter', function(e, data) {
updateHeaderData(data);
});
$scope.$on('viewState.showNavBar', function(e, showNavBar) {
$scope.isInvisible = !showNavBar;
});
// All of these these are emitted from children, so we listen on parent
// so we can catch them as they bubble up
// All of these these are emitted from children of a sibling scope,
// so we listen on parent so we can catch them as they bubble up
var unregisterEventListeners = [
$scope.$parent.$on('$viewHistory.historyChange', function(e, data) {
$scope.backButtonEnabled = !!data.showBack;
@@ -113,20 +106,20 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
})
];
$scope.$on('$destroy', function() {
for (var i=0; i<unregisterEventListeners.length; i++)
for (var i=0; i<unregisterEventListeners.length; i++)
unregisterEventListeners[i]();
});
function updateHeaderData(data) {
var newTitle = data && data.title || '';
animationDisabled = data.animate === false;
$scope.isReverse = data.navDirection == 'back';
if (data.hideBackButton) {
$scope.backButtonEnabled = false;
}
$scope.animateEnabled = !!(data.navDirection && data.animate !== false);
$scope.titles.length = 0;
$scope.titles.push(newTitle);
$scope.leftButtons = data.leftButtons;

22
js/ext/angular/test/directive/ionicView.unit.js
View File

@@ -82,6 +82,24 @@ describe('Ionic View', function() {
expect(element.hasClass('invisible')).toEqual(true);
});
it('should have have animateEnabled=true if there is a navDirection and animate isnt false', function() {
var element = compile('<nav-bar></nav-bar>')(scope);
scope.$digest();
scope = element.isolateScope();
scope.$broadcast('viewState.viewEnter', {});
expect(scope.animateEnabled).toBe(false);
scope.$broadcast('viewState.viewEnter', { navDirection: 'forward' });
expect(scope.animateEnabled).toBe(true);
scope.$broadcast('viewState.viewEnter', { navDirection: 'forward', animate: false });
expect(scope.animateEnabled).toBe(false);
scope.$broadcast('viewState.viewEnter', { navDirection: 'back', animate: true });
expect(scope.animateEnabled).toBe(true);
});
it('should hide navBar when using view attr', function() {
var element = compile('<div><nav-bar></nav-bar><view hide-nav-bar="true"></view></div>')(scope);
scope.$digest();
@@ -99,13 +117,11 @@ describe('Ionic View', function() {
scope.viewTitle = 'New Title';
scope.$digest();
navBar = element.find('header');
title = navBar.find('h1');
expect(title.text().trim()).toEqual('New Title');
scope.$broadcast('viewState.titleUpdated', { title: 'Event Title' });
scope.$digest();
navBar = element.find('header');
title = navBar.find('h1');
expect(title.text().trim()).toEqual('Event Title');
});
@@ -153,7 +169,7 @@ describe('Ionic View', function() {
}]);
scope.$digest();
leftButton = angular.element(element[0].querySelector('.left-buttons')).find('button');
expect(leftButton.text().trim()).toBe('Event Left Button');
rightButton = angular.element(element[0].querySelector('.right-buttons')).find('button');