From 1503cc7213c13e87804c210dea7465931e972f4a Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Sat, 22 Feb 2014 21:22:35 -0600 Subject: [PATCH] fix(actionsheet): Actionsheet in modal has pointer-events enabled, closes #660 --- .../angular/src/service/ionicActionSheet.js | 5 ++- js/ext/angular/src/service/ionicModal.js | 6 +-- js/ext/angular/test/modal.html | 42 ++++++++++++++++++- .../test/service/ionicActionSheet.unit.js | 12 ++++++ .../angular/test/service/ionicModal.unit.js | 16 +++---- scss/_action-sheet.scss | 12 ++++++ scss/_modal.scss | 8 ++++ scss/_variables.scss | 2 +- 8 files changed, 86 insertions(+), 17 deletions(-) diff --git a/js/ext/angular/src/service/ionicActionSheet.js b/js/ext/angular/src/service/ionicActionSheet.js index 1989543e03..fdbaf31df0 100644 --- a/js/ext/angular/src/service/ionicActionSheet.js +++ b/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('')(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; diff --git a/js/ext/angular/src/service/ionicModal.js b/js/ext/angular/src/service/ionicModal.js index da73d7a600..1cacb8689f 100644 --- a/js/ext/angular/src/service/ionicModal.js +++ b/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) { diff --git a/js/ext/angular/test/modal.html b/js/ext/angular/test/modal.html index 79ce482420..4752000d89 100644 --- a/js/ext/angular/test/modal.html +++ b/js/ext/angular/test/modal.html @@ -43,6 +43,7 @@ + @@ -82,10 +83,49 @@ }) - .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; + } + }); + }; + }); diff --git a/js/ext/angular/test/service/ionicActionSheet.unit.js b/js/ext/angular/test/service/ionicActionSheet.unit.js index 4e7578d165..723492064a 100644 --- a/js/ext/angular/test/service/ionicActionSheet.unit.js +++ b/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); + })); }); diff --git a/js/ext/angular/test/service/ionicModal.unit.js b/js/ext/angular/test/service/ionicModal.unit.js index b1318a6a2f..22290a55dd 100644 --- a/js/ext/angular/test/service/ionicModal.unit.js +++ b/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('
hi
'); 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('
hi
'); 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) { diff --git a/scss/_action-sheet.scss b/scss/_action-sheet.scss index 8508f67927..2a330eff41 100644 --- a/scss/_action-sheet.scss +++ b/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; + } +} diff --git a/scss/_modal.scss b/scss/_modal.scss index 0910775ecc..c287f75ac1 100644 --- a/scss/_modal.scss +++ b/scss/_modal.scss @@ -23,3 +23,11 @@ height: 100%; } } + +.modal-open { + pointer-events: none; + + .modal { + pointer-events: auto; + } +} \ No newline at end of file diff --git a/scss/_variables.scss b/scss/_variables.scss index 794b3456f0..66179f6c33 100644 --- a/scss/_variables.scss +++ b/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;