aboutsummaryrefslogtreecommitdiff
path: root/htmx/static/pico-1.5.11/docs/js/modal.js
diff options
context:
space:
mode:
Diffstat (limited to 'htmx/static/pico-1.5.11/docs/js/modal.js')
-rw-r--r--htmx/static/pico-1.5.11/docs/js/modal.js95
1 files changed, 95 insertions, 0 deletions
diff --git a/htmx/static/pico-1.5.11/docs/js/modal.js b/htmx/static/pico-1.5.11/docs/js/modal.js
new file mode 100644
index 0000000..beb98a2
--- /dev/null
+++ b/htmx/static/pico-1.5.11/docs/js/modal.js
@@ -0,0 +1,95 @@
+/*
+ * Modal
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2023 - Licensed under MIT
+ */
+
+// Config
+const isOpenClass = 'modal-is-open';
+const openingClass = 'modal-is-opening';
+const closingClass = 'modal-is-closing';
+const animationDuration = 400; // ms
+let visibleModal = null;
+
+
+// Toggle modal
+const toggleModal = event => {
+ event.preventDefault();
+ const modal = document.getElementById(event.currentTarget.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 => {
+ if (isScrollbarVisible()) {
+ document.documentElement.style.setProperty('--scrollbar-width', `${getScrollbarWidth()}px`);
+ }
+ document.documentElement.classList.add(isOpenClass, openingClass);
+ setTimeout(() => {
+ visibleModal = modal;
+ document.documentElement.classList.remove(openingClass);
+ }, animationDuration);
+ modal.setAttribute('open', true);
+}
+
+// Close modal
+const closeModal = modal => {
+ visibleModal = null;
+ document.documentElement.classList.add(closingClass);
+ setTimeout(() => {
+ document.documentElement.classList.remove(closingClass, isOpenClass);
+ document.documentElement.style.removeProperty('--scrollbar-width');
+ modal.removeAttribute('open');
+ }, animationDuration);
+}
+
+// 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);
+ }
+});
+
+// Get scrollbar width
+const getScrollbarWidth = () => {
+
+ // Creating invisible container
+ const outer = document.createElement('div');
+ outer.style.visibility = 'hidden';
+ outer.style.overflow = 'scroll'; // forcing scrollbar to appear
+ outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
+ document.body.appendChild(outer);
+
+ // Creating inner element and placing it in the container
+ const inner = document.createElement('div');
+ outer.appendChild(inner);
+
+ // Calculating difference between container's full width and the child width
+ const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);
+
+ // Removing temporary elements from the DOM
+ outer.parentNode.removeChild(outer);
+
+ return scrollbarWidth;
+}
+
+// Is scrollbar visible
+const isScrollbarVisible = () => {
+ return document.body.scrollHeight > screen.height;
+}