diff --git a/README.md b/README.md
index f904f79..41c40d5 100644
--- a/README.md
+++ b/README.md
@@ -44,7 +44,7 @@ Here is a more useful example of how to conditionally display a modal based on a
{{#if isShowingModal}}
- {{#modal-dialog close="toggleModal"
+ {{#modal-dialog onClose="toggleModal"
targetAttachment="center"
translucentOverlay=true}}
Oh hai there!
@@ -81,10 +81,10 @@ Property | Purpose
--------------------- | -------------
`translucentOverlay` | Indicates translucence of overlay, toggles presence of `translucent` CSS selector
`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
+`onClose` | The action handler for the dialog's `onClose` action. This action triggers when the user clicks the modal overlay.
+`onClickOverlay` | An action to be called when the overlay is clicked. If this action is specified, clicking the overlay will invoke it instead of `onClose`.
`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.
+`renderInPlace` | A boolean, when true renders the modal without wormholing or tethering, useful for including a modal in a style guide
`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)
`containerClass` | 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 cb8b86f..ce7ae0d 100644
--- a/addon/components/modal-dialog.js
+++ b/addon/components/modal-dialog.js
@@ -18,6 +18,21 @@ export default Ember.Component.extend({
modalService: inject.service('modal-dialog'),
destinationElementId: oneWay('modalService.destinationElementId'),
+ // onClose - set this from templates
+ close: computed('onClose', {
+ get() {
+ return this.get('onClose');
+ },
+ set(key, value) {
+ deprecate(
+ 'Specifying the `close` action for a modal-dialog/tether-dialog is deprecated in favor of `onClose`. Will be removed in 3.0.0.',
+ false,
+ { id: 'ember-modal-dialog.close-action', until: '3.0.0' }
+ );
+ this.set('onClose', value);
+ },
+ }),
+
// containerClass - set this from templates
"container-class": computed('containerClass', {
get() {
@@ -98,7 +113,7 @@ export default Ember.Component.extend({
const handleClick = (event) => {
if (!$(event.target).closest('.ember-modal-dialog').length) {
- this.send('close');
+ this.sendAction('onClose');
}
};
const registerClick = () => $(document).on(`click.ember-modal-dialog-${guidFor(this)}`, handleClick);
@@ -122,13 +137,13 @@ export default Ember.Component.extend({
actions: {
close() {
- this.sendAction('close');
+ this.sendAction('onClose');
},
clickedOverlay() {
if (this.get('onClickOverlay')) {
this.sendAction('onClickOverlay');
} else {
- this.sendAction('close');
+ this.sendAction('onClose');
}
}
}
diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs
index 96cdafd..7ffea1c 100644
--- a/tests/dummy/app/templates/index.hbs
+++ b/tests/dummy/app/templates/index.hbs
@@ -14,7 +14,7 @@
{{code-snippet name='basic-modal-dialog.hbs'}}
{{#if isShowingBasic}}
{{!-- BEGIN-SNIPPET basic-modal-dialog --}}
- {{#modal-dialog close='toggleBasic'}}
+ {{#modal-dialog onClose='toggleBasic'}}