@gem-sdk/core 1.33.3 → 1.33.5
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/cjs/components/ComponentToolbarPreview.js +1 -4
- package/dist/cjs/helpers/background.js +1 -1
- package/dist/esm/components/ComponentToolbarPreview.js +1 -4
- package/dist/esm/helpers/background.js +1 -1
- package/dist/types/index.d.ts +1 -0
- package/package.json +1 -1
- package/dist/cjs/components/resize/Resize.js +0 -16
- package/dist/cjs/components/resize/Spacing.js +0 -222
- package/dist/esm/components/resize/Resize.js +0 -12
- package/dist/esm/components/resize/Spacing.js +0 -218
|
@@ -13,9 +13,9 @@ require('../hooks/useCartUI.js');
|
|
|
13
13
|
var CreateThemeSection = require('./theme-section/CreateThemeSection.js');
|
|
14
14
|
var Tooltip = require('./toolbar/Tooltip.js');
|
|
15
15
|
var ThemeSectionStatus = require('./theme-section/ThemeSectionStatus.js');
|
|
16
|
-
var Resize = require('./resize/Resize.js');
|
|
17
16
|
require('../helpers/convert.js');
|
|
18
17
|
|
|
18
|
+
// import Resize from './resize/Resize';
|
|
19
19
|
const SECTION_LIMIT = 25;
|
|
20
20
|
const notVisible = (el)=>{
|
|
21
21
|
const overflow = getComputedStyle(el).overflow;
|
|
@@ -462,9 +462,6 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
462
462
|
})
|
|
463
463
|
})
|
|
464
464
|
]
|
|
465
|
-
}),
|
|
466
|
-
/*#__PURE__*/ jsxRuntime.jsx(Resize.default, {
|
|
467
|
-
...props
|
|
468
465
|
})
|
|
469
466
|
]
|
|
470
467
|
});
|
|
@@ -56,7 +56,7 @@ const getBgImageByDevice = (background, device, options)=>{
|
|
|
56
56
|
let newBackupFilekey = backupFileKey;
|
|
57
57
|
const shopifyHandleName = imageByDevice?.match(// eslint-disable-next-line
|
|
58
58
|
/\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))$/)?.[1];
|
|
59
|
-
if (shopifyHandleName && shopifyHandleName != backupFileKey) {
|
|
59
|
+
if (backupFileKey && shopifyHandleName && shopifyHandleName != backupFileKey) {
|
|
60
60
|
newBackupFilekey = shopifyHandleName;
|
|
61
61
|
}
|
|
62
62
|
if (storage === 'FILE_CONTENT') {
|
|
@@ -11,9 +11,9 @@ import '../hooks/useCartUI.js';
|
|
|
11
11
|
import { CreateThemeSection } from './theme-section/CreateThemeSection.js';
|
|
12
12
|
import Tooltip from './toolbar/Tooltip.js';
|
|
13
13
|
import { ThemeSectionStatus } from './theme-section/ThemeSectionStatus.js';
|
|
14
|
-
import Resize from './resize/Resize.js';
|
|
15
14
|
import '../helpers/convert.js';
|
|
16
15
|
|
|
16
|
+
// import Resize from './resize/Resize';
|
|
17
17
|
const SECTION_LIMIT = 25;
|
|
18
18
|
const notVisible = (el)=>{
|
|
19
19
|
const overflow = getComputedStyle(el).overflow;
|
|
@@ -460,9 +460,6 @@ const ComponentToolbarPreview = ({ ...props })=>{
|
|
|
460
460
|
})
|
|
461
461
|
})
|
|
462
462
|
]
|
|
463
|
-
}),
|
|
464
|
-
/*#__PURE__*/ jsx(Resize, {
|
|
465
|
-
...props
|
|
466
463
|
})
|
|
467
464
|
]
|
|
468
465
|
});
|
|
@@ -54,7 +54,7 @@ const getBgImageByDevice = (background, device, options)=>{
|
|
|
54
54
|
let newBackupFilekey = backupFileKey;
|
|
55
55
|
const shopifyHandleName = imageByDevice?.match(// eslint-disable-next-line
|
|
56
56
|
/\/files\/([^\/]+\.(jpg|jpeg|gif|png|webp|svg))$/)?.[1];
|
|
57
|
-
if (shopifyHandleName && shopifyHandleName != backupFileKey) {
|
|
57
|
+
if (backupFileKey && shopifyHandleName && shopifyHandleName != backupFileKey) {
|
|
58
58
|
newBackupFilekey = shopifyHandleName;
|
|
59
59
|
}
|
|
60
60
|
if (storage === 'FILE_CONTENT') {
|
package/dist/types/index.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var Spacing = require('./Spacing.js');
|
|
7
|
-
|
|
8
|
-
function Resize(props) {
|
|
9
|
-
return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
10
|
-
children: /*#__PURE__*/ jsxRuntime.jsx(Spacing.default, {
|
|
11
|
-
...props
|
|
12
|
-
})
|
|
13
|
-
});
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
exports.default = Resize;
|
|
@@ -1,222 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
-
var react = require('react');
|
|
7
|
-
require('zustand');
|
|
8
|
-
var BuilderPreviewContext = require('../../contexts/BuilderPreviewContext.js');
|
|
9
|
-
require('swr');
|
|
10
|
-
require('@gem-sdk/adapter-shopify');
|
|
11
|
-
require('swr/mutation');
|
|
12
|
-
require('vanilla-lazyload');
|
|
13
|
-
require('../../hooks/useCartUI.js');
|
|
14
|
-
require('react-transition-group');
|
|
15
|
-
require('@gem-sdk/core');
|
|
16
|
-
require('../../helpers/convert.js');
|
|
17
|
-
|
|
18
|
-
function Spacing(props) {
|
|
19
|
-
const isThemeSectionEditor = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
|
|
20
|
-
const $bottomDrag = react.useRef(null);
|
|
21
|
-
const $bottomBg = react.useRef(null);
|
|
22
|
-
const delayMouseMove = react.useRef(null);
|
|
23
|
-
const isDragging = react.useRef(false);
|
|
24
|
-
const startY = react.useRef(0);
|
|
25
|
-
const marginBottom = react.useRef(0);
|
|
26
|
-
const getNewValueMargin = (event)=>{
|
|
27
|
-
const top = event.clientY;
|
|
28
|
-
const diffY = Math.ceil(top - startY.current);
|
|
29
|
-
const currentValue = marginBottom.current || 0;
|
|
30
|
-
const newValue = currentValue + diffY >= 0 ? `${currentValue + diffY}px` : `0px`;
|
|
31
|
-
return {
|
|
32
|
-
newValue
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
const onMouseMoveDocument = (event)=>{
|
|
36
|
-
if ($bottomDrag.current && $bottomBg.current) {
|
|
37
|
-
// $bottomDrag.current.
|
|
38
|
-
const { newValue } = getNewValueMargin(event);
|
|
39
|
-
$bottomBg.current.style.height = newValue;
|
|
40
|
-
$bottomDrag.current.style.top = newValue;
|
|
41
|
-
const $component = $bottomDrag.current.closest('[data-toolbar-wrap]');
|
|
42
|
-
if ($component) {
|
|
43
|
-
$component.style.marginBottom = newValue;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
const onMouseUpDocument = ()=>{
|
|
48
|
-
endDrag();
|
|
49
|
-
};
|
|
50
|
-
const startDrag = ()=>{
|
|
51
|
-
if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
|
|
52
|
-
delayMouseMove.current = setTimeout(()=>{
|
|
53
|
-
isDragging.current = true;
|
|
54
|
-
const event = new CustomEvent('editor:toolbar:resize-spacing', {
|
|
55
|
-
bubbles: true,
|
|
56
|
-
detail: {
|
|
57
|
-
value: true
|
|
58
|
-
}
|
|
59
|
-
});
|
|
60
|
-
window.dispatchEvent(event);
|
|
61
|
-
document.addEventListener('mousemove', onMouseMoveDocument);
|
|
62
|
-
document.addEventListener('mouseup', onMouseUpDocument);
|
|
63
|
-
}, 100);
|
|
64
|
-
};
|
|
65
|
-
const endDrag = ()=>{
|
|
66
|
-
if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
|
|
67
|
-
isDragging.current = false;
|
|
68
|
-
const event = new CustomEvent('editor:toolbar:resize-spacing', {
|
|
69
|
-
bubbles: true,
|
|
70
|
-
detail: {
|
|
71
|
-
value: false
|
|
72
|
-
}
|
|
73
|
-
});
|
|
74
|
-
window.dispatchEvent(event);
|
|
75
|
-
if ($bottomDrag.current) {
|
|
76
|
-
const style = getComputedStyle($bottomDrag.current);
|
|
77
|
-
const marginBottom = style.top;
|
|
78
|
-
const event = new CustomEvent('editor:toolbar:change-margin-bottom', {
|
|
79
|
-
bubbles: true,
|
|
80
|
-
detail: {
|
|
81
|
-
componentUid: props.uid,
|
|
82
|
-
marginBottom
|
|
83
|
-
}
|
|
84
|
-
});
|
|
85
|
-
window.dispatchEvent(event);
|
|
86
|
-
}
|
|
87
|
-
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
88
|
-
if ($component) {
|
|
89
|
-
$component.style.marginBottom = '';
|
|
90
|
-
}
|
|
91
|
-
document.removeEventListener('mousemove', onMouseMoveDocument);
|
|
92
|
-
document.removeEventListener('mouseup', onMouseUpDocument);
|
|
93
|
-
};
|
|
94
|
-
const onMouseDown = (event)=>{
|
|
95
|
-
if ($bottomDrag.current) {
|
|
96
|
-
const style = getComputedStyle($bottomDrag.current);
|
|
97
|
-
startY.current = event.clientY;
|
|
98
|
-
marginBottom.current = parseFloat(style.top);
|
|
99
|
-
startDrag();
|
|
100
|
-
}
|
|
101
|
-
};
|
|
102
|
-
const onMouseUp = ()=>{
|
|
103
|
-
endDrag();
|
|
104
|
-
};
|
|
105
|
-
const getChildrenByAttrSelector = ($el, attrSelector)=>{
|
|
106
|
-
const childLen = $el.children.length;
|
|
107
|
-
if (childLen) {
|
|
108
|
-
for(let i = 0; i < childLen; i++){
|
|
109
|
-
const children = $el.children[i];
|
|
110
|
-
if (children) {
|
|
111
|
-
const is = children.getAttribute(attrSelector);
|
|
112
|
-
if (is) {
|
|
113
|
-
return children;
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
}
|
|
117
|
-
}
|
|
118
|
-
};
|
|
119
|
-
const onUpdateMarginBottom = react.useCallback((e)=>{
|
|
120
|
-
if (isDragging.current) return;
|
|
121
|
-
const detail = e.detail;
|
|
122
|
-
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
123
|
-
const toolbar = $component && getChildrenByAttrSelector($component, 'data-toolbar');
|
|
124
|
-
const isActive = toolbar && toolbar.getAttribute('data-toolbar-active');
|
|
125
|
-
if (isActive && detail?.marginBottom) {
|
|
126
|
-
const currentValue = parseInt(detail?.marginBottom);
|
|
127
|
-
const newValue = `${currentValue}px`;
|
|
128
|
-
if ($bottomDrag.current && $bottomBg.current) {
|
|
129
|
-
if (currentValue < 0) {
|
|
130
|
-
$bottomBg.current.style.display = 'none';
|
|
131
|
-
$bottomDrag.current.style.display = 'none';
|
|
132
|
-
} else {
|
|
133
|
-
$bottomBg.current.style.display = 'block';
|
|
134
|
-
$bottomDrag.current.style.display = 'block';
|
|
135
|
-
$bottomBg.current.style.height = newValue;
|
|
136
|
-
$bottomDrag.current.style.top = newValue;
|
|
137
|
-
}
|
|
138
|
-
}
|
|
139
|
-
}
|
|
140
|
-
}, []);
|
|
141
|
-
const isPopup = (el)=>{
|
|
142
|
-
const tag = el.getAttribute('data-component-tag');
|
|
143
|
-
return tag === 'Dialog';
|
|
144
|
-
};
|
|
145
|
-
const isSticky = (el)=>{
|
|
146
|
-
const tag = el.getAttribute('data-component-tag');
|
|
147
|
-
return tag === 'Sticky';
|
|
148
|
-
};
|
|
149
|
-
const setPositionSpacing = react.useCallback((paddingLeft)=>{
|
|
150
|
-
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
151
|
-
if ($component) {
|
|
152
|
-
if (isPopup($component) || isSticky($component)) return;
|
|
153
|
-
const toolbar = $component && getChildrenByAttrSelector($component, 'data-toolbar');
|
|
154
|
-
const isActive = toolbar && toolbar.getAttribute('data-toolbar-active');
|
|
155
|
-
if (isActive && paddingLeft) {
|
|
156
|
-
const currentValue = isNaN(parseInt(paddingLeft)) ? 0 : Math.max(parseInt(paddingLeft), 0);
|
|
157
|
-
const newValue = `-${currentValue}px`;
|
|
158
|
-
const translateCss = `translate(-${currentValue}px, -100%)`;
|
|
159
|
-
if ($bottomDrag.current && $bottomBg.current) {
|
|
160
|
-
$bottomBg.current.style.left = newValue;
|
|
161
|
-
$bottomDrag.current.style.transform = translateCss;
|
|
162
|
-
}
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
}, []);
|
|
166
|
-
const onUpdatePaddingLeft = react.useCallback((e)=>{
|
|
167
|
-
if (isDragging.current) return;
|
|
168
|
-
const detail = e.detail;
|
|
169
|
-
if (detail?.paddingLeft) {
|
|
170
|
-
setPositionSpacing(detail.paddingLeft);
|
|
171
|
-
}
|
|
172
|
-
}, [
|
|
173
|
-
setPositionSpacing
|
|
174
|
-
]);
|
|
175
|
-
react.useEffect(()=>{
|
|
176
|
-
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
177
|
-
if ($component) {
|
|
178
|
-
const style = getComputedStyle($component);
|
|
179
|
-
const paddingLeft = style.paddingLeft;
|
|
180
|
-
setPositionSpacing(paddingLeft);
|
|
181
|
-
}
|
|
182
|
-
});
|
|
183
|
-
react.useEffect(()=>{
|
|
184
|
-
window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
|
|
185
|
-
window.addEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
|
|
186
|
-
return ()=>{
|
|
187
|
-
window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
|
|
188
|
-
window.removeEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
|
|
189
|
-
};
|
|
190
|
-
}, [
|
|
191
|
-
onUpdateMarginBottom,
|
|
192
|
-
onUpdatePaddingLeft
|
|
193
|
-
]);
|
|
194
|
-
return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
195
|
-
children: props.tag !== 'Section' && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
196
|
-
"data-spacing": true,
|
|
197
|
-
"data-spacing-theme-section": isThemeSectionEditor,
|
|
198
|
-
className: "absolute w-full bottom-0",
|
|
199
|
-
children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
200
|
-
"data-spacing-margin-bottom": true,
|
|
201
|
-
children: [
|
|
202
|
-
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
203
|
-
"data-spacing-margin-bottom-bg": true,
|
|
204
|
-
ref: $bottomBg,
|
|
205
|
-
children: /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
206
|
-
"data-spacing-margin-bottom-value": true
|
|
207
|
-
})
|
|
208
|
-
}),
|
|
209
|
-
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
210
|
-
ref: $bottomDrag,
|
|
211
|
-
"data-spacing-margin-bottom-drag": true,
|
|
212
|
-
onMouseDown: onMouseDown,
|
|
213
|
-
onMouseUp: onMouseUp,
|
|
214
|
-
role: "presentation"
|
|
215
|
-
})
|
|
216
|
-
]
|
|
217
|
-
})
|
|
218
|
-
})
|
|
219
|
-
});
|
|
220
|
-
}
|
|
221
|
-
|
|
222
|
-
exports.default = Spacing;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx, Fragment } from 'react/jsx-runtime';
|
|
2
|
-
import Spacing from './Spacing.js';
|
|
3
|
-
|
|
4
|
-
function Resize(props) {
|
|
5
|
-
return /*#__PURE__*/ jsx(Fragment, {
|
|
6
|
-
children: /*#__PURE__*/ jsx(Spacing, {
|
|
7
|
-
...props
|
|
8
|
-
})
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export { Resize as default };
|
|
@@ -1,218 +0,0 @@
|
|
|
1
|
-
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
|
-
import { useRef, useCallback, useEffect } from 'react';
|
|
3
|
-
import 'zustand';
|
|
4
|
-
import { useBuilderPreviewStore } from '../../contexts/BuilderPreviewContext.js';
|
|
5
|
-
import 'swr';
|
|
6
|
-
import '@gem-sdk/adapter-shopify';
|
|
7
|
-
import 'swr/mutation';
|
|
8
|
-
import 'vanilla-lazyload';
|
|
9
|
-
import '../../hooks/useCartUI.js';
|
|
10
|
-
import 'react-transition-group';
|
|
11
|
-
import '@gem-sdk/core';
|
|
12
|
-
import '../../helpers/convert.js';
|
|
13
|
-
|
|
14
|
-
function Spacing(props) {
|
|
15
|
-
const isThemeSectionEditor = useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
|
|
16
|
-
const $bottomDrag = useRef(null);
|
|
17
|
-
const $bottomBg = useRef(null);
|
|
18
|
-
const delayMouseMove = useRef(null);
|
|
19
|
-
const isDragging = useRef(false);
|
|
20
|
-
const startY = useRef(0);
|
|
21
|
-
const marginBottom = useRef(0);
|
|
22
|
-
const getNewValueMargin = (event)=>{
|
|
23
|
-
const top = event.clientY;
|
|
24
|
-
const diffY = Math.ceil(top - startY.current);
|
|
25
|
-
const currentValue = marginBottom.current || 0;
|
|
26
|
-
const newValue = currentValue + diffY >= 0 ? `${currentValue + diffY}px` : `0px`;
|
|
27
|
-
return {
|
|
28
|
-
newValue
|
|
29
|
-
};
|
|
30
|
-
};
|
|
31
|
-
const onMouseMoveDocument = (event)=>{
|
|
32
|
-
if ($bottomDrag.current && $bottomBg.current) {
|
|
33
|
-
// $bottomDrag.current.
|
|
34
|
-
const { newValue } = getNewValueMargin(event);
|
|
35
|
-
$bottomBg.current.style.height = newValue;
|
|
36
|
-
$bottomDrag.current.style.top = newValue;
|
|
37
|
-
const $component = $bottomDrag.current.closest('[data-toolbar-wrap]');
|
|
38
|
-
if ($component) {
|
|
39
|
-
$component.style.marginBottom = newValue;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
};
|
|
43
|
-
const onMouseUpDocument = ()=>{
|
|
44
|
-
endDrag();
|
|
45
|
-
};
|
|
46
|
-
const startDrag = ()=>{
|
|
47
|
-
if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
|
|
48
|
-
delayMouseMove.current = setTimeout(()=>{
|
|
49
|
-
isDragging.current = true;
|
|
50
|
-
const event = new CustomEvent('editor:toolbar:resize-spacing', {
|
|
51
|
-
bubbles: true,
|
|
52
|
-
detail: {
|
|
53
|
-
value: true
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
window.dispatchEvent(event);
|
|
57
|
-
document.addEventListener('mousemove', onMouseMoveDocument);
|
|
58
|
-
document.addEventListener('mouseup', onMouseUpDocument);
|
|
59
|
-
}, 100);
|
|
60
|
-
};
|
|
61
|
-
const endDrag = ()=>{
|
|
62
|
-
if (delayMouseMove.current) clearTimeout(delayMouseMove.current);
|
|
63
|
-
isDragging.current = false;
|
|
64
|
-
const event = new CustomEvent('editor:toolbar:resize-spacing', {
|
|
65
|
-
bubbles: true,
|
|
66
|
-
detail: {
|
|
67
|
-
value: false
|
|
68
|
-
}
|
|
69
|
-
});
|
|
70
|
-
window.dispatchEvent(event);
|
|
71
|
-
if ($bottomDrag.current) {
|
|
72
|
-
const style = getComputedStyle($bottomDrag.current);
|
|
73
|
-
const marginBottom = style.top;
|
|
74
|
-
const event = new CustomEvent('editor:toolbar:change-margin-bottom', {
|
|
75
|
-
bubbles: true,
|
|
76
|
-
detail: {
|
|
77
|
-
componentUid: props.uid,
|
|
78
|
-
marginBottom
|
|
79
|
-
}
|
|
80
|
-
});
|
|
81
|
-
window.dispatchEvent(event);
|
|
82
|
-
}
|
|
83
|
-
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
84
|
-
if ($component) {
|
|
85
|
-
$component.style.marginBottom = '';
|
|
86
|
-
}
|
|
87
|
-
document.removeEventListener('mousemove', onMouseMoveDocument);
|
|
88
|
-
document.removeEventListener('mouseup', onMouseUpDocument);
|
|
89
|
-
};
|
|
90
|
-
const onMouseDown = (event)=>{
|
|
91
|
-
if ($bottomDrag.current) {
|
|
92
|
-
const style = getComputedStyle($bottomDrag.current);
|
|
93
|
-
startY.current = event.clientY;
|
|
94
|
-
marginBottom.current = parseFloat(style.top);
|
|
95
|
-
startDrag();
|
|
96
|
-
}
|
|
97
|
-
};
|
|
98
|
-
const onMouseUp = ()=>{
|
|
99
|
-
endDrag();
|
|
100
|
-
};
|
|
101
|
-
const getChildrenByAttrSelector = ($el, attrSelector)=>{
|
|
102
|
-
const childLen = $el.children.length;
|
|
103
|
-
if (childLen) {
|
|
104
|
-
for(let i = 0; i < childLen; i++){
|
|
105
|
-
const children = $el.children[i];
|
|
106
|
-
if (children) {
|
|
107
|
-
const is = children.getAttribute(attrSelector);
|
|
108
|
-
if (is) {
|
|
109
|
-
return children;
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
};
|
|
115
|
-
const onUpdateMarginBottom = useCallback((e)=>{
|
|
116
|
-
if (isDragging.current) return;
|
|
117
|
-
const detail = e.detail;
|
|
118
|
-
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
119
|
-
const toolbar = $component && getChildrenByAttrSelector($component, 'data-toolbar');
|
|
120
|
-
const isActive = toolbar && toolbar.getAttribute('data-toolbar-active');
|
|
121
|
-
if (isActive && detail?.marginBottom) {
|
|
122
|
-
const currentValue = parseInt(detail?.marginBottom);
|
|
123
|
-
const newValue = `${currentValue}px`;
|
|
124
|
-
if ($bottomDrag.current && $bottomBg.current) {
|
|
125
|
-
if (currentValue < 0) {
|
|
126
|
-
$bottomBg.current.style.display = 'none';
|
|
127
|
-
$bottomDrag.current.style.display = 'none';
|
|
128
|
-
} else {
|
|
129
|
-
$bottomBg.current.style.display = 'block';
|
|
130
|
-
$bottomDrag.current.style.display = 'block';
|
|
131
|
-
$bottomBg.current.style.height = newValue;
|
|
132
|
-
$bottomDrag.current.style.top = newValue;
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
}, []);
|
|
137
|
-
const isPopup = (el)=>{
|
|
138
|
-
const tag = el.getAttribute('data-component-tag');
|
|
139
|
-
return tag === 'Dialog';
|
|
140
|
-
};
|
|
141
|
-
const isSticky = (el)=>{
|
|
142
|
-
const tag = el.getAttribute('data-component-tag');
|
|
143
|
-
return tag === 'Sticky';
|
|
144
|
-
};
|
|
145
|
-
const setPositionSpacing = useCallback((paddingLeft)=>{
|
|
146
|
-
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
147
|
-
if ($component) {
|
|
148
|
-
if (isPopup($component) || isSticky($component)) return;
|
|
149
|
-
const toolbar = $component && getChildrenByAttrSelector($component, 'data-toolbar');
|
|
150
|
-
const isActive = toolbar && toolbar.getAttribute('data-toolbar-active');
|
|
151
|
-
if (isActive && paddingLeft) {
|
|
152
|
-
const currentValue = isNaN(parseInt(paddingLeft)) ? 0 : Math.max(parseInt(paddingLeft), 0);
|
|
153
|
-
const newValue = `-${currentValue}px`;
|
|
154
|
-
const translateCss = `translate(-${currentValue}px, -100%)`;
|
|
155
|
-
if ($bottomDrag.current && $bottomBg.current) {
|
|
156
|
-
$bottomBg.current.style.left = newValue;
|
|
157
|
-
$bottomDrag.current.style.transform = translateCss;
|
|
158
|
-
}
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
}, []);
|
|
162
|
-
const onUpdatePaddingLeft = useCallback((e)=>{
|
|
163
|
-
if (isDragging.current) return;
|
|
164
|
-
const detail = e.detail;
|
|
165
|
-
if (detail?.paddingLeft) {
|
|
166
|
-
setPositionSpacing(detail.paddingLeft);
|
|
167
|
-
}
|
|
168
|
-
}, [
|
|
169
|
-
setPositionSpacing
|
|
170
|
-
]);
|
|
171
|
-
useEffect(()=>{
|
|
172
|
-
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
173
|
-
if ($component) {
|
|
174
|
-
const style = getComputedStyle($component);
|
|
175
|
-
const paddingLeft = style.paddingLeft;
|
|
176
|
-
setPositionSpacing(paddingLeft);
|
|
177
|
-
}
|
|
178
|
-
});
|
|
179
|
-
useEffect(()=>{
|
|
180
|
-
window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
|
|
181
|
-
window.addEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
|
|
182
|
-
return ()=>{
|
|
183
|
-
window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
|
|
184
|
-
window.removeEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
|
|
185
|
-
};
|
|
186
|
-
}, [
|
|
187
|
-
onUpdateMarginBottom,
|
|
188
|
-
onUpdatePaddingLeft
|
|
189
|
-
]);
|
|
190
|
-
return /*#__PURE__*/ jsx(Fragment, {
|
|
191
|
-
children: props.tag !== 'Section' && /*#__PURE__*/ jsx("div", {
|
|
192
|
-
"data-spacing": true,
|
|
193
|
-
"data-spacing-theme-section": isThemeSectionEditor,
|
|
194
|
-
className: "absolute w-full bottom-0",
|
|
195
|
-
children: /*#__PURE__*/ jsxs("div", {
|
|
196
|
-
"data-spacing-margin-bottom": true,
|
|
197
|
-
children: [
|
|
198
|
-
/*#__PURE__*/ jsx("div", {
|
|
199
|
-
"data-spacing-margin-bottom-bg": true,
|
|
200
|
-
ref: $bottomBg,
|
|
201
|
-
children: /*#__PURE__*/ jsx("div", {
|
|
202
|
-
"data-spacing-margin-bottom-value": true
|
|
203
|
-
})
|
|
204
|
-
}),
|
|
205
|
-
/*#__PURE__*/ jsx("div", {
|
|
206
|
-
ref: $bottomDrag,
|
|
207
|
-
"data-spacing-margin-bottom-drag": true,
|
|
208
|
-
onMouseDown: onMouseDown,
|
|
209
|
-
onMouseUp: onMouseUp,
|
|
210
|
-
role: "presentation"
|
|
211
|
-
})
|
|
212
|
-
]
|
|
213
|
-
})
|
|
214
|
-
})
|
|
215
|
-
});
|
|
216
|
-
}
|
|
217
|
-
|
|
218
|
-
export { Spacing as default };
|