Skip to content

Commit

Permalink
fix(navBar): animations work properly
Browse files Browse the repository at this point in the history 
Starting a couple of versions ago, animations in navbar stopped working.
I took this as a chance to fix this, and ddo a refactor to make the code
more modular and testable.

Lots of manual dom manipulation was offloaded to angular directives, and
now we will not have bugs with end-user using interpolated class
attribute on their own nav-bar and overriding our own manually added
classes.
  • Loading branch information
@ajoslin
ajoslin committed Feb 17, 2014
1 parent e1b6fd4 commit 749cd38
Show file tree
Hide file tree
Showing 5 changed files with 205 additions and 196 deletions.
1 change: 1 addition & 0 deletions config/karma.conf.js
View file
Expand Up @@ -29,6 +29,7 @@ module.exports = function(config) {

// list of files to exclude
exclude: [
'js/ext/angular/test/dom-trace.js'
],

// test results reporter to use
Expand Down
283 changes: 135 additions & 148 deletions js/ext/angular/src/directive/ionicViewState.js
View file
Expand Up @@ -17,152 +17,152 @@
*
*/

angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gesture'])
angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gesture', 'ionic.ui.bindHtml'])

/**
* Our Nav Bar directive which updates as the controller state changes.
*/
.directive('navBar', ['$ionicViewService', '$rootScope', '$animate', '$compile',
function( $ionicViewService, $rootScope, $animate, $compile) {

/**
* Perform an animation between one tab bar state and the next.
* Right now this just animates the titles.
*/
var animate = function($scope, $element, oldTitle, data, cb) {
var title, nTitle, oTitle, titles = $element[0].querySelectorAll('.title');

var newTitle = data.title;
if(!oldTitle || oldTitle === newTitle) {
cb();
return;
}

// Clone the old title and add a new one so we can show two animating in and out
// add ng-leave and ng-enter during creation to prevent flickering when they are swapped during animation
title = angular.element(titles[0]);
oTitle = $compile('<h1 class="title" bind-html-unsafe="oldTitle"></h1>')($scope);
title.replaceWith(oTitle);
nTitle = $compile('<h1 class="title" bind-html-unsafe="currentTitle"></h1>')($scope);

var insert = $element[0].firstElementChild || null;

// Insert the new title
$animate.enter(nTitle, $element, insert && angular.element(insert), function() {
cb();
});

// Remove the old title
$animate.leave(angular.element(oTitle), function() {
});
};

return {
restrict: 'E',
replace: true,
scope: {
animation: '@',
type: '@',
backButtonType: '@',
backButtonLabel: '@',
backButtonIcon: '@',
backType: '@backButtonType',
backLabel: '@backButtonLabel',
backIcon: '@backButtonIcon',
alignTitle: '@'
},
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>' +
'</div>' +
'<h1 class="title" bind-html-unsafe="currentTitle"></h1>' +
'<div class="buttons" ng-if="rightButtons.length"> ' +
'<button ng-click="button.tap($event)" ng-repeat="button in rightButtons" class="button no-animation {{button.type}}" bind-html-unsafe="button.content"></button>' +
'</div>' +
'</header>',

controller: function() {},
template:
'<header class="bar bar-header nav-bar{{navBarClass()}}">' +
'<nav-back-button ng-if="backButtonEnabled && (backType || backLabel || backIcon)" ' +
'type="backType" label="backLabel" icon="backIcon" class="invisible" async-visible>' +
'</nav-back-button>' +
'<div class="buttons"> ' +
'<button ng-click="button.tap($event)" ng-repeat="button in leftButtons" ' +
'class="button no-animation {{button.type}}" ' +
'bind-html-unsafe="button.content">' +
'</button>' +
'</div>' +

//ng-repeat makes it easy to add new / remove old and have proper enter/leave anims
'<h1 ng-repeat="title in titles" bind-html-unsafe="title" class="title invisible" async-visible nav-bar-title>' +

'<div class="buttons" ng-if="rightButtons.length"> ' +
'<button ng-click="button.tap($event)" ng-repeat="button in rightButtons" '+
'class="button no-animation {{button.type}}" ' +
'bind-html-unsafe="button.content">' +
'</button>' +
'</div>' +
'</header>',
compile: function(tElement, tAttrs) {
var backBtnEle = tElement[0].querySelector('.back-button');
if(backBtnEle) {
if(tAttrs.backButtonType) backBtnEle.className += ' ' + tAttrs.backButtonType;

if(tAttrs.backButtonIcon && tAttrs.backButtonLabel) {
backBtnEle.innerHTML = '<i class="icon ' + tAttrs.backButtonIcon + '"></i> ' + tAttrs.backButtonLabel;
} else if(tAttrs.backButtonLabel) {
backBtnEle.innerHTML = tAttrs.backButtonLabel;
} else if(tAttrs.backButtonIcon) {
backBtnEle.className += ' icon ' + tAttrs.backButtonIcon;
}
}

return function link($scope, $element, $attr) {
var canHaveBackButton = !(!tAttrs.backButtonType && !tAttrs.backButtonLabel && !tAttrs.backButtonIcon);
$scope.enableBackButton = canHaveBackButton;
$scope.backButtonEnabled = true;

$scope.isInvisible = true;
$rootScope.$on('viewState.showNavBar', function(e, showNavBar) {
$scope.isInvisible = !showNavBar;
});
var animationDisabled = false;
$scope.titles = [];

function setBarType(value, oldValue) {
if (oldValue) $element.removeClass(oldValue);
$element.addClass(value);
}
$scope.navBarClass = function() {
return ($scope.type ? ' ' + $scope.type : '') +
($scope.isReverse ? ' reverse' : '') +
($scope.isInvisible ? ' invisible' : '') +
(!animationDisabled && $scope.animation ? ' ' + $scope.animation : '');
};

// Initialize our header bar view which will handle resizing and aligning our title labels
$scope.isReverse = false; //default
$scope.isInvisible = true; //default

// 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 && canHaveBackButton;
}

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();
}
};

$rootScope.$on('viewState.viewEnter', function(e, data) {
//Navbar events
$scope.$on('viewState.showNavBar', function(e, showNavBar) {
$scope.isInvisible = !showNavBar;
});
$scope.$on('viewState.viewEnter', function(e, data) {
updateHeaderData(data);
});

$rootScope.$on('viewState.titleUpdated', function(e, data) {
$scope.currentTitle = (data && data.title ? data.title : '');
// All of these these are emitted from children, 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;
}),
$scope.$parent.$on('viewState.leftButtonsChanged', function(e, data) {
$scope.leftButtons = data;
}),
$scope.$parent.$on('viewState.rightButtonsChanged', function(e, data) {
$scope.rightButtons = data;
}),
$scope.$parent.$on('viewState.showBackButton', function(e, data) {
$scope.backButtonEnabled = !!data;
}),
$scope.$parent.$on('viewState.titleUpdated', function(e, data) {
$scope.currentTitle = (data && data.title ? data.title : '');
})
];
$scope.$on('$destroy', function() {
for (var i=0; i<unregisterEventListeners.length; i++)
unregisterEventListeners[i]();
});

// 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;
});
function updateHeaderData(data) {
var newTitle = data && data.title || '';

animationDisabled = data.animate === false;
$scope.isReverse = data.navDirection == 'back';

if (data.hideBackButton) {
$scope.backButtonEnabled = false;
}

$scope.titles.length = 0;
$scope.titles.push(newTitle);
$scope.leftButtons = data.leftButtons;
$scope.rightButtons = data.rightButtons;
}
};
}
};
}])

