diff --git a/js/ext/angular/src/directive/ionicBar.js b/js/ext/angular/src/directive/ionicBar.js
index 431c24cb16..1528b3631a 100644
--- a/js/ext/angular/src/directive/ionicBar.js
+++ b/js/ext/angular/src/directive/ionicBar.js
@@ -50,7 +50,7 @@ angular.module('ionic.ui.header', ['ngAnimate', 'ngSanitize'])
* align-title="center">
*
* ```
- *
+ *
*/
.directive('ionHeaderBar', ['$ionicScrollDelegate', function($ionicScrollDelegate) {
return {
diff --git a/js/ext/angular/test/directive/ionicBar.unit.js b/js/ext/angular/test/directive/ionicBar.unit.js
index 1e9b3d27cb..ea6d8e01ef 100644
--- a/js/ext/angular/test/directive/ionicBar.unit.js
+++ b/js/ext/angular/test/directive/ionicBar.unit.js
@@ -3,60 +3,41 @@ describe('Ionic Header Bar', function() {
beforeEach(module('ionic'));
- beforeEach(inject(function($compile, $rootScope) {
+ beforeEach(inject(function($animate, $compile, $rootScope) {
compile = $compile;
rootScope = $rootScope;
+ ionic.requestAnimationFrame = function(cb) { cb(); };
+ $animate.enabled(false);
+ el = null;
}));
it('Should not add title-left or title-right classes when align-title=center', function() {
- runs(function(){
- el = compile('')(rootScope);
- });
-
- //wait for headerBar View to align() the title
- waits(500);
-
- runs(function(){
- var headerView = el.isolateScope().headerBarView;
- var title = angular.element(headerView.el.querySelector('.title'));
- expect(title.hasClass('title-left')).not.toEqual(true);
- expect(title.hasClass('title-right')).not.toEqual(true);
- });
+ el = compile('')(rootScope);
+ var headerView = el.isolateScope().headerBarView;
+ var title = angular.element(headerView.el.querySelector('.title'));
+ expect(title.hasClass('title-left')).not.toEqual(true);
+ expect(title.hasClass('title-right')).not.toEqual(true);
});
- it('Should add title-left class when align-title=left', function() {
- runs(function(){
- el = compile('')(rootScope);
- });
-
- //wait for headerBar View to align() the title
- waits(500);
-
- runs(function(){
- var headerView = el.isolateScope().headerBarView;
- var title = angular.element(headerView.el.querySelector('.title'));
- expect(title.hasClass('title-left')).toEqual(true);
- });
- });
+ it('Should add title-left class when align-title=left', inject(function($animate) {
+ el = compile('')(rootScope);
+ rootScope.$apply();
+ var headerView = el.isolateScope().headerBarView;
+ var title = angular.element(headerView.el.querySelector('.title'));
+ expect(title.hasClass('title-left')).toEqual(true);
+ }));
it('Should add title-right class when align-title=right', function() {
- runs(function(){
- el = compile('')(rootScope);
- });
-
- //wait for headerBar View to align() the title
- waits(500);
-
- runs(function(){
- var headerView = el.isolateScope().headerBarView;
- var title = angular.element(headerView.el.querySelector('.title'));
- expect(title.hasClass('title-right')).toEqual(true);
- });
+ el = compile('')(rootScope);
+ rootScope.$apply();
+ var headerView = el.isolateScope().headerBarView;
+ var title = angular.element(headerView.el.querySelector('.title'));
+ expect(title.hasClass('title-right')).toEqual(true);
});
it('Should re-align the title when leftButtons change', function() {
rootScope.leftButtons = [];
- el = compile('')(rootScope);
+ el = compile('')(rootScope);
var headerView = el.isolateScope().headerBarView;
//trigger initial align()
@@ -73,7 +54,7 @@ describe('Ionic Header Bar', function() {
it('Should re-align the title when rightButtons change', function() {
rootScope.rightButtons = [];
- el = compile('')(rootScope);
+ el = compile('')(rootScope);
var headerView = el.isolateScope().headerBarView;
//trigger initial align()
@@ -88,6 +69,6 @@ describe('Ionic Header Bar', function() {
expect(headerView.align).toHaveBeenCalled();
});
-
+
});
diff --git a/js/views/headerBarView.js b/js/views/headerBarView.js
index eb59b9f7b3..0e79d321ef 100644
--- a/js/views/headerBarView.js
+++ b/js/views/headerBarView.js
@@ -17,10 +17,10 @@
* so that the header text size is maximized and aligned
* correctly as long as possible.
*/
- align: ionic.animationFrameThrottle(function(titleSelector) {
+ align: function() {
// Find the titleEl element
- var titleEl = this.el.querySelector(titleSelector || '.title');
+ var titleEl = this.el.querySelector('.title');
if(!titleEl) {
return;
}
@@ -56,32 +56,35 @@
}
}
- var margin = Math.max(leftWidth, rightWidth) + 10;
+ var self = this;
+ ionic.requestAnimationFrame(function() {
+ var margin = Math.max(leftWidth, rightWidth) + 10;
- // Size and align the header titleEl based on the sizes of the left and
- // right children, and the desired alignment mode
- if(this.alignTitle == 'center') {
- if(margin > 10) {
- titleEl.style.left = margin + 'px';
- titleEl.style.right = margin + 'px';
- }
- if(titleEl.offsetWidth < titleEl.scrollWidth) {
+ // Size and align the header titleEl based on the sizes of the left and
+ // right children, and the desired alignment mode
+ if(self.alignTitle == 'center') {
+ if(margin > 10) {
+ titleEl.style.left = margin + 'px';
+ titleEl.style.right = margin + 'px';
+ }
+ if(titleEl.offsetWidth < titleEl.scrollWidth) {
+ if(rightWidth > 0) {
+ titleEl.style.right = (rightWidth + 5) + 'px';
+ }
+ }
+ } else if(self.alignTitle == 'left') {
+ titleEl.classList.add('title-left');
+ if(leftWidth > 0) {
+ titleEl.style.left = (leftWidth + 15) + 'px';
+ }
+ } else if(self.alignTitle == 'right') {
+ titleEl.classList.add('title-right');
if(rightWidth > 0) {
- titleEl.style.right = (rightWidth + 5) + 'px';
+ titleEl.style.right = (rightWidth + 15) + 'px';
}
}
- } else if(this.alignTitle == 'left') {
- titleEl.classList.add('title-left');
- if(leftWidth > 0) {
- titleEl.style.left = (leftWidth + 15) + 'px';
- }
- } else if(this.alignTitle == 'right') {
- titleEl.classList.add('title-right');
- if(rightWidth > 0) {
- titleEl.style.right = (rightWidth + 15) + 'px';
- }
- }
- })
+ });
+ }
});
})(ionic);