updateweb

2025-12-24 00:13:23 -06:00
parent e4b3de4a46
commit 017c6376fc
88 changed files with 17866 additions and 1191 deletions
--- a/website/assets/js/page-transitions.js
+++ b/website/assets/js/page-transitions.js
@@ -0,0 +1,143 @@
+// Smooth Page Transitions for Sky Art Shop
+// Provides fade-out/fade-in effects when navigating between pages
+
+(function () {
+  "use strict";
+
+  // Add page transition styles (less aggressive approach)
+  const style = document.createElement("style");
+  style.textContent = `
+    body {
+      transition: opacity 0.25s ease-in-out;
+    }
+    
+    body.page-transitioning {
+      opacity: 0;
+      pointer-events: none;
+    }
+  `;
+  document.head.appendChild(style);
+
+  // Fade in page on load (if coming from a transition)
+  function initPageTransition() {
+    // Check if we're coming from a transition
+    const isTransitioning = sessionStorage.getItem("page-transitioning");
+    if (isTransitioning === "true") {
+      document.body.style.opacity = "0";
+      sessionStorage.removeItem("page-transitioning");
+
+      // Wait for content to be ready, then fade in
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          document.body.style.opacity = "1";
+        });
+      });
+    }
+  }
+
+  // Handle navigation with transitions
+  function setupNavigationTransitions() {
+    // Get all internal links
+    document.addEventListener("click", function (e) {
+      const link = e.target.closest("a");
+
+      if (!link) return;
+
+      const href = link.getAttribute("href");
+
+      // Skip if:
+      // - External link
+      // - Opens in new tab
+      // - Has download attribute
+      // - Is a hash link on same page
+      // - Is a javascript: link
+      // - Is a mailto: or tel: link
+      if (
+        !href ||
+        link.target === "_blank" ||
+        link.hasAttribute("download") ||
+        href.startsWith("javascript:") ||
+        href.startsWith("mailto:") ||
+        href.startsWith("tel:") ||
+        href.startsWith("#") ||
+        (href.includes("://") && !href.includes(window.location.host))
+      ) {
+        return;
+      }
+
+      // Prevent default navigation
+      e.preventDefault();
+
+      // Start transition
+      document.body.classList.add("page-transitioning");
+      sessionStorage.setItem("page-transitioning", "true");
+
+      // Navigate after fade-out completes
+      setTimeout(() => {
+        window.location.href = href;
+      }, 250); // Match CSS transition duration
+    });
+  }
+
+  // Use View Transitions API if available (Chrome 111+, Safari 18+)
+  function setupViewTransitions() {
+    if (!document.startViewTransition) return;
+
+    document.addEventListener(
+      "click",
+      function (e) {
+        const link = e.target.closest("a");
+
+        if (!link) return;
+
+        const href = link.getAttribute("href");
+
+        // Same checks as above
+        if (
+          !href ||
+          link.target === "_blank" ||
+          link.hasAttribute("download") ||
+          href.startsWith("javascript:") ||
+          href.startsWith("mailto:") ||
+          href.startsWith("tel:") ||
+          href.startsWith("#") ||
+          (href.includes("://") && !href.includes(window.location.host))
+        ) {
+          return;
+        }
+
+        e.preventDefault();
+
+        // Use View Transitions API for smooth cross-page transitions
+        sessionStorage.setItem("page-transitioning", "true");
+        document.startViewTransition(() => {
+          window.location.href = href;
+        });
+      },
+      true
+    ); // Use capture to run before other handlers
+  }
+
+  // Initialize
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", () => {
+      initPageTransition();
+      setupNavigationTransitions();
+    });
+  } else {
+    initPageTransition();
+    setupNavigationTransitions();
+  }
+
+  // For browsers that support View Transitions API (progressive enhancement)
+  if ("startViewTransition" in document) {
+    const viewStyle = document.createElement("style");
+    viewStyle.textContent = `
+      ::view-transition-old(root),
+      ::view-transition-new(root) {
+        animation-duration: 0.25s;
+      }
+    `;
+    document.head.appendChild(viewStyle);
+  }
+})();