.directive('navBarTitle', function() {
return {
restrict: 'A',
require: '^navBar',
link: function($scope, $element, $attr, navBarCtrl) {
$scope.headerBarView && $scope.headerBarView.align();
$element.on('$animate:close', function() {
$scope.headerBarView && $scope.headerBarView.align();
});
}
};
})

/*
* Directive to put on an element that has 'invisible' class when rendered.
* This removes the visible class one frame later.
* Fixes flickering in iOS7 and old android.
* Used in title and back button
*/
.directive('asyncVisible', function() {
return function($scope, $element) {
window.rAF(function() {
$element[0].classList.remove('invisible');
});
};
})

.directive('view', ['$ionicViewService', '$rootScope', '$animate',
function( $ionicViewService, $rootScope, $animate) {
Expand Down Expand Up @@ -204,67 +204,51 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
$rootScope.$broadcast('viewState.showNavBar', ($scope.hideNavBar !== 'true') );

// watch for changes in the left buttons
var deregLeftButtons = $scope.$watch('leftButtons', function(value) {
$scope.$watch('leftButtons', function(value) {
$scope.$emit('viewState.leftButtonsChanged', $scope.leftButtons);
});

var deregRightButtons = $scope.$watch('rightButtons', function(val) {
$scope.$watch('rightButtons', function(val) {
$scope.$emit('viewState.rightButtonsChanged', $scope.rightButtons);
});

// watch for changes in the title
var deregTitle = $scope.$watch('title', function(val) {
$scope.$watch('title', function(val) {
$scope.$emit('viewState.titleUpdated', $scope);
});

$scope.$on('$destroy', function(){
// deregister on destroy
deregLeftButtons();
deregRightButtons();
deregTitle();
});

};
}
};
}])


.directive('viewBack', ['$ionicViewService', '$rootScope', function($ionicViewService, $rootScope) {
var goBack = function(e) {
.directive('navBackButton', ['$ionicViewService', '$rootScope',
function($ionicViewService, $rootScope) {

function goBack(e) {
var backView = $ionicViewService.getBackView();
backView && backView.go();
e.alreadyHandled = true;
return false;
};
}

return {
restrict: 'AC',
compile: function(tElement) {
tElement.addClass('hide');

return function link($scope, $element) {
$element.bind('click', goBack);

$scope.showButton = function(val) {
if(val) {
$element[0].classList.remove('hide');
} else {
$element[0].classList.add('hide');
}
};

$rootScope.$on('$viewHistory.historyChange', function(e, data) {
$scope.showButton(data.showBack);
});

$rootScope.$on('viewState.showBackButton', function(e, data) {
$scope.showButton(data);
});

};
restrict: 'E',
scope: {
type: '=',
label: '=',
icon: '='
},
replace: true,
template:
'<button ng-click="goBack($event)" class="button back-button {{type}} ' +
'{{(icon && !label) ? \'icon \' + icon : \'\'}}">' +
'<i ng-if="icon && label" class="icon {{icon}}"></i> ' +
'{{label}}' +
'</button>',
link: function($scope) {
$scope.goBack = goBack;
}

};
}])

Expand Down Expand Up @@ -324,6 +308,7 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
if (locals === viewLocals) return; // nothing to do
var renderer = $ionicViewService.getRenderer(element, attr, scope);


// Destroy previous view scope
if (viewScope) {
viewScope.$destroy();
Expand Down Expand Up @@ -352,6 +337,8 @@ angular.module('ionic.ui.viewState', ['ionic.service.view', 'ionic.service.gestu
var link = $compile(newElement);
viewScope = scope.$new();

viewScope.$navDirection = viewRegisterData.navDirection;

if (locals.$$controller) {
locals.$scope = viewScope;
var controller = $controller(locals.$$controller, locals);
Expand Down

0 comments on commit 749cd38

Please sign in to comment.