Merge pull request Weaverse#224 from Weaverse/dev

Dev
Weaverse · Nov 25, 2024 · 424b2d7 · 424b2d7
2 parents 5df604d + 94ae880
commit 424b2d7
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 196 deletions.
diff --git a/app/modules/header/announcement-bar.tsx b/app/modules/header/announcement-bar.tsx
diff --git a/app/modules/header/index.tsx b/app/modules/header/index.tsx
@@ -3,14 +3,14 @@ import { CartForm, type CartReturn } from "@shopify/hydrogen";
 import { Suspense, useEffect } from "react";
 import { useCartFetchers } from "~/hooks/use-cart-fetchers";
 import type { EnhancedMenu } from "~/lib/utils";
-import type { RootLoader } from "~/root";
 import { Cart } from "~/modules/cart";
+import type { RootLoader } from "~/root";
 import { CartLoading } from "../cart-loading";
 import { Drawer, useDrawer } from "../drawer";
-import { AnnouncementBar } from "./announcement-bar";
 import { DesktopHeader } from "./desktop-header";
-import { MobileHeader } from "./mobile-header";
 import { MobileMenu } from "./menu/mobile-menu";
+import { MobileHeader } from "./mobile-header";
+import { ScrollingAnnouncement } from "./scrolling-announcement";
 
 export function Header({
   shopName,
@@ -43,7 +43,7 @@ export function Header({
       {menu && (
         <MenuDrawer isOpen={isMenuOpen} onClose={closeMenu} menu={menu} />
       )}
-      <AnnouncementBar />
+      <ScrollingAnnouncement />
       <DesktopHeader shopName={shopName} menu={menu} openCart={openCart} />
       <MobileHeader
         shopName={shopName}

diff --git a/app/modules/header/marquee.tsx b/app/modules/header/marquee.tsx
diff --git a/app/modules/header/scrolling-announcement.tsx b/app/modules/header/scrolling-announcement.tsx
@@ -0,0 +1,65 @@
+import { useThemeSettings } from "@weaverse/hydrogen";
+import { useEffect } from "react";
+
+const MAX_DURATION = 20;
+
+export function ScrollingAnnouncement() {
+  let themeSettings = useThemeSettings();
+  let {
+    topbarText,
+    topbarHeight,
+    topbarTextColor,
+    topbarBgColor,
+    topbarScrollingGap,
+    topbarScrollingSpeed,
+  } = themeSettings;
+
+  function updateStyles() {
+    if (topbarText) {
+      document.body.style.setProperty(
+        "--topbar-height",
+        `${Math.max(topbarHeight - window.scrollY, 0)}px`,
+      );
+    } else {
+      document.body.style.setProperty("--topbar-height", "0px");
+    }
+  }
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    updateStyles();
+    window.addEventListener("scroll", updateStyles);
+    return () => window.removeEventListener("scroll", updateStyles);
+  }, [topbarText]);
+
+  if (!topbarText) {
+    return null;
+  }
+
+  return (
+    <div
+      id="announcement-bar"
+      className="text-center z-50 relative flex items-center whitespace-nowrap"
+      style={
+        {
+          height: `${topbarHeight}px`,
+          backgroundColor: topbarBgColor,
+          color: topbarTextColor,
+          "--marquee-duration": `${MAX_DURATION / topbarScrollingSpeed}s`,
+          "--gap": `${topbarScrollingGap}px`,
+        } as React.CSSProperties
+      }
+    >
+      {new Array(10).fill("").map((_, idx) => {
+        return (
+          <div className="animate-marquee px-[calc(var(--gap)/2)]" key={idx}>
+            <div
+              className="flex items-center gap-[--gap] whitespace-nowrap [&_p]:flex [&_p]:gap-2 [&_p]:items-center"
+              dangerouslySetInnerHTML={{ __html: topbarText }}
+            />
+          </div>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/app/modules/predictive-search/predictive-search-results.tsx b/app/modules/predictive-search/predictive-search-results.tsx
@@ -11,6 +11,7 @@ export function PredictiveSearchResults() {
   let products = results?.find(({ type }) => type === "products");
 
   function goToSearchResult(event: React.MouseEvent<HTMLAnchorElement>) {
+    event.preventDefault();
     let type = event.currentTarget.dataset.type;
     if (!searchInputRef.current) return;
     if (type === "SearchQuerySuggestion") {

diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts
@@ -139,7 +139,7 @@ export let themeSchema: HydrogenThemeSchema = {
       ],
     },
     {
-      group: "Announcement bar",
+      group: "Scrolling announcements",
       inputs: [
         {
           type: "richtext",
@@ -150,7 +150,7 @@ export let themeSchema: HydrogenThemeSchema = {
         {
           type: "range",
           label: "Content gap",
-          name: "scrollingGap",
+          name: "topbarScrollingGap",
           configs: {
             min: 0,
             max: 100,
@@ -171,25 +171,17 @@ export let themeSchema: HydrogenThemeSchema = {
           },
           defaultValue: 36,
         },
-        {
-          type: "switch",
-          label: "Enable scrolling",
-          name: "enableScrolling",
-          defaultValue: false,
-          helpText:
-            "Scrolling is automatically detected based on the content length.",
-        },
         {
           type: "range",
           label: "Scrolling speed",
-          name: "scrollingSpeed",
+          name: "topbarScrollingSpeed",
           configs: {
-            min: 0,
-            max: 100,
+            min: 1,
+            max: 20,
             step: 1,
-            unit: "s",
+            unit: "x",
           },
-          defaultValue: 10,
+          defaultValue: 5,
         },
       ],
     },

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -33,8 +33,8 @@ export default {
           to: { opacity: "1", transform: "translateX(0)" },
         },
         marquee: {
-          from: { transform: "translateX(0)" },
-          to: { transform: "translateX(-100%)" },
+          from: { transform: "translateZ(0)" },
+          to: { transform: "translate3d(-100%,0,0)" },
         },
         underline: {
           "0%": {
@@ -55,7 +55,7 @@ export default {
       },
       animation: {
         spin: "spin .5s linear infinite",
-        marquee: "marquee var(--animation-speed, 150ms) linear infinite",
+        marquee: "marquee var(--marquee-duration, 15s) linear infinite",
         underline: "underline 400ms linear",
         "fade-in": "fade-in 500ms ease-in forwards",
         "slide-down-and-fade":