Skip to content

Commit b257c4f

Browse files
srinad007srinad007
committed
reevaluate variant classes when reloading iframe
1 parent e3a3c05 commit b257c4f

2 files changed

Lines changed: 71 additions & 79 deletions

File tree

‎src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts‎

Lines changed: 71 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { visualBuilderStyles } from "../visualBuilder.style";
77
const VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;
88

99
type OnAudienceModeVariantPatchUpdate = {
10-
expectedCSLPValues: Record<"variant" | "base", string>;
1110
highlightVariantFields: boolean;
1211
};
1312

@@ -24,71 +23,93 @@ export function useRecalculateVariantDataCSLPValues(): void {
2423
}
2524
);
2625
}
27-
2826
function updateVariantClasses({
29-
expectedCSLPValues,
3027
highlightVariantFields,
3128
}: OnAudienceModeVariantPatchUpdate): void {
32-
const variantElement = document.querySelector(
33-
`[${DATA_CSLP_ATTR_SELECTOR}="${expectedCSLPValues.variant}"]`
29+
const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;
30+
const observers: MutationObserver[] = [];
31+
32+
// Helper function to update element classes
33+
const updateElementClasses = (
34+
element: HTMLElement,
35+
dataCslp: string,
36+
observer: MutationObserver
37+
) => {
38+
if (!dataCslp) return;
39+
40+
if (
41+
dataCslp.startsWith("v2:") &&
42+
element.classList.contains("visual-builder__base-field")
43+
) {
44+
element.classList.remove("visual-builder__base-field");
45+
if (highlightVariantFields) {
46+
element.classList.add(
47+
visualBuilderStyles()["visual-builder__variant-field"],
48+
"visual-builder__variant-field"
49+
);
50+
} else {
51+
element.classList.add("visual-builder__variant-field");
52+
}
53+
} else if (
54+
!dataCslp.startsWith("v2:") &&
55+
element.classList.contains("visual-builder__variant-field")
56+
) {
57+
element.classList.remove(
58+
visualBuilderStyles()["visual-builder__variant-field"],
59+
"visual-builder__variant-field"
60+
);
61+
element.classList.add("visual-builder__base-field");
62+
} else if (
63+
dataCslp.startsWith("v2:") &&
64+
variant &&
65+
!dataCslp.includes(variant) &&
66+
element.classList.contains("visual-builder__variant-field")
67+
) {
68+
element.classList.remove(
69+
visualBuilderStyles()["visual-builder__variant-field"],
70+
"visual-builder__variant-field"
71+
);
72+
element.classList.add("visual-builder__disabled-variant-field");
73+
}
74+
75+
// Disconnect this observer after processing
76+
observer.disconnect();
77+
const index = observers.indexOf(observer);
78+
if (index > -1) {
79+
observers.splice(index, 1);
80+
}
81+
};
82+
83+
// Create a separate observer for each element
84+
const elementsWithCslp = document.querySelectorAll(
85+
`[${DATA_CSLP_ATTR_SELECTOR}]`
3486
);
35-
if (variantElement) {
36-
// No need to recalculate classList for variant fields
37-
return;
38-
} else {
39-
const baseElement = document.querySelector(
40-
`[${DATA_CSLP_ATTR_SELECTOR}="${expectedCSLPValues.base}"]`
41-
);
42-
if (!baseElement) return;
4387

44-
let hasObserverDisconnected = false;
45-
let timeoutId: ReturnType<typeof setTimeout> | null = null;
88+
elementsWithCslp.forEach((elementNode) => {
89+
const element = elementNode as HTMLElement;
4690

47-
const observer = new MutationObserver((mutations, obs) => {
91+
const observer = new MutationObserver((mutations) => {
4892
mutations.forEach((mutation) => {
4993
if (
5094
mutation.type === "attributes" &&
5195
mutation.attributeName === DATA_CSLP_ATTR_SELECTOR
5296
) {
53-
const element = mutation.target as HTMLElement;
5497
const dataCslp = element.getAttribute(
5598
DATA_CSLP_ATTR_SELECTOR
5699
);
57-
if (!dataCslp) return;
58-
if (
59-
dataCslp.startsWith("v2:") &&
60-
element.classList.contains("visual-builder__base-field")
61-
) {
62-
element.classList.remove("visual-builder__base-field");
63-
if (highlightVariantFields) {
64-
// Append class and styles
65-
element.classList.add(
66-
visualBuilderStyles()[
67-
"visual-builder__variant-field"
68-
],
69-
"visual-builder__variant-field"
70-
);
71-
} else {
72-
// Append only class
73-
element.classList.add(
74-
"visual-builder__variant-field"
75-
);
76-
}
77-
}
78-
obs.disconnect();
79-
hasObserverDisconnected = true;
80-
return;
100+
updateElementClasses(element, dataCslp || "", observer);
81101
}
82102
});
83-
if (!hasObserverDisconnected && !timeoutId) {
84-
// disconnect the observer whether we found the new instance or not after timeout
85-
timeoutId = setTimeout(() => {
86-
obs.disconnect();
87-
hasObserverDisconnected = false;
88-
}, VARIANT_UPDATE_DELAY_MS);
89-
}
90103
});
91104

92-
observer.observe(baseElement, { attributes: true });
93-
}
105+
observers.push(observer);
106+
observer.observe(element, { attributes: true });
107+
});
108+
109+
setTimeout(() => {
110+
if (observers.length > 0) {
111+
observers.forEach((observer) => observer.disconnect());
112+
observers.length = 0;
113+
}
114+
}, VARIANT_UPDATE_DELAY_MS);
94115
}

‎src/visualBuilder/listeners/mouseClick.ts‎

Lines changed: 0 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -164,35 +164,6 @@ async function handleBuilderInteraction(
164164
editableElement: editableElement,
165165
isFieldDisabled: true,
166166
});
167-
const observer = new MutationObserver((mutations) => {
168-
mutations.forEach((mutation) => {
169-
if (
170-
mutation.type === "attributes" &&
171-
mutation.attributeName === "class"
172-
) {
173-
if (
174-
editableElement.classList.contains(
175-
"visual-builder__variant-field"
176-
)
177-
) {
178-
hideOverlay({
179-
visualBuilderContainer: params.visualBuilderContainer,
180-
resizeObserver: params.resizeObserver,
181-
focusedToolbar: params.focusedToolbar,
182-
visualBuilderOverlayWrapper: params.overlayWrapper
183-
})
184-
185-
const clickEvent = new MouseEvent("click", {
186-
view: window,
187-
bubbles: true,
188-
cancelable: true,
189-
});
190-
editableElement.dispatchEvent(clickEvent);
191-
}
192-
}
193-
});
194-
});
195-
observer.observe(editableElement, { attributes: true, attributeFilter: ['class'] })
196167
}
197168
}
198169

0 commit comments

Comments
 (0)