refactor: Pico v2 HTML example

picocss · Jan 14, 2024 · 21905b0 · 21905b0
1 parent 67c1ab6
commit 21905b0
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 55 deletions.
diff --git a/README.md b/README.md
@@ -9,8 +9,8 @@ Minimalist templates to discover Pico in action:
 <details open>
   <summary><strong>Pico v2 examples</strong></summary>
 
-- **[HTML](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-html)**  
-  A pure HTML example for Pico CSS
+- **[Preview](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-html?file=%2Findex.html)**  
+  A pure HTML example, without package manager or JavaScript.
 
 - **[React](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-react)**  
  A minimalist React example with Pico CSS

diff --git a/v2-html/README.md b/v2-html/README.md
@@ -7,6 +7,6 @@
 | ----- | ----- |
 | 2 | HTML |
 
-A starter example with most of the Pico components and styles.
+A pure HTML example, without package manager or JavaScript.
 
 [![Open in CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/picocss/examples/tree/master/v2-html)
diff --git a/v2-html/index.html b/v2-html/index.html
@@ -3,12 +3,12 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="light dark" />
     <title>Preview • Pico CSS</title>
     <meta
       name="description"
-      content="A starter example with all elements and components used in Pico design system. Built with Pico CSS."
+      content="A pure HTML example, without package manager or JavaScript."
     />
-    <link rel="shortcut icon" href="https://picocss.com/favicon.ico" />
     <link rel="canonical" href="https://picocss.com/examples/preview/" />
 
     <!-- Pico.css -->
@@ -23,7 +23,7 @@
     <header class="container">
       <hgroup>
         <h1>Pico</h1>
-        <p>A starter HTML example for Pico CSS.</p>
+        <p>A pure HTML example, without package manager or JavaScript.</p>
       </hgroup>
       <nav>
         <ul>

diff --git a/v2-html/js/minimal-theme-switcher.js b/v2-html/js/minimal-theme-switcher.js
@@ -22,12 +22,7 @@ const themeSwitcher = {
 
   // Get color scheme from local storage
   get schemeFromLocalStorage() {
-    if (typeof window.localStorage !== "undefined") {
-      if (window.localStorage.getItem(this.localStorageKey) !== null) {
-        return window.localStorage.getItem(this.localStorageKey);
-      }
-    }
-    return this._scheme;
+    return window.localStorage?.getItem(this.localStorageKey) ?? this._scheme;
   },
 
   // Preferred color scheme
@@ -46,7 +41,7 @@ const themeSwitcher = {
           // Set scheme
           this.scheme = button.getAttribute(this.buttonAttribute);
           // Close dropdown
-          document.querySelector(this.menuTarget).removeAttribute("open");
+          document.querySelector(this.menuTarget)?.removeAttribute("open");
         },
         false
       );
@@ -56,7 +51,7 @@ const themeSwitcher = {
   // Set scheme
   set scheme(scheme) {
     if (scheme == "auto") {
-      this.preferredColorScheme == "dark" ? (this._scheme = "dark") : (this._scheme = "light");
+      this._scheme = this.preferredColorScheme;
     } else if (scheme == "dark" || scheme == "light") {
       this._scheme = scheme;
     }
@@ -71,14 +66,12 @@ const themeSwitcher = {
 
   // Apply scheme
   applyScheme() {
-    document.querySelector("html").setAttribute(this.rootAttribute, this.scheme);
+    document.querySelector("html")?.setAttribute(this.rootAttribute, this.scheme);
   },
 
   // Store scheme to local storage
   schemeToLocalStorage() {
-    if (typeof window.localStorage !== "undefined") {
-      window.localStorage.setItem(this.localStorageKey, this.scheme);
-    }
+    window.localStorage?.setItem(this.localStorageKey, this.scheme);
   },
 };
 

diff --git a/v2-html/js/modal.js b/v2-html/js/modal.js
@@ -9,82 +9,65 @@
 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.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);
 };
 
 // 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;
 };