From 3bb6ffac4e4d1e01212fb333d32eb6f15637f660 Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Sun, 21 Jun 2026 15:46:04 +0330 Subject: [PATCH] glass with just background --- .../background/PatternBackgroundProvider.tsx | 15 ++++++++++++++- src/lib/helpers/backgroundUtils.ts | 2 +- src/lib/helpers/themeBootScript.ts | 2 +- src/lib/helpers/themeCache.ts | 14 ++++++++++---- 4 files changed, 26 insertions(+), 7 deletions(-) diff --git a/src/components/background/PatternBackgroundProvider.tsx b/src/components/background/PatternBackgroundProvider.tsx index 3efddfd..c196453 100644 --- a/src/components/background/PatternBackgroundProvider.tsx +++ b/src/components/background/PatternBackgroundProvider.tsx @@ -82,7 +82,7 @@ export function PatternBackgroundProvider({ children }: { children: ReactNode }) const themeBase = buildThemeCacheFromRestaurant(restaurant); - if (!themeBase.isPattern || !themeBase.bgUrl) { + if (!themeBase.isPattern) { clearPatternCssVariables(); removeCachedThemeBackground(); setPatternImageUrl(null); @@ -95,6 +95,19 @@ export function PatternBackgroundProvider({ children }: { children: ReactNode }) applyPatternCssVariables(menuColor); + if (!themeBase.bgUrl) { + setPatternImageUrl(null); + setThemeCache(restaurantSlug, { + ...themeBase, + patternDataUrl: null, + }); + const saved = getThemeCache(restaurantSlug); + if (saved) { + applyCachedThemeToDom(saved); + } + return; + } + const cached = getThemeCache(restaurantSlug); const cacheHit = cached?.isPattern && diff --git a/src/lib/helpers/backgroundUtils.ts b/src/lib/helpers/backgroundUtils.ts index a07a779..88590f4 100644 --- a/src/lib/helpers/backgroundUtils.ts +++ b/src/lib/helpers/backgroundUtils.ts @@ -38,7 +38,7 @@ export const isCustomImageBackground = ( }; export const isPatternBackground = (settings: RestaurantBackgroundSettings): boolean => - Boolean(settings.bgUrl) && !isCustomImageBackground(settings); + !isCustomImageBackground(settings); export const colorizeSvg = ( svg: string, diff --git a/src/lib/helpers/themeBootScript.ts b/src/lib/helpers/themeBootScript.ts index 4bb3b35..d2e2230 100644 --- a/src/lib/helpers/themeBootScript.ts +++ b/src/lib/helpers/themeBootScript.ts @@ -1,3 +1,3 @@ export function getThemeBootScript(): string { - return `(function(){try{var s=location.pathname.split("/").filter(Boolean)[0],t=null;if(s&&s!=="auth"){var r=localStorage.getItem("restaurant-theme:"+s);if(r)t=JSON.parse(r)}if(!t||t.version!==1||!t.menuColor){var l=localStorage.getItem("theme-primary-color");if(l){var x=l.replace("#","");if(x.length===6){var p=parseInt(x.slice(0,2),16),f=parseInt(x.slice(2,4),16),m=parseInt(x.slice(4,6),16),b="rgba("+p+","+f+","+m+",0.05)";document.documentElement.style.setProperty("--background",b)}}return}function h(n,a){var u=n.replace("#","");if(u.length!==6)return null;var v=parseInt(u.slice(0,2),16),g=parseInt(u.slice(2,4),16),y=parseInt(u.slice(4,6),16);return"rgba("+v+","+g+","+y+","+a+")"}var e=document.documentElement;if(t.primaryOklch){e.style.setProperty("--primary",t.primaryOklch);e.style.setProperty("--primary-foreground",t.primaryForeground||"oklch(1 0 0)")}if(!t.isPattern)return;e.setAttribute("data-pattern-bg","true");var k=t.backgroundTint||h(t.menuColor,0.05),w=t.bgPatternVector||h(t.menuColor,0.1),z=t.primaryLight||h(t.menuColor,0.15);k&&(e.style.setProperty("--background",k),e.style.setProperty("--bg-pattern-base",k));w&&e.style.setProperty("--bg-pattern-vector",w);z&&e.style.setProperty("--primary-light",z);if(t.patternDataUrl&&k){var d=document.createElement("div");d.id="cached-theme-bg";d.setAttribute("aria-hidden","true");d.style.cssText="position:fixed;inset:0;pointer-events:none;z-index:0;background-color:"+k+';background-image:url("'+t.patternDataUrl+'");background-repeat:repeat;background-size:auto;';document.body.appendChild(d)}}catch(u){}})();`; + return `(function(){try{var s=location.pathname.split("/").filter(Boolean)[0],t=null;if(s&&s!=="auth"){var r=localStorage.getItem("restaurant-theme:"+s);if(r)t=JSON.parse(r)}if(!t||t.version!==1||!t.menuColor){var l=localStorage.getItem("theme-primary-color");if(l){var x=l.replace("#","");if(x.length===6){var p=parseInt(x.slice(0,2),16),f=parseInt(x.slice(2,4),16),m=parseInt(x.slice(4,6),16),b="rgba("+p+","+f+","+m+",0.05)";document.documentElement.style.setProperty("--background",b)}}return}function h(n,a){var u=n.replace("#","");if(u.length!==6)return null;var v=parseInt(u.slice(0,2),16),g=parseInt(u.slice(2,4),16),y=parseInt(u.slice(4,6),16);return"rgba("+v+","+g+","+y+","+a+")"}var e=document.documentElement;if(t.primaryOklch){e.style.setProperty("--primary",t.primaryOklch);e.style.setProperty("--primary-foreground",t.primaryForeground||"oklch(1 0 0)")}if(!t.isPattern)return;e.setAttribute("data-pattern-bg","true");var k=t.backgroundTint||h(t.menuColor,0.05),w=t.bgPatternVector||h(t.menuColor,0.1),z=t.primaryLight||h(t.menuColor,0.15);k&&(e.style.setProperty("--background",k),e.style.setProperty("--bg-pattern-base",k));w&&e.style.setProperty("--bg-pattern-vector",w);z&&e.style.setProperty("--primary-light",z);if(k){var d=document.createElement("div");d.id="cached-theme-bg";d.setAttribute("aria-hidden","true");d.style.cssText="position:fixed;inset:0;pointer-events:none;z-index:0;background-color:"+k+(t.patternDataUrl?';background-image:url("'+t.patternDataUrl+'");background-repeat:repeat;background-size:auto':"")+";";document.body.appendChild(d)}}catch(u){}})();`; } diff --git a/src/lib/helpers/themeCache.ts b/src/lib/helpers/themeCache.ts index 019dfaa..2cec6a5 100644 --- a/src/lib/helpers/themeCache.ts +++ b/src/lib/helpers/themeCache.ts @@ -278,7 +278,7 @@ export function applyCachedThemeToDom(theme: CachedRestaurantTheme): void { root.style.setProperty("--primary-light", theme.primaryLight); } - if (!theme.patternDataUrl || !theme.backgroundTint) return; + if (!theme.backgroundTint) return; let bgElement = document.getElementById(THEME_BG_ELEMENT_ID); if (!bgElement) { @@ -293,9 +293,15 @@ export function applyCachedThemeToDom(theme: CachedRestaurantTheme): void { } bgElement.style.backgroundColor = theme.backgroundTint; - bgElement.style.backgroundImage = `url("${theme.patternDataUrl}")`; - bgElement.style.backgroundRepeat = "repeat"; - bgElement.style.backgroundSize = "auto"; + if (theme.patternDataUrl) { + bgElement.style.backgroundImage = `url("${theme.patternDataUrl}")`; + bgElement.style.backgroundRepeat = "repeat"; + bgElement.style.backgroundSize = "auto"; + } else { + bgElement.style.removeProperty("background-image"); + bgElement.style.removeProperty("background-repeat"); + bgElement.style.removeProperty("background-size"); + } } export function removeCachedThemeBackground(): void {