hamid zarghami
82 lines
2.8 KiB
TypeScript
82 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { usePatternBackground } from "@/components/background/PatternBackgroundProvider";
|
|
import { THEME_BG_ELEMENT_ID } from "@/lib/helpers/themeCache";
|
|
import { useLayoutEffect } from "react";
|
|
|
|
const THEME_BG_IMG_ID = "cached-theme-bg-img";
|
|
const THEME_BG_OVERLAY_ID = "cached-theme-bg-overlay";
|
|
|
|
export default function AppBackground() {
|
|
const { isPattern, backgroundStyle, isCustomImage, customImageSettings } =
|
|
usePatternBackground();
|
|
|
|
useLayoutEffect(() => {
|
|
if (!isPattern && !isCustomImage) {
|
|
document.getElementById(THEME_BG_ELEMENT_ID)?.remove();
|
|
return;
|
|
}
|
|
|
|
let element = document.getElementById(THEME_BG_ELEMENT_ID);
|
|
if (!element) {
|
|
element = document.createElement("div");
|
|
element.id = THEME_BG_ELEMENT_ID;
|
|
element.setAttribute("aria-hidden", "true");
|
|
element.style.position = "fixed";
|
|
element.style.inset = "0";
|
|
element.style.pointerEvents = "none";
|
|
element.style.zIndex = "0";
|
|
document.body.appendChild(element);
|
|
}
|
|
|
|
if (isPattern) {
|
|
element.style.overflow = "";
|
|
document.getElementById(THEME_BG_IMG_ID)?.remove();
|
|
document.getElementById(THEME_BG_OVERLAY_ID)?.remove();
|
|
Object.assign(element.style, backgroundStyle as Record<string, string>);
|
|
return;
|
|
}
|
|
|
|
if (isCustomImage && customImageSettings) {
|
|
const { bgUrl, bgBlur, bgOpacity, bgOverlay } = customImageSettings;
|
|
|
|
element.style.backgroundColor = "";
|
|
element.style.backgroundImage = "";
|
|
element.style.overflow = "hidden";
|
|
|
|
let imgLayer = document.getElementById(THEME_BG_IMG_ID);
|
|
if (!imgLayer) {
|
|
imgLayer = document.createElement("div");
|
|
imgLayer.id = THEME_BG_IMG_ID;
|
|
imgLayer.style.position = "absolute";
|
|
imgLayer.style.inset = "-40px";
|
|
imgLayer.style.backgroundSize = "cover";
|
|
imgLayer.style.backgroundPosition = "center";
|
|
imgLayer.style.backgroundRepeat = "no-repeat";
|
|
element.appendChild(imgLayer);
|
|
}
|
|
|
|
imgLayer.style.backgroundImage = `url("${bgUrl}")`;
|
|
imgLayer.style.filter = bgBlur ? `blur(${bgBlur}px)` : "";
|
|
imgLayer.style.opacity =
|
|
bgOpacity != null ? String(bgOpacity / 100) : "1";
|
|
|
|
let overlayLayer = document.getElementById(THEME_BG_OVERLAY_ID);
|
|
if (!overlayLayer) {
|
|
overlayLayer = document.createElement("div");
|
|
overlayLayer.id = THEME_BG_OVERLAY_ID;
|
|
overlayLayer.style.position = "absolute";
|
|
overlayLayer.style.inset = "0";
|
|
element.appendChild(overlayLayer);
|
|
}
|
|
|
|
const overlayOpacity =
|
|
bgOverlay != null ? Number(bgOverlay) / 100 : 0;
|
|
overlayLayer.style.backgroundColor =
|
|
overlayOpacity > 0 ? `rgba(0,0,0,${overlayOpacity})` : "";
|
|
}
|
|
}, [backgroundStyle, isPattern, isCustomImage, customImageSettings]);
|
|
|
|
return null;
|
|
}
|