mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-21 17:16:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Created build-dev script to only build 1 css file for quicker testing enviroment. Added accordion javascript for slide effect. modified the notification scss, and added more demos.

Browse source
This commit is contained in:
Yohn 2024-11-12 00:35:16 -05:00
parent b1fcd44b73
commit 26e82a693d
246 changed files with 1716 additions and 2269 deletions
Download patch file Download diff file Expand all files Collapse all files

125
demo/js/modal.js
View file

@ -4,72 +4,73 @@
* Pico.css - https://picocss.com
* Copyright 2019-2024 - Licensed under MIT
*/
//document.addEventListener("DOMContentLoaded", () => {
// Config
const isOpenClass = "modal-is-open";
const openingClass = "modal-is-opening";
const closingClass = "modal-is-closing";
const scrollbarWidthCssVar = "--pico-scrollbar-width";
const animationDuration = 400; // ms
let visibleModal = null;
// Config
const isOpenClass = "modal-is-open";
const openingClass = "modal-is-opening";
const closingClass = "modal-is-closing";
const scrollbarWidthCssVar = "--pico-scrollbar-width";
const animationDuration = 400; // ms
let visibleModal = null;
// Toggle modal
const toggleModal = (event) => {
event.preventDefault();
const modal = document.getElementById(event.currentTarget.dataset.target);
if (!modal) return;
modal && (modal.open ? closeModal(modal) : openModal(modal));
};
// Toggle modal
const toggleModal = (event) => {
event.preventDefault();
const modal = document.getElementById(event.currentTarget.dataset.target);
if (!modal) return;
modal && (modal.open ? closeModal(modal) : openModal(modal));
};
// Open modal
const openModal = (modal) => {
const { documentElement: html } = document;
const scrollbarWidth = getScrollbarWidth();
if (scrollbarWidth) {
html.style.setProperty(scrollbarWidthCssVar, `${scrollbarWidth}px`);
}
html.classList.add(isOpenClass, openingClass);
setTimeout(() => {
visibleModal = modal;
html.classList.remove(openingClass);
}, animationDuration);
modal.showModal();
};
// Open modal
const openModal = (modal) => {
const { documentElement: html } = document;
const scrollbarWidth = getScrollbarWidth();
if (scrollbarWidth) {
html.style.setProperty(scrollbarWidthCssVar, `${scrollbarWidth}px`);
}
html.classList.add(isOpenClass, openingClass);
setTimeout(() => {
visibleModal = modal;
html.classList.remove(openingClass);
}, animationDuration);
modal.showModal();
};
// Close modal
const closeModal = (modal) => {
visibleModal = null;
const { documentElement: html } = document;
html.classList.add(closingClass);
setTimeout(() => {
html.classList.remove(closingClass, isOpenClass);
html.style.removeProperty(scrollbarWidthCssVar);
modal.close();
}, animationDuration);
};
// Close modal
const closeModal = (modal) => {
visibleModal = null;
const { documentElement: html } = document;
html.classList.add(closingClass);
setTimeout(() => {
html.classList.remove(closingClass, isOpenClass);
html.style.removeProperty(scrollbarWidthCssVar);
modal.close();
}, animationDuration);
};
// Close with a click outside
document.addEventListener("click", (event) => {
if (visibleModal === null) return;
const modalContent = visibleModal.querySelector("article");
const isClickInside = modalContent.contains(event.target);
!isClickInside && closeModal(visibleModal);
});
// Close with a click outside
document.addEventListener("click", (event) => {
if (visibleModal === null) return;
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) {
closeModal(visibleModal);
}
});
// Close with Esc key
document.addEventListener("keydown", (event) => {
if (event.key === "Escape" && visibleModal) {
closeModal(visibleModal);
}
});
// Get scrollbar width
const getScrollbarWidth = () => {
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
return scrollbarWidth;
};
// Get scrollbar width
const getScrollbarWidth = () => {
const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
return scrollbarWidth;
};
// Is scrollbar visible
const isScrollbarVisible = () => {
return document.body.scrollHeight > screen.height;
};
// Is scrollbar visible
const isScrollbarVisible = () => {
return document.body.scrollHeight > screen.height;
};
//})