rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Defer banner button validation until config is loaded

Browse Source 
The validation now runs on probo-ready instead of connectedCallback
so it can check config.texts to decide which buttons are required
for the active consent mode.

Signed-off-by: Émile Ré <emile@getprobo.com>
This commit is contained in:
Émile Ré
2026-05-07 09:59:54 +04:00
parent b4bb8715ee
commit ca15a355e8
1 changed files with 15 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
packages/cookie-banner/src/components/banner.ts
View File

@@ -15,12 +15,7 @@
import { ProboElement } from "./base"; import { ProboElement } from "./base";
import type { ProboRootElement } from "./base"; import type { ProboRootElement } from "./base";
import type { ProboCookieBannerRoot } from "./cookie-banner-root"; import type { ProboCookieBannerRoot } from "./cookie-banner-root";
import type { BannerConfig } from "../types";
const REQUIRED_BUTTONS = [
"probo-accept-button",
"probo-reject-button",
"probo-customize-button",
] as const;
export class ProboBanner extends ProboElement { export class ProboBanner extends ProboElement {
private root: ProboRootElement | null = null; private root: ProboRootElement | null = null;
@@ -32,29 +27,39 @@ export class ProboBanner extends ProboElement {
} }
}; };
private onReady = (e: Event): void => {
const config = (e as CustomEvent).detail.config as BannerConfig;
this.validate(config);
};
connectedCallback(): void { connectedCallback(): void {
this.hidden = true; this.hidden = true;
this.root = this.findAncestor<ProboCookieBannerRoot>("probo-cookie-banner-root"); this.root = this.findAncestor<ProboCookieBannerRoot>("probo-cookie-banner-root");
if (this.root) { if (this.root) {
this.root.addEventListener("probo-state", this.onStateChange); this.root.addEventListener("probo-state", this.onStateChange);
this.root.addEventListener("probo-ready", this.onReady, { once: true });
if (this.root.state === "banner") { if (this.root.state === "banner") {
this.hidden = false; this.hidden = false;
} }
} }
this.scheduleValidation(() => this.validate());
} }
disconnectedCallback(): void { disconnectedCallback(): void {
if (this.root) { if (this.root) {
this.root.removeEventListener("probo-state", this.onStateChange); this.root.removeEventListener("probo-state", this.onStateChange);
this.root.removeEventListener("probo-ready", this.onReady);
} }
} }
private validate(): void { private validate(config: BannerConfig): void {
const texts = config.texts ?? {};
const required: string[] = ["probo-accept-button"];
if (texts.button_reject_all) required.push("probo-reject-button");
if (texts.button_customize) required.push("probo-customize-button");
const missing: string[] = []; const missing: string[] = [];
for (const tag of REQUIRED_BUTTONS) { for (const tag of required) {
if (!this.querySelector(tag)) { if (!this.querySelector(tag)) {
missing.push(tag); missing.push(tag);
} }