✨ Add multimodal support to Modal component

Author: Frontendland

scripts/utilityTypes.js

@@ -73,6 +73,13 @@ export type getLayoutClassesConfig = {
     wrap?: Responsive<Wrap>
 }
 
+export type ModalInstance = {
+    open: (freeze?: boolean) => void
+    close: () => void
+    replaceWith: (modal: ModalInstance) => void
+    remove: () => void
+}
+
 export type ModalCallback = {
     trigger: Element | null
     modal: HTMLElement
@@ -179,10 +186,7 @@ declare module 'webcoreui' {
 
     export const isOneOf: <T extends string>(values: readonly T[]) => (value: string) => value is T
 
-    export const modal: (config: Modal | string) => {
-        open: () => void
-        remove: () => void
-    } | void
+    export const modal: (config: Modal | string) => ModalInstance | undefined 
     export const closeModal: (modal: string) => void
 
     export const popover: (config: Popover) => {

src/pages/components/modal.astro

@@ -232,6 +232,26 @@ const sections = getSections({
                     />
                 </section.component>
             </ComponentWrapper>
+
+            <ComponentWrapper title="Multimodal">
+                <Button theme="secondary" id={`multimodal-btn-${section.type}`}>
+                    Trigger
+                </Button>
+                <section.component title="Modal #1" id={`multimodal-${section.type}`}>
+                    <p>Click the button to navigate to the next modal.</p>
+
+                    <Button id={`next-modal-${section.type}`}>
+                        Next Modal {'->'}
+                    </Button>
+                </section.component>
+                <section.component title="Modal #2" id={`multimodal-1-${section.type}`}>
+                    <p>Click the button to navigate to the previous modal.</p>
+
+                    <Button id={`prev-modal-${section.type}`} theme="secondary">
+                        {'<-'} Previous Modal
+                    </Button>
+                </section.component>
+            </ComponentWrapper>
         </div>
     ))}
 </Layout>
@@ -247,7 +267,7 @@ const sections = getSections({
             'react'
         ]
 
-        const ids = Array(10).fill(10).map((x, index) => x * (index + 1))
+        const ids = Array(11).fill(10).map((x, index) => x * (index + 1))
         const variants = [
             '00',
             '01',
@@ -266,6 +286,27 @@ const sections = getSections({
             on(`#modal-close-btn-${selector}`, 'click', () => closeModal(`#modal-${selector}`))
         })
 
+        selectors.forEach(selector => {
+            const modal1 = modal({
+                trigger: `#multimodal-btn-${selector}`,
+                modal: `#multimodal-${selector}`
+            })
+
+            const modal2 = modal(`#multimodal-1-${selector}`)
+
+            on(`#next-modal-${selector}`, 'click', () => {
+                if (modal1 && modal2) {
+                    modal1.replaceWith(modal2)
+                }
+            })
+
+            on(`#prev-modal-${selector}`, 'click', () => {
+                if (modal1 && modal2) {
+                    modal2.replaceWith(modal1)
+                }
+            })
+        })
+
         variants.forEach(variant => {
             modal({
                 trigger: `#modal-btn-${variant}`,

src/tests/unit/modal.test.ts

@@ -39,9 +39,22 @@ describe('modal', () => {
         })
 
         triggerElement.click()
+
         expect(modalElement.dataset.show).toBe('true')
     })
 
+    it('should open modal when .open is called and close it on .close', () => {
+        const modalInstance = modal('#modal')
+
+        modalInstance?.open()
+
+        expect(modalElement.dataset.show).toBe('true')
+
+        modalInstance?.close()
+
+        expect(modalElement.dataset.show).toBe('')
+    })
+
     it('should close modal when close icon is clicked', () => {
         const onClose = vi.fn()
 

src/utils/modal.ts

@@ -1,5 +1,12 @@
 import { bodyFreeze } from './bodyFreeze'
 
+export type ModalInstance = {
+    open: (freeze?: boolean) => void
+    close: () => void
+    replaceWith: (modal: ModalInstance) => void
+    remove: () => void
+}
+
 export type ModalCallback = {
     trigger: Element | null
     modal: HTMLElement
@@ -12,7 +19,7 @@ export type Modal = {
     onClose?: (args: ModalCallback) => unknown
 }
 
-export const modal = (config: Modal | string) => {
+export const modal = (config: Modal | string): ModalInstance | undefined => {
     const {
         trigger,
         modal,
@@ -23,44 +30,51 @@ export const modal = (config: Modal | string) => {
     const modalSelector = typeof config === 'string' ? config : modal
 
     const triggerDOM = document.querySelector(trigger)
-    const modalDOM = document.querySelector(modalSelector) as HTMLElement
+    const modalDOM = document.querySelector(modalSelector)
 
-    if (modalDOM) {
+    if (modalDOM instanceof HTMLElement) {
         const closeOptions = modalDOM.dataset.close?.split(',')
 
-        const handleClose = {
-            icon() {
-                const close = modalDOM.querySelector('[data-id="close"]')
+        const handleOpen = (_e?: Event, freeze = true) => {
+            modalDOM.dataset.show = 'true'
+
+            if (freeze) {
+                bodyFreeze()
+            }
+
+            onOpen?.({
+                trigger: triggerDOM,
+                modal: modalDOM
+            })
+        }
 
-                const listener = () => {
-                    modalDOM.dataset.show = ''
+        const handleClose = (_e?: Event, unfreeze = true) => {
+            modalDOM.dataset.show = ''
 
-                    bodyFreeze(false)
+            if (unfreeze) {
+                bodyFreeze(false)
+            }
 
-                    onClose?.({
-                        trigger: triggerDOM,
-                        modal: modalDOM
-                    })
-                }
+            onClose?.({
+                trigger: triggerDOM,
+                modal: modalDOM
+            })
+        }
+
+        const closeHandlers = {
+            icon() {
+                const close = modalDOM.querySelector('[data-id="close"]')
 
                 return {
-                    add: () => close?.addEventListener('click', listener),
-                    remove: () => close?.removeEventListener('click', listener)
+                    add: () => close?.addEventListener('click', handleClose),
+                    remove: () => close?.removeEventListener('click', handleClose)
                 }
             },
 
             esc() {
                 const listener = (event: KeyboardEvent) => {
                     if (modalDOM.dataset.show && event.key === 'Escape') {
-                        modalDOM.dataset.show = ''
-
-                        bodyFreeze(false)
-
-                        onClose?.({
-                            trigger: triggerDOM,
-                            modal: modalDOM
-                        })
-
+                        handleClose()
                     }
                 }
 
@@ -73,60 +87,45 @@ export const modal = (config: Modal | string) => {
             overlay() {
                 const close = modalDOM.nextElementSibling
 
-                const listener = () => {
-                    modalDOM.dataset.show = ''
-
-                    bodyFreeze(false)
-
-                    onClose?.({
-                        trigger: triggerDOM,
-                        modal: modalDOM
-                    })
-                }
-
                 return {
-                    add: () => close?.addEventListener('click', listener),
-                    remove: () => close?.removeEventListener('click', listener)
+                    add: () => close?.addEventListener('click', handleClose),
+                    remove: () => close?.removeEventListener('click', handleClose)
                 }
             }
         }
 
-        const handleOpen = () => {
-            modalDOM.dataset.show = 'true'
-
-            bodyFreeze()
-
-            onOpen?.({
-                trigger: triggerDOM,
-                modal: modalDOM
-            })
-        }
-
         triggerDOM?.addEventListener('click', handleOpen)
 
         closeOptions?.forEach(option => {
-            handleClose[option as keyof typeof handleClose]().add()
+            closeHandlers[option as keyof typeof closeHandlers]().add()
         })
 
         return {
-            open() {
-                handleOpen()
+            open(freeze?: boolean) {
+                handleOpen(undefined, freeze)
+            },
+            close() {
+                handleClose()
+            },
+            replaceWith(modal: ModalInstance) {
+                modal.open(false)
+                handleClose(undefined, false)
             },
             remove() {
                 triggerDOM?.removeEventListener('click', handleOpen)
 
                 closeOptions?.forEach(option => {
-                    handleClose[option as keyof typeof handleClose]().remove()
+                    closeHandlers[option as keyof typeof closeHandlers]().remove()
                 })
             }
         }
     }
 }
 
 export const closeModal = (modal: string) => {
-    const modalDOM = document.querySelector(modal) as HTMLElement
+    const modalDOM = document.querySelector(modal)
 
-    if (modalDOM) {
+    if (modalDOM instanceof HTMLElement) {
         modalDOM.dataset.show = ''
 
         bodyFreeze(false)