From 6bbf0e3d6da90d470eba024c51d2ac5aa375924b Mon Sep 17 00:00:00 2001 From: Lucas Larroche Date: Sun, 14 Jan 2024 20:12:26 +0700 Subject: [PATCH] refactor: Pico v2 HTML example --- v2-html/favicon.ico | Bin 0 -> 15086 bytes v2-html/index.html | 1 + v2-html/js/minimal-theme-switcher.js | 17 +++----- v2-html/js/modal.js | 57 ++++++++++----------------- 4 files changed, 26 insertions(+), 49 deletions(-) create mode 100644 v2-html/favicon.ico diff --git a/v2-html/favicon.ico b/v2-html/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..495bbab79d3afef6ab8d501d2adb05e94ef96c6b GIT binary patch literal 15086 zcmeHOL1-OS6n(MQU=e;n=tfE+R1~3*Y@{oH1Xosc(SnN-YM~1uU38_JhEzd=Q0hX) zO*It6wuG9xh`8${f^IBG7jCTB|0!5#Q4?ZGN$UgI(Jn_h_<4f5Ke6)A^EA8Flb~)Ej2hD&E zn(w9JwGPf5$bl_81N5A^+6J?W->q{k=Q?8I`5VYA=r-szul45bL_Mlb+v(lK&AQ!( z$&R)}y$A9SNI+-vLi6rVJ*m%5f?osO10`{@jr%ka`GL=KEszgm?8JY=(3ZBk=zdHm z@DuyE;W~W_?J|(-4t}oTnD6kO`th7mU$uL1)!SdK;6M%m?}G&X`CK}%bLHhcBk7+_ z8=A;91#L_HmO6KdzHlJdT-|o&8L56ykL*3qJOQ46dgi#;ZGG$f*u|)RKz}~o@tkqT zvEJ&p7PsZs3-RM5Cf{rI+g}oPW3iLdCyMc7U(9a5biZ}+vtEoJySTFI^mmODjsaWp z%uHhE^?#tVpaX@RNA0lFM;I3b@)hU?D0yC{VRzej9?gUFnOH<@sAnV37d~5Q=hUT( zsoOeZBBc^?aQfU+Kkx)=Z08xFzG`iSdN0?vIz4AB{<%`<-Q8o&`%~|#l2KfzAzxsx=w>rc5M*I!PkbAV;lyIIAz13-WB?7`W~b`T7t$9Ln2;%MWD?a{rFy zUnpcBxZf)GQ}91x*S9Ko?`f}E*KFgYB&RNRZo)tt3FK$c)TVpB z4V;5()U{gOTlv?~PQ8qp%YsuXQ35#(+4?;pOGk-esh7GBw0-KG^5-MHr^)36>>uEF zNcwGu7!Ie-o2OCje=(MSG;?Sm`yunMSU$g1Tuj}g%t=yihH?V(f6BBu4h!T1M>gf( z1?^9nF<%pPz`bmzch1(dyW}^T?(NVQrSAJU)_O0oeq!Nwtrs(~`^s_qQ5V!nfcQT^ z9Id)euH9b$j{Bd3Uhnz*;$CnbosaX<&aIqIociI}Ks(u=+cpDvD;}Sw=T5Sd_i39K z4bMv7vfc8Db366#>S?>|&&6Qt{q{f3N8cj%E&V)y80UmIH}d9H`f>hp&5ZT*d3VZp z`BA@KpFb*_@z(8FK6T)Kc5-|-&tHAUQs-Q^m2Kk<#$R86#=PvIoA^WXIc}V1WxIUQ zE2eAOq5pGF_0Hc=p8`?mRxaZn#vXkB`|m?9@h9apV_v^C=Q7d`oq4Y5ep3f0I`rO} z+Zun*=Xy5v6AA5sK9Ln~^;6z9&n33N?xhME5@}RK)^@B)V{ir6x6ob}2|=<5S^ybj zGfYKlNTHBeXIpe{Q65NLRzS;gOBSY9P@g&X}*|<+R(GZI`3}U3eek{{`_k!y_9wh$rZfCkW*T#{34NkKF-% z1lkqJB%VOdd(1I{F`VPbhHOp{$Vt#D=*`SE5N9ZFm~W(+5n?@%A3=;2&$rB*H5unp z+#h2cWpn%;&`J2v-pqLdeE$#RO58sgqw=~AqCQ?th0yDGPMQb5)f?B9EI#_9o^;

y+dBhNyRlfZ>__c(0%JIq&-$j_+VNapmi=14;n;2q=b)UN1y*HNK`Ws8 eP1Hg183_Ls)IcVL#5&t<;@&jqS3w=bu@3=2b3L2@ literal 0 HcmV?d00001 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; };