updates modal to use data-target instead of unnecessary data-modal-button

Author: george

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

@@ -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/src/modal.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-id` 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.