Use classes for modal too

elixir-lang · May 2, 2024 · c2342d1 · c2342d1
1 parent c0f0a56
commit c2342d1
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 7 deletions.
diff --git a/assets/js/handlebars/templates/modal-layout.handlebars b/assets/js/handlebars/templates/modal-layout.handlebars
@@ -1,4 +1,4 @@
-<div id="modal" class="modal" tabindex="-1">
+<div class="modal" tabindex="-1">
   <div class="modal-contents">
     <div class="modal-header">
       <div class="modal-title"></div>

diff --git a/assets/js/modal.js b/assets/js/modal.js
@@ -1,9 +1,9 @@
 import { qs } from './helpers'
 
-const MODAL_SELECTOR = '#modal'
-const MODAL_CLOSE_BUTTON_SELECTOR = '#modal .modal-close'
-const MODAL_TITLE_SELECTOR = '#modal .modal-title'
-const MODAL_BODY_SELECTOR = '#modal .modal-body'
+const MODAL_SELECTOR = '.modal'
+const MODAL_CLOSE_BUTTON_SELECTOR = '.modal .modal-close'
+const MODAL_TITLE_SELECTOR = '.modal .modal-title'
+const MODAL_BODY_SELECTOR = '.modal .modal-body'
 const FOCUSABLE_SELECTOR = 'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
 const state = {
   prevFocus: null,
@@ -38,7 +38,7 @@ function renderModal () {
   qs(MODAL_SELECTOR).addEventListener('click', event => {
     const classList = event.target.classList
     // if we clicked on the modal overlay/parent but not the modal content
-    if (classList.contains('modal') && classList.contains('shown') && classList.length === 2) {
+    if (classList.contains('modal')) {
       closeModal()
     }
   })

diff --git a/...tml/dist/handlebars.templates-2MV2EWES.js → ...tml/dist/handlebars.templates-K7URE6B4.js b/...tml/dist/handlebars.templates-2MV2EWES.js → ...tml/dist/handlebars.templates-K7URE6B4.js
diff --git a/formatters/html/dist/html-BHYOTRCH.js b/formatters/html/dist/html-BHYOTRCH.js