document.addEventListener("DOMContentLoaded", () => { // Get all "navbar-burger" elements const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(".navbar-burger"), 0) // Add a click event on each of them $navbarBurgers.forEach(el => { el.addEventListener("click", () => { // Get the target from the "data-target" attribute const target = el.dataset.target const $target = document.getElementById(target) // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" el.classList.toggle("is-active") $target.classList.toggle("is-active") }) }) }) document.addEventListener("DOMContentLoaded", () => { // Functions to open and close a modal function openModal($el) { $el.classList.add("is-active") } function closeModal($el) { $el.classList.remove("is-active") } function closeAllModals() { ;(document.querySelectorAll(".modal") || []).forEach($modal => { closeModal($modal) }) } // Add a click event on buttons to open a specific modal ;(document.querySelectorAll(".js-modal-trigger") || []).forEach($trigger => { const modal = $trigger.dataset.target const $target = document.getElementById(modal) $trigger.addEventListener("click", () => { openModal($target) }) }) // Add a click event on various child elements to close the parent modal ;( document.querySelectorAll( ".modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button", ) || [] ).forEach($close => { const $target = $close.closest(".modal") $close.addEventListener("click", () => { closeModal($target) }) }) // Add a keyboard event to close all modals document.addEventListener("keydown", event => { const e = event || window.event if (e.keyCode === 27) { // Escape key closeAllModals() } }) })