Launcher: close help modal on Escape and click outside of modal
Change-Id: I0a260d7f184e8826e25aee753eb06d5ee861e47d
diff --git a/core/installer/welcome/static/launcher.js b/core/installer/welcome/static/launcher.js
index 243436b..4f42100 100644
--- a/core/installer/welcome/static/launcher.js
+++ b/core/installer/welcome/static/launcher.js
@@ -45,6 +45,17 @@
icon.addEventListener(event, listener);
});
});
+ let visibleModal = undefined;
+ const openModal = function(modal) {
+ modal.removeAttribute("close");
+ modal.setAttribute("open", true);
+ visibleModal = modal;
+ };
+ const closeModal = function(modal) {
+ modal.removeAttribute("open");
+ modal.setAttribute("close", true);
+ visibleModal = undefined;
+ };
const helpButtons = document.querySelectorAll('.help-button');
helpButtons.forEach(function (button) {
button.addEventListener('click', function (event) {
@@ -53,13 +64,11 @@
const modalId = 'modal-' + buttonId.substring("help-button-".length);
const closeHelpId = "close-help-" + buttonId.substring("help-button-".length);
const modal = document.getElementById(modalId);
- modal.removeAttribute("close");
- modal.setAttribute("open", true);
+ openModal(modal);
const closeHelpButton = document.getElementById(closeHelpId);
closeHelpButton.addEventListener('click', function (event) {
- event.stopPropagation();
- modal.removeAttribute("open");
- modal.setAttribute("close", true);
+ event.stopPropagation();
+ closeModal(modal);
});
});
});
@@ -81,4 +90,17 @@
button.setAttribute("aria-current", "page");
});
});
+ document.addEventListener("keydown", (event) => {
+ if (event.key === "Escape" && visibleModal) {
+ closeModal(visibleModal);
+ }
+ });
+ document.addEventListener("click", (event) => {
+ if (visibleModal === null) return;
+ const modalContent = visibleModal.querySelector("article");
+ const isClickInside = modalContent.contains(event.target);
+ if (!isClickInside) {
+ closeModal(visibleModal);
+ }
+ });
});