fix(loading): Prevent clicks on modal views when loading is active. C…

…loses #1720
ionic-team · Jul 3, 2014 · 7630bd4 · 7630bd4
1 parent c2dbb31
commit 7630bd4
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/js/angular/service/loading.js b/js/angular/service/loading.js
@@ -120,6 +120,7 @@ function($document, $ionicTemplateLoader, $ionicBackdrop, $timeout, $q, $log, $c
               ionic.requestAnimationFrame(function() {
                 self.isShown && self.element.addClass('active');
                 ionic.DomUtil.centerElementByMarginTwice(self.element[0]);
+                $document[0].body.classList.add('loading-active');
               });
             }
           });
@@ -133,6 +134,7 @@ function($document, $ionicTemplateLoader, $ionicBackdrop, $timeout, $q, $log, $c
               $ionicBackdrop.getElement().removeClass('backdrop-loading');
             }
             self.element.removeClass('active');
+            $document[0].body.classList.remove('loading-active');
             setTimeout(function() {
               !self.isShown && self.element.removeClass('visible');
             }, 200);

diff --git a/scss/_modal.scss b/scss/_modal.scss
@@ -75,11 +75,19 @@
   }
 }
 
+// disable clicks on all but the modal
 .modal-open {
   pointer-events: none;
 
   .modal,
   .modal-backdrop {
     pointer-events: auto;
   }
+  // prevent clicks on modal when loading overlay is active though
+  &.loading-active {
+    .modal,
+    .modal-backdrop {
+      pointer-events: none;
+    }
+  }
 }
diff --git a/test/unit/angular/service/loading.unit.js b/test/unit/angular/service/loading.unit.js
@@ -78,6 +78,17 @@ describe('$ionicLoading service', function() {
       expect($ionicBackdrop._element.hasClass('backdrop-loading')).toBe(false);
     }));
 
+    it('should add and remove loading-active class to body', inject(function($ionicLoading, $timeout) {
+      // used by _modal.scss to prevent clicks on modal screen when loading is active
+      var loader = TestUtil.unwrapPromise($ionicLoading._getLoader());
+      ionic.requestAnimationFrame = function(cb) { cb(); };
+      loader.show({});
+      $timeout.flush();
+      expect(angular.element(document.body).hasClass('loading-active')).toBe(true);
+      loader.hide();
+      expect(angular.element(document.body).hasClass('loading-active')).toBe(false);
+    }));
+
   });
 
   describe('.hide()', function() {