Register unique clickOutsideToClose click handlers

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);
   },
 

tests/.jshintrc

@@ -21,7 +21,8 @@
     "andThen",
     "currentURL",
     "currentPath",
-    "currentRouteName"
+    "currentRouteName",
+    "nativeClick"
   ],
   "node": false,
   "browser": false,

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) {

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');
     },

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

@@ -48,6 +48,8 @@
 <div class='example' id='example-without-overlay-click-outside-to-close'>
   <h2>Without Overlay - Click Outside to Close</h2>
   <button {{action 'toggleWithoutOverlayClickOutsideToClose'}}>Do It</button>
+  <button id="without-overlay-another-one-button"
+    {{action 'toggleWithoutOverlayClickOutsideToCloseAnotherOne'}}>Another one</button>
   {{code-snippet name='without-overlay-click-outside-to-close-tether-dialog.hbs'}}
   {{#if isShowingWithoutOverlayClickOutsideToClose}}
     {{!-- BEGIN-SNIPPET without-overlay-click-outside-to-close-tether-dialog --}}
@@ -60,6 +62,17 @@
     {{/tether-dialog}}
     {{!-- END-SNIPPET --}}
   {{/if}}
+  {{#if isShowingWithoutOverlayClickOutsideToCloseAnotherOne}}
+    {{#tether-dialog close='toggleWithoutOverlayClickOutsideToCloseAnotherOne'
+                    hasOverlay=false
+                    clickOutsideToClose=true
+                    offset='100px 0'}}
+      <h1>Stop! Another modal!</h1>
+      <p>Without Overlay Another One - Click Outside to Close</p>
+      <button {{action 'toggleWithoutOverlayClickOutsideToCloseAnotherOne'}}>Close</button>
+    {{/tether-dialog}}
+  {{/if}}
+
 </div>
 
 <div class='example' id='example-custom-styles'>

tests/helpers/acceptance-helpers.js

@@ -0,0 +1,23 @@
+import Ember from 'ember';
+
+function fireNativeMouseEvent(eventType, selectorOrDomElement, context) {
+  let event = new window.Event(eventType, { bubbles: true, cancelable: true, view: window });
+  let target;
+  if (typeof selectorOrDomElement === 'string') {
+    target = Ember.$(selectorOrDomElement, context)[0];
+  } else {
+    target = selectorOrDomElement;
+  }
+  Ember.run(() => target.dispatchEvent(event));
+}
+
+export default function acceptanceTestHelpers() {
+
+  Ember.Test.registerAsyncHelper('nativeClick', function(app, selectorOrDomElement, context) {
+    fireNativeMouseEvent('click', selectorOrDomElement, context);
+    wait();
+  });
+
+}
+
+export default acceptanceTestHelpers();

tests/helpers/modal-asserts.js

@@ -25,15 +25,15 @@ export default function registerAssertHelpers() {
     message = message || `Dialog triggered by ${options.openSelector} failed to open and close`;
     const dialogContent = [dialogSelector, `:contains(${options.dialogText})`].join('');
     const self = this;
-    return click(options.openSelector, options.context).then(function() {
+    return nativeClick(options.openSelector, options.context).then(function() {
       if (options.hasOverlay) {
         self.isPresentOnce(overlaySelector);
       }
       self.isPresentOnce(dialogContent);
       if (options.whileOpen) {
         options.whileOpen();
       }
-      return click(options.closeSelector, options.context).then(function() {
+      return nativeClick(options.closeSelector, options.context).then(function() {
         self.isAbsent(overlaySelector);
         self.isAbsent(dialogContent);
       });

tests/helpers/start-app.js

@@ -2,6 +2,7 @@ import Ember from 'ember';
 import Application from '../../app';
 import config from '../../config/environment';
 import registerAssertHelpers from './modal-asserts';
+import './acceptance-helpers';
 
 export default function startApp(attrs) {
   let application;