@contentstack/live-preview-utils 4.2.0 → 4.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/legacy/light-sdk.cjs +1 -1
- package/dist/legacy/light-sdk.js +1 -1
- package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.cjs +1 -1
- package/dist/legacy/livePreview/eventManager/postMessageEvent.hooks.js +1 -1
- package/dist/legacy/preview/contentstack-live-preview-HOC.cjs +1 -1
- package/dist/legacy/preview/contentstack-live-preview-HOC.js +1 -1
- package/dist/legacy/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.cjs +16 -20
- package/dist/legacy/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.cjs.map +1 -1
- package/dist/legacy/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.d.cts +2 -1
- package/dist/legacy/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.d.ts +2 -1
- package/dist/legacy/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.js +15 -20
- package/dist/legacy/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.js.map +1 -1
- package/dist/legacy/visualBuilder/eventManager/useVariantsPostMessageEvent.cjs +62 -12
- package/dist/legacy/visualBuilder/eventManager/useVariantsPostMessageEvent.cjs.map +1 -1
- package/dist/legacy/visualBuilder/eventManager/useVariantsPostMessageEvent.d.cts +12 -3
- package/dist/legacy/visualBuilder/eventManager/useVariantsPostMessageEvent.d.ts +12 -3
- package/dist/legacy/visualBuilder/eventManager/useVariantsPostMessageEvent.js +58 -12
- package/dist/legacy/visualBuilder/eventManager/useVariantsPostMessageEvent.js.map +1 -1
- package/dist/legacy/visualBuilder/index.cjs +11 -1
- package/dist/legacy/visualBuilder/index.cjs.map +1 -1
- package/dist/legacy/visualBuilder/index.d.cts +2 -0
- package/dist/legacy/visualBuilder/index.d.ts +2 -0
- package/dist/legacy/visualBuilder/index.js +12 -2
- package/dist/legacy/visualBuilder/index.js.map +1 -1
- package/dist/legacy/visualBuilder/utils/types/postMessage.types.cjs +1 -0
- package/dist/legacy/visualBuilder/utils/types/postMessage.types.cjs.map +1 -1
- package/dist/legacy/visualBuilder/utils/types/postMessage.types.d.cts +1 -0
- package/dist/legacy/visualBuilder/utils/types/postMessage.types.d.ts +1 -0
- package/dist/legacy/visualBuilder/utils/types/postMessage.types.js +1 -0
- package/dist/legacy/visualBuilder/utils/types/postMessage.types.js.map +1 -1
- package/dist/legacy/visualBuilder/visualBuilder.style.cjs +2 -1
- package/dist/legacy/visualBuilder/visualBuilder.style.cjs.map +1 -1
- package/dist/legacy/visualBuilder/visualBuilder.style.d.cts +1 -0
- package/dist/legacy/visualBuilder/visualBuilder.style.d.ts +1 -0
- package/dist/legacy/visualBuilder/visualBuilder.style.js +2 -1
- package/dist/legacy/visualBuilder/visualBuilder.style.js.map +1 -1
- package/dist/modern/light-sdk.cjs +1 -1
- package/dist/modern/light-sdk.js +1 -1
- package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.cjs +1 -1
- package/dist/modern/livePreview/eventManager/postMessageEvent.hooks.js +1 -1
- package/dist/modern/preview/contentstack-live-preview-HOC.cjs +1 -1
- package/dist/modern/preview/contentstack-live-preview-HOC.js +1 -1
- package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.cjs +16 -20
- package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.cjs.map +1 -1
- package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.d.cts +2 -1
- package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.d.ts +2 -1
- package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.js +15 -20
- package/dist/modern/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.js.map +1 -1
- package/dist/modern/visualBuilder/eventManager/useVariantsPostMessageEvent.cjs +61 -12
- package/dist/modern/visualBuilder/eventManager/useVariantsPostMessageEvent.cjs.map +1 -1
- package/dist/modern/visualBuilder/eventManager/useVariantsPostMessageEvent.d.cts +12 -3
- package/dist/modern/visualBuilder/eventManager/useVariantsPostMessageEvent.d.ts +12 -3
- package/dist/modern/visualBuilder/eventManager/useVariantsPostMessageEvent.js +57 -12
- package/dist/modern/visualBuilder/eventManager/useVariantsPostMessageEvent.js.map +1 -1
- package/dist/modern/visualBuilder/index.cjs +11 -1
- package/dist/modern/visualBuilder/index.cjs.map +1 -1
- package/dist/modern/visualBuilder/index.d.cts +2 -0
- package/dist/modern/visualBuilder/index.d.ts +2 -0
- package/dist/modern/visualBuilder/index.js +12 -2
- package/dist/modern/visualBuilder/index.js.map +1 -1
- package/dist/modern/visualBuilder/utils/types/postMessage.types.cjs +1 -0
- package/dist/modern/visualBuilder/utils/types/postMessage.types.cjs.map +1 -1
- package/dist/modern/visualBuilder/utils/types/postMessage.types.d.cts +1 -0
- package/dist/modern/visualBuilder/utils/types/postMessage.types.d.ts +1 -0
- package/dist/modern/visualBuilder/utils/types/postMessage.types.js +1 -0
- package/dist/modern/visualBuilder/utils/types/postMessage.types.js.map +1 -1
- package/dist/modern/visualBuilder/visualBuilder.style.cjs +2 -1
- package/dist/modern/visualBuilder/visualBuilder.style.cjs.map +1 -1
- package/dist/modern/visualBuilder/visualBuilder.style.d.cts +1 -0
- package/dist/modern/visualBuilder/visualBuilder.style.d.ts +1 -0
- package/dist/modern/visualBuilder/visualBuilder.style.js +2 -1
- package/dist/modern/visualBuilder/visualBuilder.style.js.map +1 -1
- package/package.json +6 -6
package/README.md
CHANGED
|
@@ -16,7 +16,7 @@ Alternatively, if you want to include the package directly in your website HTML
|
|
|
16
16
|
|
|
17
17
|
```html
|
|
18
18
|
<script type='module' crossorigin="anonymous">
|
|
19
|
-
import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@4.2.
|
|
19
|
+
import ContentstackLivePreview from 'https://esm.sh/@contentstack/live-preview-utils@4.2.1';
|
|
20
20
|
|
|
21
21
|
ContentstackLivePreview.init({
|
|
22
22
|
stackDetails: {
|
package/dist/legacy/light-sdk.js
CHANGED
|
@@ -141,7 +141,7 @@ function sendInitializeLivePreviewPostMessageEvent() {
|
|
|
141
141
|
config: {
|
|
142
142
|
shouldReload: import_configManager.default.get().ssr,
|
|
143
143
|
href: window.location.href,
|
|
144
|
-
sdkVersion: "4.2.
|
|
144
|
+
sdkVersion: "4.2.1",
|
|
145
145
|
mode: import_configManager.default.get().mode
|
|
146
146
|
}
|
|
147
147
|
}
|
|
@@ -227,7 +227,7 @@ var _ContentstackLivePreview = class _ContentstackLivePreview {
|
|
|
227
227
|
* @returns The version of the SDK as a string.
|
|
228
228
|
*/
|
|
229
229
|
static getSdkVersion() {
|
|
230
|
-
return "4.2.
|
|
230
|
+
return "4.2.1";
|
|
231
231
|
}
|
|
232
232
|
};
|
|
233
233
|
_ContentstackLivePreview.previewConstructors = {};
|
|
@@ -195,7 +195,7 @@ var _ContentstackLivePreview = class _ContentstackLivePreview {
|
|
|
195
195
|
* @returns The version of the SDK as a string.
|
|
196
196
|
*/
|
|
197
197
|
static getSdkVersion() {
|
|
198
|
-
return "4.2.
|
|
198
|
+
return "4.2.1";
|
|
199
199
|
}
|
|
200
200
|
};
|
|
201
201
|
_ContentstackLivePreview.previewConstructors = {};
|
|
@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
30
30
|
// src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts
|
|
31
31
|
var useRecalculateVariantDataCSLPValues_exports = {};
|
|
32
32
|
__export(useRecalculateVariantDataCSLPValues_exports, {
|
|
33
|
+
updateVariantClasses: () => updateVariantClasses,
|
|
33
34
|
useRecalculateVariantDataCSLPValues: () => useRecalculateVariantDataCSLPValues
|
|
34
35
|
});
|
|
35
36
|
module.exports = __toCommonJS(useRecalculateVariantDataCSLPValues_exports);
|
|
@@ -38,6 +39,7 @@ var import_livePreviewEventManager = __toESM(require("../../livePreview/eventMan
|
|
|
38
39
|
var import_livePreviewEventManager2 = require("../../livePreview/eventManager/livePreviewEventManager.constant.cjs");
|
|
39
40
|
var import_constants = require("../utils/constants.cjs");
|
|
40
41
|
var import_visualBuilder = require("../visualBuilder.style.cjs");
|
|
42
|
+
var import_useVariantsPostMessageEvent = require("./useVariantsPostMessageEvent.cjs");
|
|
41
43
|
var VARIANT_UPDATE_DELAY_MS = 8e3;
|
|
42
44
|
function useRecalculateVariantDataCSLPValues() {
|
|
43
45
|
var _a;
|
|
@@ -45,15 +47,14 @@ function useRecalculateVariantDataCSLPValues() {
|
|
|
45
47
|
import_livePreviewEventManager2.LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,
|
|
46
48
|
(event) => {
|
|
47
49
|
if (import__.VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {
|
|
48
|
-
|
|
50
|
+
(0, import_useVariantsPostMessageEvent.setHighlightVariantFields)(event.data.highlightVariantFields);
|
|
51
|
+
updateVariantClasses();
|
|
49
52
|
}
|
|
50
53
|
}
|
|
51
54
|
);
|
|
52
55
|
}
|
|
53
|
-
function updateVariantClasses({
|
|
54
|
-
highlightVariantFields
|
|
55
|
-
expectedCSLPValues
|
|
56
|
-
}) {
|
|
56
|
+
function updateVariantClasses() {
|
|
57
|
+
const highlightVariantFields = import__.VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;
|
|
57
58
|
const variant = import__.VisualBuilder.VisualBuilderGlobalState.value.variant;
|
|
58
59
|
const observers = [];
|
|
59
60
|
const updateElementClasses = (element, dataCslp, observer) => {
|
|
@@ -62,23 +63,20 @@ function updateVariantClasses({
|
|
|
62
63
|
if (element.classList.contains("visual-builder__base-field")) {
|
|
63
64
|
element.classList.remove("visual-builder__base-field");
|
|
64
65
|
}
|
|
66
|
+
const variantFieldClasses = ["visual-builder__variant-field"];
|
|
65
67
|
if (highlightVariantFields) {
|
|
66
|
-
|
|
67
|
-
(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
|
|
68
|
-
"visual-builder__variant-field"
|
|
69
|
-
);
|
|
70
|
-
} else {
|
|
71
|
-
element.classList.add("visual-builder__variant-field");
|
|
68
|
+
variantFieldClasses.push((0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"]);
|
|
72
69
|
}
|
|
70
|
+
element.classList.add(...variantFieldClasses);
|
|
73
71
|
} else if (!dataCslp.startsWith("v2:") && element.classList.contains("visual-builder__variant-field")) {
|
|
74
72
|
element.classList.remove(
|
|
75
|
-
(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
|
|
73
|
+
(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"],
|
|
76
74
|
"visual-builder__variant-field"
|
|
77
75
|
);
|
|
78
76
|
element.classList.add("visual-builder__base-field");
|
|
79
77
|
} else if (dataCslp.startsWith("v2:") && variant && !dataCslp.includes(variant) && element.classList.contains("visual-builder__variant-field")) {
|
|
80
78
|
element.classList.remove(
|
|
81
|
-
(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
|
|
79
|
+
(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"],
|
|
82
80
|
"visual-builder__variant-field"
|
|
83
81
|
);
|
|
84
82
|
element.classList.add("visual-builder__disabled-variant-field");
|
|
@@ -107,18 +105,15 @@ function updateVariantClasses({
|
|
|
107
105
|
if (element.classList.contains("visual-builder__base-field")) {
|
|
108
106
|
element.classList.remove("visual-builder__base-field");
|
|
109
107
|
}
|
|
108
|
+
const variantFieldClasses = ["visual-builder__variant-field"];
|
|
110
109
|
if (highlightVariantFields) {
|
|
111
|
-
|
|
112
|
-
(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
|
|
113
|
-
"visual-builder__variant-field"
|
|
114
|
-
);
|
|
115
|
-
} else {
|
|
116
|
-
element.classList.add("visual-builder__variant-field");
|
|
110
|
+
variantFieldClasses.push((0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"]);
|
|
117
111
|
}
|
|
112
|
+
element.classList.add(...variantFieldClasses);
|
|
118
113
|
} else if (!dataCslp.startsWith("v2:")) {
|
|
119
114
|
if (element.classList.contains("visual-builder__variant-field")) {
|
|
120
115
|
element.classList.remove(
|
|
121
|
-
(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
|
|
116
|
+
(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"],
|
|
122
117
|
"visual-builder__variant-field"
|
|
123
118
|
);
|
|
124
119
|
}
|
|
@@ -169,6 +164,7 @@ function updateVariantClasses({
|
|
|
169
164
|
}
|
|
170
165
|
// Annotate the CommonJS export names for ESM import in node:
|
|
171
166
|
0 && (module.exports = {
|
|
167
|
+
updateVariantClasses,
|
|
172
168
|
useRecalculateVariantDataCSLPValues
|
|
173
169
|
});
|
|
174
170
|
//# sourceMappingURL=useRecalculateVariantDataCSLPValues.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\ntype OnAudienceModeVariantPatchUpdate = {\n highlightVariantFields: boolean;\n expectedCSLPValues: Record<\"variant\" | \"base\", string>;\n};\n\n/**\n * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n (event) => {\n if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n updateVariantClasses(event.data);\n }\n }\n );\n}\nfunction updateVariantClasses({\n highlightVariantFields,\n expectedCSLPValues,\n}: OnAudienceModeVariantPatchUpdate): void {\n const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n const observers: MutationObserver[] = [];\n\n // Helper function to update element classes\n const updateElementClasses = (\n element: HTMLElement,\n dataCslp: string,\n observer?: MutationObserver\n ) => {\n if (!dataCslp) return;\n\n if (\n dataCslp.startsWith(\"v2:\") &&\n !element.classList.contains(\"visual-builder__variant-field\")\n ) {\n if (element.classList.contains(\"visual-builder__base-field\")) {\n element.classList.remove(\"visual-builder__base-field\");\n }\n if (highlightVariantFields) {\n element.classList.add(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n } else {\n element.classList.add(\"visual-builder__variant-field\");\n }\n } else if (\n !dataCslp.startsWith(\"v2:\") &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n element.classList.add(\"visual-builder__base-field\");\n } else if (\n dataCslp.startsWith(\"v2:\") &&\n variant &&\n !dataCslp.includes(variant) &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n element.classList.add(\"visual-builder__disabled-variant-field\");\n }\n if (!observer) return;\n // Disconnect this observer after processing\n observer.disconnect();\n const index = observers.indexOf(observer);\n if (index > -1) {\n observers.splice(index, 1);\n }\n };\n\n const addElementClasses = (element: HTMLElement) => {\n const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);\n\n if (!dataCslp) {\n //recursive call for child nodes\n element.childNodes.forEach((child) => {\n if (child instanceof HTMLElement) {\n addElementClasses(child);\n }\n });\n return;\n }\n //if element might have been updated by another observer\n if (\n dataCslp.startsWith(\"v2:\") &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n return;\n }\n // if element has not given variant/base class\n if (\n dataCslp.startsWith(\"v2:\") &&\n !element.classList.contains(\"visual-builder__variant-field\")\n ) {\n if (element.classList.contains(\"visual-builder__base-field\")) {\n element.classList.remove(\"visual-builder__base-field\");\n }\n if (highlightVariantFields) {\n element.classList.add(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n } else {\n element.classList.add(\"visual-builder__variant-field\");\n }\n } else if (!dataCslp.startsWith(\"v2:\")) {\n if (element.classList.contains(\"visual-builder__variant-field\")) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n }\n element.classList.add(\"visual-builder__base-field\");\n }\n\n //recursive call for child nodes\n element.childNodes.forEach((child) => {\n if (child instanceof HTMLElement) {\n addElementClasses(child);\n }\n });\n };\n\n // Create a separate observer for each element\n const elementsWithCslp = document.querySelectorAll(\n `[${DATA_CSLP_ATTR_SELECTOR}]`\n );\n elementsWithCslp.forEach((elementNode) => {\n const element = elementNode as HTMLElement;\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n (mutation.type === \"attributes\" &&\n mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) ||\n mutation.type === \"childList\"\n ) {\n if (mutation.addedNodes.length > 0) {\n mutation.addedNodes.forEach((node) => {\n if (node instanceof HTMLElement) {\n addElementClasses(node);\n }\n });\n }\n const dataCslp = element.getAttribute(\n DATA_CSLP_ATTR_SELECTOR\n );\n updateElementClasses(element, dataCslp || \"\", observer);\n }\n });\n });\n\n observers.push(observer);\n observer.observe(element, {\n attributes: true,\n childList: true, // Observe direct children\n subtree: true,\n });\n });\n\n setTimeout(() => {\n if (observers.length > 0) {\n observers.forEach((observer) => observer.disconnect());\n observers.length = 0;\n }\n }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":"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","names":["import_livePreviewEventManager","livePreviewPostMessage"]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { setHighlightVariantFields } from \"./useVariantsPostMessageEvent\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\ntype OnAudienceModeVariantPatchUpdate = {\n highlightVariantFields: boolean;\n expectedCSLPValues: Record<\"variant\" | \"base\", string>;\n};\n\n/**\n * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n (event) => {\n if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n setHighlightVariantFields(event.data.highlightVariantFields);\n updateVariantClasses();\n }\n }\n );\n}\nexport function updateVariantClasses(): void {\n const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;\n const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n const observers: MutationObserver[] = [];\n\n // Helper function to update element classes\n const updateElementClasses = (\n element: HTMLElement,\n dataCslp: string,\n observer?: MutationObserver\n ) => {\n if (!dataCslp) return;\n\n if (\n dataCslp.startsWith(\"v2:\") &&\n !element.classList.contains(\"visual-builder__variant-field\")\n ) {\n if (element.classList.contains(\"visual-builder__base-field\")) {\n element.classList.remove(\"visual-builder__base-field\");\n }\n const variantFieldClasses = [\"visual-builder__variant-field\"];\n if (highlightVariantFields) {\n variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n }\n element.classList.add(...variantFieldClasses);\n } else if (\n !dataCslp.startsWith(\"v2:\") &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n \"visual-builder__variant-field\"\n );\n element.classList.add(\"visual-builder__base-field\");\n } else if (\n dataCslp.startsWith(\"v2:\") &&\n variant &&\n !dataCslp.includes(variant) &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n \"visual-builder__variant-field\"\n );\n element.classList.add(\"visual-builder__disabled-variant-field\");\n }\n if (!observer) return;\n // Disconnect this observer after processing\n observer.disconnect();\n const index = observers.indexOf(observer);\n if (index > -1) {\n observers.splice(index, 1);\n }\n };\n\n const addElementClasses = (element: HTMLElement) => {\n const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);\n\n if (!dataCslp) {\n //recursive call for child nodes\n element.childNodes.forEach((child) => {\n if (child instanceof HTMLElement) {\n addElementClasses(child);\n }\n });\n return;\n }\n //if element might have been updated by another observer\n if (\n dataCslp.startsWith(\"v2:\") &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n return;\n }\n // if element has not given variant/base class\n if (\n dataCslp.startsWith(\"v2:\") &&\n !element.classList.contains(\"visual-builder__variant-field\")\n ) {\n if (element.classList.contains(\"visual-builder__base-field\")) {\n element.classList.remove(\"visual-builder__base-field\");\n }\n const variantFieldClasses = [\"visual-builder__variant-field\"];\n if (highlightVariantFields) {\n variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n }\n element.classList.add(...variantFieldClasses);\n } else if (!dataCslp.startsWith(\"v2:\")) {\n if (element.classList.contains(\"visual-builder__variant-field\")) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n \"visual-builder__variant-field\"\n );\n }\n element.classList.add(\"visual-builder__base-field\");\n }\n\n //recursive call for child nodes\n element.childNodes.forEach((child) => {\n if (child instanceof HTMLElement) {\n addElementClasses(child);\n }\n });\n };\n\n // Create a separate observer for each element\n const elementsWithCslp = document.querySelectorAll(\n `[${DATA_CSLP_ATTR_SELECTOR}]`\n );\n elementsWithCslp.forEach((elementNode) => {\n const element = elementNode as HTMLElement;\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n (mutation.type === \"attributes\" &&\n mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) ||\n mutation.type === \"childList\"\n ) {\n if (mutation.addedNodes.length > 0) {\n mutation.addedNodes.forEach((node) => {\n if (node instanceof HTMLElement) {\n addElementClasses(node);\n }\n });\n }\n const dataCslp = element.getAttribute(\n DATA_CSLP_ATTR_SELECTOR\n );\n updateElementClasses(element, dataCslp || \"\", observer);\n }\n });\n });\n\n observers.push(observer);\n // TODO: Check if we could add attributeFilter to the observer to only observe the attribute changes for the data-cslp attribute.\n observer.observe(element, {\n attributes: true,\n childList: true, // Observe direct children\n subtree: true,\n });\n });\n\n setTimeout(() => {\n if (observers.length > 0) {\n observers.forEach((observer) => observer.disconnect());\n observers.length = 0;\n }\n }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":"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","names":["import_livePreviewEventManager","livePreviewPostMessage"]}
|
|
@@ -2,5 +2,6 @@
|
|
|
2
2
|
* Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.
|
|
3
3
|
*/
|
|
4
4
|
declare function useRecalculateVariantDataCSLPValues(): void;
|
|
5
|
+
declare function updateVariantClasses(): void;
|
|
5
6
|
|
|
6
|
-
export { useRecalculateVariantDataCSLPValues };
|
|
7
|
+
export { updateVariantClasses, useRecalculateVariantDataCSLPValues };
|
|
@@ -2,5 +2,6 @@
|
|
|
2
2
|
* Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.
|
|
3
3
|
*/
|
|
4
4
|
declare function useRecalculateVariantDataCSLPValues(): void;
|
|
5
|
+
declare function updateVariantClasses(): void;
|
|
5
6
|
|
|
6
|
-
export { useRecalculateVariantDataCSLPValues };
|
|
7
|
+
export { updateVariantClasses, useRecalculateVariantDataCSLPValues };
|
|
@@ -6,6 +6,7 @@ import livePreviewPostMessage from "../../livePreview/eventManager/livePreviewEv
|
|
|
6
6
|
import { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from "../../livePreview/eventManager/livePreviewEventManager.constant.js";
|
|
7
7
|
import { DATA_CSLP_ATTR_SELECTOR } from "../utils/constants.js";
|
|
8
8
|
import { visualBuilderStyles } from "../visualBuilder.style.js";
|
|
9
|
+
import { setHighlightVariantFields } from "./useVariantsPostMessageEvent.js";
|
|
9
10
|
var VARIANT_UPDATE_DELAY_MS = 8e3;
|
|
10
11
|
function useRecalculateVariantDataCSLPValues() {
|
|
11
12
|
var _a;
|
|
@@ -13,15 +14,14 @@ function useRecalculateVariantDataCSLPValues() {
|
|
|
13
14
|
LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,
|
|
14
15
|
(event) => {
|
|
15
16
|
if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {
|
|
16
|
-
|
|
17
|
+
setHighlightVariantFields(event.data.highlightVariantFields);
|
|
18
|
+
updateVariantClasses();
|
|
17
19
|
}
|
|
18
20
|
}
|
|
19
21
|
);
|
|
20
22
|
}
|
|
21
|
-
function updateVariantClasses({
|
|
22
|
-
highlightVariantFields
|
|
23
|
-
expectedCSLPValues
|
|
24
|
-
}) {
|
|
23
|
+
function updateVariantClasses() {
|
|
24
|
+
const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;
|
|
25
25
|
const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;
|
|
26
26
|
const observers = [];
|
|
27
27
|
const updateElementClasses = (element, dataCslp, observer) => {
|
|
@@ -30,23 +30,20 @@ function updateVariantClasses({
|
|
|
30
30
|
if (element.classList.contains("visual-builder__base-field")) {
|
|
31
31
|
element.classList.remove("visual-builder__base-field");
|
|
32
32
|
}
|
|
33
|
+
const variantFieldClasses = ["visual-builder__variant-field"];
|
|
33
34
|
if (highlightVariantFields) {
|
|
34
|
-
|
|
35
|
-
visualBuilderStyles()["visual-builder__variant-field"],
|
|
36
|
-
"visual-builder__variant-field"
|
|
37
|
-
);
|
|
38
|
-
} else {
|
|
39
|
-
element.classList.add("visual-builder__variant-field");
|
|
35
|
+
variantFieldClasses.push(visualBuilderStyles()["visual-builder__variant-field-outline"]);
|
|
40
36
|
}
|
|
37
|
+
element.classList.add(...variantFieldClasses);
|
|
41
38
|
} else if (!dataCslp.startsWith("v2:") && element.classList.contains("visual-builder__variant-field")) {
|
|
42
39
|
element.classList.remove(
|
|
43
|
-
visualBuilderStyles()["visual-builder__variant-field"],
|
|
40
|
+
visualBuilderStyles()["visual-builder__variant-field-outline"],
|
|
44
41
|
"visual-builder__variant-field"
|
|
45
42
|
);
|
|
46
43
|
element.classList.add("visual-builder__base-field");
|
|
47
44
|
} else if (dataCslp.startsWith("v2:") && variant && !dataCslp.includes(variant) && element.classList.contains("visual-builder__variant-field")) {
|
|
48
45
|
element.classList.remove(
|
|
49
|
-
visualBuilderStyles()["visual-builder__variant-field"],
|
|
46
|
+
visualBuilderStyles()["visual-builder__variant-field-outline"],
|
|
50
47
|
"visual-builder__variant-field"
|
|
51
48
|
);
|
|
52
49
|
element.classList.add("visual-builder__disabled-variant-field");
|
|
@@ -75,18 +72,15 @@ function updateVariantClasses({
|
|
|
75
72
|
if (element.classList.contains("visual-builder__base-field")) {
|
|
76
73
|
element.classList.remove("visual-builder__base-field");
|
|
77
74
|
}
|
|
75
|
+
const variantFieldClasses = ["visual-builder__variant-field"];
|
|
78
76
|
if (highlightVariantFields) {
|
|
79
|
-
|
|
80
|
-
visualBuilderStyles()["visual-builder__variant-field"],
|
|
81
|
-
"visual-builder__variant-field"
|
|
82
|
-
);
|
|
83
|
-
} else {
|
|
84
|
-
element.classList.add("visual-builder__variant-field");
|
|
77
|
+
variantFieldClasses.push(visualBuilderStyles()["visual-builder__variant-field-outline"]);
|
|
85
78
|
}
|
|
79
|
+
element.classList.add(...variantFieldClasses);
|
|
86
80
|
} else if (!dataCslp.startsWith("v2:")) {
|
|
87
81
|
if (element.classList.contains("visual-builder__variant-field")) {
|
|
88
82
|
element.classList.remove(
|
|
89
|
-
visualBuilderStyles()["visual-builder__variant-field"],
|
|
83
|
+
visualBuilderStyles()["visual-builder__variant-field-outline"],
|
|
90
84
|
"visual-builder__variant-field"
|
|
91
85
|
);
|
|
92
86
|
}
|
|
@@ -136,6 +130,7 @@ function updateVariantClasses({
|
|
|
136
130
|
}, VARIANT_UPDATE_DELAY_MS);
|
|
137
131
|
}
|
|
138
132
|
export {
|
|
133
|
+
updateVariantClasses,
|
|
139
134
|
useRecalculateVariantDataCSLPValues
|
|
140
135
|
};
|
|
141
136
|
//# sourceMappingURL=useRecalculateVariantDataCSLPValues.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\ntype OnAudienceModeVariantPatchUpdate = {\n highlightVariantFields: boolean;\n expectedCSLPValues: Record<\"variant\" | \"base\", string>;\n};\n\n/**\n * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n (event) => {\n if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n updateVariantClasses(event.data);\n }\n }\n );\n}\nfunction updateVariantClasses({\n highlightVariantFields,\n expectedCSLPValues,\n}: OnAudienceModeVariantPatchUpdate): void {\n const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n const observers: MutationObserver[] = [];\n\n // Helper function to update element classes\n const updateElementClasses = (\n element: HTMLElement,\n dataCslp: string,\n observer?: MutationObserver\n ) => {\n if (!dataCslp) return;\n\n if (\n dataCslp.startsWith(\"v2:\") &&\n !element.classList.contains(\"visual-builder__variant-field\")\n ) {\n if (element.classList.contains(\"visual-builder__base-field\")) {\n element.classList.remove(\"visual-builder__base-field\");\n }\n if (highlightVariantFields) {\n element.classList.add(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n } else {\n element.classList.add(\"visual-builder__variant-field\");\n }\n } else if (\n !dataCslp.startsWith(\"v2:\") &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n element.classList.add(\"visual-builder__base-field\");\n } else if (\n dataCslp.startsWith(\"v2:\") &&\n variant &&\n !dataCslp.includes(variant) &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n element.classList.add(\"visual-builder__disabled-variant-field\");\n }\n if (!observer) return;\n // Disconnect this observer after processing\n observer.disconnect();\n const index = observers.indexOf(observer);\n if (index > -1) {\n observers.splice(index, 1);\n }\n };\n\n const addElementClasses = (element: HTMLElement) => {\n const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);\n\n if (!dataCslp) {\n //recursive call for child nodes\n element.childNodes.forEach((child) => {\n if (child instanceof HTMLElement) {\n addElementClasses(child);\n }\n });\n return;\n }\n //if element might have been updated by another observer\n if (\n dataCslp.startsWith(\"v2:\") &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n return;\n }\n // if element has not given variant/base class\n if (\n dataCslp.startsWith(\"v2:\") &&\n !element.classList.contains(\"visual-builder__variant-field\")\n ) {\n if (element.classList.contains(\"visual-builder__base-field\")) {\n element.classList.remove(\"visual-builder__base-field\");\n }\n if (highlightVariantFields) {\n element.classList.add(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n } else {\n element.classList.add(\"visual-builder__variant-field\");\n }\n } else if (!dataCslp.startsWith(\"v2:\")) {\n if (element.classList.contains(\"visual-builder__variant-field\")) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__variant-field\"\n );\n }\n element.classList.add(\"visual-builder__base-field\");\n }\n\n //recursive call for child nodes\n element.childNodes.forEach((child) => {\n if (child instanceof HTMLElement) {\n addElementClasses(child);\n }\n });\n };\n\n // Create a separate observer for each element\n const elementsWithCslp = document.querySelectorAll(\n `[${DATA_CSLP_ATTR_SELECTOR}]`\n );\n elementsWithCslp.forEach((elementNode) => {\n const element = elementNode as HTMLElement;\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n (mutation.type === \"attributes\" &&\n mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) ||\n mutation.type === \"childList\"\n ) {\n if (mutation.addedNodes.length > 0) {\n mutation.addedNodes.forEach((node) => {\n if (node instanceof HTMLElement) {\n addElementClasses(node);\n }\n });\n }\n const dataCslp = element.getAttribute(\n DATA_CSLP_ATTR_SELECTOR\n );\n updateElementClasses(element, dataCslp || \"\", observer);\n }\n });\n });\n\n observers.push(observer);\n observer.observe(element, {\n attributes: true,\n childList: true, // Observe direct children\n subtree: true,\n });\n });\n\n setTimeout(() => {\n if (observers.length > 0) {\n observers.forEach((observer) => observer.disconnect());\n observers.length = 0;\n }\n }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useRecalculateVariantDataCSLPValues.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport livePreviewPostMessage from \"../../livePreview/eventManager/livePreviewEventManager\";\nimport { LIVE_PREVIEW_POST_MESSAGE_EVENTS } from \"../../livePreview/eventManager/livePreviewEventManager.constant\";\nimport { DATA_CSLP_ATTR_SELECTOR } from \"../utils/constants\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport { setHighlightVariantFields } from \"./useVariantsPostMessageEvent\";\n\nconst VARIANT_UPDATE_DELAY_MS: Readonly<number> = 8000;\n\ntype OnAudienceModeVariantPatchUpdate = {\n highlightVariantFields: boolean;\n expectedCSLPValues: Record<\"variant\" | \"base\", string>;\n};\n\n/**\n * Registers a post message event listener for updating the variant / base classes in the live preview for audience mode.\n */\nexport function useRecalculateVariantDataCSLPValues(): void {\n livePreviewPostMessage?.on<OnAudienceModeVariantPatchUpdate>(\n LIVE_PREVIEW_POST_MESSAGE_EVENTS.VARIANT_PATCH,\n (event) => {\n if (VisualBuilder.VisualBuilderGlobalState.value.audienceMode) {\n setHighlightVariantFields(event.data.highlightVariantFields);\n updateVariantClasses();\n }\n }\n );\n}\nexport function updateVariantClasses(): void {\n const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;\n const variant = VisualBuilder.VisualBuilderGlobalState.value.variant;\n const observers: MutationObserver[] = [];\n\n // Helper function to update element classes\n const updateElementClasses = (\n element: HTMLElement,\n dataCslp: string,\n observer?: MutationObserver\n ) => {\n if (!dataCslp) return;\n\n if (\n dataCslp.startsWith(\"v2:\") &&\n !element.classList.contains(\"visual-builder__variant-field\")\n ) {\n if (element.classList.contains(\"visual-builder__base-field\")) {\n element.classList.remove(\"visual-builder__base-field\");\n }\n const variantFieldClasses = [\"visual-builder__variant-field\"];\n if (highlightVariantFields) {\n variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n }\n element.classList.add(...variantFieldClasses);\n } else if (\n !dataCslp.startsWith(\"v2:\") &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n \"visual-builder__variant-field\"\n );\n element.classList.add(\"visual-builder__base-field\");\n } else if (\n dataCslp.startsWith(\"v2:\") &&\n variant &&\n !dataCslp.includes(variant) &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n \"visual-builder__variant-field\"\n );\n element.classList.add(\"visual-builder__disabled-variant-field\");\n }\n if (!observer) return;\n // Disconnect this observer after processing\n observer.disconnect();\n const index = observers.indexOf(observer);\n if (index > -1) {\n observers.splice(index, 1);\n }\n };\n\n const addElementClasses = (element: HTMLElement) => {\n const dataCslp = element.getAttribute(DATA_CSLP_ATTR_SELECTOR);\n\n if (!dataCslp) {\n //recursive call for child nodes\n element.childNodes.forEach((child) => {\n if (child instanceof HTMLElement) {\n addElementClasses(child);\n }\n });\n return;\n }\n //if element might have been updated by another observer\n if (\n dataCslp.startsWith(\"v2:\") &&\n element.classList.contains(\"visual-builder__variant-field\")\n ) {\n return;\n }\n // if element has not given variant/base class\n if (\n dataCslp.startsWith(\"v2:\") &&\n !element.classList.contains(\"visual-builder__variant-field\")\n ) {\n if (element.classList.contains(\"visual-builder__base-field\")) {\n element.classList.remove(\"visual-builder__base-field\");\n }\n const variantFieldClasses = [\"visual-builder__variant-field\"];\n if (highlightVariantFields) {\n variantFieldClasses.push(visualBuilderStyles()[\"visual-builder__variant-field-outline\"]);\n }\n element.classList.add(...variantFieldClasses);\n } else if (!dataCslp.startsWith(\"v2:\")) {\n if (element.classList.contains(\"visual-builder__variant-field\")) {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n \"visual-builder__variant-field\"\n );\n }\n element.classList.add(\"visual-builder__base-field\");\n }\n\n //recursive call for child nodes\n element.childNodes.forEach((child) => {\n if (child instanceof HTMLElement) {\n addElementClasses(child);\n }\n });\n };\n\n // Create a separate observer for each element\n const elementsWithCslp = document.querySelectorAll(\n `[${DATA_CSLP_ATTR_SELECTOR}]`\n );\n elementsWithCslp.forEach((elementNode) => {\n const element = elementNode as HTMLElement;\n const observer = new MutationObserver((mutations) => {\n mutations.forEach((mutation) => {\n if (\n (mutation.type === \"attributes\" &&\n mutation.attributeName === DATA_CSLP_ATTR_SELECTOR) ||\n mutation.type === \"childList\"\n ) {\n if (mutation.addedNodes.length > 0) {\n mutation.addedNodes.forEach((node) => {\n if (node instanceof HTMLElement) {\n addElementClasses(node);\n }\n });\n }\n const dataCslp = element.getAttribute(\n DATA_CSLP_ATTR_SELECTOR\n );\n updateElementClasses(element, dataCslp || \"\", observer);\n }\n });\n });\n\n observers.push(observer);\n // TODO: Check if we could add attributeFilter to the observer to only observe the attribute changes for the data-cslp attribute.\n observer.observe(element, {\n attributes: true,\n childList: true, // Observe direct children\n subtree: true,\n });\n });\n\n setTimeout(() => {\n if (observers.length > 0) {\n observers.forEach((observer) => observer.disconnect());\n observers.length = 0;\n }\n }, VARIANT_UPDATE_DELAY_MS);\n}\n"],"mappings":"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","names":[]}
|
|
@@ -31,10 +31,14 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
31
31
|
var useVariantsPostMessageEvent_exports = {};
|
|
32
32
|
__export(useVariantsPostMessageEvent_exports, {
|
|
33
33
|
addVariantFieldClass: () => addVariantFieldClass,
|
|
34
|
+
debounceAddVariantFieldClass: () => debounceAddVariantFieldClass,
|
|
35
|
+
getHighlightVariantFieldsStatus: () => getHighlightVariantFieldsStatus,
|
|
34
36
|
removeVariantFieldClass: () => removeVariantFieldClass,
|
|
35
37
|
setAudienceMode: () => setAudienceMode,
|
|
38
|
+
setHighlightVariantFields: () => setHighlightVariantFields,
|
|
36
39
|
setLocale: () => setLocale,
|
|
37
40
|
setVariant: () => setVariant,
|
|
41
|
+
setVariantOrder: () => setVariantOrder,
|
|
38
42
|
useVariantFieldsPostMessageEvent: () => useVariantFieldsPostMessageEvent
|
|
39
43
|
});
|
|
40
44
|
module.exports = __toCommonJS(useVariantsPostMessageEvent_exports);
|
|
@@ -43,6 +47,8 @@ var import_visualBuilder = require("../visualBuilder.style.cjs");
|
|
|
43
47
|
var import_visualBuilderPostMessage = __toESM(require("../utils/visualBuilderPostMessage.cjs"), 1);
|
|
44
48
|
var import_postMessage = require("../utils/types/postMessage.types.cjs");
|
|
45
49
|
var import_fieldSchemaMap = require("../utils/fieldSchemaMap.cjs");
|
|
50
|
+
var import_useRecalculateVariantDataCSLPValues = require("./useRecalculateVariantDataCSLPValues.cjs");
|
|
51
|
+
var import_lodash_es = require("lodash-es");
|
|
46
52
|
var import_cslpdata = require("../../cslp/cslpdata.cjs");
|
|
47
53
|
function isLowerOrderVariant(variant_uid, dataCslp, variantOrder) {
|
|
48
54
|
if (!variantOrder || variantOrder.length === 0) {
|
|
@@ -56,16 +62,20 @@ function isLowerOrderVariant(variant_uid, dataCslp, variantOrder) {
|
|
|
56
62
|
}
|
|
57
63
|
return indexOfCslpVariant < indexOfCmsVariant;
|
|
58
64
|
}
|
|
59
|
-
function addVariantFieldClass(variant_uid
|
|
65
|
+
function addVariantFieldClass(variant_uid) {
|
|
66
|
+
const variantOrder = import__.VisualBuilder.VisualBuilderGlobalState.value.variantOrder;
|
|
67
|
+
const highlightVariantFields = import__.VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;
|
|
60
68
|
const elements = document.querySelectorAll(`[data-cslp]`);
|
|
61
69
|
elements.forEach((element) => {
|
|
62
70
|
const dataCslp = element.getAttribute("data-cslp");
|
|
63
71
|
if (!dataCslp) return;
|
|
64
72
|
if (dataCslp == null ? void 0 : dataCslp.includes(variant_uid)) {
|
|
65
|
-
highlightVariantFields && element.classList.add(
|
|
66
|
-
(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"]
|
|
67
|
-
);
|
|
68
73
|
element.classList.add("visual-builder__variant-field");
|
|
74
|
+
if (highlightVariantFields) {
|
|
75
|
+
element.classList.add(
|
|
76
|
+
(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"]
|
|
77
|
+
);
|
|
78
|
+
}
|
|
69
79
|
} else if (!dataCslp.startsWith("v2:")) {
|
|
70
80
|
element.classList.add("visual-builder__base-field");
|
|
71
81
|
} else if (isLowerOrderVariant(variant_uid, dataCslp, variantOrder)) {
|
|
@@ -75,14 +85,19 @@ function addVariantFieldClass(variant_uid, highlightVariantFields, variantOrder)
|
|
|
75
85
|
}
|
|
76
86
|
});
|
|
77
87
|
}
|
|
88
|
+
var debounceAddVariantFieldClass = (0, import_lodash_es.debounce)(
|
|
89
|
+
addVariantFieldClass,
|
|
90
|
+
1e3,
|
|
91
|
+
{ trailing: true }
|
|
92
|
+
);
|
|
78
93
|
function removeVariantFieldClass(onlyHighlighted = false) {
|
|
79
94
|
if (onlyHighlighted) {
|
|
80
95
|
const variantElements = document.querySelectorAll(
|
|
81
|
-
`.${(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"]}`
|
|
96
|
+
`.${(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"]}`
|
|
82
97
|
);
|
|
83
98
|
variantElements.forEach((element) => {
|
|
84
99
|
element.classList.remove(
|
|
85
|
-
(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"]
|
|
100
|
+
(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"]
|
|
86
101
|
);
|
|
87
102
|
});
|
|
88
103
|
} else {
|
|
@@ -93,7 +108,7 @@ function removeVariantFieldClass(onlyHighlighted = false) {
|
|
|
93
108
|
element.classList.remove(
|
|
94
109
|
"visual-builder__disabled-variant-field",
|
|
95
110
|
"visual-builder__variant-field",
|
|
96
|
-
(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field"],
|
|
111
|
+
(0, import_visualBuilder.visualBuilderStyles)()["visual-builder__variant-field-outline"],
|
|
97
112
|
"visual-builder__base-field",
|
|
98
113
|
"visual-builder__lower-order-variant-field"
|
|
99
114
|
);
|
|
@@ -109,13 +124,43 @@ function setVariant(uid) {
|
|
|
109
124
|
function setLocale(locale) {
|
|
110
125
|
import__.VisualBuilder.VisualBuilderGlobalState.value.locale = locale;
|
|
111
126
|
}
|
|
112
|
-
function
|
|
127
|
+
function setHighlightVariantFields(highlight) {
|
|
128
|
+
import__.VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields = highlight;
|
|
129
|
+
}
|
|
130
|
+
function setVariantOrder(variantOrder) {
|
|
131
|
+
import__.VisualBuilder.VisualBuilderGlobalState.value.variantOrder = variantOrder;
|
|
132
|
+
}
|
|
133
|
+
async function getHighlightVariantFieldsStatus() {
|
|
134
|
+
var _a;
|
|
135
|
+
try {
|
|
136
|
+
const result = await ((_a = import_visualBuilderPostMessage.default) == null ? void 0 : _a.send(
|
|
137
|
+
import_postMessage.VisualBuilderPostMessageEvents.GET_HIGHLIGHT_VARIANT_FIELDS_STATUS
|
|
138
|
+
));
|
|
139
|
+
return result ?? {
|
|
140
|
+
highlightVariantFields: false
|
|
141
|
+
};
|
|
142
|
+
} catch (error) {
|
|
143
|
+
console.error("Failed to get highlight variant fields status:", error);
|
|
144
|
+
return {
|
|
145
|
+
highlightVariantFields: false
|
|
146
|
+
};
|
|
147
|
+
}
|
|
148
|
+
}
|
|
149
|
+
function useVariantFieldsPostMessageEvent({ isSSR }) {
|
|
113
150
|
var _a, _b, _c, _d, _e;
|
|
114
151
|
(_a = import_visualBuilderPostMessage.default) == null ? void 0 : _a.on(
|
|
115
152
|
import_postMessage.VisualBuilderPostMessageEvents.GET_VARIANT_ID,
|
|
116
153
|
(event) => {
|
|
117
|
-
|
|
154
|
+
const selectedVariant = event.data.variant;
|
|
155
|
+
setVariant(selectedVariant);
|
|
118
156
|
import_fieldSchemaMap.FieldSchemaMap.clear();
|
|
157
|
+
if (isSSR) {
|
|
158
|
+
if (selectedVariant) {
|
|
159
|
+
addVariantFieldClass(selectedVariant);
|
|
160
|
+
}
|
|
161
|
+
} else {
|
|
162
|
+
(0, import_useRecalculateVariantDataCSLPValues.updateVariantClasses)();
|
|
163
|
+
}
|
|
119
164
|
}
|
|
120
165
|
);
|
|
121
166
|
(_b = import_visualBuilderPostMessage.default) == null ? void 0 : _b.on(
|
|
@@ -133,11 +178,11 @@ function useVariantFieldsPostMessageEvent() {
|
|
|
133
178
|
(_d = import_visualBuilderPostMessage.default) == null ? void 0 : _d.on(
|
|
134
179
|
import_postMessage.VisualBuilderPostMessageEvents.SHOW_VARIANT_FIELDS,
|
|
135
180
|
(event) => {
|
|
181
|
+
setHighlightVariantFields(event.data.variant_data.highlightVariantFields);
|
|
182
|
+
setVariantOrder(event.data.variant_data.variantOrder || []);
|
|
136
183
|
removeVariantFieldClass();
|
|
137
184
|
addVariantFieldClass(
|
|
138
|
-
event.data.variant_data.variant
|
|
139
|
-
event.data.variant_data.highlightVariantFields,
|
|
140
|
-
event.data.variant_data.variantOrder
|
|
185
|
+
event.data.variant_data.variant
|
|
141
186
|
);
|
|
142
187
|
}
|
|
143
188
|
);
|
|
@@ -145,6 +190,7 @@ function useVariantFieldsPostMessageEvent() {
|
|
|
145
190
|
import_postMessage.VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,
|
|
146
191
|
(event) => {
|
|
147
192
|
var _a2;
|
|
193
|
+
setHighlightVariantFields(false);
|
|
148
194
|
removeVariantFieldClass((_a2 = event == null ? void 0 : event.data) == null ? void 0 : _a2.onlyHighlighted);
|
|
149
195
|
}
|
|
150
196
|
);
|
|
@@ -152,10 +198,14 @@ function useVariantFieldsPostMessageEvent() {
|
|
|
152
198
|
// Annotate the CommonJS export names for ESM import in node:
|
|
153
199
|
0 && (module.exports = {
|
|
154
200
|
addVariantFieldClass,
|
|
201
|
+
debounceAddVariantFieldClass,
|
|
202
|
+
getHighlightVariantFieldsStatus,
|
|
155
203
|
removeVariantFieldClass,
|
|
156
204
|
setAudienceMode,
|
|
205
|
+
setHighlightVariantFields,
|
|
157
206
|
setLocale,
|
|
158
207
|
setVariant,
|
|
208
|
+
setVariantOrder,
|
|
159
209
|
useVariantFieldsPostMessageEvent
|
|
160
210
|
});
|
|
161
211
|
//# sourceMappingURL=useVariantsPostMessageEvent.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\n\ninterface VariantFieldsEvent {\n data: {\n variant_data: {\n variant: string;\n highlightVariantFields: boolean;\n variantOrder: string[];\n };\n };\n}\ninterface RemoveVariantFieldsEvent {\n data: {\n onlyHighlighted?: boolean;\n };\n}\n\ninterface AudienceEvent {\n data: {\n audienceMode: boolean;\n };\n}\ninterface VariantEvent {\n data: {\n variant: string | null;\n };\n}\n\ninterface LocaleEvent {\n data: {\n locale: string;\n };\n}\n\nfunction isLowerOrderVariant(variant_uid: string, dataCslp: string, variantOrder: string[]): boolean {\n if(!variantOrder || variantOrder.length === 0) {\n return false;\n }\n const {variant: cslpVariant} = extractDetailsFromCslp(dataCslp);\n const indexOfCmsVariant = variantOrder.lastIndexOf(variant_uid);\n const indexOfCslpVariant = variantOrder.lastIndexOf(cslpVariant || \"\");\n if(indexOfCslpVariant < 0) {\n return false;\n }\n return indexOfCslpVariant < indexOfCmsVariant;\n}\n\nexport function addVariantFieldClass(\n variant_uid: string,\n highlightVariantFields: boolean,\n variantOrder: string[]\n): void {\n const elements = document.querySelectorAll(`[data-cslp]`);\n elements.forEach((element) => {\n const dataCslp = element.getAttribute(\"data-cslp\");\n if (!dataCslp) return;\n\n if (dataCslp?.includes(variant_uid)) {\n highlightVariantFields &&\n element.classList.add(\n visualBuilderStyles()[\"visual-builder__variant-field\"]\n );\n element.classList.add(\"visual-builder__variant-field\");\n } else if (!dataCslp.startsWith(\"v2:\")) {\n element.classList.add(\"visual-builder__base-field\");\n } \n else if (isLowerOrderVariant(variant_uid, dataCslp, variantOrder)) {\n element.classList.add(\"visual-builder__variant-field\", \"visual-builder__lower-order-variant-field\");\n }\n else {\n element.classList.add(\"visual-builder__disabled-variant-field\");\n }\n });\n}\n\nexport function removeVariantFieldClass(\n onlyHighlighted: boolean = false\n): void {\n if (onlyHighlighted) {\n const variantElements = document.querySelectorAll(\n `.${visualBuilderStyles()[\"visual-builder__variant-field\"]}`\n );\n variantElements.forEach((element) => {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field\"]\n );\n });\n } else {\n const variantAndBaseFieldElements = document.querySelectorAll(\n \".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field, .visual-builder__lower-order-variant-field\" \n );\n variantAndBaseFieldElements.forEach((element) => {\n element.classList.remove(\n \"visual-builder__disabled-variant-field\",\n \"visual-builder__variant-field\",\n visualBuilderStyles()[\"visual-builder__variant-field\"],\n \"visual-builder__base-field\",\n \"visual-builder__lower-order-variant-field\"\n );\n });\n }\n}\n\nexport function setAudienceMode(mode: boolean): void {\n VisualBuilder.VisualBuilderGlobalState.value.audienceMode = mode;\n}\nexport function setVariant(uid: string | null): void {\n VisualBuilder.VisualBuilderGlobalState.value.variant = uid;\n}\nexport function setLocale(locale: string): void {\n VisualBuilder.VisualBuilderGlobalState.value.locale = locale;\n}\n\nexport function useVariantFieldsPostMessageEvent(): void {\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.GET_VARIANT_ID,\n (event: VariantEvent) => {\n setVariant(event.data.variant);\n // clear field schema when variant is changed.\n // this is required as we cache field schema\n // which contain a key isUnlinkedVariant.\n // This key can change when variant is changed,\n // so clear the field schema cache\n FieldSchemaMap.clear();\n }\n );\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.GET_LOCALE,\n (event: LocaleEvent) => {\n setLocale(event.data.locale);\n }\n );\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.SET_AUDIENCE_MODE,\n (event: AudienceEvent) => {\n setAudienceMode(event.data.audienceMode);\n }\n );\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.SHOW_VARIANT_FIELDS,\n (event: VariantFieldsEvent) => {\n removeVariantFieldClass();\n addVariantFieldClass(\n event.data.variant_data.variant,\n event.data.variant_data.highlightVariantFields,\n event.data.variant_data.variantOrder\n );\n }\n );\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,\n (event: RemoveVariantFieldsEvent) => {\n removeVariantFieldClass(event?.data?.onlyHighlighted);\n }\n );\n}\n"],"mappings":"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","names":["visualBuilderPostMessage","_a"]}
|
|
1
|
+
{"version":3,"sources":["../../../../src/visualBuilder/eventManager/useVariantsPostMessageEvent.ts"],"sourcesContent":["import { VisualBuilder } from \"..\";\nimport { visualBuilderStyles } from \"../visualBuilder.style\";\nimport visualBuilderPostMessage from \"../utils/visualBuilderPostMessage\";\nimport { VisualBuilderPostMessageEvents } from \"../utils/types/postMessage.types\";\nimport { FieldSchemaMap } from \"../utils/fieldSchemaMap\";\nimport { updateVariantClasses } from \"./useRecalculateVariantDataCSLPValues\";\nimport { debounce } from \"lodash-es\";\nimport { extractDetailsFromCslp } from \"../../cslp/cslpdata\";\n\ninterface VariantFieldsEvent {\n data: {\n variant_data: {\n variant: string;\n highlightVariantFields: boolean;\n variantOrder: string[];\n };\n };\n}\ninterface RemoveVariantFieldsEvent {\n data: {\n onlyHighlighted?: boolean;\n };\n}\n\ninterface AudienceEvent {\n data: {\n audienceMode: boolean;\n };\n}\ninterface VariantEvent {\n data: {\n variant: string | null;\n };\n}\n\ninterface LocaleEvent {\n data: {\n locale: string;\n };\n}\n\nfunction isLowerOrderVariant(variant_uid: string, dataCslp: string, variantOrder: string[]): boolean {\n if(!variantOrder || variantOrder.length === 0) {\n return false;\n }\n const {variant: cslpVariant} = extractDetailsFromCslp(dataCslp);\n const indexOfCmsVariant = variantOrder.lastIndexOf(variant_uid);\n const indexOfCslpVariant = variantOrder.lastIndexOf(cslpVariant || \"\");\n if(indexOfCslpVariant < 0) {\n return false;\n }\n return indexOfCslpVariant < indexOfCmsVariant;\n}\n\n\nexport function addVariantFieldClass(\n variant_uid: string\n): void {\n const variantOrder = VisualBuilder.VisualBuilderGlobalState.value.variantOrder;\n const highlightVariantFields = VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields;\n const elements = document.querySelectorAll(`[data-cslp]`);\n elements.forEach((element) => {\n const dataCslp = element.getAttribute(\"data-cslp\");\n if (!dataCslp) return;\n\n if (dataCslp?.includes(variant_uid)) {\n element.classList.add(\"visual-builder__variant-field\");\n if (highlightVariantFields) {\n element.classList.add(\n visualBuilderStyles()[\"visual-builder__variant-field-outline\"]\n );\n }\n } else if (!dataCslp.startsWith(\"v2:\")) {\n element.classList.add(\"visual-builder__base-field\");\n } \n else if (isLowerOrderVariant(variant_uid, dataCslp, variantOrder)) {\n element.classList.add(\"visual-builder__variant-field\", \"visual-builder__lower-order-variant-field\");\n }\n else {\n element.classList.add(\"visual-builder__disabled-variant-field\");\n }\n });\n}\n\nexport const debounceAddVariantFieldClass = debounce(\n addVariantFieldClass,\n 1000,\n { trailing: true }\n) as (variant_uid: string) => void;\n\nexport function removeVariantFieldClass(\n onlyHighlighted: boolean = false\n): void {\n if (onlyHighlighted) {\n const variantElements = document.querySelectorAll(\n `.${visualBuilderStyles()[\"visual-builder__variant-field-outline\"]}`\n );\n variantElements.forEach((element) => {\n element.classList.remove(\n visualBuilderStyles()[\"visual-builder__variant-field-outline\"]\n );\n });\n } else {\n const variantAndBaseFieldElements = document.querySelectorAll(\n \".visual-builder__disabled-variant-field, .visual-builder__variant-field, .visual-builder__base-field, .visual-builder__lower-order-variant-field\" \n );\n variantAndBaseFieldElements.forEach((element) => {\n element.classList.remove(\n \"visual-builder__disabled-variant-field\",\n \"visual-builder__variant-field\",\n visualBuilderStyles()[\"visual-builder__variant-field-outline\"],\n \"visual-builder__base-field\",\n \"visual-builder__lower-order-variant-field\"\n );\n });\n }\n}\n\nexport function setAudienceMode(mode: boolean): void {\n VisualBuilder.VisualBuilderGlobalState.value.audienceMode = mode;\n}\nexport function setVariant(uid: string | null): void {\n VisualBuilder.VisualBuilderGlobalState.value.variant = uid;\n}\nexport function setLocale(locale: string): void {\n VisualBuilder.VisualBuilderGlobalState.value.locale = locale;\n}\nexport function setHighlightVariantFields(highlight: boolean): void {\n VisualBuilder.VisualBuilderGlobalState.value.highlightVariantFields = highlight;\n}\nexport function setVariantOrder(variantOrder: string[]): void {\n VisualBuilder.VisualBuilderGlobalState.value.variantOrder = variantOrder;\n}\n\ninterface GetHighlightVariantFieldsStatusResponse {\n highlightVariantFields: boolean;\n}\nexport async function getHighlightVariantFieldsStatus(): Promise<GetHighlightVariantFieldsStatusResponse> {\n try {\n const result = await visualBuilderPostMessage?.send<GetHighlightVariantFieldsStatusResponse>(\n VisualBuilderPostMessageEvents.GET_HIGHLIGHT_VARIANT_FIELDS_STATUS\n ); \n return result ?? {\n highlightVariantFields: false,\n };\n } catch (error) {\n console.error(\"Failed to get highlight variant fields status:\", error);\n return {\n highlightVariantFields: false,\n };\n }\n}\n\nexport function useVariantFieldsPostMessageEvent({ isSSR }: { isSSR: boolean }): void {\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.GET_VARIANT_ID,\n (event: VariantEvent) => {\n const selectedVariant = event.data.variant;\n setVariant(selectedVariant);\n // clear field schema when variant is changed.\n // this is required as we cache field schema\n // which contain a key isUnlinkedVariant.\n // This key can change when variant is changed,\n // so clear the field schema cache\n FieldSchemaMap.clear();\n if (isSSR) {\n if (selectedVariant) {\n addVariantFieldClass(selectedVariant);\n }\n } else {\n // recalculate and apply classes\n updateVariantClasses();\n }\n }\n );\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.GET_LOCALE,\n (event: LocaleEvent) => {\n setLocale(event.data.locale);\n }\n );\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.SET_AUDIENCE_MODE,\n (event: AudienceEvent) => {\n setAudienceMode(event.data.audienceMode);\n }\n );\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.SHOW_VARIANT_FIELDS,\n (event: VariantFieldsEvent) => {\n setHighlightVariantFields(event.data.variant_data.highlightVariantFields);\n setVariantOrder(event.data.variant_data.variantOrder || []);\n removeVariantFieldClass();\n addVariantFieldClass(\n event.data.variant_data.variant\n );\n }\n );\n visualBuilderPostMessage?.on(\n VisualBuilderPostMessageEvents.REMOVE_VARIANT_FIELDS,\n (event: RemoveVariantFieldsEvent) => {\n setHighlightVariantFields(false);\n removeVariantFieldClass(event?.data?.onlyHighlighted);\n }\n );\n}\n"],"mappings":"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","names":["visualBuilderPostMessage","_a"]}
|
|
@@ -1,8 +1,17 @@
|
|
|
1
|
-
declare function addVariantFieldClass(variant_uid: string
|
|
1
|
+
declare function addVariantFieldClass(variant_uid: string): void;
|
|
2
|
+
declare const debounceAddVariantFieldClass: (variant_uid: string) => void;
|
|
2
3
|
declare function removeVariantFieldClass(onlyHighlighted?: boolean): void;
|
|
3
4
|
declare function setAudienceMode(mode: boolean): void;
|
|
4
5
|
declare function setVariant(uid: string | null): void;
|
|
5
6
|
declare function setLocale(locale: string): void;
|
|
6
|
-
declare function
|
|
7
|
+
declare function setHighlightVariantFields(highlight: boolean): void;
|
|
8
|
+
declare function setVariantOrder(variantOrder: string[]): void;
|
|
9
|
+
interface GetHighlightVariantFieldsStatusResponse {
|
|
10
|
+
highlightVariantFields: boolean;
|
|
11
|
+
}
|
|
12
|
+
declare function getHighlightVariantFieldsStatus(): Promise<GetHighlightVariantFieldsStatusResponse>;
|
|
13
|
+
declare function useVariantFieldsPostMessageEvent({ isSSR }: {
|
|
14
|
+
isSSR: boolean;
|
|
15
|
+
}): void;
|
|
7
16
|
|
|
8
|
-
export { addVariantFieldClass, removeVariantFieldClass, setAudienceMode, setLocale, setVariant, useVariantFieldsPostMessageEvent };
|
|
17
|
+
export { addVariantFieldClass, debounceAddVariantFieldClass, getHighlightVariantFieldsStatus, removeVariantFieldClass, setAudienceMode, setHighlightVariantFields, setLocale, setVariant, setVariantOrder, useVariantFieldsPostMessageEvent };
|
|
@@ -1,8 +1,17 @@
|
|
|
1
|
-
declare function addVariantFieldClass(variant_uid: string
|
|
1
|
+
declare function addVariantFieldClass(variant_uid: string): void;
|
|
2
|
+
declare const debounceAddVariantFieldClass: (variant_uid: string) => void;
|
|
2
3
|
declare function removeVariantFieldClass(onlyHighlighted?: boolean): void;
|
|
3
4
|
declare function setAudienceMode(mode: boolean): void;
|
|
4
5
|
declare function setVariant(uid: string | null): void;
|
|
5
6
|
declare function setLocale(locale: string): void;
|
|
6
|
-
declare function
|
|
7
|
+
declare function setHighlightVariantFields(highlight: boolean): void;
|
|
8
|
+
declare function setVariantOrder(variantOrder: string[]): void;
|
|
9
|
+
interface GetHighlightVariantFieldsStatusResponse {
|
|
10
|
+
highlightVariantFields: boolean;
|
|
11
|
+
}
|
|
12
|
+
declare function getHighlightVariantFieldsStatus(): Promise<GetHighlightVariantFieldsStatusResponse>;
|
|
13
|
+
declare function useVariantFieldsPostMessageEvent({ isSSR }: {
|
|
14
|
+
isSSR: boolean;
|
|
15
|
+
}): void;
|
|
7
16
|
|
|
8
|
-
export { addVariantFieldClass, removeVariantFieldClass, setAudienceMode, setLocale, setVariant, useVariantFieldsPostMessageEvent };
|
|
17
|
+
export { addVariantFieldClass, debounceAddVariantFieldClass, getHighlightVariantFieldsStatus, removeVariantFieldClass, setAudienceMode, setHighlightVariantFields, setLocale, setVariant, setVariantOrder, useVariantFieldsPostMessageEvent };
|