Merge pull request #128 from geotrev/js/modal-update

Modal trigger/api update

Author: geotrev

js/dist/modal.js

@@ -7,8 +7,8 @@ const KeyCodes = {
 const Selectors = {
   // unique
   DATA_MODAL: "data-modal",
-  DATA_MODAL_BUTTON: "data-modal-button",
   // common
+  DATA_TARGET: "data-target",
   DATA_VISIBLE: "data-visible",
   DATA_CLOSE: "data-close",
   DATA_PARENT: "data-parent",
@@ -75,7 +75,6 @@ export default class Modal extends Utils {
    */
   start() {
     this._modals = nodeListToArray(this._modalContainerAttr)
-    this._modalButtons = nodeListToArray(`[${Selectors.DATA_MODAL_BUTTON}]`)
 
     getFocusableElements(this._modalContainerAttr).forEach(element => {
       element.setAttribute(Selectors.TABINDEX, "-1")
@@ -84,11 +83,8 @@ export default class Modal extends Utils {
     if (this._modals.length) {
       this._modals.forEach(instance => {
         this._setupModal(instance)
-      })
-    }
-
-    if (this._modalButtons.length) {
-      this._modalButtons.forEach(button => {
+        const id = instance.getAttribute(Selectors.DATA_MODAL)
+        const button = document.querySelector(`[${Selectors.DATA_TARGET}='${id}']`)
         button.addEventListener(Events.CLICK, this._render)
       })
     }
@@ -98,7 +94,9 @@ export default class Modal extends Utils {
    * Stop listening to modals
    */
   stop() {
-    this._modalButtons.forEach(button => {
+    this._modals.forEach(instance => {
+      const id = instance.getAttribute(Selectors.DATA_MODAL)
+      const button = document.querySelector(`[${Selectors.DATA_TARGET}='${id}']`)
       button.removeEventListener(Events.CLICK, this._render)
     })
   }
@@ -112,7 +110,7 @@ export default class Modal extends Utils {
   _render(event) {
     event.preventDefault()
     this._activeModalButton = event.target
-    this._activeModalId = this._activeModalButton.getAttribute(Selectors.DATA_MODAL_BUTTON)
+    this._activeModalId = this._activeModalButton.getAttribute(Selectors.DATA_TARGET)
 
     if (!this._activeModalId) {
       return console.error(Messages.NO_BUTTON_ID_ERROR)
@@ -121,8 +119,14 @@ export default class Modal extends Utils {
     this._activeModalOverlay = document.querySelector(
       `[${Selectors.DATA_MODAL}="${this._activeModalId}"]`
     )
+
+    // no modal overlay error
+
     this._activeModalSelector = `[${Selectors.DATA_PARENT}='${this._activeModalId}']`
     this._activeModal = this._activeModalOverlay.querySelector(this._activeModalSelector)
+
+    // no modal error
+
     this._activeModalCloseButtons = nodeListToArray(
       `${this._activeModalSelector} [${Selectors.DATA_CLOSE}]`
     )

js/dist/modal.js.map

@@ -3,7 +3,7 @@ import Undernet from "../src/index"
 // This is the starting DOM.
 // It is assigned to document.body.innerHTML before each test suite.
 const dom = `
-  <button href="#" data-modal-button="new-modal">Open modal</button>
+  <button data-target="new-modal">Open modal</button>
 
   <div className="modal-overlay" data-modal="new-modal">
     <div className="modal-dialog" data-parent="new-modal" aria-labelledby="header-id">
@@ -86,7 +86,7 @@ describe("Modals", () => {
       document.body.innerHTML = dom
       Undernet.Modals.start()
       Undernet.Modals.stop()
-      button = document.querySelector("[data-modal-button]")
+      button = document.querySelector("[data-target]")
       modalOverlay = document.querySelector("[data-modal]")
       modalDialog = document.querySelector("[data-parent]")
       button.click()
@@ -109,7 +109,7 @@ describe("Modals", () => {
     beforeAll(() => {
       document.body.innerHTML = dom
       Undernet.Modals.start()
-      button = document.querySelector("[data-modal-button]")
+      button = document.querySelector("[data-target]")
       modalDialog = document.querySelector("[data-parent]")
       modalOverlay = document.querySelector("[data-modal]")
       button.click()
@@ -148,7 +148,7 @@ describe("Modals", () => {
     beforeAll(() => {
       document.body.innerHTML = dom
       Undernet.Modals.start()
-      openButton = document.querySelector("[data-modal-button]")
+      openButton = document.querySelector("[data-target]")
       closeButton = document.querySelector("[data-close]")
       modalOverlay = document.querySelector("[data-modal]")
       modalDialog = document.querySelector("[data-parent]")
@@ -175,7 +175,7 @@ describe("Modals", () => {
       })
     })
 
-    it("sets focus to [data-modal-button]", () => {
+    it("sets focus to [data-target]", () => {
       expect(document.activeElement).toEqual(openButton)
     })
   })
@@ -187,7 +187,7 @@ describe("Modals", () => {
     beforeAll(() => {
       document.body.innerHTML = dom
       Undernet.Modals.start()
-      button = document.querySelector("[data-modal-button]")
+      button = document.querySelector("[data-target]")
       modalOverlay = document.querySelector("[data-modal]")
       button.click()
       modalOverlay.click()
@@ -205,7 +205,7 @@ describe("Modals", () => {
     beforeAll(() => {
       document.body.innerHTML = dom
       Undernet.Modals.start()
-      button = document.querySelector("[data-modal-button]")
+      button = document.querySelector("[data-target]")
       modalOverlay = document.querySelector("[data-modal]")
     })
 
@@ -223,13 +223,13 @@ describe("Modals", () => {
     beforeAll(() => {
       document.body.innerHTML = dom
       Undernet.Modals.start()
-      openButton = document.querySelector("[data-modal-button]")
+      openButton = document.querySelector("[data-target]")
       closeButton = document.querySelector("[data-close]")
       openButton.click()
       closeButton.click()
     })
 
-    it("sets focus back to [data-modal-button]", () => {
+    it("sets focus back to [data-target]", () => {
       expect(document.activeElement).toEqual(openButton)
     })
   })
@@ -241,7 +241,7 @@ describe("Modals", () => {
     beforeAll(() => {
       document.body.innerHTML = dom
       Undernet.Modals.start()
-      openButton = document.querySelector("[data-modal-button]")
+      openButton = document.querySelector("[data-target]")
       closeButton = document.querySelector("[data-close]")
       openButton.click()
       closeButton.click()
@@ -258,7 +258,7 @@ describe("Modals", () => {
     beforeAll(() => {
       document.body.innerHTML = dom
       Undernet.Modals.start()
-      button = document.querySelector("[data-modal-button]")
+      button = document.querySelector("[data-target]")
       button.click()
     })
 

js/src/modal.js

@@ -53,9 +53,6 @@
     }
 
     header {
-      display: flex;
-      align-items: center;
-
       h1,
       h2,
       h3,
@@ -70,10 +67,12 @@
 
     header > button[data-close],
     header > a[data-close] {
-      margin-left: auto;
       font-size: 32px;
       text-decoration: none;
       padding: 0 8px;
+      position: absolute;
+      right: 8px;
+      top: 2px;
     }
 
     header,

js/test/modal.spec.js

@@ -4,7 +4,7 @@ Use modals to focus the user experience on a critical task or set of information
 
 Check out this example modal:
 
-<button href="#" data-modal-button="new-modal">Open modal</button>
+<button data-target="new-modal">Open modal</button>
 
 <div class="modal-overlay" data-modal="new-modal">
   <div class="modal-dialog" data-parent="new-modal" aria-labelledby="header-id">
@@ -31,7 +31,7 @@ Check out this example modal:
 </div>
 
 ```html
-<button href="#" data-modal-button="new-modal">Open modal</button>
+<button data-target="new-modal">Open modal</button>
 ```
 
 ```html
@@ -67,7 +67,7 @@ You can have custom contents as well (hence subjective markup). Meaning the head
 
 The modal will be able to handle long-content with ease, turning the overlay into a scrollable area.
 
-<button href="#" data-modal-button="new-modal-3">Open modal</button>
+<button data-target="new-modal-3">Open modal</button>
 
 <div class="modal-overlay" data-modal="new-modal-3">
   <div class="modal-dialog" data-parent="new-modal-3" aria-labelledby="header-id">
@@ -97,7 +97,7 @@ The modal will be able to handle long-content with ease, turning the overlay int
 
 Adding the `is-centered` class onto the modal overlay will vertically center the modal dialog on the screen.
 
-<button href="#" data-modal-button="new-modal-2">Open centered modal</button>
+<button data-target="new-modal-2">Open centered modal</button>
 
 <div class="modal-overlay is-centered" data-modal="new-modal-2">
   <div class="modal-dialog" data-parent="new-modal-2" aria-labelledby="header-id-2">
@@ -107,7 +107,6 @@ Adding the `is-centered` class onto the modal overlay will vertically center the
       </h2>
       <a data-close href="#">
         <span aria-hidden="true">&times;</span>
-        <span class"is-visually-hidden">close modal</span>
       </a>
     </header>
     <section>
@@ -125,7 +124,7 @@ Adding the `is-centered` class onto the modal overlay will vertically center the
 </div>
 
 ```html
-<button href="#" data-modal-button="new-modal-2">Open centered modal</button>
+<button data-target="new-modal-2">Open centered modal</button>
 ```
 
 ```html
@@ -147,10 +146,10 @@ Two main pieces are required: an API call and correct HTML markup.
 For the modal button, it should have two main properties:
 
 ```html
-<button data-modal-button="new-modal">Press me</button>
+<button data-target="new-modal">Press me</button>
 ```
 
-- `data-modal-button`: an attribute containing a unique id pointing to the modal overlay's `data-modal-id` attribute.
+- `data-target`: an attribute containing a unique id pointing to the modal overlay's `data-modal` attribute.
 
 #### Modal Attributes
 
@@ -176,7 +175,7 @@ For the modal itself, you need a few more things.
 </div>
 ```
 
-- `data-modal`: an attribute matching your corresponding button's `data-modal-button` value. Add it to the modal overlay element. overlay.
+- `data-modal`: an attribute matching your corresponding button's `data-target` value. Add it to the modal overlay element. overlay.
 - `data-parent`: an attribute pointing to the modal wrapper. It should equal the value of the element with `data-modal`.
 - `data-close`: an attribute indicating a button or link will close the current modal dialog.