brogram.js

/**
 * Brogram exercise modal
 * Opens a modal with exercise description when help button is clicked.
 *
 * @package Liftz
 */

(function () {
    'use strict';

    const modalId = 'brogram-exercise-modal';

    function createModal() {
        const modal = document.createElement('div');
        modal.id = modalId;
        modal.className = 'brogram-modal';
        modal.setAttribute('role', 'dialog');
        modal.setAttribute('aria-modal', 'true');
        modal.setAttribute('aria-labelledby', 'brogram-modal-title');
        modal.innerHTML = `
            <div class="brogram-modal__dialog" role="document">
                <div class="brogram-modal__header">
                    <h3 id="brogram-modal-title" class="brogram-modal__title"></h3>
                    <button type="button" class="brogram-modal__close" aria-label="Close modal">&times;</button>
                </div>
                <div class="brogram-modal__body">
                    <p></p>
                </div>
            </div>
        `;
        document.body.appendChild(modal);
        return modal;
    }

    function getModal() {
        return document.getElementById(modalId) || createModal();
    }

    function openModal(name, description) {
        const modal = getModal();
        const titleEl = modal.querySelector('.brogram-modal__title');
        const bodyEl = modal.querySelector('.brogram-modal__body p');
        const closeBtn = modal.querySelector('.brogram-modal__close');

        titleEl.textContent = name;
        bodyEl.textContent = description || 'No description available.';

        modal.classList.add('is-open');
        document.body.style.overflow = 'hidden';
        closeBtn.focus();

        const focusable = modal.querySelectorAll('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
        const firstFocusable = focusable[0];
        const lastFocusable = focusable[focusable.length - 1];

        function handleKeydown(e) {
            if (e.key === 'Escape') {
                closeModal();
                return;
            }
            if (e.key === 'Tab') {
                if (e.shiftKey && document.activeElement === firstFocusable) {
                    e.preventDefault();
                    lastFocusable.focus();
                } else if (!e.shiftKey && document.activeElement === lastFocusable) {
                    e.preventDefault();
                    firstFocusable.focus();
                }
            }
        }

        modal._handleKeydown = handleKeydown;
        document.addEventListener('keydown', handleKeydown);
    }

    function closeModal() {
        const modal = getModal();
        modal.classList.remove('is-open');
        document.body.style.overflow = '';
        document.removeEventListener('keydown', modal._handleKeydown);
    }

    function init() {
        document.addEventListener('click', function (e) {
            const btn = e.target.closest('.brogram-workout__help');
            if (!btn) return;

            e.preventDefault();
            const name = btn.getAttribute('data-exercise-name');
            const desc = btn.getAttribute('data-exercise-desc');
            if (name && desc) {
                openModal(name, desc);
            }
        });

        document.addEventListener('click', function (e) {
            const modal = getModal();
            const closeBtn = e.target.closest('.brogram-modal__close');
            const backdrop = e.target === modal;

            if (closeBtn || backdrop) {
                e.preventDefault();
                closeModal();
            }
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();