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

refactor: lint

Browse source
This commit is contained in:
Lucas Larroche 2024-01-27 13:53:19 +07:00
parent 672b67896c
commit 7487498805
53 changed files with 1789 additions and 1078 deletions
Download patch file Download diff file Expand all files Collapse all files

94
docs/js/modal.js
View file

@ -6,90 +6,96 @@
*/
// Config
const isOpenClass = 'modal-is-open';
const openingClass = 'modal-is-opening';
const closingClass = 'modal-is-closing';
const animationDuration = 400; // ms
let visibleModal = null;
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)
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;
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.style.setProperty(
"--scrollbar-width",
`${getScrollbarWidth()}px`
)
}
document.documentElement.classList.add(isOpenClass, openingClass);
document.documentElement.classList.add(isOpenClass, openingClass)
setTimeout(() => {
visibleModal = modal;
document.documentElement.classList.remove(openingClass);
}, animationDuration);
modal.setAttribute('open', true);
visibleModal = modal
document.documentElement.classList.remove(openingClass)
}, animationDuration)
modal.setAttribute("open", true)
}
// Close modal
const closeModal = modal => {
visibleModal = null;
document.documentElement.classList.add(closingClass);
visibleModal = null
document.documentElement.classList.add(closingClass)
setTimeout(() => {
document.documentElement.classList.remove(closingClass, isOpenClass);
document.documentElement.style.removeProperty('--scrollbar-width');
modal.removeAttribute('open');
}, animationDuration);
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 => {
document.addEventListener("click", event => {
if (visibleModal != null) {
const modalContent = visibleModal.querySelector('article');
const isClickInside = modalContent.contains(event.target);
!isClickInside && closeModal(visibleModal);
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);
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);
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);
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);
const scrollbarWidth = outer.offsetWidth - inner.offsetWidth
// Removing temporary elements from the DOM
outer.parentNode.removeChild(outer);
outer.parentNode.removeChild(outer)
return scrollbarWidth;
return scrollbarWidth
}
// Is scrollbar visible
const isScrollbarVisible = () => {
return document.body.scrollHeight > screen.height;
return document.body.scrollHeight > screen.height
}