Generate one backdrop per modal

addon/services/modals.js

@@ -1,5 +1,5 @@
 import { A } from '@ember/array';
-import { computed, set } from '@ember/object';
+import { computed } from '@ember/object';
 import { alias } from '@ember/object/computed';
 import Service from '@ember/service';
 
@@ -12,7 +12,6 @@ export default Service.extend({
   top: alias('_stack.lastObject'),
 
   clickOutsideDeactivates: true,
-  _renderBackdrop: false,
 
   init() {
     this._super(...arguments);
@@ -36,7 +35,6 @@ export default Service.extend({
   },
 
   _onFirstModalAdded() {
-    set(this, '_renderBackdrop', true);
     document.body.classList.add('epm-scrolling-disabled');
   },
 

addon/templates/components/modal-container.hbs

@@ -1,14 +1,12 @@
-{{#if this.modals._renderBackdrop}}
+{{#each this.modals._stack as |modal index|}}
   <div
-    class="epm-backdrop {{unless this.modals.count "epm-out"}}"
+    class="epm-backdrop {{if modal.isClosing "epm-out"}}"
     tabindex="-1"
     role="presentation"
     aria-hidden="true"
-  ></div>
-{{/if}}
-
-{{#each this.modals._stack as |modal|}}
+    data-test-epm-backdrop="{{index}}"
+  />
   <div class="epm-modal-container">
-    <EpmModal @modal={{modal}} />
+    <EpmModal @modal={{modal}} data-test-epm-modal="{{index}}" />
   </div>
 {{/each}}

tests/application/basics-test.js

@@ -32,11 +32,7 @@ module('Application | basics', function (hooks) {
 
     await click('.epm-backdrop');
 
-    assert.dom('.epm-backdrop').exists();
-    assert.dom('.epm-backdrop').hasStyle({
-      opacity: '0',
-      pointerEvents: 'none',
-    });
+    assert.dom('.epm-backdrop').doesNotExist();
     assert.dom('.epm-modal').doesNotExist();
   });
 

tests/application/overlapping-modals-test.js

@@ -0,0 +1,68 @@
+import { visit, click, waitUntil } from '@ember/test-helpers';
+import { setupApplicationTest } from 'ember-qunit';
+import { module, test } from 'qunit';
+
+import { setupPromiseModals } from 'ember-promise-modals/test-support';
+
+module('Application | overlapping modals', function (hooks) {
+  setupApplicationTest(hooks);
+  setupPromiseModals(hooks);
+
+  test('every modal should have a dedicated backdrop', async function (assert) {
+    await visit('/');
+
+    assert.dom('.epm-backdrop').doesNotExist();
+    assert.dom('.epm-modal').doesNotExist();
+
+    await click('[data-test-show-modal]');
+
+    assert.dom('.epm-modal').exists();
+    assert.dom('.epm-backdrop').exists({ count: 1 });
+
+    await click('[data-test-show-modal-2]');
+
+    await waitUntil(() => {
+      let { opacity } = window.getComputedStyle(document.querySelector('[data-test-epm-backdrop="1"]'));
+      return opacity === '1';
+    });
+
+    assert.dom('[data-test-epm-backdrop="0"]').hasStyle({
+      opacity: '1',
+      pointerEvents: 'auto',
+    });
+
+    assert.dom('[data-test-epm-backdrop="1"]').hasStyle({
+      opacity: '1',
+      pointerEvents: 'auto',
+    });
+  });
+
+  test('clicking a backdrop closes the associated modal', async function (assert) {
+    await visit('/');
+
+    assert.dom('.epm-backdrop').doesNotExist();
+    assert.dom('.epm-modal').doesNotExist();
+
+    await click('[data-test-show-modal]');
+    await click('[data-test-show-modal-2]');
+
+    assert.dom('.epm-backdrop').exists({ count: 2 });
+    assert.dom('.epm-modal').exists({ count: 2 });
+
+    await click('[data-test-epm-backdrop="1"]');
+
+    assert.dom('[data-test-epm-backdrop="1"]').doesNotExist();
+    assert.dom('[data-test-epm-modal="1"]').doesNotExist();
+
+    // check that there are still a modal and a backdrop left
+    assert.dom('.epm-backdrop').exists({ count: 1 });
+    assert.dom('.epm-modal').exists({ count: 1 });
+
+    await click('[data-test-epm-backdrop="0"]');
+    assert.dom('[data-test-epm-modal="0"]').doesNotExist();
+
+    // check that there are no modals nor backdrops left
+    assert.dom('.epm-backdrop').doesNotExist();
+    assert.dom('.epm-modal').doesNotExist();
+  });
+});

tests/dummy/app/components/modal1.js

@@ -1,5 +1,13 @@
 import Component from '@ember/component';
+import { inject as service } from '@ember/service';
 
 export default Component.extend({
   tagName: '',
+  modals: service(),
+
+  actions: {
+    showModal2() {
+      this.modals.open('modal2');
+    },
+  },
 });

tests/dummy/app/styles/app.css

@@ -1,14 +1,21 @@
 /* === Basic styling for the demo modal */
 
-.modal1 {
-  width: 600px;
+.modal {
   max-width: 100%;
   border-radius: 6px;
   background-color: white;
   box-shadow: 0 4px 28px 0 rgba(0, 0, 0, 0.36);
   padding: 16px 32px;
 }
 
+.modal1 {
+  width: 600px;
+}
+
+.modal2 {
+  width: 400px;
+}
+
 /* === Variation 1: Custom animation which animates the modal in from the bottom and back */
 
 /* this className will be added to the modal when the modal should be animated in */

tests/dummy/app/templates/components/modal1.hbs

@@ -1,5 +1,6 @@
-<div class="modal1">
+<div class="modal modal1">
   <button type="button" {{action @close}}>Close</button>
+  <button type="button" data-test-show-modal-2 {{action "showModal2"}}>Open another modal</button>
 
   <h2>Modal 1</h2>
 

tests/dummy/app/templates/components/modal2.hbs

@@ -0,0 +1,9 @@
+<div class="modal modal2">
+  <button type="button" {{action @close}}>Close</button>
+
+  <h2>Modal 2</h2>
+
+  <p>
+    Sociis per justo neque pulvinar orci sagittis tristique tincidunt suspendisse cum est, rhoncus euismod velit interdum condimentum aenean sed hendrerit arcu venenatis, rutrum commodo elementum eros ac at non ullamcorper pellentesque turpis. Tincidunt consequat purus quam ante aliquam mattis scelerisque viverra suspendisse, tellus convallis mollis ornare primis penatibus montes dapibus sagittis fringilla, magna feugiat conubia luctus posuere suscipit praesent quis. Interdum a iaculis aliquet inceptos vulputate torquent dapibus, ultricies nisl congue leo molestie eu rutrum lectus, ac non pretium magna ad primis. Cursus dui tempus iaculis nostra habitant quis platea hendrerit, purus augue massa elementum dapibus morbi ridiculus, magna convallis pretium ac tincidunt inceptos cum.
+  </p>
+</div>