@useinsider/guido 1.0.3-beta.ea69f4a → 1.0.3-beta.f2389d0
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 +3 -0
- package/dist/components/Guido.vue.js +1 -1
- package/dist/components/organisms/LoadingWrapper.vue.js +1 -1
- package/dist/components/organisms/header/RightSlot.vue2.js +13 -13
- package/dist/composables/useActionsApi.js +23 -32
- package/dist/composables/useStripo.js +46 -48
- package/dist/extensions/Blocks/Items/controls/name/trimming.js +25 -25
- package/dist/extensions/Blocks/Items/controls/price/priceOrientation.js +92 -0
- package/dist/extensions/Blocks/Items/controls/settingsControl.js +94 -90
- package/dist/extensions/Blocks/Items/enums/controlEnums.js +2 -2
- package/dist/extensions/Blocks/Items/enums/productEnums.js +3 -2
- package/dist/extensions/Blocks/Items/enums/settingsEnums.js +3 -2
- package/dist/extensions/Blocks/Items/extension.js +7 -6
- package/dist/extensions/Blocks/Items/layouts/horizontal.html.js +2 -2
- package/dist/extensions/Blocks/Items/layouts/vertical.html.js +17 -5
- package/dist/extensions/Blocks/Items/settingsPanel.js +25 -24
- package/dist/extensions/Blocks/Items/store/items-block.js +8 -4
- package/dist/extensions/Blocks/Items/template.js +65 -59
- package/dist/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.js +35 -26
- package/dist/extensions/Blocks/Items/utils/updateAttributes.js +29 -27
- package/dist/extensions/Blocks/Unsubscribe/block.js +34 -30
- package/dist/guido.css +1 -1
- package/dist/src/composables/useActionsApi.d.ts +0 -1
- package/dist/src/extensions/Blocks/Items/controls/price/priceOrientation.d.ts +15 -0
- package/dist/src/extensions/Blocks/Items/enums/controlEnums.d.ts +1 -0
- package/dist/src/extensions/Blocks/Items/enums/productEnums.d.ts +1 -0
- package/dist/src/extensions/Blocks/Items/enums/settingsEnums.d.ts +1 -0
- package/dist/src/extensions/Blocks/Items/store/items-block.d.ts +2 -0
- package/dist/src/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.d.ts +6 -0
- package/dist/src/extensions/Blocks/Unsubscribe/block.d.ts +3 -4
- package/package.json +3 -1
- package/dist/composables/useTimerClone.js +0 -67
- package/dist/src/composables/useTimerClone.d.ts +0 -5
package/README.md
CHANGED
|
@@ -600,6 +600,9 @@ Create a `.env` file with the following variables: (You can get env variables fr
|
|
|
600
600
|
VITE_STRIPO_PLUGIN_ID=your_plugin_id
|
|
601
601
|
VITE_STRIPO_SECRET_KEY=your_secret_key
|
|
602
602
|
VITE_STRIPO_ROLE=your_role
|
|
603
|
+
|
|
604
|
+
# Playwright Test Configuration (Optional - for local debugging only)
|
|
605
|
+
HEADED=false # Set to 'true' to run tests with visible browser
|
|
603
606
|
```
|
|
604
607
|
|
|
605
608
|
### Project Structure
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as H, ref as
|
|
1
|
+
import { defineComponent as H, ref as m, computed as _ } from "vue";
|
|
2
2
|
import { useConfig as h } from "../../../composables/useConfig.js";
|
|
3
3
|
import { useExport as V } from "../../../composables/useExport.js";
|
|
4
4
|
import { useTestEmailClick as x } from "../../../composables/useGuidoActions.js";
|
|
@@ -10,25 +10,25 @@ import { getTooltipOptions as O } from "../../../utils/tooltipUtils.js";
|
|
|
10
10
|
import { InButtonV2 as A } from "@useinsider/design-system-vue";
|
|
11
11
|
const J = /* @__PURE__ */ H({
|
|
12
12
|
__name: "RightSlot",
|
|
13
|
-
setup(k, { expose:
|
|
14
|
-
const { config:
|
|
15
|
-
if (
|
|
13
|
+
setup(k, { expose: c }) {
|
|
14
|
+
const { config: u } = h(), { exportHtml: r } = V(), { save: n } = E(), { openVersionHistory: i, closeVersionHistory: a } = w(), o = C(), t = T(), e = m(!1), s = m(!1), f = x(), v = () => {
|
|
15
|
+
if (o.isVersionHistoryOpen) {
|
|
16
16
|
a();
|
|
17
17
|
return;
|
|
18
18
|
}
|
|
19
19
|
i();
|
|
20
|
-
},
|
|
20
|
+
}, d = async () => {
|
|
21
21
|
e.value = !0, await r(), e.value = !1;
|
|
22
|
-
},
|
|
23
|
-
|
|
24
|
-
},
|
|
25
|
-
s.value = !0,
|
|
26
|
-
const g = await n(
|
|
27
|
-
return s.value = !1,
|
|
22
|
+
}, y = () => {
|
|
23
|
+
o.isSaveAsTemplateDrawerOpen = !0;
|
|
24
|
+
}, S = _(() => o.isVersionHistoryOpen ? t("newsletter.close-version-history") : t("newsletter.version-history")), l = async (p) => {
|
|
25
|
+
s.value = !0, o.loadingStatus = !0;
|
|
26
|
+
const g = await n(p);
|
|
27
|
+
return s.value = !1, p && (o.loadingStatus = !1), g;
|
|
28
28
|
};
|
|
29
|
-
return
|
|
29
|
+
return c({
|
|
30
30
|
handleSave: l
|
|
31
|
-
}), { __sfc: !0, config:
|
|
31
|
+
}), { __sfc: !0, config: u, exportHtml: r, save: n, openVersionHistory: i, closeVersionHistory: a, editorStore: o, trans: t, isExporting: e, isSaving: s, testEmailClick: f, handleVersionHistory: v, handleExport: d, handleSaveAs: y, versionHistoryTooltipText: S, handleSave: l, getTooltipOptions: O, InButtonV2: A };
|
|
32
32
|
}
|
|
33
33
|
});
|
|
34
34
|
export {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { useToaster as
|
|
1
|
+
import { useToaster as g } from "./useToaster.js";
|
|
2
2
|
const A = () => {
|
|
3
|
-
const { handleError: l } =
|
|
3
|
+
const { handleError: l } = g(), n = (t = {}) => new Promise((e, a) => {
|
|
4
4
|
const i = { ...{
|
|
5
5
|
minimize: !0,
|
|
6
6
|
utmEntity: {
|
|
@@ -20,13 +20,13 @@ const A = () => {
|
|
|
20
20
|
forceAmp: !1,
|
|
21
21
|
resetDataSavedFlag: !1,
|
|
22
22
|
disableLineHeightsReplace: !0
|
|
23
|
-
}, ...
|
|
24
|
-
callback: (
|
|
25
|
-
|
|
26
|
-
html:
|
|
27
|
-
ampHtml:
|
|
28
|
-
ampErrors:
|
|
29
|
-
displayConditions:
|
|
23
|
+
}, ...t }, m = {
|
|
24
|
+
callback: (s, c, p, u, d) => {
|
|
25
|
+
s ? a(s) : e({
|
|
26
|
+
html: c,
|
|
27
|
+
ampHtml: p,
|
|
28
|
+
ampErrors: u,
|
|
29
|
+
displayConditions: d
|
|
30
30
|
});
|
|
31
31
|
},
|
|
32
32
|
...i
|
|
@@ -34,53 +34,44 @@ const A = () => {
|
|
|
34
34
|
window.StripoEditorApi.actionsApi.compileEmail(m);
|
|
35
35
|
});
|
|
36
36
|
return {
|
|
37
|
-
getCompiledEmail:
|
|
38
|
-
getTemplateData: () => new Promise((
|
|
39
|
-
const
|
|
37
|
+
getCompiledEmail: n,
|
|
38
|
+
getTemplateData: () => new Promise((t) => {
|
|
39
|
+
const e = ({ html: a, css: o, width: i, height: r, utmParams: m, syncModulesIds: s }) => t({
|
|
40
40
|
html: a,
|
|
41
41
|
css: o,
|
|
42
42
|
width: i,
|
|
43
43
|
height: r,
|
|
44
44
|
utmParams: m,
|
|
45
|
-
syncModulesIds:
|
|
45
|
+
syncModulesIds: s
|
|
46
46
|
});
|
|
47
|
-
window.StripoEditorApi.actionsApi.getTemplateData(
|
|
47
|
+
window.StripoEditorApi.actionsApi.getTemplateData(e);
|
|
48
48
|
}),
|
|
49
|
-
activateCustomViewStyles: (
|
|
50
|
-
window.StripoEditorApi.actionsApi.activateCustomViewStyles(
|
|
49
|
+
activateCustomViewStyles: (t = !0) => {
|
|
50
|
+
window.StripoEditorApi.actionsApi.activateCustomViewStyles(t);
|
|
51
51
|
},
|
|
52
|
-
getPreviewData: async (
|
|
52
|
+
getPreviewData: async (t) => {
|
|
53
53
|
try {
|
|
54
54
|
const {
|
|
55
|
-
html:
|
|
55
|
+
html: e,
|
|
56
56
|
displayConditions: a,
|
|
57
57
|
ampHtml: o = "",
|
|
58
58
|
ampErrors: i = []
|
|
59
|
-
} = await
|
|
59
|
+
} = await n({ minimize: !1, resetDataSavedFlag: !1, ...t });
|
|
60
60
|
return {
|
|
61
|
-
html:
|
|
61
|
+
html: e,
|
|
62
62
|
ampHtml: o,
|
|
63
63
|
ampErrors: i,
|
|
64
64
|
displayConditions: a
|
|
65
65
|
};
|
|
66
|
-
} catch (
|
|
67
|
-
return l(
|
|
66
|
+
} catch (e) {
|
|
67
|
+
return l(e, "Error loading preview"), {
|
|
68
68
|
html: "",
|
|
69
69
|
ampHtml: "",
|
|
70
70
|
ampErrors: [],
|
|
71
71
|
displayConditions: []
|
|
72
72
|
};
|
|
73
73
|
}
|
|
74
|
-
}
|
|
75
|
-
updateTimerInClonedTemplate: () => new Promise((e) => {
|
|
76
|
-
try {
|
|
77
|
-
window.StripoEditorApi.actionsApi.updateTimerInClonedTemplate((t, a) => {
|
|
78
|
-
t ? (l(t, "Failed to update timer in cloned template"), e(null)) : e(a || null);
|
|
79
|
-
});
|
|
80
|
-
} catch (t) {
|
|
81
|
-
l(t, "Failed to call updateTimerInClonedTemplate"), e(null);
|
|
82
|
-
}
|
|
83
|
-
})
|
|
74
|
+
}
|
|
84
75
|
};
|
|
85
76
|
};
|
|
86
77
|
export {
|
|
@@ -1,26 +1,25 @@
|
|
|
1
|
-
import { useActionsApi as
|
|
2
|
-
import { useBlocksConfig as
|
|
3
|
-
import { useConfig as
|
|
4
|
-
import { useCustomInterfaceAppearance as
|
|
5
|
-
import { useStripoEventHandler as
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import
|
|
10
|
-
import
|
|
11
|
-
import {
|
|
12
|
-
import
|
|
13
|
-
|
|
14
|
-
const
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
const e = P(), { html: s, css: f, forceRecreate: a } = i, { baseBlocks: t, extensions: d } = await E();
|
|
1
|
+
import { useActionsApi as w } from "./useActionsApi.js";
|
|
2
|
+
import { useBlocksConfig as b } from "./useBlocksConfig.js";
|
|
3
|
+
import { useConfig as k } from "./useConfig.js";
|
|
4
|
+
import { useCustomInterfaceAppearance as V } from "./useCustomInterfaceAppearance.js";
|
|
5
|
+
import { useStripoEventHandler as _ } from "./useStripoEventHandler.js";
|
|
6
|
+
import { useToaster as B } from "./useToaster.js";
|
|
7
|
+
import { displayConditions as T } from "../enums/displayConditions.js";
|
|
8
|
+
import { useStripoApi as A } from "../services/stripoApi.js";
|
|
9
|
+
import F from "../static/styles/customEditorStyle.css.js";
|
|
10
|
+
import { useEditorStore as M } from "../stores/editor.js";
|
|
11
|
+
import { dynamicContentToMergeTags as U } from "../utils/genericUtil.js";
|
|
12
|
+
import v from "../package.json.js";
|
|
13
|
+
const J = (c) => {
|
|
14
|
+
const { config: u } = k(), { handleError: l } = B(), { getToken: f, getCustomFonts: y } = A(), { handleEvent: S } = _(), { getStripoBlocksConfig: C } = b(), E = async (i, r = []) => {
|
|
15
|
+
var m, g;
|
|
16
|
+
const t = M(), { html: n, css: p, forceRecreate: a } = i, { baseBlocks: e, extensions: d } = await C();
|
|
18
17
|
window.UIEditor.initEditor(
|
|
19
18
|
document.querySelector("#guido-editor"),
|
|
20
19
|
{
|
|
21
20
|
metadata: c,
|
|
22
|
-
html:
|
|
23
|
-
css:
|
|
21
|
+
html: n,
|
|
22
|
+
css: p,
|
|
24
23
|
forceRecreate: a,
|
|
25
24
|
locale: "en",
|
|
26
25
|
undoButtonSelector: "#guido__undo-button",
|
|
@@ -31,10 +30,10 @@ const Y = (c) => {
|
|
|
31
30
|
customAppearanceMergetags: !0,
|
|
32
31
|
customAppearanceMergetagsBorderColor: "#f1f3fe",
|
|
33
32
|
customAppearanceMergetagsBackgroundColor: "#f1f3fe",
|
|
34
|
-
customViewStyles:
|
|
35
|
-
conditionsEnabled: ((
|
|
36
|
-
customConditionsEnabled: ((
|
|
37
|
-
conditionCategories:
|
|
33
|
+
customViewStyles: F,
|
|
34
|
+
conditionsEnabled: ((m = u.features) == null ? void 0 : m.displayConditions) ?? !0,
|
|
35
|
+
customConditionsEnabled: ((g = u.features) == null ? void 0 : g.displayConditions) ?? !0,
|
|
36
|
+
conditionCategories: T,
|
|
38
37
|
enableXSSSecurity: !0,
|
|
39
38
|
messageSettingsEnabled: !0,
|
|
40
39
|
displayGmailAnnotations: !0,
|
|
@@ -42,7 +41,7 @@ const Y = (c) => {
|
|
|
42
41
|
displayTitle: !1,
|
|
43
42
|
displayUTM: !1,
|
|
44
43
|
selectElementAfterDrop: !0,
|
|
45
|
-
...
|
|
44
|
+
...e ? { baseBlocks: e } : {},
|
|
46
45
|
editorFonts: {
|
|
47
46
|
showDefaultStandardFonts: !0,
|
|
48
47
|
showDefaultNotStandardFonts: !0,
|
|
@@ -50,39 +49,38 @@ const Y = (c) => {
|
|
|
50
49
|
},
|
|
51
50
|
mergeTags: [
|
|
52
51
|
{
|
|
53
|
-
entries:
|
|
52
|
+
entries: U(c.preselectedDynamicContentList)
|
|
54
53
|
}
|
|
55
54
|
],
|
|
56
55
|
async onTokenRefreshRequest(o) {
|
|
57
56
|
try {
|
|
58
|
-
const
|
|
59
|
-
o(
|
|
60
|
-
} catch (
|
|
61
|
-
|
|
57
|
+
const s = await f();
|
|
58
|
+
o(s);
|
|
59
|
+
} catch (s) {
|
|
60
|
+
l(s, "Failed to refresh token");
|
|
62
61
|
}
|
|
63
62
|
},
|
|
64
63
|
onTemplateLoaded() {
|
|
65
|
-
var o, n;
|
|
66
64
|
try {
|
|
67
|
-
const { importCss:
|
|
68
|
-
|
|
69
|
-
|
|
65
|
+
const { importCss: o } = V(), { activateCustomViewStyles: s } = w();
|
|
66
|
+
o(), s(), c.onReady(), t.isStripoInitialized = !0, t.loadingStatus = !1, setTimeout(() => {
|
|
67
|
+
t.hasChanges = !1;
|
|
70
68
|
}, 1e3);
|
|
71
|
-
} catch (
|
|
72
|
-
|
|
69
|
+
} catch (o) {
|
|
70
|
+
l(o, "Failed to load custom interface appearance");
|
|
73
71
|
}
|
|
74
72
|
},
|
|
75
73
|
onCodeEditorVisibilityChanged(o) {
|
|
76
|
-
|
|
74
|
+
t.isCodeEditorOpen = o;
|
|
77
75
|
},
|
|
78
76
|
onEditorVisualModeChanged(o) {
|
|
79
|
-
|
|
77
|
+
t.editorVisualMode = o.toLowerCase();
|
|
80
78
|
},
|
|
81
79
|
onVersionHistoryVisibilityChanged(o) {
|
|
82
|
-
|
|
80
|
+
t.isVersionHistoryOpen = o;
|
|
83
81
|
},
|
|
84
82
|
onDataChanged() {
|
|
85
|
-
|
|
83
|
+
t.hasChanges = !0;
|
|
86
84
|
},
|
|
87
85
|
onEvent: S,
|
|
88
86
|
ignoreClickOutsideSelectors: [
|
|
@@ -93,26 +91,26 @@ const Y = (c) => {
|
|
|
93
91
|
extensions: d
|
|
94
92
|
}
|
|
95
93
|
);
|
|
96
|
-
}, h = (i) => new Promise((r,
|
|
94
|
+
}, h = (i) => new Promise((r, t) => {
|
|
97
95
|
var d;
|
|
98
96
|
if (document.getElementById("UiEditorScript")) {
|
|
99
97
|
i(), r();
|
|
100
98
|
return;
|
|
101
99
|
}
|
|
102
|
-
const
|
|
103
|
-
|
|
100
|
+
const n = v.guido, a = `https://email-static.useinsider.com/guido/${(d = n == null ? void 0 : n.stripo) == null ? void 0 : d.version}/UIEditor.js`, e = document.createElement("script");
|
|
101
|
+
e.id = "UiEditorScript", e.type = "module", e.src = a, e.onload = () => {
|
|
104
102
|
i(), r();
|
|
105
|
-
},
|
|
106
|
-
|
|
107
|
-
}, document.body.appendChild(
|
|
103
|
+
}, e.onerror = () => {
|
|
104
|
+
t(new Error(`Failed to load Stripo UIEditor script from S3: ${a}`));
|
|
105
|
+
}, document.body.appendChild(e);
|
|
108
106
|
});
|
|
109
107
|
return { initPlugin: async (i) => {
|
|
110
108
|
await h(async () => {
|
|
111
|
-
const r = await
|
|
112
|
-
await
|
|
109
|
+
const r = await y();
|
|
110
|
+
await E(i, r);
|
|
113
111
|
});
|
|
114
112
|
} };
|
|
115
113
|
};
|
|
116
114
|
export {
|
|
117
|
-
|
|
115
|
+
J as useStripo
|
|
118
116
|
};
|
|
@@ -1,70 +1,70 @@
|
|
|
1
1
|
var d = Object.defineProperty;
|
|
2
2
|
var h = (i, t, e) => t in i ? d(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
|
|
3
|
-
var
|
|
4
|
-
import { ModificationDescription as
|
|
3
|
+
var n = (i, t, e) => h(i, typeof t != "symbol" ? t + "" : t, e);
|
|
4
|
+
import { ModificationDescription as a, UIElementType as l, UEAttr as g } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
5
5
|
import { CommonControl as c } from "../../../common-control.js";
|
|
6
|
-
import { ItemsBlockControlId as
|
|
6
|
+
import { ItemsBlockControlId as p } from "../../enums/controlEnums.js";
|
|
7
7
|
import { SETTINGS_ENUMS as I } from "../../enums/settingsEnums.js";
|
|
8
8
|
import { useItemsBlockStore as N } from "../../store/items-block.js";
|
|
9
|
-
import { syncNameTrimmingFromAttributes as
|
|
10
|
-
import { updateConfigBlockAttributes as
|
|
11
|
-
const
|
|
9
|
+
import { syncNameTrimmingFromAttributes as M } from "../../utils/syncAttributesFromConfigBlock.js";
|
|
10
|
+
import { updateConfigBlockAttributes as u } from "../../utils/updateAttributes.js";
|
|
11
|
+
const y = p.NAME_TRIMMING, o = {
|
|
12
12
|
TRIMMING: "trimming"
|
|
13
13
|
};
|
|
14
|
-
class
|
|
14
|
+
class _ extends c {
|
|
15
15
|
constructor() {
|
|
16
16
|
super(...arguments);
|
|
17
|
-
|
|
17
|
+
n(this, "store", N());
|
|
18
18
|
}
|
|
19
19
|
getId() {
|
|
20
|
-
return
|
|
20
|
+
return y;
|
|
21
21
|
}
|
|
22
22
|
getTemplate() {
|
|
23
23
|
return `
|
|
24
|
-
<div class="${
|
|
24
|
+
<div class="${p.NAME_TRIMMING}">
|
|
25
25
|
${this._getTextTrimming()}
|
|
26
26
|
</div>
|
|
27
27
|
`;
|
|
28
28
|
}
|
|
29
29
|
onRender() {
|
|
30
|
-
this.api.updateValues({ [
|
|
30
|
+
this.api.updateValues({ [o.TRIMMING]: this.store.nameTrimming }), this.api.onValueChanged(o.TRIMMING, (e) => {
|
|
31
31
|
this._onTrimmingChange(e);
|
|
32
32
|
});
|
|
33
33
|
}
|
|
34
34
|
onTemplateNodeUpdated(e) {
|
|
35
35
|
super.onTemplateNodeUpdated(e), this.handleBlockInstanceChange(
|
|
36
|
-
() =>
|
|
36
|
+
() => M(this.currentNode),
|
|
37
37
|
() => {
|
|
38
|
-
this.api.updateValues({ [
|
|
38
|
+
this.api.updateValues({ [o.TRIMMING]: this.store.nameTrimming });
|
|
39
39
|
}
|
|
40
|
-
)
|
|
40
|
+
);
|
|
41
41
|
}
|
|
42
42
|
_onTrimmingChange(e) {
|
|
43
|
-
this.store.setNameTrimming(e),
|
|
43
|
+
this.store.setNameTrimming(e), u(this.currentNode, this.api), this.api.updateValues({ [o.TRIMMING]: e }), this._applyTrimmingStyles(e);
|
|
44
44
|
}
|
|
45
45
|
_applyTrimmingStyles(e) {
|
|
46
|
-
var
|
|
47
|
-
const
|
|
48
|
-
if (!
|
|
46
|
+
var s;
|
|
47
|
+
const r = (s = this.currentNode) == null ? void 0 : s.querySelector("p > a");
|
|
48
|
+
if (!r)
|
|
49
49
|
return;
|
|
50
|
-
const
|
|
51
|
-
|
|
50
|
+
const T = e !== void 0 ? e : this.store.nameTrimming, m = this.store.orientation === I.ORIENTATION.VERTICAL;
|
|
51
|
+
T ? this.api.getDocumentModifier().modifyHtml(r).setStyle("white-space", "nowrap").setStyle("overflow", "hidden").setStyle("text-overflow", "ellipsis").setStyle("max-width", m ? "130px" : "520px").apply(new a("Text Trimming Enabled")) : this.api.getDocumentModifier().modifyHtml(r).removeStyle("white-space").removeStyle("overflow").removeStyle("text-overflow").removeStyle("max-width").setStyle("max-width", m ? "130px" : "520px").apply(new a("Text Trimming Disabled"));
|
|
52
52
|
}
|
|
53
53
|
_getTextTrimming() {
|
|
54
54
|
return `
|
|
55
55
|
<div class="container">
|
|
56
56
|
<div class="display-flex align-items-center justify-content-between">
|
|
57
|
-
<${
|
|
57
|
+
<${l.LABEL}
|
|
58
58
|
${g.LABEL.text}="${this.api.translate("Text Trimming")}"
|
|
59
59
|
>
|
|
60
|
-
</${
|
|
61
|
-
${this._GuToggle(
|
|
60
|
+
</${l.LABEL}>
|
|
61
|
+
${this._GuToggle(o.TRIMMING)}
|
|
62
62
|
</div>
|
|
63
63
|
</div>
|
|
64
64
|
`;
|
|
65
65
|
}
|
|
66
66
|
}
|
|
67
67
|
export {
|
|
68
|
-
|
|
69
|
-
|
|
68
|
+
y as CONTROL_BLOCK_ID,
|
|
69
|
+
_ as NameTrimmingControl
|
|
70
70
|
};
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
var I = Object.defineProperty;
|
|
2
|
+
var y = (n, o, t) => o in n ? I(n, o, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[o] = t;
|
|
3
|
+
var m = (n, o, t) => y(n, typeof o != "symbol" ? o + "" : o, t);
|
|
4
|
+
import { ModificationDescription as h } from "../../../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
5
|
+
import { CommonControl as E } from "../../../common-control.js";
|
|
6
|
+
import { ItemsBlockControlId as O } from "../../enums/controlEnums.js";
|
|
7
|
+
import { SETTINGS_ENUMS as N } from "../../enums/settingsEnums.js";
|
|
8
|
+
import { useItemsBlockStore as f } from "../../store/items-block.js";
|
|
9
|
+
import { syncPriceOrientationFromAttributes as T } from "../../utils/syncAttributesFromConfigBlock.js";
|
|
10
|
+
import { updateConfigBlockAttributes as P } from "../../utils/updateAttributes.js";
|
|
11
|
+
const _ = O.PRICE_ORIENTATION, p = {
|
|
12
|
+
PRICE_ORIENTATION: "priceOrientation"
|
|
13
|
+
}, C = [
|
|
14
|
+
{ icon: "vertical-orientation", value: "vertical" },
|
|
15
|
+
{ icon: "horizontal-orientation", value: "horizontal" }
|
|
16
|
+
];
|
|
17
|
+
class v extends E {
|
|
18
|
+
constructor() {
|
|
19
|
+
super(...arguments);
|
|
20
|
+
m(this, "store", f());
|
|
21
|
+
}
|
|
22
|
+
getId() {
|
|
23
|
+
return _;
|
|
24
|
+
}
|
|
25
|
+
getTemplate() {
|
|
26
|
+
return `
|
|
27
|
+
<div class="${O.PRICE_ORIENTATION}">
|
|
28
|
+
${this._getPriceOrientation()}
|
|
29
|
+
</div>
|
|
30
|
+
`;
|
|
31
|
+
}
|
|
32
|
+
onRender() {
|
|
33
|
+
this.api.updateValues({ [p.PRICE_ORIENTATION]: this.store.priceOrientation }), this.api.onValueChanged(p.PRICE_ORIENTATION, (t) => {
|
|
34
|
+
this._onPriceOrientationChange(t);
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
onTemplateNodeUpdated(t) {
|
|
38
|
+
super.onTemplateNodeUpdated(t), this.handleBlockInstanceChange(
|
|
39
|
+
() => {
|
|
40
|
+
T(this.currentNode);
|
|
41
|
+
},
|
|
42
|
+
() => {
|
|
43
|
+
this.api.updateValues({ [p.PRICE_ORIENTATION]: this.store.priceOrientation });
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
_onPriceOrientationChange(t) {
|
|
48
|
+
if (console.debug("Price orientation changed to: ", t), this.store.setPriceOrientation(t), P(this.currentNode, this.api), !this.currentNode)
|
|
49
|
+
return;
|
|
50
|
+
const { orientation: i } = this.store, r = i === N.ORIENTATION.VERTICAL, e = t === "horizontal";
|
|
51
|
+
r ? this._updateVerticalLayout(e) : this._updateHorizontalLayout(e);
|
|
52
|
+
}
|
|
53
|
+
_updateHorizontalLayout(t) {
|
|
54
|
+
var c, l, d, a;
|
|
55
|
+
const i = ((l = (c = this.currentNode) == null ? void 0 : c.closest(".ins-product-td")) == null ? void 0 : l.querySelectorAll(".product-price-class")) || [], r = ((a = (d = this.currentNode) == null ? void 0 : d.closest(".ins-product-td")) == null ? void 0 : a.querySelectorAll(".product-original-price-class")) || [];
|
|
56
|
+
if (!i || !r)
|
|
57
|
+
return;
|
|
58
|
+
const e = t ? "50%" : "100%", s = this.api.getDocumentModifier();
|
|
59
|
+
i.forEach((u) => {
|
|
60
|
+
s.modifyHtml(u).setAttribute("width", e).setStyle("width", e);
|
|
61
|
+
}), r.forEach((u) => {
|
|
62
|
+
s.modifyHtml(u).setAttribute("width", e).setStyle("width", e);
|
|
63
|
+
}), s.apply(new h(`Updated original price element width to ${e}`));
|
|
64
|
+
}
|
|
65
|
+
_updateVerticalLayout(t) {
|
|
66
|
+
var s, c, l, d;
|
|
67
|
+
const i = ((c = (s = this.currentNode) == null ? void 0 : s.closest(".ins-product-td")) == null ? void 0 : c.querySelectorAll(".horizontal-price")) || [], r = (d = (l = this.currentNode) == null ? void 0 : l.closest(".ins-product-td")) == null ? void 0 : d.querySelector(".vertical-price");
|
|
68
|
+
if (!i || !r || i.length === 0)
|
|
69
|
+
return;
|
|
70
|
+
const e = this.api.getDocumentModifier();
|
|
71
|
+
t ? (i.forEach((a) => {
|
|
72
|
+
e.modifyHtml(a).setStyle("display", "table-cell");
|
|
73
|
+
}), e.modifyHtml(r).setStyle("display", "none").apply(new h("Hide vertical price element"))) : (i.forEach((a) => {
|
|
74
|
+
e.modifyHtml(a).setStyle("display", "none");
|
|
75
|
+
}), e.modifyHtml(r).setStyle("display", "table-cell").apply(new h("Show vertical price element")));
|
|
76
|
+
}
|
|
77
|
+
_getPriceOrientation() {
|
|
78
|
+
return `
|
|
79
|
+
${this._GuTwoColumns([
|
|
80
|
+
this._GuLabel({ text: "Price Orientation" }),
|
|
81
|
+
this._GuRadioButton({
|
|
82
|
+
name: p.PRICE_ORIENTATION,
|
|
83
|
+
buttons: C
|
|
84
|
+
})
|
|
85
|
+
])}
|
|
86
|
+
`;
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
export {
|
|
90
|
+
_ as CONTROL_BLOCK_ID,
|
|
91
|
+
v as PriceOrientationControl
|
|
92
|
+
};
|