@revenuecat/purchases-ui-js
Version:
Web components for Paywalls. Powered by RevenueCat
42 lines (41 loc) • 1.72 kB
JavaScript
import { getBackgroundSafeAreaColors, resolveSafeAreaFallbackCss, SAFE_AREA_FALLBACK_COLOR_CSS_VAR, } from "./safe-area-background";
// Last writer wins, but cleanup only fires for the last writer — otherwise an
// unmounting paywall would clear a variable set by another paywall that
// overlapped it during a transition.
let lastBgWriter = null;
export function applyDocumentBackground(instanceId, model, options) {
if (typeof document === "undefined")
return () => { };
const { paywallData, colorMode, hostFallbackColor } = options;
const root = document.documentElement;
const base = paywallData?.components_config?.base;
let value = null;
if (model.kind === "style" && model.style.background) {
const bg = model.style.background;
if (!bg.includes("gradient")) {
value = bg;
}
else {
const edges = getBackgroundSafeAreaColors(base?.background, colorMode, { width: window.innerWidth, height: window.innerHeight }, {
stickyComponents: {
hasHeader: base?.header != null,
hasFooter: base?.sticky_footer != null,
},
});
value = edges.top ?? edges.bottom;
}
}
if (value === null) {
value = resolveSafeAreaFallbackCss(base?.safe_area_fallback_color, hostFallbackColor, colorMode);
}
if (value !== null) {
lastBgWriter = instanceId;
root.style.setProperty(SAFE_AREA_FALLBACK_COLOR_CSS_VAR, value);
}
return () => {
if (lastBgWriter === instanceId) {
lastBgWriter = null;
root.style.removeProperty(SAFE_AREA_FALLBACK_COLOR_CSS_VAR);
}
};
}