@useinsider/guido 1.0.3-beta.f2389d0 → 1.0.3-beta.f263f71
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/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue.js +8 -8
- package/dist/components/organisms/email-preview/desktop-preview/EmailSizeIndicator.vue2.js +2 -2
- package/dist/extensions/Blocks/Items/controls/name/trimming.js +25 -25
- package/dist/extensions/Blocks/Items/controls/settingsControl.js +90 -94
- package/dist/extensions/Blocks/Items/enums/controlEnums.js +2 -2
- package/dist/extensions/Blocks/Items/enums/productEnums.js +2 -3
- package/dist/extensions/Blocks/Items/enums/settingsEnums.js +2 -3
- package/dist/extensions/Blocks/Items/extension.js +6 -7
- package/dist/extensions/Blocks/Items/layouts/horizontal.html.js +2 -2
- package/dist/extensions/Blocks/Items/layouts/vertical.html.js +5 -17
- package/dist/extensions/Blocks/Items/settingsPanel.js +24 -25
- package/dist/extensions/Blocks/Items/store/items-block.js +4 -8
- package/dist/extensions/Blocks/Items/template.js +59 -65
- package/dist/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.js +26 -35
- package/dist/extensions/Blocks/Items/utils/updateAttributes.js +27 -29
- package/dist/extensions/Blocks/Unsubscribe/block.js +30 -34
- package/dist/guido.css +1 -1
- package/dist/src/extensions/Blocks/Items/enums/controlEnums.d.ts +0 -1
- package/dist/src/extensions/Blocks/Items/enums/productEnums.d.ts +0 -1
- package/dist/src/extensions/Blocks/Items/enums/settingsEnums.d.ts +0 -1
- package/dist/src/extensions/Blocks/Items/store/items-block.d.ts +0 -2
- package/dist/src/extensions/Blocks/Items/utils/syncAttributesFromConfigBlock.d.ts +0 -6
- package/dist/src/extensions/Blocks/Unsubscribe/block.d.ts +4 -3
- package/package.json +1 -3
- package/dist/extensions/Blocks/Items/controls/price/priceOrientation.js +0 -92
- package/dist/src/extensions/Blocks/Items/controls/price/priceOrientation.d.ts +0 -15
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
var
|
|
2
|
-
var
|
|
3
|
-
var u = (n, i, e) =>
|
|
1
|
+
var _ = Object.defineProperty;
|
|
2
|
+
var S = (n, i, e) => i in n ? _(n, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[i] = e;
|
|
3
|
+
var u = (n, i, e) => S(n, typeof i != "symbol" ? i + "" : i, e);
|
|
4
4
|
import { PAGE_TYPES as E } from "../../../enums/unsubscribe.js";
|
|
5
5
|
import { useUnsubscribeStore as c } from "../../../stores/unsubscribe.js";
|
|
6
|
-
import { Block as
|
|
7
|
-
import { getDefaultTemplate as
|
|
6
|
+
import { Block as d, BlockCompositionType as L, ModificationDescription as b } from "../../../node_modules/@stripoinc/ui-editor-extensions/dist/esm/index.js";
|
|
7
|
+
import { getDefaultTemplate as h } from "./template.js";
|
|
8
8
|
import { UNSUBSCRIBE_EVENTS as a, DATA_ATTRIBUTES as o } from "./utils/constants.js";
|
|
9
|
-
import { parsePageList as
|
|
10
|
-
const
|
|
9
|
+
import { parsePageList as m } from "./utils/utils.js";
|
|
10
|
+
const v = "unsubscribe-block", g = 'a[data-unsubscribe-link="true"]', T = ".unsubscribe-block-v2", f = "{{ins-unsubscribe-link}}", B = {
|
|
11
11
|
[E.GLOBAL_UNSUBSCRIBE]: "{{ins-global-unsubscribe-link}}",
|
|
12
12
|
[E.SUBSCRIPTION_PREFERENCE_CENTER]: "{{ins-preferences-unsubscribe-link}}"
|
|
13
13
|
};
|
|
14
|
-
class
|
|
14
|
+
class D extends d {
|
|
15
15
|
constructor() {
|
|
16
16
|
super();
|
|
17
17
|
u(this, "selectEventListener", null);
|
|
@@ -19,13 +19,13 @@ class R extends h {
|
|
|
19
19
|
u(this, "currentNode");
|
|
20
20
|
}
|
|
21
21
|
getId() {
|
|
22
|
-
return
|
|
22
|
+
return v;
|
|
23
23
|
}
|
|
24
24
|
getIcon() {
|
|
25
25
|
return "unsubscribe-icon";
|
|
26
26
|
}
|
|
27
27
|
getBlockCompositionType() {
|
|
28
|
-
return
|
|
28
|
+
return L.BLOCK;
|
|
29
29
|
}
|
|
30
30
|
getName() {
|
|
31
31
|
return this.api.translate("Unsubscribe Block");
|
|
@@ -34,10 +34,13 @@ class R extends h {
|
|
|
34
34
|
return this.api.translate("Unsubscribe Block Description");
|
|
35
35
|
}
|
|
36
36
|
getTemplate() {
|
|
37
|
-
return
|
|
37
|
+
return h();
|
|
38
|
+
}
|
|
39
|
+
onCreated(e) {
|
|
40
|
+
"getOuterHTML" in e && !e.getOuterHTML() || "getAttribute" in e && e.getAttribute("data-migration") || (this.currentNode = e, this._resetStoreState(), this._setupSelectEventListener(), this._setupCancelEventListener(), this._checkExistingBlocks(), this._openDrawer());
|
|
38
41
|
}
|
|
39
42
|
onSelect(e) {
|
|
40
|
-
this.currentNode = e,
|
|
43
|
+
this.currentNode = e, this._resetStoreState(), this._loadBlockState(e), this._setupSelectEventListener();
|
|
41
44
|
}
|
|
42
45
|
onDelete(e) {
|
|
43
46
|
this._removeEventListeners(), this._removeBlockTemplatesFromStore(e), this._resetStoreState();
|
|
@@ -63,13 +66,7 @@ class R extends h {
|
|
|
63
66
|
this.cancelEventListener && (document.removeEventListener(a.CANCEL, this.cancelEventListener), this.cancelEventListener = null);
|
|
64
67
|
}
|
|
65
68
|
_handleCancel() {
|
|
66
|
-
|
|
67
|
-
if (!this.currentNode)
|
|
68
|
-
return;
|
|
69
|
-
this.api.getDocumentModifier().modifyHtml(this.currentNode).delete().apply(new b("Removed unsubscribe block due to cancel"));
|
|
70
|
-
} catch (e) {
|
|
71
|
-
console.warn("[UnsubscribeBlock] Failed to remove unsubscribe block:", e);
|
|
72
|
-
}
|
|
69
|
+
this.currentNode && this.api.getDocumentModifier().modifyHtml(this.currentNode).delete().apply(new b("Removed unsubscribe block due to cancel"));
|
|
73
70
|
}
|
|
74
71
|
_removeEventListeners() {
|
|
75
72
|
this._removeSelectEventListener(), this._removeCancelEventListener();
|
|
@@ -77,27 +74,26 @@ class R extends h {
|
|
|
77
74
|
_updateBlock(e, s) {
|
|
78
75
|
if (!this.currentNode || !("querySelector" in this.currentNode))
|
|
79
76
|
return;
|
|
80
|
-
const t = this.currentNode.querySelector(
|
|
77
|
+
const t = this.currentNode.querySelector(g);
|
|
81
78
|
if (!t)
|
|
82
79
|
return;
|
|
83
80
|
const r = this._getMergeTag(e);
|
|
84
81
|
this.api.getDocumentModifier().modifyHtml(t).setAttribute("href", r).apply(new b(`Updated unsubscribe link to ${r}`)), this.api.getDocumentModifier().modifyHtml(this.currentNode).setAttribute(o.PAGE_TYPE, e.toString()).setAttribute(o.PAGE_LIST, s).apply(new b("Updated unsubscribe block metadata"));
|
|
85
82
|
}
|
|
86
83
|
_getMergeTag(e) {
|
|
87
|
-
return
|
|
84
|
+
return B[e] ?? f;
|
|
88
85
|
}
|
|
89
86
|
_openDrawer() {
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
}
|
|
87
|
+
try {
|
|
88
|
+
const e = c();
|
|
89
|
+
e.typeSelectionDrawerStatus = !0;
|
|
90
|
+
} catch (e) {
|
|
91
|
+
console.error("[UnsubscribeBlock] Failed to open drawer:", e);
|
|
92
|
+
}
|
|
97
93
|
}
|
|
98
94
|
_checkExistingBlocks() {
|
|
99
95
|
const e = c();
|
|
100
|
-
e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(
|
|
96
|
+
e.isGlobalUnsubscribeDisabled = !1, e.isSubscriptionPreferencesCenterDisabled = !1, this.api.getDocumentRoot().querySelectorAll(T).forEach((t) => {
|
|
101
97
|
if ("getAttribute" in t) {
|
|
102
98
|
const r = t.getAttribute(o.PAGE_TYPE);
|
|
103
99
|
if (r) {
|
|
@@ -113,8 +109,8 @@ class R extends h {
|
|
|
113
109
|
const s = e.getAttribute(o.PAGE_TYPE), t = e.getAttribute(o.PAGE_LIST);
|
|
114
110
|
if (!s || !t)
|
|
115
111
|
return;
|
|
116
|
-
const r = c(), l = Number(s),
|
|
117
|
-
r.setCollectionWithoutAutoSelection(l), r.loadSelectedTemplates(
|
|
112
|
+
const r = c(), l = Number(s), p = m(t);
|
|
113
|
+
r.setCollectionWithoutAutoSelection(l), r.loadSelectedTemplates(p);
|
|
118
114
|
}
|
|
119
115
|
_resetStoreState() {
|
|
120
116
|
c().$reset();
|
|
@@ -125,11 +121,11 @@ class R extends h {
|
|
|
125
121
|
const s = e.getAttribute(o.PAGE_LIST);
|
|
126
122
|
if (!s)
|
|
127
123
|
return;
|
|
128
|
-
const t = c(), r =
|
|
124
|
+
const t = c(), r = m(s);
|
|
129
125
|
t.removeUnsubscribePages(r);
|
|
130
126
|
}
|
|
131
127
|
}
|
|
132
128
|
export {
|
|
133
|
-
|
|
134
|
-
|
|
129
|
+
v as UNSUBSCRIBE_BLOCK_ID,
|
|
130
|
+
D as UnsubscribeBlock
|
|
135
131
|
};
|
package/dist/guido.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-0502bceb] .in-button-v2__wrapper{line-height:0}[data-v-b5997368] .in-segments-wrapper .in-tooltip-wrapper__box{text-align:left}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-98181b5a]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-98181b5a]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-98181b5a]{height:calc(100vh - 75px)}[data-v-70835920] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-dd57102d] .guido__verion-history-view-option-selection-desktop svg,[data-v-dd57102d] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-dd57102d] .in-segments-wrapper__button_selected,[data-v-dd57102d] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-7a09985c]{gap:16px}[data-v-
|
|
1
|
+
.gap-16[data-v-6562e38c],.gap-16[data-v-1ccb6d4a]{gap:16px}[data-v-0502bceb] .in-button-v2__wrapper{line-height:0}[data-v-b5997368] .in-segments-wrapper .in-tooltip-wrapper__box{text-align:left}.version-history-item[data-v-ee4b9c3f]{flex-basis:200px}.version-history-wrapper[data-v-52a77eec]{gap:8px}.view-options-wrapper[data-v-d405ca59]{position:relative;display:inline-block}.new-tag[data-v-d405ca59]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-d405ca59] .guido__verion-history-view-option-selection-desktop svg,[data-v-d405ca59] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-d405ca59] .in-segments-wrapper__button_selected,[data-v-d405ca59] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-d405ca59] .in-tooltip-wrapper__icon{cursor:pointer}.view-options-wrapper[data-v-195ab6d4]{position:relative;display:inline-block}.new-tag[data-v-195ab6d4]{position:absolute;top:-8px;right:-16px;z-index:10}[data-v-195ab6d4] .guido__view-option-selection-desktop svg,[data-v-195ab6d4] .guido__view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-195ab6d4] .in-segments-wrapper__button_selected,[data-v-195ab6d4] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}[data-v-195ab6d4] .in-tooltip-wrapper__icon{cursor:pointer}.guido-loading__wrapper[data-v-07c4b2d8]{height:100%;top:75px!important;bottom:0!important}.guido-editor__wrapper[data-v-98181b5a]{position:relative;width:100%;height:calc(100vh - 128px)}.guido-editor__container[data-v-98181b5a]{width:100%;height:calc(100vh - 128px)}.guido-editor__no-header[data-v-98181b5a]{height:calc(100vh - 75px)}[data-v-70835920] .in-breadcrumb-wrapper__links{cursor:pointer}.templates-wrapper[data-v-a86fc486]{gap:16px;grid-template-columns:repeat(3,1fr)}.templates-wrapper .template-wrapper[data-v-a86fc486]{cursor:pointer}.templates-wrapper .template-wrapper .template-container[data-v-a86fc486]{height:274px;padding:2px;transition:none}.templates-wrapper .template-wrapper .template-container.selected[data-v-a86fc486]{padding:1px}.templates-wrapper .template-wrapper .template-container .thumbnail[data-v-a86fc486]{object-fit:cover;transform:scale(1)}[data-v-dd57102d] .guido__verion-history-view-option-selection-desktop svg,[data-v-dd57102d] .guido__verion-history-view-option-selection-mobile svg{margin:0 0 0 2px}[data-v-dd57102d] .in-segments-wrapper__button_selected,[data-v-dd57102d] .in-segments-wrapper__button_selected:hover{background-color:#dae1fb}.error-list[data-v-7a09985c]{gap:16px}[data-v-d562c73b] .in-progress-wrapper__progress p span:last-child{display:none!important}.desktop-preview-container[data-v-2dd60b0c],[data-v-2dd60b0c] .desktop-preview-container .in-container{min-height:720px!important;height:100%}.cropped-text[data-v-f20b3a9b]{width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-v-d3c52b44] .vueperslides__bullets,[data-v-dd1a237a] .vueperslides__bullets{pointer-events:none!important}[data-v-dd1a237a] .vueperslides__parallax-wrapper{height:110px!important}[data-v-a408dcea] .vueperslides__bullets{pointer-events:none!important}[data-v-a408dcea] .vueperslides__parallax-wrapper{height:110px!important}
|
|
@@ -44,7 +44,6 @@ export declare enum ItemsBlockControlId {
|
|
|
44
44
|
PRICE_FORMATTED_PRICE = "items-block-price-formatted-price-control",
|
|
45
45
|
PRICE_CURRENCY_SYMBOL = "items-block-price-currency-symbol-control",
|
|
46
46
|
PRICE_CURRENCY_LOCATION = "items-block-price-currency-location-control",
|
|
47
|
-
PRICE_ORIENTATION = "items-block-price-orientation-control",
|
|
48
47
|
NAME_ALIGN = "items-block-name-align-control",
|
|
49
48
|
NAME_COLOR = "items-block-name-color-control",
|
|
50
49
|
NAME_SIZE = "items-block-name-size-control",
|
|
@@ -8,7 +8,6 @@ export declare const configAttributes: {
|
|
|
8
8
|
PRODUCT_PRICE_FORMATTED: string;
|
|
9
9
|
PRODUCT_PRICE_CURRENCY_SYMBOL: string;
|
|
10
10
|
PRODUCT_PRICE_CURRENCY_LOCATION: string;
|
|
11
|
-
PRODUCT_ORIGINAL_PRICE_CONTROL_ORIENTATION: string;
|
|
12
11
|
PRODUCT_BUTTON_LINK: string;
|
|
13
12
|
PRODUCT_IMAGE_LINK: string;
|
|
14
13
|
PRODUCT_NAME_CONTROL_VALUE: string;
|
|
@@ -10,7 +10,6 @@ interface ItemsBlockState {
|
|
|
10
10
|
currencySymbol: string;
|
|
11
11
|
currencyLocation: string;
|
|
12
12
|
formattedPrice: boolean;
|
|
13
|
-
priceOrientation: 'vertical' | 'horizontal';
|
|
14
13
|
templateData: {
|
|
15
14
|
imageSrc: string;
|
|
16
15
|
name: string;
|
|
@@ -31,7 +30,6 @@ export declare const useItemsBlockStore: import("pinia").StoreDefinition<"guidoI
|
|
|
31
30
|
setCurrencySymbol(currencySymbol: string): void;
|
|
32
31
|
setCurrencyLocation(currencyLocation: string): void;
|
|
33
32
|
setFormattedPrice(formattedPrice: boolean): void;
|
|
34
|
-
setPriceOrientation(priceOrientation: "vertical" | "horizontal"): void;
|
|
35
33
|
setTemplateData(templateData: ItemsBlockState["templateData"]): void;
|
|
36
34
|
updateFromAttributes(attributes: {
|
|
37
35
|
itemsType?: string;
|
|
@@ -42,9 +42,3 @@ export declare function syncButtonLinkFromAttributes(currentNode: ImmutableHtmlN
|
|
|
42
42
|
* @param currentNode - The current node from the control (usually this.currentNode)
|
|
43
43
|
*/
|
|
44
44
|
export declare function syncImageLinkFromAttributes(currentNode: ImmutableHtmlNode | undefined): void;
|
|
45
|
-
/**
|
|
46
|
-
* Reads price orientation value from esd-config-block attribute and updates the store.
|
|
47
|
-
* This makes the price orientation value mutable by syncing it from the DOM.
|
|
48
|
-
* @param currentNode - The current node from the control (usually this.currentNode)
|
|
49
|
-
*/
|
|
50
|
-
export declare function syncPriceOrientationFromAttributes(currentNode: ImmutableHtmlNode | undefined): void;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
|
|
2
2
|
import { Block, BlockCompositionType } from '@stripoinc/ui-editor-extensions';
|
|
3
3
|
export declare const UNSUBSCRIBE_BLOCK_ID = "unsubscribe-block";
|
|
4
4
|
export declare class UnsubscribeBlock extends Block {
|
|
@@ -12,8 +12,9 @@ export declare class UnsubscribeBlock extends Block {
|
|
|
12
12
|
getName(): string;
|
|
13
13
|
getDescription(): string;
|
|
14
14
|
getTemplate(): string;
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
onCreated(node: ImmutableHtmlNode): void;
|
|
16
|
+
onSelect(node: ImmutableHtmlNode): undefined;
|
|
17
|
+
onDelete(node: ImmutableHtmlNode): undefined;
|
|
17
18
|
onDestroy(): void;
|
|
18
19
|
private _setupSelectEventListener;
|
|
19
20
|
private _removeSelectEventListener;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@useinsider/guido",
|
|
3
|
-
"version": "1.0.3-beta.
|
|
3
|
+
"version": "1.0.3-beta.f263f71",
|
|
4
4
|
"description": "Guido is a Vue + TypeScript wrapper for Email Plugin. Easily embed the email editor in your Vue applications.",
|
|
5
5
|
"main": "./dist/guido.umd.cjs",
|
|
6
6
|
"module": "./dist/library.js",
|
|
@@ -41,8 +41,6 @@
|
|
|
41
41
|
"vue": "2.7.14"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@commitlint/cli": "20.2.0",
|
|
45
|
-
"@commitlint/config-conventional": "20.2.0",
|
|
46
44
|
"@cspell/eslint-plugin": "8.17.5",
|
|
47
45
|
"@eslint/eslintrc": "3.3.0",
|
|
48
46
|
"@eslint/js": "8.57.1",
|
|
@@ -1,92 +0,0 @@
|
|
|
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
|
-
};
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { ImmutableHtmlNode } from '@stripoinc/ui-editor-extensions';
|
|
2
|
-
import { CommonControl } from '../../../common-control';
|
|
3
|
-
import { ItemsBlockControlId } from '../../enums/controlEnums';
|
|
4
|
-
export declare const CONTROL_BLOCK_ID = ItemsBlockControlId.PRICE_ORIENTATION;
|
|
5
|
-
export declare class PriceOrientationControl extends CommonControl {
|
|
6
|
-
private store;
|
|
7
|
-
getId(): string;
|
|
8
|
-
getTemplate(): string;
|
|
9
|
-
onRender(): void;
|
|
10
|
-
onTemplateNodeUpdated(node: ImmutableHtmlNode): void;
|
|
11
|
-
_onPriceOrientationChange(value: string): void;
|
|
12
|
-
private _updateHorizontalLayout;
|
|
13
|
-
private _updateVerticalLayout;
|
|
14
|
-
_getPriceOrientation(): string;
|
|
15
|
-
}
|