fix(modal): do not click buttons underneath modal

Author: ajoslin

js/ext/angular/src/service/ionicModal.js

@@ -12,6 +12,9 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad', 'ionic.serv
       var self = this;
       var element = angular.element(this.el);
 
+      document.body.classList.add('disable-pointer-events');
+      this.el.classList.add('enable-pointer-events');
+
       self._isShown = true;
 
       if(!element.parent().length) {
@@ -46,7 +49,9 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad', 'ionic.serv
     hide: function() {
       this._isShown = false;
       var element = angular.element(this.el);
-      $animate.removeClass(element, this.animation);
+      $animate.removeClass(element, this.animation, function() {
+        onHideModal(element[0]);
+      });
 
       ionic.views.Modal.prototype.hide.call(this);
 
@@ -59,6 +64,7 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad', 'ionic.serv
           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);
         self.scope.$destroy();
       });
@@ -69,6 +75,11 @@ angular.module('ionic.service.modal', ['ionic.service.templateLoad', 'ionic.serv
     }
   });
 
+  function onHideModal(element) {
+    document.body.classList.remove('disable-pointer-events');
+    element.classList.remove('enable-pointer-events');
+  }
+
   var createModal = function(templateString, options) {
     // Create a new scope for the modal
     var scope = options.scope && options.scope.$new() || $rootScope.$new(true);

js/ext/angular/test/service/ionicModal.unit.js

@@ -53,6 +53,32 @@ describe('Ionic Modal', function() {
     expect(m.isShown()).toBe(false);
   });
 
+  it('show & remove should add {disable,enable}-pointer-events to body/modal', inject(function($animate) {
+    var m = modal.fromTemplate('<div class="modal">hi</div>');
+    m.show();
+    expect(angular.element(m.el).hasClass('enable-pointer-events')).toBe(true);
+    expect(angular.element(document.body).hasClass('disable-pointer-events')).toBe(true);
+    spyOn($animate, 'leave').andCallFake(function(el, cb) {
+      cb();
+    });
+    m.remove();
+    expect(angular.element(m.el).hasClass('enable-pointer-events')).toBe(false);
+    expect(angular.element(document.body).hasClass('disable-pointer-events')).toBe(false);
+  }));
+
+  it('show & hide should add {disable,enable}-pointer-events to body/modal', inject(function($animate) {
+    var m = modal.fromTemplate('<div class="modal">hi</div>');
+    m.show();
+    expect(angular.element(m.el).hasClass('enable-pointer-events')).toBe(true);
+    expect(angular.element(document.body).hasClass('disable-pointer-events')).toBe(true);
+    spyOn($animate, 'removeClass').andCallFake(function(el, cls, cb) {
+      cb();
+    });
+    m.hide();
+    expect(angular.element(m.el).hasClass('enable-pointer-events')).toBe(false);
+    expect(angular.element(document.body).hasClass('disable-pointer-events')).toBe(false);
+  }));
+
   it('should animate leave and destroy scope on remove', inject(function($animate) {
     var m = modal.fromTemplate('<div class="modal"></div>');
     spyOn($animate, 'leave').andCallFake(function(el, cb) { cb(); });