From 45cd0ed6ef6431bf46f85ed565e60df94d0289e2 Mon Sep 17 00:00:00 2001 From: Andrew Havens Date: Tue, 4 Apr 2017 08:40:48 -0700 Subject: [PATCH] Add ability to specify a callback that is triggered when overlay is clicked. --- README.md | 3 ++- addon/components/modal-dialog.js | 7 +++++++ .../current/components/modal-dialog.hbs | 2 +- .../current/components/tether-dialog.hbs | 2 +- .../lt-1-13/components/modal-dialog.hbs | 2 +- .../lt-1-13/components/tether-dialog.hbs | 2 +- tests/acceptance/modal-dialog-test.js | 18 ++++++++++++++++++ tests/acceptance/tether-dialog-test.js | 18 ++++++++++++++++++ tests/dummy/app/controllers/application.js | 7 +++++++ tests/dummy/app/templates/-modal-dialog.hbs | 17 +++++++++++++++++ tests/dummy/app/templates/-tether-dialog.hbs | 17 +++++++++++++++++ 11 files changed, 90 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index a0dbf0b2..7ccf00b9 100644 --- a/README.md +++ b/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. diff --git a/addon/components/modal-dialog.js b/addon/components/modal-dialog.js index cabc8f02..f142641f 100644 --- a/addon/components/modal-dialog.js +++ b/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'); + } } } }); diff --git a/addon/templates/current/components/modal-dialog.hbs b/addon/templates/current/components/modal-dialog.hbs index 204a67b5..8837d821 100644 --- a/addon/templates/current/components/modal-dialog.hbs +++ b/addon/templates/current/components/modal-dialog.hbs @@ -2,7 +2,7 @@
{{#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 diff --git a/addon/templates/current/components/tether-dialog.hbs b/addon/templates/current/components/tether-dialog.hbs index f2fb2b09..81766982 100644 --- a/addon/templates/current/components/tether-dialog.hbs +++ b/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}} diff --git a/addon/templates/lt-1-13/components/modal-dialog.hbs b/addon/templates/lt-1-13/components/modal-dialog.hbs index 73cf8e5a..6dd47337 100644 --- a/addon/templates/lt-1-13/components/modal-dialog.hbs +++ b/addon/templates/lt-1-13/components/modal-dialog.hbs @@ -2,7 +2,7 @@
{{#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 diff --git a/addon/templates/lt-1-13/components/tether-dialog.hbs b/addon/templates/lt-1-13/components/tether-dialog.hbs index 67b15abe..0a40c4e7 100644 --- a/addon/templates/lt-1-13/components/tether-dialog.hbs +++ b/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}} diff --git a/tests/acceptance/modal-dialog-test.js b/tests/acceptance/modal-dialog-test.js index 983c90ec..e0e376f8 100644 --- a/tests/acceptance/modal-dialog-test.js +++ b/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', diff --git a/tests/acceptance/tether-dialog-test.js b/tests/acceptance/tether-dialog-test.js index 6a8ed585..154ce90d 100644 --- a/tests/acceptance/tether-dialog-test.js +++ b/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', diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js index 2ee86561..aaefe6ad 100644 --- a/tests/dummy/app/controllers/application.js +++ b/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; } } }); diff --git a/tests/dummy/app/templates/-modal-dialog.hbs b/tests/dummy/app/templates/-modal-dialog.hbs index 4528810f..71d396c9 100644 --- a/tests/dummy/app/templates/-modal-dialog.hbs +++ b/tests/dummy/app/templates/-modal-dialog.hbs @@ -29,6 +29,23 @@ {{/if}}
+
+

Translucent Overlay with Callback

+ + {{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'}} +

Stop! Modal Time!

+

Translucent Overlay with Callback

+ + {{/modal-dialog}} + {{!-- END-SNIPPET --}} + {{/if}} +
+

Custom Styles

diff --git a/tests/dummy/app/templates/-tether-dialog.hbs b/tests/dummy/app/templates/-tether-dialog.hbs index 0e8fcfd5..3027a98d 100644 --- a/tests/dummy/app/templates/-tether-dialog.hbs +++ b/tests/dummy/app/templates/-tether-dialog.hbs @@ -29,6 +29,23 @@ {{/if}}
+
+

Translucent Overlay with Callback

+ + {{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'}} +

Stop! Modal Time!

+

Translucent Overlay with Callback

+ + {{/tether-dialog}} + {{!-- END-SNIPPET --}} + {{/if}} +
+

Without Overlay