Add default Modal component

assets/scripts/config.js

@@ -46,6 +46,8 @@ const CSS_CLASS = Object.freeze({
 // Custom js events
 const CUSTOM_EVENT = Object.freeze({
     RESIZE_END: 'loco.resizeEnd',
+    VISIT_START: 'visit.start',
+    MODAL_OPEN: 'modal.open',
     // ...
 })
 

assets/scripts/modules.js

@@ -1,3 +1,4 @@
 export {default as Example} from './modules/Example';
 export {default as Load} from './modules/Load';
+export {default as Modal} from './modules/Modal';
 export {default as Scroll} from './modules/Scroll';

assets/scripts/modules/Load.js

@@ -1,5 +1,6 @@
 import { module } from 'modujs';
 import modularLoad from 'modularload';
+import { CUSTOM_EVENT } from '../config';
 
 export default class extends module {
     constructor(m) {
@@ -14,6 +15,12 @@ export default class extends module {
             }
         });
 
+        load.on('loading', (transition, oldContainer) => {
+            const args = { transition, oldContainer };
+            // Dispatch custom event
+            window.dispatchEvent(new CustomEvent(CUSTOM_EVENT.VISIT_START, { detail: args }))
+        });
+
         load.on('loaded', (transition, oldContainer, newContainer) => {
             this.call('destroy', oldContainer, 'app');
             this.call('update', newContainer, 'app');

assets/scripts/modules/Modal.js

@@ -0,0 +1,195 @@
+import { createFocusTrap } from 'focus-trap'
+import { module as Module } from 'modujs'
+import { $html } from '../utils/dom'
+import { CUSTOM_EVENT } from '../config'
+
+/**
+ * Generic component to display a modal.
+ *
+ */
+export default class Modal extends Module {
+    /**
+     * Creates a new Modal.
+     *
+     * @param  {object} options          - The module options.
+     * @param  {string} options.dataName - The module data attribute name.
+     * @throws {TypeError} If the class does not have an active CSS class defined.
+     */
+
+    static CLASS = {
+        EL: 'is-open',
+        HTML: 'has-modal-open',
+    }
+
+    constructor(options) {
+        super(options)
+
+        // Data
+        this.moduleName = options.name
+        this.dataName   = this.getData('name') || options.dataName
+
+        // Bindings
+        this.toggle         = this.toggle.bind(this)
+        this.onModalOpen    = this.onModalOpen.bind(this)
+        this.onVisitStart   = this.onVisitStart.bind(this)
+
+        // UI
+        this.$togglers          = document.querySelectorAll(`[data-${this.dataName}-toggler]`)
+        this.$focusTrapTargets  = Array.from(this.el.querySelectorAll(`[data-${this.dataName}-target]`))
+
+        // Focus trap options
+        this.focusTrapOptions = {
+            /**
+             * There is a delay between when the class is applied
+             * and when the element is focusable
+             */
+            checkCanFocusTrap: (trapContainers) => {
+                const results = trapContainers.map((trapContainer) => {
+                    return new Promise((resolve) => {
+                        const interval = setInterval(() => {
+                            if (
+                                getComputedStyle(trapContainer).visibility !==
+                                'hidden'
+                            ) {
+                                resolve()
+                                clearInterval(interval)
+                            }
+                        }, 5)
+                    })
+                })
+
+                // Return a promise that resolves when all the trap containers are able to receive focus
+                return Promise.all(results)
+            },
+
+            onActivate: () => {
+                this.el.classList.add(Modal.CLASS.EL)
+                $html.classList.add(Modal.CLASS.HTML)
+                $html.classList.add('has-'+this.dataName+'-open')
+                this.el.setAttribute('aria-hidden', false)
+                this.isOpen = true
+
+                this.onActivate?.();
+            },
+
+            onPostActivate: () => {
+                this.$togglers.forEach(($toggler) => {
+                    $toggler.setAttribute('aria-expanded', true)
+                })
+            },
+
+            onDeactivate: () => {
+                this.el.classList.remove(Modal.CLASS.EL)
+                $html.classList.remove(Modal.CLASS.HTML)
+                $html.classList.remove('has-'+this.dataName+'-open')
+                this.el.setAttribute('aria-hidden', true)
+                this.isOpen = false
+
+                this.onDeactivate?.();
+            },
+
+            onPostDeactivate: () => {
+                this.$togglers.forEach(($toggler) => {
+                    $toggler.setAttribute('aria-expanded', false)
+                })
+            },
+
+            clickOutsideDeactivates: true,
+        }
+
+        this.isOpen = false
+    }
+
+    /////////////////
+    // Lifecycle
+    /////////////////
+    init() {
+        this.onBeforeInit?.()
+
+        this.focusTrap = createFocusTrap(
+            this.$focusTrapTargets.length > 0 ? this.$focusTrapTargets : [this.el],
+            this.focusTrapOptions
+        )
+
+        this.bindEvents()
+
+        this.onInit?.()
+    }
+
+    destroy() {
+        this.focusTrap?.deactivate?.({
+            returnFocus: false,
+        })
+
+        this.unbindEvents()
+
+        this.onDestroy?.()
+
+        super.destroy()
+    }
+
+    /////////////////
+    // Events
+    /////////////////
+    bindEvents() {
+        window.addEventListener(CUSTOM_EVENT.VISIT_START, this.onVisitStart)
+        window.addEventListener(CUSTOM_EVENT.MODAL_OPEN, this.onModalOpen)
+
+        this.$togglers.forEach(($toggler) => {
+            $toggler.addEventListener('click', this.toggle)
+        })
+    }
+
+    unbindEvents() {
+        window.removeEventListener(CUSTOM_EVENT.VISIT_START, this.onVisitStart)
+        window.removeEventListener(CUSTOM_EVENT.MODAL_OPEN, this.onModalOpen)
+
+        this.$togglers.forEach(($toggler) => {
+            $toggler.removeEventListener('click', this.toggle)
+        })
+    }
+
+    /////////////////
+    // Callbacks
+    /////////////////
+    onVisitStart() {
+        // Close the modal on page change
+        this.close()
+    }
+
+    onModalOpen(event) {
+        // Close the modal if another one is opened
+        if (event.detail !== this.el) {
+            this.close()
+        }
+    }
+
+    /////////////////
+    // Methods
+    /////////////////
+    toggle(event) {
+        if (this.el.classList.contains(Modal.CLASS.EL)) {
+            this.close(event)
+        } else {
+            this.open(event)
+        }
+    }
+
+    open(args) {
+        if (this.isOpen) return
+
+        this.focusTrap?.activate?.()
+
+        this.onOpen?.(args)
+
+        window.dispatchEvent(new CustomEvent(CUSTOM_EVENT.MODAL_OPEN, { detail: this.el }))
+    }
+
+    close(args) {
+        if (!this.isOpen) return
+
+        this.focusTrap?.deactivate?.()
+
+        this.onClose?.(args)
+    }
+}

assets/styles/components/_modal.scss

@@ -0,0 +1,52 @@
+// ==========================================================================
+// Components / Modal
+// ==========================================================================
+
+.c-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100dvh;
+    max-width: inherit;
+    max-height: 100lvh;
+    margin: 0;
+    padding: 0 var(--grid-margin);
+    background: transparent;
+    border: none;
+    visibility: hidden;
+    pointer-events: none;
+    overflow: hidden;
+
+    // Backdrop
+    &::before {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: color(darkest, 0.5);
+        z-index: -1;
+    }
+
+    html.is-first-loaded & {
+        transition: visibility speed(normal);
+    }
+
+    &.is-open {
+        pointer-events: auto;
+        visibility: visible;
+        transition-duration: 0s;
+    }
+}
+
+.c-modal_inner {
+    width: 100%;
+    max-width: rem(500px);
+    padding: $unit-small;
+    background-color: color(lightest);
+}

assets/styles/main.scss

@@ -57,6 +57,7 @@
 @import "components/text";
 @import "components/button";
 @import "components/form";
+@import "components/modal";
 
 // Utilities
 // ==========================================================================

package.json

@@ -14,6 +14,7 @@
         "build": "node --no-warnings build/build.js"
     },
     "dependencies": {
+        "focus-trap": "^7.5.4",
         "locomotive-scroll": "^5.0.0-beta.13",
         "modujs": "^1.4.2",
         "modularload": "^1.2.6",