Build CSS, JS and Docs

docs/js/modal.js

@@ -0,0 +1,63 @@
+/*
+ * Modal
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2021 - Licensed under MIT
+ */
+
+// Config
+const isOpenClass = 'modal-is-open';
+const openingClass = 'modal-is-opening';
+const closingClass = 'modal-is-closing';
+let visibleModal = null;
+
+// Toggle modal
+const toggleModal = event => {
+  event.preventDefault();
+  const modal = document.getElementById(event.target.getAttribute('data-target'));
+  (typeof(modal) != 'undefined' && modal != null)
+    && isModalOpen(modal) ? closeModal(modal) : openModal(modal)
+}
+
+// Is modal open
+const isModalOpen = modal => {
+  return modal.hasAttribute('open') && modal.getAttribute('open') != 'false' ? true : false;
+}
+
+// Open modal
+const openModal = modal => {
+  setTimeout(() => {
+    visibleModal = modal;
+  }, 100);
+  document.documentElement.classList.add(isOpenClass, openingClass);
+  setTimeout(() => {
+    document.documentElement.classList.remove(openingClass);
+  }, 200);
+  modal.setAttribute('open', true);
+}
+
+// Close modal
+const closeModal = modal => {
+  visibleModal = null;
+  document.documentElement.classList.add(closingClass);
+  setTimeout(() => {
+    document.documentElement.classList.remove(closingClass, isOpenClass);
+    modal.removeAttribute('open');
+  }, 200);
+}
+
+// Close with a click outside
+document.addEventListener('click', event => {
+  if (visibleModal != null) {
+    const modalContent = visibleModal.querySelector('article');
+    const isClickInside = modalContent.contains(event.target);
+    !isClickInside && closeModal(visibleModal);
+  }
+});
+
+// Close with Esc key
+document.addEventListener('keydown', event => {
+  if (event.key === 'Escape' && visibleModal != null) {
+    closeModal(visibleModal);
+  }
+});