Merge pull request #167 from andrewhavens/feature/click-overlay-callback

Add ability to specify a callback that is triggered when overlay is clicked.

README.md

@@ -85,7 +85,8 @@ Property              | Purpose
 `target`              | Element selector, element, or Ember View reference for that serves as the reference for modal position (default: `'body'`)
 `close`               | The action handler for the dialog's `close` action. This action triggers when the user clicks the modal overlay.
 `renderInPlace`       | A boolean, when true renders the modal without wormholing or tethering, useful for including a modal in a style guide
-`clickOutsideToClose` | Indicates whether clicking outside a modal without an overlay should close the modal. Useful if your modal isn't the focus of interaction, and you want hover effects to still work outside the modal.
+`clickOutsideToClose` | Indicates whether clicking outside a modal *without* an overlay should close the modal. Useful if your modal isn't the focus of interaction, and you want hover effects to still work outside the modal.
+`onClickOverlay`      | An action to be called when the overlay is clicked. This action will be called instead of closing the modal when the overlay is clicked.
 `attachment`          | A string of the form 'vert-attachment horiz-attachment', e.g. `'middle left'` (see "Positioning" section below)
 `targetAttachment`    | A string of the form 'vert-attachment horiz-attachment', e.g. `'middle left'` (see "Positioning" section below)
 `container-class`     | CSS class name(s) to append to container divs. Set this from template.

addon/components/modal-dialog.js

@@ -83,6 +83,13 @@ export default Ember.Component.extend({
   actions: {
     close() {
       this.sendAction('close');
+    },
+    clickedOverlay() {
+      if (this.get('onClickOverlay')) {
+        this.sendAction('onClickOverlay');
+      } else {
+        this.sendAction('close');
+      }
     }
   }
 });

addon/templates/current/components/modal-dialog.hbs

