feat($ionicModal): allow configuration of backdropClickToClose

Addresses #1087
ionic-team · May 12, 2014 · 291d723 · 291d723
1 parent 3806482
commit 291d723
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/js/angular/service/modal.js b/js/angular/service/modal.js
@@ -38,7 +38,7 @@
  *   $scope.$on('$destroy', function() {
  *     $scope.modal.remove();
  *   });
- *   // Execute action on hide modal 
+ *   // Execute action on hide modal
  *   $scope.$on('modal.hide', function() {
  *     // Execute action
  *   });
@@ -85,6 +85,8 @@ function($rootScope, $document, $compile, $timeout, $ionicPlatform, $ionicTempla
      *    Default: 'slide-in-up'
      *  - `{boolean=}` `focusFirstInput` Whether to autofocus the first input of
      *    the modal when shown.  Default: false.
+     *  - `{boolean=} `backdropClickToClose` Whether to close the modal on clicking the backdrop.
+     *    Default: true.
      */
     initialize: function(opts) {
       ionic.views.Modal.prototype.initialize.call(this, opts);
@@ -132,7 +134,7 @@ function($rootScope, $document, $compile, $timeout, $ionicPlatform, $ionicTempla
       return $timeout(function() {
         //After animating in, allow hide on backdrop click
         self.$el.on('click', function(e) {
-          if (e.target === self.el) {
+          if (self.backdropClickToClose && e.target === self.el) {
             self.hide();
           }
         });

diff --git a/js/views/modalView.js b/js/views/modalView.js
@@ -6,7 +6,8 @@
       opts = ionic.extend({
         focusFirstInput: false,
         unfocusOnHide: true,
-        focusFirstDelay: 600
+        focusFirstDelay: 600,
+        backdropClickToClose: true,
       }, opts);
 
       ionic.extend(this, opts);

diff --git a/test/unit/angular/service/modal.unit.js b/test/unit/angular/service/modal.unit.js
@@ -111,7 +111,17 @@ describe('Ionic Modal', function() {
     expect(instance.hide).toHaveBeenCalled();
   });
 
-  it('should close modal on backdrop click if target is not backdrop', function() {
+  it('should not close modal on backdrop click if options.backdropClickToClose', function() {
+    var template = '<div class="modal"></div>';
+    var instance = modal.fromTemplate(template, { backdropClickToClose: false });
+    spyOn(instance, 'hide');
+    instance.show();
+    timeout.flush();
+    instance.$el.triggerHandler('click');
+    expect(instance.hide).not.toHaveBeenCalled();
+  });
+
+  it('should not close modal on backdrop click if target is not backdrop', function() {
     var template = '<div class="modal"></div>';
     var instance = modal.fromTemplate(template);
     spyOn(instance, 'hide');