https://missouri.edu/themes/miz_missouri_edu_subtheme/components/components/modal/modal.js

1/**
2 * @format
3 */
4/* eslint-env browser */
5
6/**
7 * Toggle inert on everything except dialogs
8 * @param {*} on
9 */
10const setInert = (on) => {
11  // Limit to immediate children; adjust selector if your app has wrappers
12  document.querySelectorAll('body > *:not(dialog)').forEach((e) => {
13    // Skip script elements
14    if (e.tagName === 'SCRIPT') return
15    e.inert = !!on
16  })
17}
18
19/**
20 *
21 * @param {*} dlg
22 */
23const showDialog = (dlg) => {
24  // make the body inert
25  setInert(true)
26  // open the dialog
27  dlg.showModal()
28}
29
30/**
31 *
32 * @param {*} dlg
33 */
34const closeDialog = (dlg) => {
35  // close the dialog
36  dlg.close()
37  // make the body un-inert
38  setInert(false)
39}
40
41/**
42 *
43 * @param {*} showButtonDataAttribute
44 * @param {*} closeButtonDataAttribute
45 */
46
47const makeModals = (querySelector) => {
48  // Locate all the expand containers in the document and store in a collection
49  const modalButtonCollection = document.querySelectorAll(querySelector)
50
51  for (let i = 0; i < modalButtonCollection.length; i += 1) {
52    const modalButton = modalButtonCollection[i]
53    if (modalButton.dataset.dialogOpen) {
54      const dialogToShow = document.getElementById(modalButton.dataset.dialogOpen)
55
56      // "Show the dialog" button opens the dialog modally
57      modalButton.addEventListener('click', () => {
58        showDialog(dialogToShow)
59      })
60
61      // We also want to add a default closer for the Esc key if we have an opener.
62      dialogToShow.addEventListener('cancel', (ev) => {
63        ev.preventDefault()
64        closeDialog(dialogToShow)
65      })
66    } else if (modalButton.dataset.dialogClose) {
67      const dialogToClose = document.getElementById(modalButton.dataset.dialogClose)
68
69      // "Close" button closes the dialog
70      modalButton.addEventListener('click', () => {
71        closeDialog(dialogToClose)
72      })
73    }
74  }
75}
76
77export default makeModals