fix(popup): Ensure popup is usable on top of a modal, closes #838

Author: adamdbradley

js/ext/angular/src/service/ionicPopup.js

@@ -106,7 +106,7 @@ angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
   });
   ```
 
- 
+
  */
 .factory('$ionicPopup', ['$rootScope', '$q', '$document', '$compile', '$timeout', '$ionicTemplateLoader',
   function($rootScope, $q, $document, $compile, $timeout, $ionicTemplateLoader) {
@@ -199,11 +199,13 @@ angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
     var el = $compile('<ion-popup-backdrop></ion-popup-backdrop>')($rootScope.$new(true));
     $document[0].body.appendChild(el[0]);
     backdropEl = el;
+    $document[0].body.classList.add('popup-open');
   };
 
   // Remove the backdrop element
   var removeBackdrop = function() {
     backdropEl.remove();
+    $document[0].body.classList.remove('popup-open');
   };
 
   // Push the new popup onto the stack with the given data and scope.
@@ -259,8 +261,8 @@ angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
   }
 
   var buildPopupTemplate = function(opts, content) {
-    return '<ion-popup title="' + opts.title + '" buttons="buttons" on-button-tap="onButtonTap(button, event)" on-close="onClose(button, result, event)">' 
-        + (content || '') + 
+    return '<ion-popup title="' + opts.title + '" buttons="buttons" on-button-tap="onButtonTap(button, event)" on-close="onClose(button, result, event)">'
+        + (content || '') +
       '</ion-popup>';
   };
 
@@ -346,7 +348,7 @@ angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
      *   subTitle: '', // String (optional). The sub-title of the popup
      *   templateUrl: '', // URL String (optional). The URL of a template to load as the content (instead of the `content` field)
      *   scope: null, // Scope (optional). A scope to apply to the popup content (for using ng-model in a template, for example)
-     *   buttons: 
+     *   buttons:
      *     [
      *       {
      *         text: 'Cancel',
@@ -369,7 +371,7 @@ angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
      *         }
      *       }
      *     ]
-     * 
+     *
      * }
      * ```
     */
@@ -386,7 +388,7 @@ angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
      *
      * ```javascript
      *  $ionicPopup.alert({
-     *    title: 'Hey!;,
+     *    title: 'Hey!',
      *    content: 'Don\'t do that!'
      *  }).then(function(res) {
      *    // Accepted
@@ -479,7 +481,7 @@ angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
      * @ngdoc method
      * @name $ionicPopup#prompt
      * @description show a simple prompt dialog.
-     * 
+     *
      * ```javascript
      *  $ionicPopup.prompt({
      *    title: 'Password Check',
@@ -532,7 +534,7 @@ angular.module('ionic.service.popup', ['ionic.service.templateLoad'])
         ]
       });
     }
-    
+
   };
 }]);
 

js/ext/angular/test/modal.html

@@ -59,6 +59,7 @@ <h1 class="title">New Contact</h1>
               <button class="button button-block button-positive" ng-click="hideModal()">Hide Modal</button>
               <button class="button button-block button-positive" ng-click="removeModal()">Remove Modal</button>
               <button class="button button-block button-positive" ng-click="openActionSheet()">ActionSheet</button>
+              <button class="button button-block button-positive" ng-click="openPopup()">Popup</button>
             </div>
           </div>
         </ion-content>
@@ -86,7 +87,7 @@ <h1 class="title">New Contact</h1>
 
       })
 
-      .controller('ModalCtrl', function($scope, $ionicActionSheet) {
+      .controller('ModalCtrl', function($scope, $ionicActionSheet, $ionicPopup) {
         $scope.hideModal = function() {
           $scope.modal.hide();
         };
@@ -132,6 +133,13 @@ <h1 class="title">New Contact</h1>
           });
         };
 
+        $scope.openPopup = function() {
+          $ionicPopup.alert({
+           title: 'Hey!',
+           content: 'Don\'t do that!'
+          }).then(function(res) {});
+        };
+
       });
 
       domTrace.observe();

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

@@ -1,13 +1,15 @@
 describe('Ionic Popup', function() {
-  var popup, timeout, scope;
+  var popup, timeout, scope, document;
 
   beforeEach(module('ionic'));
 
-  beforeEach(inject(function($ionicPopup, $rootScope, $timeout) {
+  beforeEach(inject(function($ionicPopup, $rootScope, $timeout, $document) {
     ionic.requestAnimationFrame = function(cb) { cb(); }
     scope = $rootScope;
     popup = $ionicPopup;
     timeout = $timeout;
+    document = $document;
+    document[0].body.className = '';
   }));
 
   it('Should show popup', function() {
@@ -22,13 +24,13 @@ describe('Ionic Popup', function() {
         }
       ]
     });
-        
+
     timeout.flush();
 
-    var popupBackdropEl = document.body.querySelector('.popup-backdrop');
+    var popupBackdropEl = document[0].body.querySelector('.popup-backdrop');
     expect(popupBackdropEl).not.toEqual(null);
 
-    var popupEl = document.body.querySelector('.popup');
+    var popupEl = document[0].body.querySelector('.popup');
     expect(popupEl.classList.contains('active')).toBe(true);
     expect(popupEl.classList.contains('popup-showing')).toBe(true);
 
@@ -43,11 +45,11 @@ describe('Ionic Popup', function() {
         }
       ]
     });
-        
+
     timeout.flush();
 
     // Make sure there are two popups
-    expect(document.body.querySelectorAll('.popup').length).toEqual(2);
+    expect(document[0].body.querySelectorAll('.popup').length).toEqual(2);
   });
 
   it('Should set correct element data', function() {
@@ -63,8 +65,27 @@ describe('Ionic Popup', function() {
       ]
     });
 
-    var popupEl = document.body.querySelector('.popup');
+    var popupEl = document[0].body.querySelector('.popup');
     expect(popupEl.querySelector('.popup-title').innerText).toEqual('Cats');
     expect(popupEl.querySelector('.popup-body').innerText).toEqual('Dogs');
   });
+
+  it('Should add .popup-open from body', function() {
+    expect(document[0].body.classList.contains('popup-open')).toEqual(false);
+
+    popup.show({
+      title: 'Cats',
+      content: 'Dogs',
+      buttons: [
+        {
+          text: 'Okay',
+          type: 'button-balanced',
+          onTap: function(e) {}
+        }
+      ]
+    });
+
+    timeout.flush();
+    expect(document[0].body.classList.contains('popup-open')).toEqual(true);
+  });
 });

scss/_popup.scss

@@ -77,6 +77,18 @@
   }
 }
 
+.popup-open {
+  pointer-events: none;
+
+  &.modal-open .modal {
+    pointer-events: none;
+  }
+
+  .popup-backdrop, .popup {
+    pointer-events: auto;
+  }
+}
+
 .popup-backdrop {
   @include animation-name(fadeIn);
   @include animation-duration($popup-backdrop-fadein-duration);