diff --git a/v2-html/favicon.ico b/v2-html/favicon.ico
new file mode 100644
index 0000000..495bbab
Binary files /dev/null and b/v2-html/favicon.ico differ
diff --git a/v2-html/index.html b/v2-html/index.html
index 16e1533..81e630b 100644
--- a/v2-html/index.html
+++ b/v2-html/index.html
@@ -3,6 +3,7 @@
+
Preview • Pico CSS
{
event.preventDefault();
- const modal = document.getElementById(event.currentTarget.getAttribute("data-target"));
- typeof modal != "undefined" && modal != null && isModalOpen(modal)
- ? closeModal(modal)
- : openModal(modal);
+ const modal = document.getElementById(event.currentTarget.dataset.target);
+ modal && (isModalOpen(modal) ? closeModal(modal) : openModal(modal));
};
// Is modal open
-const isModalOpen = (modal) => {
- return modal.hasAttribute("open") && modal.getAttribute("open") != "false" ? true : false;
-};
+const isModalOpen = (modal) => modal.hasAttribute("open") && modal.getAttribute("open") !== "false";
// Open modal
const openModal = (modal) => {
- if (isScrollbarVisible()) {
- document.documentElement.style.setProperty("--scrollbar-width", `${getScrollbarWidth()}px`);
+ const { documentElement: html } = document;
+ const scrollbarWidth = getScrollbarWidth();
+ if (scrollbarWidth) {
+ html.style.setProperty(scrollbarWidthCssVar, `${scrollbarWidth}px`);
}
- document.documentElement.classList.add(isOpenClass, openingClass);
+ html.classList.add(isOpenClass, openingClass);
setTimeout(() => {
visibleModal = modal;
- document.documentElement.classList.remove(openingClass);
+ html.classList.remove(openingClass);
}, animationDuration);
modal.setAttribute("open", true);
};
@@ -42,49 +41,33 @@ const openModal = (modal) => {
// Close modal
const closeModal = (modal) => {
visibleModal = null;
- document.documentElement.classList.add(closingClass);
+ const { documentElement: html } = document;
+ html.classList.add(closingClass);
setTimeout(() => {
- document.documentElement.classList.remove(closingClass, isOpenClass);
- document.documentElement.style.removeProperty("--scrollbar-width");
+ html.classList.remove(closingClass, isOpenClass);
+ html.style.removeProperty(scrollbarWidthCssVar);
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);
- }
+ 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 != null) {
+ if (event.key === "Escape" && visibleModal) {
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);
-
+ const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
return scrollbarWidth;
};