diff --git a/addon/components/modal-dialog.js b/addon/components/modal-dialog.js index a13f66cf..9f5cc179 100644 --- a/addon/components/modal-dialog.js +++ b/addon/components/modal-dialog.js @@ -2,7 +2,7 @@ import Ember from 'ember'; import layout from '../templates/components/modal-dialog'; const { dasherize } = Ember.String; -const { $, computed, inject } = Ember; +const { $, computed, guidFor, inject } = Ember; const { oneWay } = computed; const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent); const computedJoin = function(prop) { @@ -61,14 +61,14 @@ export default Ember.Component.extend({ this.send('close'); } }; - const registerClick = () => $(document).on('click.ember-modal-dialog', handleClick); + const registerClick = () => $(document).on(`click.ember-modal-dialog-${guidFor(this)}`, handleClick); // setTimeout needed or else the click handler will catch the click that spawned this modal dialog setTimeout(registerClick); this._super(...arguments); }, willDestroyElement() { - $(document).off('click.ember-modal-dialog'); + $(document).off(`click.ember-modal-dialog-${guidFor(this)}`); this._super(...arguments); }, diff --git a/tests/.jshintrc b/tests/.jshintrc index 6ec0b7c1..f060e79b 100644 --- a/tests/.jshintrc +++ b/tests/.jshintrc @@ -21,7 +21,8 @@ "andThen", "currentURL", "currentPath", - "currentRouteName" + "currentRouteName", + "nativeClick" ], "node": false, "browser": false, diff --git a/tests/acceptance/tether-dialog-test.js b/tests/acceptance/tether-dialog-test.js index 209dfd22..6a8ed585 100644 --- a/tests/acceptance/tether-dialog-test.js +++ b/tests/acceptance/tether-dialog-test.js @@ -82,6 +82,23 @@ test('modal without overlay click outside to close', function(assert) { dialogText: 'Without Overlay - Click Outside to Close', closeSelector: '#example-without-overlay-click-outside-to-close' }); + + assert.dialogOpensAndCloses({ + openSelector: '#example-without-overlay-click-outside-to-close button:nth-of-type(2)', + dialogText: 'Without Overlay Another One - Click Outside to Close', + closeSelector: '#example-without-overlay-click-outside-to-close button:nth-of-type(1)' + }); + + assert.dialogOpensAndCloses({ + openSelector: '#example-without-overlay-click-outside-to-close button:nth-of-type(2)', + dialogText: 'Without Overlay Another One - Click Outside to Close', + closeSelector: '#example-without-overlay-click-outside-to-close' + }); + + andThen(function() { + assert.equal(Ember.$(dialogSelector).length, 0, 'All modals are absent'); + }); + }); test('target - selector', function(assert) { diff --git a/tests/dummy/app/controllers/application.js b/tests/dummy/app/controllers/application.js index b2a52c44..2ee86561 100644 --- a/tests/dummy/app/controllers/application.js +++ b/tests/dummy/app/controllers/application.js @@ -8,6 +8,7 @@ export default Ember.Controller.extend({ isShowingTranslucent: false, isShowingWithoutOverlay: false, isShowingWithoutOverlayClickOutsideToClose: false, + isShowingWithoutOverlayClickOutsideToCloseAnotherOne: false, isShowingCustomStyles: false, isShowingTargetSelector: false, isShowingTargetView: false, @@ -53,6 +54,9 @@ export default Ember.Controller.extend({ toggleWithoutOverlayClickOutsideToClose() { this.toggleProperty('isShowingWithoutOverlayClickOutsideToClose'); }, + toggleWithoutOverlayClickOutsideToCloseAnotherOne() { + this.toggleProperty('isShowingWithoutOverlayClickOutsideToCloseAnotherOne'); + }, toggleCustomStyles() { this.toggleProperty('isShowingCustomStyles'); }, diff --git a/tests/dummy/app/templates/-tether-dialog.hbs b/tests/dummy/app/templates/-tether-dialog.hbs index ab087e6c..0e8fcfd5 100644 --- a/tests/dummy/app/templates/-tether-dialog.hbs +++ b/tests/dummy/app/templates/-tether-dialog.hbs @@ -48,6 +48,8 @@
Without Overlay Another One - Click Outside to Close
+ + {{/tether-dialog}} + {{/if}} +