Skip to content

Commit

Permalink
fix(modal): Improve slide-up/down animations, remove flickers
Browse files Browse the repository at this point in the history
  • Loading branch information
Adam Bradley committed Mar 4, 2014
1 parent 1b2cd5c commit b593cf1
Show file tree
Hide file tree
Showing 6 changed files with 96 additions and 121 deletions.
77 changes: 41 additions & 36 deletions js/ext/angular/src/service/ionicModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,74 +10,79 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad', 'ionic.serv
// Show the modal
show: function() {
var self = this;
var element = angular.element(this.el);
var element = angular.element(self.el);

document.body.classList.add('modal-open');

self._isShown = true;

if(!element.parent().length) {
element.addClass(this.animation);
$animate.enter(element, angular.element($document[0].body), null, function() {
});
ionic.views.Modal.prototype.show.call(self);
} else {
$animate.addClass(element, this.animation, function() {
});
self.el.classList.add(self.animation);
$document[0].body.appendChild(self.el);
}

if(!this.didInitEvents) {
var onHardwareBackButton = function() {
self.hide();
};
element.addClass('ng-enter active');
element.removeClass('ng-leave ng-leave-active');

self.scope.$on('$destroy', function() {
$ionicPlatform.offHardwareBackButton(onHardwareBackButton);
});
$timeout(function(){
element.addClass('ng-enter-active');

// Support Android back button to close
$ionicPlatform.onHardwareBackButton(onHardwareBackButton);
if(!self.didInitEvents) {
var onHardwareBackButton = function() {
self.hide();
};

this.didInitEvents = true;
}
self.scope.$on('$destroy', function() {
$ionicPlatform.offHardwareBackButton(onHardwareBackButton);
});

// Support Android back button to close
$ionicPlatform.onHardwareBackButton(onHardwareBackButton);

self.didInitEvents = true;
}

this.scope.$parent.$broadcast('modal.shown', this);
self.scope.$parent.$broadcast('modal.shown');
}, 20);

},
// Hide the modal
hide: function() {
this._isShown = false;
var element = angular.element(this.el);
$animate.removeClass(element, this.animation, function() {
onHideModal(element[0]);
});

element.addClass('ng-leave');

$timeout(function(){
element.addClass('ng-leave-active');
element.removeClass('ng-enter ng-enter-active active');
}, 20);

$timeout(function(){
document.body.classList.remove('modal-open');
}, 400);

ionic.views.Modal.prototype.hide.call(this);

this.scope.$parent.$broadcast('modal.hidden', this);
this.scope.$parent.$broadcast('modal.hidden');
},

// Remove and destroy the modal scope
remove: function() {
var self = this,
element = angular.element(this.el);
this._isShown = false;
$animate.leave(angular.element(this.el), function() {
onHideModal(element[0]);
self.scope.$parent.$broadcast('modal.removed', self);
var self = this;
self.hide();
self.scope.$parent.$broadcast('modal.removed');

$timeout(function(){
self.scope.$destroy();
});
}, 500);
},

isShown: function() {
return !!this._isShown;
}
});

function onHideModal(element) {
document.body.classList.remove('modal-open');
}

var createModal = function(templateString, options) {
// Create a new scope for the modal
var scope = options.scope && options.scope.$new() || $rootScope.$new(true);
Expand Down Expand Up @@ -116,6 +121,6 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad', 'ionic.serv
cb ? cb(modal) : null;
return modal;
});
},
}
};
}]);
9 changes: 6 additions & 3 deletions js/ext/angular/test/modal.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="../../../../dist/css/ionic.css">
<script src="../../../../dist/js/ionic.bundle.js"></script>
<script src="dom-trace.js"></script>
</head>
<body>
<ion-pane ng-controller="AppCtrl">
Expand All @@ -23,7 +24,7 @@

<script id="modal.html" type="text/ng-template">
<div class="modal" ng-controller="ModalCtrl">
<header class="bar bar-header bar-positive">
<header class="bar bar-header bar-assertive">
<h1 class="title">New Contact</h1>
<button class="button button-clear button-primary" ng-click="close()">Cancel</button>
</header>
Expand All @@ -42,8 +43,8 @@ <h1 class="title">New Contact</h1>
<span class="input-label">Email</span>
<input type="text" placeholder="">
</label>
<button class="button button-full button-positive" ng-click="closeModal()">Create</button>
<button class="button button-full button-positive" ng-click="openActionSheet()">ActionSheet</button>
<button class="button button-block button-positive" ng-click="closeModal()">Create</button>
<button class="button button-block button-positive" ng-click="openActionSheet()">ActionSheet</button>
</div>
</div>
</ion-content>
Expand Down Expand Up @@ -127,6 +128,8 @@ <h1 class="title">New Contact</h1>
};

});