@@ -2,7 +2,7 @@
   <div class="{{wrapperClassNamesString}} {{wrapper-class}}">
     {{#modal-dialog-overlay
         classNameBindings='overlayClassNamesString translucentOverlay:translucent overlay-class'
-        action='close'
+        action='clickedOverlay'
     }}
       {{#ember-modal-dialog-positioned-container classNameBindings="containerClassNamesString targetAttachmentClass container-class"
           targetAttachment=targetAttachment

addon/templates/current/components/tether-dialog.hbs

@@ -2,7 +2,7 @@
   {{#if hasOverlay}}
     {{modal-dialog-overlay
         classNameBindings='overlayClassNamesString translucentOverlay:translucent overlay-class'
-        action='close'
+        action='clickedOverlay'
     }}
   {{/if}}
 {{/ember-wormhole}}

addon/templates/lt-1-13/components/modal-dialog.hbs

@@ -2,7 +2,7 @@
   <div {{bind-attr class="wrapperClassNamesString wrapper-class"}}>
     {{#modal-dialog-overlay
         classNameBindings='overlayClassNamesString translucentOverlay:translucent overlay-class'
-        action='close'
+        action='clickedOverlay'
     }}
       {{#ember-modal-dialog-positioned-container classNameBindings="containerClassNamesString targetAttachmentClass container-class"
           targetAttachment=targetAttachment

addon/templates/lt-1-13/components/tether-dialog.hbs

@@ -2,7 +2,7 @@
   {{#if hasOverlay}}
     {{modal-dialog-overlay
         classNameBindings='overlayClassNamesString translucentOverlay:translucent overlay-class'
-        action='close'
+        action='clickedOverlay'
     }}
   {{/if}}
 {{/ember-wormhole}}

tests/acceptance/modal-dialog-test.js

@@ -54,6 +54,24 @@ test('modal with translucent overlay', function(assert) {
   });
 });
 
+test('clicking translucent overlay triggers callback', function(assert) {
+  window.onClickOverlayCallbackCalled = false;
+
+  click('#example-translucent-with-callback button');
+  click(overlaySelector);
+
+  andThen(function() {
+    assert.isPresentOnce(overlaySelector);
+    assert.ok(window.onClickOverlayCallbackCalled);
+  });
+
+  click(dialogCloseButton);
+
+  andThen(function() {
+    assert.isAbsent(overlaySelector);
+  });
+});
+
 test('modal with custom styles', function(assert) {
   assert.dialogOpensAndCloses({
     openSelector: '#example-custom-styles button',

tests/acceptance/tether-dialog-test.js

@@ -55,6 +55,24 @@ test('modal with translucent overlay', function(assert) {
   });
 });
 
+test('clicking translucent overlay triggers callback', function(assert) {
+  window.onClickOverlayCallbackCalled = false;
+
+  click('#example-translucent-with-callback button');
+  click(overlaySelector);
+
+  andThen(function() {
+    assert.isPresentOnce(overlaySelector);
+    assert.ok(window.onClickOverlayCallbackCalled);
+  });
+
+  click(dialogCloseButton);
+
+  andThen(function() {
+    assert.isAbsent(overlaySelector);
+  });
+});
+
 test('modal without overlay', function(assert) {
   assert.dialogOpensAndCloses({
     openSelector: '#example-without-overlay button',

tests/dummy/app/controllers/application.js

@@ -6,6 +6,7 @@ export default Ember.Controller.extend({
   activeComponent: 'tether-dialog',
   isShowingBasic: false,
   isShowingTranslucent: false,
+  isShowingTranslucentWithCallback: false,
   isShowingWithoutOverlay: false,
   isShowingWithoutOverlayClickOutsideToClose: false,
   isShowingWithoutOverlayClickOutsideToCloseAnotherOne: false,
@@ -48,6 +49,9 @@ export default Ember.Controller.extend({
     toggleTranslucent() {
       this.toggleProperty('isShowingTranslucent');
     },
+    toggleTranslucentWithCallback() {
+      this.toggleProperty('isShowingTranslucentWithCallback');
+    },
     toggleWithoutOverlay() {
       this.toggleProperty('isShowingWithoutOverlay');
     },
@@ -138,6 +142,9 @@ export default Ember.Controller.extend({
       this.set('isShowingTargetElement', false);
       this.set('exampleTargetAttachment', 'middle left');
       this.set('exampleAttachment', 'middle right');
+    },
+    clickedTranslucentOverlay() {
+      window.onClickOverlayCallbackCalled = true;
     }
   }
 });

tests/dummy/app/templates/-modal-dialog.hbs

@@ -29,6 +29,23 @@
   {{/if}}
 </div>
 
+<div class='example' id='example-translucent-with-callback'>
+  <h2>Translucent Overlay with Callback</h2>
+  <button {{action 'toggleTranslucentWithCallback'}}>Do It</button>
+  {{code-snippet name='translucent-modal-dialog-with-callback.hbs'}}
+  {{#if isShowingTranslucentWithCallback}}
+    {{!-- BEGIN-SNIPPET translucent-modal-dialog-with-callback --}}
+    {{#modal-dialog close='toggleTranslucentWithCallback'
+                    translucentOverlay=true
+                    onClickOverlay='clickedTranslucentOverlay'}}
+      <h1>Stop! Modal Time!</h1>
+      <p>Translucent Overlay with Callback</p>
+      <button {{action 'toggleTranslucentWithCallback'}}>Close</button>
+    {{/modal-dialog}}
+    {{!-- END-SNIPPET --}}
+  {{/if}}
+</div>
+
 <div class='example' id='example-custom-styles'>
   <h2>Custom Styles</h2>
   <button {{action 'toggleCustomStyles'}}>Do It</button>

tests/dummy/app/templates/-tether-dialog.hbs

@@ -29,6 +29,23 @@
   {{/if}}
 </div>
 
+<div class='example' id='example-translucent-with-callback'>
+  <h2>Translucent Overlay with Callback</h2>
+  <button {{action 'toggleTranslucentWithCallback'}}>Do It</button>
+  {{code-snippet name='translucent-tether-dialog-with-callback.hbs'}}
+  {{#if isShowingTranslucentWithCallback}}
+    {{!-- BEGIN-SNIPPET translucent-tether-dialog-with-callback --}}
+    {{#tether-dialog close='toggleTranslucentWithCallback'
+                    translucentOverlay=true
+                    onClickOverlay='clickedTranslucentOverlay'}}
+      <h1>Stop! Modal Time!</h1>
+      <p>Translucent Overlay with Callback</p>
+      <button {{action 'toggleTranslucentWithCallback'}}>Close</button>
+    {{/tether-dialog}}
+    {{!-- END-SNIPPET --}}
+  {{/if}}
+</div>
+
 <div class='example' id='example-without-overlay'>
   <h2>Without Overlay</h2>
   <button {{action 'toggleWithoutOverlay'}}>Do It</button>