fix(actionsheet): Actionsheet in modal has pointer-events enabled, cl…

…oses #660

js/ext/angular/src/service/ionicActionSheet.js

@@ -18,7 +18,6 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
 
       angular.extend(scope, opts);
 
-
       // Compile the template
       var element = $compile('<ion-action-sheet buttons="buttons"></ion-action-sheet>')(scope);
 
@@ -35,6 +34,8 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
         $animate.removeClass(element, 'active', function() {
           scope.$destroy();
         });
+
+        $document[0].body.classList.remove('action-sheet-open');
       };
 
       var onHardwareBackButton = function() {
@@ -70,6 +71,8 @@ angular.module('ionic.service.actionSheet', ['ionic.service.templateLoad', 'ioni
 
       $document[0].body.appendChild(element[0]);
 
+      $document[0].body.classList.add('action-sheet-open');
+
       var sheet = new ionic.views.ActionSheet({el: element[0] });
       scope.sheet = sheet;
 

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

@@ -12,8 +12,7 @@ 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');
+      document.body.classList.add('modal-open');
 
       self._isShown = true;
 
@@ -76,8 +75,7 @@ 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');
+    document.body.classList.remove('modal-open');
   }
 
   var createModal = function(templateString, options) {

js/ext/angular/test/modal.html

@@ -43,6 +43,7 @@ <h1 class="title">New Contact</h1>
                 <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>
             </div>
           </div>
         </ion-content>
@@ -82,10 +83,49 @@ <h1 class="title">New Contact</h1>
 
       })
 
-      .controller('ModalCtrl', function($scope) {
+      .controller('ModalCtrl', function($scope, $ionicActionSheet) {
         $scope.close = function() {
           $scope.modal.hide();
         }
+
+        $scope.openActionSheet = function() {
+          $ionicActionSheet.show({
+
+            // The various non-destructive button choices
+            buttons: [
+              { text: 'Share' },
+              { text: 'Move' },
+            ],
+
+            // The text of the red destructive button
+            destructiveText: 'Delete',
+
+            // The title text at the top
+            titleText: 'Modify your album',
+
+            // The text of the cancel button
+            cancelText: 'Cancel',
+
+            // Called when the sheet is cancelled, either from triggering the
+            // cancel button, or tapping the backdrop, or using escape on the keyboard
+            cancel: function() {
+            },
+
+            // Called when one of the non-destructive buttons is clicked, with
+            // the index of the button that was clicked. Return
+            // "true" to tell the action sheet to close. Return false to not close.
+            buttonClicked: function(index) {
+              return true;
+            },
+
+            // Called when the destructive button is clicked. Return true to close the
+            // action sheet. False to keep it open
+            destructiveButtonClicked: function() {
+              return true;
+            }
+          });
+        };
+
       });
     </script>
   </body>

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

@@ -25,4 +25,16 @@ describe('Ionic ActionSheet Service', function() {
 
     expect(s.el.classList.contains('active')).toBe(false);
   });
+
+  it('show & hide should add action-sheet-open to body', inject(function($animate) {
+    var s = sheet.show();
+
+    expect(angular.element(document.body).hasClass('action-sheet-open')).toBe(true);
+
+    ionic.trigger('backbutton', {
+      target: document
+    });
+
+    expect(angular.element(document.body).hasClass('action-sheet-open')).toBe(false);
+  }));
 });

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

@@ -53,30 +53,26 @@ describe('Ionic Modal', function() {
     expect(m.isShown()).toBe(false);
   });
 
-  it('show & remove should add {disable,enable}-pointer-events to body/modal', inject(function($animate) {
+  it('show & remove should add .model-open to body', 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);
+    expect(angular.element(document.body).hasClass('modal-open')).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);
+    expect(angular.element(document.body).hasClass('modal-open')).toBe(false);
   }));
 
-  it('show & hide should add {disable,enable}-pointer-events to body/modal', inject(function($animate) {
+  it('show & hide should add .model-open body', 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);
+    expect(angular.element(document.body).hasClass('modal-open')).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);
+    expect(angular.element(document.body).hasClass('modal-open')).toBe(false);
   }));
 
   it('should animate leave and destroy scope on remove', inject(function($animate) {

scss/_action-sheet.scss

@@ -148,3 +148,15 @@ $slide-in-up-function: cubic-bezier(.1, .7, .1, 1);
     border-width: 0;
   }
 }
+
+.action-sheet-open {
+  pointer-events: none;
+
+  &.modal-open .modal {
+    pointer-events: none;
+  }
+
+  .action-sheet {
+    pointer-events: auto;
+  }
+}

scss/_modal.scss

@@ -23,3 +23,11 @@
     height: 100%;
   }
 }
+
+.modal-open {
+  pointer-events: none;
+
+  .modal {
+    pointer-events: auto;
+  }
+}

scss/_variables.scss

@@ -554,7 +554,7 @@ $badge-default-text:              #AAAAAA !default;
 // Z-Indexes
 // -------------------------------
 
-$z-index-action-sheet:            10 !default;
+$z-index-action-sheet:            11 !default;
 $z-index-bar:                     10 !default;
 $z-index-bar-title:               0 !default;
 $z-index-bar-button:              1 !default;