domTrace.observe();
</script>
</body>
</html>
Expand Down
26 changes: 12 additions & 14 deletions js/ext/angular/test/service/ionicModal.unit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,25 +53,21 @@ describe('Ionic Modal', function() {
expect(m.isShown()).toBe(false);
});

it('show & remove should add .model-open to body', inject(function($animate) {
it('show & remove should add .model-open to body', inject(function() {
var m = modal.fromTemplate('<div class="modal">hi</div>');
m.show();
expect(angular.element(document.body).hasClass('modal-open')).toBe(true);
spyOn($animate, 'leave').andCallFake(function(el, cb) {
cb();
});
m.remove();
timeout.flush();
expect(angular.element(document.body).hasClass('modal-open')).toBe(false);
}));

it('show & hide should add .model-open body', inject(function($animate) {
it('show & hide should add .model-open body', inject(function() {
var m = modal.fromTemplate('<div class="modal">hi</div>');
m.show();
expect(angular.element(document.body).hasClass('modal-open')).toBe(true);
spyOn($animate, 'removeClass').andCallFake(function(el, cls, cb) {
cb();
});
m.hide();
timeout.flush();
expect(angular.element(document.body).hasClass('modal-open')).toBe(false);
}));

Expand All @@ -80,7 +76,7 @@ describe('Ionic Modal', function() {
spyOn($animate, 'leave').andCallFake(function(el, cb) { cb(); });
spyOn(m.scope, '$destroy');
m.remove();
expect($animate.leave).toHaveBeenCalled();
timeout.flush();
expect(m.scope.$destroy).toHaveBeenCalled();
}));

Expand All @@ -89,14 +85,15 @@ describe('Ionic Modal', function() {
var modalInstance = modal.fromTemplate(template);
modalInstance.show();

//timeout.flush();
timeout.flush();

expect(modalInstance.el.classList.contains('active')).toBe(true);

ionic.trigger('backbutton', {
target: document
});

timeout.flush();
expect(modalInstance.el.classList.contains('active')).toBe(false);
});

Expand All @@ -105,14 +102,15 @@ describe('Ionic Modal', function() {
var m = modal.fromTemplate(template, {});
spyOn(m.scope.$parent, '$broadcast');
m.show();
expect(m.scope.$parent.$broadcast).toHaveBeenCalledWith('modal.shown', m);
timeout.flush();
expect(m.scope.$parent.$broadcast).toHaveBeenCalledWith('modal.shown');
});
it('should broadcast "modal.hidden" on hide', function() {
var template = '<div class="modal"></div>';
var m = modal.fromTemplate(template, {});
spyOn(m.scope.$parent, '$broadcast');
m.hide();
expect(m.scope.$parent.$broadcast).toHaveBeenCalledWith('modal.hidden', m);
expect(m.scope.$parent.$broadcast).toHaveBeenCalledWith('modal.hidden');
});
it('should broadcast "modal.removed" on remove', inject(function($animate) {
var template = '<div class="modal"></div>';
Expand All @@ -125,9 +123,9 @@ describe('Ionic Modal', function() {
spyOn(m.scope.$parent, '$broadcast').andCallFake(function(e, modal) {
broadcastedModal = modal;
});
spyOn($animate, 'leave').andCallFake(function(el, cb) { cb(); });

m.remove();
expect(broadcastedModal).toBe(m);
expect(m.scope.$parent.$broadcast).toHaveBeenCalledWith('modal.removed');
timeout.flush();
}));
});
8 changes: 2 additions & 6 deletions js/views/modalView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,15 @@
show: function() {
var self = this;

this.el.classList.add('active');

if(this.focusFirstInput) {
if(self.focusFirstInput) {
// Let any animations run first
window.setTimeout(function() {
var input = self.el.querySelector('input, textarea');
input && input.focus && input.focus();
}, this.focusFirstDelay);
}, self.focusFirstDelay);
}
},
hide: function() {
this.el.classList.remove('active');

// Unfocus all elements
if(this.unfocusOnHide) {
var inputs = this.el.querySelectorAll('input, textarea');
Expand Down
Loading

0 comments on commit b593cf1

Please sign in to comment.