Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rename close action to onClose and deprecate close. #183

Merged
merged 1 commit into from
May 13, 2017
Merged

Rename close action to onClose and deprecate close. #183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ Here is a more useful example of how to conditionally display a modal based on a
<button {{action "toggleModal"}}>Toggle Modal</button>

{{#if isShowingModal}}
{{#modal-dialog close="toggleModal"
{{#modal-dialog onClose="toggleModal"
targetAttachment="center"
translucentOverlay=true}}
Oh hai there!
Expand Down Expand Up @@ -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.
Expand Down
21 changes: 18 additions & 3 deletions addon/components/modal-dialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -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);
Expand All @@ -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');
}
}
}
Expand Down
18 changes: 9 additions & 9 deletions tests/dummy/app/templates/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'}}
<h1>Stop! Modal Time!</h1>
<p>Basic</p>
<button {{action 'toggleBasic'}}>Close</button>
Expand Down Expand Up @@ -45,7 +45,7 @@
{{code-snippet name='translucent-modal-dialog-with-callback.hbs'}}
{{#if isShowingTranslucentWithCallback}}
{{!-- BEGIN-SNIPPET translucent-modal-dialog-with-callback --}}
{{#modal-dialog close='toggleTranslucentWithCallback'
{{#modal-dialog onClose='toggleTranslucentWithCallback'
translucentOverlay=true
onClickOverlay='clickedTranslucentOverlay'}}
<h1>Stop! Modal Time!</h1>
Expand All @@ -63,7 +63,7 @@
{{code-snippet name='custom-styles.scss'}}
{{#if isShowingCustomStyles}}
{{!-- BEGIN-SNIPPET custom-styles-modal-dialog --}}
{{#modal-dialog close='toggleCustomStyles'
{{#modal-dialog onClose='toggleCustomStyles'
targetAttachment='none'
containerClass=customContainerClassNames
overlayClass='custom-styles-modal' }}
Expand All @@ -83,7 +83,7 @@
{{code-snippet name='target-selector-modal-dialog.hbs'}}
{{#if isShowingTargetSelector}}
{{!-- BEGIN-SNIPPET target-selector-modal-dialog --}}
{{#modal-dialog close='toggleTargetSelector'
{{#modal-dialog onClose='toggleTargetSelector'
targetAttachment=exampleTargetAttachment
attachment=exampleAttachment
target='#alignModalDialogToMe' }}
Expand All @@ -107,7 +107,7 @@
{{code-snippet name='target-element-modal-dialog.hbs'}}
{{#if isShowingTargetElement}}
{{!-- BEGIN-SNIPPET target-element-modal-dialog --}}
{{#modal-dialog close='toggleTargetElement'
{{#modal-dialog onClose='toggleTargetElement'
targetAttachment=exampleTargetAttachment
attachment=exampleAttachment
target="#bwmde" }}
Expand All @@ -128,7 +128,7 @@
{{code-snippet name='subclass-modal-dialog.hbs'}}
{{#if isShowingSubclassed}}
{{!-- BEGIN-SNIPPET subclass-modal-dialog --}}
{{#my-cool-modal-dialog close='toggleSubclassed'
{{#my-cool-modal-dialog onClose='toggleSubclassed'
translucentOverlay=true}}
<h1>Stop! Modal Time!</h1>
<p>Via Subclass</p>
Expand All @@ -148,7 +148,7 @@
{{#if isShowingInPlace}}
{{!-- BEGIN-SNIPPET in-place-modal-dialog --}}
{{#modal-dialog
close='toggleInPlace'
onClose='toggleInPlace'
renderInPlace=true
targetAttachment='none'
containerClass='ember-modal-dialog-in-place'
Expand All @@ -172,7 +172,7 @@
{{#if isShowingCenteredScrolling}}
{{!-- BEGIN-SNIPPET centered-scrolling-modal-dialog --}}
{{#modal-dialog
close='toggleCenteredScrolling'
onClose='toggleCenteredScrolling'
translucentOverlay=true
targetAttachment='none'
container-class='centered-scrolling-container'
Expand Down Expand Up @@ -201,7 +201,7 @@
{{#if isShowingElementCenterModal}}
{{!-- BEGIN-SNIPPET element-centered-modal-dialog --}}
{{#modal-dialog
close='toggleElementCenterModal'
onClose='toggleElementCenterModal'
elementId=elementId
translucentOverlay=true
targetAttachment='elementCenter'
Expand Down
18 changes: 9 additions & 9 deletions tests/dummy/app/templates/tether-dialog.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
{{code-snippet name='basic-tether-dialog.hbs'}}
{{#if isShowingBasic}}
{{!-- BEGIN-SNIPPET basic-tether-dialog --}}
{{#tether-dialog close='toggleBasic'}}
{{#tether-dialog onClose='toggleBasic'}}
<h1>Stop! Modal Time!</h1>
<p>Basic</p>
<button {{action 'toggleBasic'}}>Close</button>
Expand All @@ -28,7 +28,7 @@
{{code-snippet name='translucent-tether-dialog.hbs'}}
{{#if isShowingTranslucent}}
{{!-- BEGIN-SNIPPET translucent-tether-dialog --}}
{{#tether-dialog close='toggleTranslucent'
{{#tether-dialog onClose='toggleTranslucent'
translucentOverlay=true}}
<h1>Stop! Modal Time!</h1>
<p>With Translucent Overlay</p>
Expand All @@ -44,7 +44,7 @@
{{code-snippet name='translucent-tether-dialog-with-callback.hbs'}}
{{#if isShowingTranslucentWithCallback}}
{{!-- BEGIN-SNIPPET translucent-tether-dialog-with-callback --}}
{{#tether-dialog close='toggleTranslucentWithCallback'
{{#tether-dialog onClose='toggleTranslucentWithCallback'
translucentOverlay=true
onClickOverlay='clickedTranslucentOverlay'}}
<h1>Stop! Modal Time!</h1>
Expand All @@ -61,7 +61,7 @@
{{code-snippet name='without-overlay-tether-dialog.hbs'}}
{{#if isShowingWithoutOverlay}}
{{!-- BEGIN-SNIPPET without-overlay-tether-dialog --}}
{{#tether-dialog close='toggleWithoutOverlay'
{{#tether-dialog onClose='toggleWithoutOverlay'
hasOverlay=false}}
<h1>Stop! Modal Time!</h1>
<p>Without Overlay</p>
Expand All @@ -79,7 +79,7 @@
{{code-snippet name='without-overlay-click-outside-to-close-tether-dialog.hbs'}}
{{#if isShowingWithoutOverlayClickOutsideToClose}}
{{!-- BEGIN-SNIPPET without-overlay-click-outside-to-close-tether-dialog --}}
{{#tether-dialog close='toggleWithoutOverlayClickOutsideToClose'
{{#tether-dialog onClose='toggleWithoutOverlayClickOutsideToClose'
hasOverlay=false
clickOutsideToClose=true}}
<h1>Stop! Modal Time!</h1>
Expand All @@ -89,7 +89,7 @@
{{!-- END-SNIPPET --}}
{{/if}}
{{#if isShowingWithoutOverlayClickOutsideToCloseAnotherOne}}
{{#tether-dialog close='toggleWithoutOverlayClickOutsideToCloseAnotherOne'
{{#tether-dialog onClose='toggleWithoutOverlayClickOutsideToCloseAnotherOne'
hasOverlay=false
clickOutsideToClose=true
offset='100px 0'}}
Expand All @@ -108,7 +108,7 @@
{{code-snippet name='custom-styles.scss'}}
{{#if isShowingCustomStyles}}
{{!-- BEGIN-SNIPPET custom-styles-tether-dialog --}}
{{#tether-dialog close='toggleCustomStyles'
{{#tether-dialog onClose='toggleCustomStyles'
targetAttachment='top right'
attachment='top right'
container-class=customContainerClassNames
Expand All @@ -129,7 +129,7 @@
{{code-snippet name='target-selector-tether-dialog.hbs'}}
{{#if isShowingTargetSelector}}
{{!-- BEGIN-SNIPPET target-selector-tether-dialog --}}
{{#tether-dialog close='toggleTargetSelector'
{{#tether-dialog onClose='toggleTargetSelector'
hasOverlay=false
targetAttachment=exampleTargetAttachment
attachment=exampleAttachment
Expand Down Expand Up @@ -196,7 +196,7 @@
{{#if isShowingInPlace}}
{{!-- BEGIN-SNIPPET in-place-tether-dialog --}}
{{#tether-dialog
close='toggleInPlace'
onClose='toggleInPlace'
renderInPlace=true
targetAttachment='none'
container-class='ember-modal-dialog-in-place'
Expand Down