load pattern

src/lib/helpers/backgroundUtils.ts

@@ -0,0 +1,80 @@
+export const PATTERN_BACKGROUND_OPACITY = 0.05;
+export const PATTERN_VECTOR_OPACITY = 0.1;
+export const PRIMARY_LIGHT_OPACITY = 0.15;
+
+export type RestaurantBackgroundSettings = {
+  bgUrl?: string | null;
+  bgBlur?: number | null;
+  bgOpacity?: number | null;
+  bgOverlay?: string | null;
+  menuColor?: string | null;
+};
+
+export const hexToRgba = (hex: string, alpha: number): string => {
+  const normalized = hex.replace("#", "");
+  if (normalized.length !== 6) {
+    return `rgba(0, 0, 0, ${alpha})`;
+  }
+
+  const r = parseInt(normalized.slice(0, 2), 16);
+  const g = parseInt(normalized.slice(2, 4), 16);
+  const b = parseInt(normalized.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+const isUnsetBgValue = (value: unknown): boolean =>
+  value == null || value === "" || value === 0;
+
+export const isCustomImageBackground = (
+  settings: RestaurantBackgroundSettings,
+): boolean => {
+  if (!settings.bgUrl) return false;
+
+  return (
+    !isUnsetBgValue(settings.bgBlur) ||
+    !isUnsetBgValue(settings.bgOpacity) ||
+    !isUnsetBgValue(settings.bgOverlay)
+  );
+};
+
+export const isPatternBackground = (settings: RestaurantBackgroundSettings): boolean =>
+  Boolean(settings.bgUrl) && !isCustomImageBackground(settings);
+
+export const colorizeSvg = (svg: string, color: string): string => {
+  let result = svg.replace(/fill="(?!black|none)[^"]+"/g, `fill="${color}"`);
+  result = result.replace(
+    /fill-opacity="[^"]+"/g,
+    `fill-opacity="${PATTERN_VECTOR_OPACITY}"`,
+  );
+  result = result.replace(
+    /(<(?:path|circle|rect|ellipse|polygon)[^>]*fill="(?!black|none)[^"]+")(?![^>]*fill-opacity)/g,
+    `$1 fill-opacity="${PATTERN_VECTOR_OPACITY}"`,
+  );
+  return result;
+};
+
+export const applyPatternCssVariables = (menuColor: string) => {
+  const root = document.documentElement;
+  const baseTint = hexToRgba(menuColor, PATTERN_BACKGROUND_OPACITY);
+
+  root.setAttribute("data-pattern-bg", "true");
+  root.style.setProperty("--bg-pattern-base", baseTint);
+  root.style.setProperty(
+    "--bg-pattern-vector",
+    hexToRgba(menuColor, PATTERN_VECTOR_OPACITY),
+  );
+  root.style.setProperty(
+    "--primary-light",
+    hexToRgba(menuColor, PRIMARY_LIGHT_OPACITY),
+  );
+  root.style.setProperty("--background", baseTint);
+};
+
+export const clearPatternCssVariables = () => {
+  const root = document.documentElement;
+  root.removeAttribute("data-pattern-bg");
+  root.style.removeProperty("--bg-pattern-base");
+  root.style.removeProperty("--bg-pattern-vector");
+  root.style.removeProperty("--primary-light");
+  root.style.removeProperty("--background");
+};