@gem-sdk/core 1.23.0-moon.58 → 1.23.0-moon.60
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.
|
@@ -0,0 +1,280 @@
|
|
|
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
|
+
var cls = require('../../helpers/cls.js');
|
|
15
|
+
require('react-transition-group');
|
|
16
|
+
require('@gem-sdk/core');
|
|
17
|
+
require('../../helpers/convert.js');
|
|
18
|
+
|
|
19
|
+
function Column(props) {
|
|
20
|
+
const WIDTH_HAND = 16;
|
|
21
|
+
const isThemeSectionEditor = BuilderPreviewContext.useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
|
|
22
|
+
const [visualLayout, setVisualLayout] = react.useState(props.settings?.layout);
|
|
23
|
+
const [currentLayout, setCurrentLayout] = react.useState(props.settings?.layout);
|
|
24
|
+
const verticalGutter = props.styles?.verticalGutter;
|
|
25
|
+
const dataDrag = react.useRef();
|
|
26
|
+
const [isDragging, setIsDragging] = react.useState(false);
|
|
27
|
+
const newValueCols = react.useRef([]);
|
|
28
|
+
// Watch props change layout
|
|
29
|
+
react.useEffect(()=>{
|
|
30
|
+
setVisualLayout(props.settings?.layout);
|
|
31
|
+
setCurrentLayout(props.settings?.layout);
|
|
32
|
+
}, [
|
|
33
|
+
props
|
|
34
|
+
]);
|
|
35
|
+
// Validate resize column
|
|
36
|
+
if (![
|
|
37
|
+
'Row',
|
|
38
|
+
'Product',
|
|
39
|
+
'HeroBanner'
|
|
40
|
+
].includes(props.tag)) return;
|
|
41
|
+
const getTotalCol = (cols, i)=>{
|
|
42
|
+
const cloneToIndex = cols.slice().splice(0, i + 1);
|
|
43
|
+
return cloneToIndex.reduce((accumulator, currentValue)=>{
|
|
44
|
+
return accumulator + currentValue;
|
|
45
|
+
}, 0);
|
|
46
|
+
};
|
|
47
|
+
const getPositionLeft = ({ totalCol, len, gap, index })=>{
|
|
48
|
+
const width = totalCol / 12;
|
|
49
|
+
return `calc(100%*${width} - ${gap}*${0.5 - width} + ${gap}*${(12 / len * (index + 1) - totalCol) / (12 / len)} - ${WIDTH_HAND / 2}px)`;
|
|
50
|
+
};
|
|
51
|
+
const endDrag = ()=>{
|
|
52
|
+
setIsDragging(false);
|
|
53
|
+
document.body.style.cursor = '';
|
|
54
|
+
if (!dataDrag.current) return;
|
|
55
|
+
// Emit change value
|
|
56
|
+
const device = dataDrag.current.device;
|
|
57
|
+
const cols = currentLayout?.[device]?.cols || [];
|
|
58
|
+
if (JSON.stringify(newValueCols.current) !== JSON.stringify(cols) && newValueCols.current.length) {
|
|
59
|
+
window.dispatchEvent(new CustomEvent('editor:toolbar:change-column', {
|
|
60
|
+
bubbles: true,
|
|
61
|
+
detail: {
|
|
62
|
+
componentUid: dataDrag.current.componentUid,
|
|
63
|
+
cols: newValueCols.current
|
|
64
|
+
}
|
|
65
|
+
}));
|
|
66
|
+
}
|
|
67
|
+
window.dispatchEvent(new CustomEvent('editor:toolbar:resize-column', {
|
|
68
|
+
bubbles: true,
|
|
69
|
+
detail: {
|
|
70
|
+
value: false
|
|
71
|
+
}
|
|
72
|
+
}));
|
|
73
|
+
// Remove style inline
|
|
74
|
+
setChangeVisualNewColumns(false, []);
|
|
75
|
+
dataDrag.current = undefined;
|
|
76
|
+
document.removeEventListener('mousemove', onMouseMoveDocument);
|
|
77
|
+
document.removeEventListener('mouseup', onMouseUpDocument);
|
|
78
|
+
};
|
|
79
|
+
const setChangeVisualNewColumns = (value, newCols)=>{
|
|
80
|
+
if (!dataDrag.current) return;
|
|
81
|
+
const $components = document.querySelectorAll(`[data-uid="${dataDrag.current.componentUid}"]`);
|
|
82
|
+
if ($components.length) {
|
|
83
|
+
$components.forEach(($component)=>{
|
|
84
|
+
let $row = $component;
|
|
85
|
+
const tagRow = $row.getAttribute('data-component-tag');
|
|
86
|
+
if (tagRow !== 'Row') {
|
|
87
|
+
const $firstCol = $component.querySelector('[data-component-tag="Col"]');
|
|
88
|
+
if ($firstCol && $firstCol.parentElement) {
|
|
89
|
+
$row = $firstCol.parentElement;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
if ($row) {
|
|
93
|
+
if (value) {
|
|
94
|
+
$row.style.gridTemplateColumns = newCols.map((col)=>`minmax(0, ${col}fr)`).join(' ');
|
|
95
|
+
} else {
|
|
96
|
+
$row.style.gridTemplateColumns = '';
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
}
|
|
101
|
+
};
|
|
102
|
+
const onMouseMoveDocument = (event)=>{
|
|
103
|
+
if (!dataDrag.current) return;
|
|
104
|
+
const currentX = event.clientX;
|
|
105
|
+
const diffX = currentX - (dataDrag.current.startX ?? 0);
|
|
106
|
+
const diffXAbs = Math.abs(diffX);
|
|
107
|
+
const index = dataDrag.current.index;
|
|
108
|
+
const device = dataDrag.current.device ?? 'desktop';
|
|
109
|
+
const itemWidth = dataDrag.current.itemWidth ?? 0;
|
|
110
|
+
const cols = currentLayout?.[device]?.cols || [];
|
|
111
|
+
const newCols = cols.slice();
|
|
112
|
+
// Change value
|
|
113
|
+
if (diffXAbs >= itemWidth) {
|
|
114
|
+
const times = Math.round(diffXAbs / itemWidth);
|
|
115
|
+
const action = diffX >= 0 ? 'plus' : 'minus';
|
|
116
|
+
if (action == 'minus') {
|
|
117
|
+
const currentCol = newCols[index] ?? 1;
|
|
118
|
+
if (currentCol - times > 1) {
|
|
119
|
+
newCols[index] = (newCols[index] ?? 0) - times;
|
|
120
|
+
newCols[index + 1] = (newCols[index + 1] ?? 0) + times;
|
|
121
|
+
} else {
|
|
122
|
+
newCols[index + 1] = (newCols[index + 1] ?? 0) + (newCols[index] ?? 0) - 1;
|
|
123
|
+
newCols[index] = 1;
|
|
124
|
+
}
|
|
125
|
+
} else {
|
|
126
|
+
const nextCol = newCols[index + 1] ?? 1;
|
|
127
|
+
if (nextCol - times > 1) {
|
|
128
|
+
newCols[index + 1] = (newCols[index + 1] ?? 0) - times;
|
|
129
|
+
newCols[index] = (newCols[index] ?? 0) + times;
|
|
130
|
+
} else {
|
|
131
|
+
newCols[index] = (newCols[index] ?? 0) + (newCols[index + 1] ?? 0) - 1;
|
|
132
|
+
newCols[index + 1] = 1;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
// Cancel when value not change
|
|
137
|
+
if (JSON.stringify(newValueCols.current) === JSON.stringify(newCols)) {
|
|
138
|
+
return;
|
|
139
|
+
}
|
|
140
|
+
// Update new value to ui
|
|
141
|
+
if (JSON.stringify(newValueCols.current) !== JSON.stringify(newCols)) {
|
|
142
|
+
newValueCols.current = newCols; // cache new value
|
|
143
|
+
setVisualLayout({
|
|
144
|
+
...currentLayout,
|
|
145
|
+
[device]: {
|
|
146
|
+
...currentLayout?.[device],
|
|
147
|
+
cols: newCols
|
|
148
|
+
}
|
|
149
|
+
});
|
|
150
|
+
setChangeVisualNewColumns(true, newCols);
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
const onMouseUpDocument = ()=>{
|
|
154
|
+
endDrag();
|
|
155
|
+
};
|
|
156
|
+
const onMouseDown = (event, { device, totalCol, index })=>{
|
|
157
|
+
const target = event.target;
|
|
158
|
+
if (target) {
|
|
159
|
+
const $component = target.closest('[data-uid]');
|
|
160
|
+
if ($component) {
|
|
161
|
+
document.removeEventListener('mousemove', onMouseMoveDocument);
|
|
162
|
+
document.removeEventListener('mouseup', onMouseUpDocument);
|
|
163
|
+
document.addEventListener('mousemove', onMouseMoveDocument);
|
|
164
|
+
document.addEventListener('mouseup', onMouseUpDocument);
|
|
165
|
+
setIsDragging(true);
|
|
166
|
+
const componentUid = $component.getAttribute('data-uid') || undefined;
|
|
167
|
+
const handRect = target.getBoundingClientRect();
|
|
168
|
+
const componentRect = $component.getBoundingClientRect();
|
|
169
|
+
dataDrag.current = {
|
|
170
|
+
componentUid,
|
|
171
|
+
device,
|
|
172
|
+
index,
|
|
173
|
+
startX: event.clientX,
|
|
174
|
+
itemWidth: (handRect.left - componentRect.left) / totalCol
|
|
175
|
+
};
|
|
176
|
+
document.body.style.cursor = 'grab';
|
|
177
|
+
window.dispatchEvent(new CustomEvent('editor:toolbar:resize-column', {
|
|
178
|
+
bubbles: true,
|
|
179
|
+
detail: {
|
|
180
|
+
value: true
|
|
181
|
+
}
|
|
182
|
+
}));
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
};
|
|
186
|
+
const onMouseUp = ()=>{
|
|
187
|
+
endDrag();
|
|
188
|
+
};
|
|
189
|
+
const isActive = (device, index)=>{
|
|
190
|
+
return dataDrag.current?.componentUid == props.uid && dataDrag.current.device == device && dataDrag.current.index == index;
|
|
191
|
+
};
|
|
192
|
+
const HandDragItems = ()=>{
|
|
193
|
+
const items = [];
|
|
194
|
+
const devices = [
|
|
195
|
+
'desktop',
|
|
196
|
+
'tablet',
|
|
197
|
+
'mobile'
|
|
198
|
+
];
|
|
199
|
+
for (const device of devices){
|
|
200
|
+
if (visualLayout?.[device]) {
|
|
201
|
+
const cols = visualLayout?.[device]?.cols || visualLayout?.desktop?.cols || [];
|
|
202
|
+
const colDisplay = visualLayout?.[device]?.display || visualLayout?.desktop?.display || 'fit';
|
|
203
|
+
if (colDisplay == 'fill') {
|
|
204
|
+
const len = cols.length;
|
|
205
|
+
for(let i = 0; i < len - 1; i++){
|
|
206
|
+
const col = cols[i];
|
|
207
|
+
if (col) {
|
|
208
|
+
const totalCol = getTotalCol(cols, i);
|
|
209
|
+
const gap = verticalGutter?.[device] || verticalGutter?.desktop || '0px';
|
|
210
|
+
const left = getPositionLeft({
|
|
211
|
+
index: i,
|
|
212
|
+
len,
|
|
213
|
+
gap,
|
|
214
|
+
totalCol
|
|
215
|
+
});
|
|
216
|
+
items.push(/*#__PURE__*/ jsxRuntime.jsxs("div", {
|
|
217
|
+
role: "presentation",
|
|
218
|
+
"data-column-hand-drag": true,
|
|
219
|
+
"data-col": col,
|
|
220
|
+
"data-gap": gap,
|
|
221
|
+
"data-column-hand-drag-active": isActive(device, i),
|
|
222
|
+
className: cls.cls('absolute h-full cursor-grab', {
|
|
223
|
+
hidden: device !== 'desktop',
|
|
224
|
+
flex: device === 'desktop',
|
|
225
|
+
'tablet:hidden': device !== 'tablet',
|
|
226
|
+
'tablet:flex': device === 'tablet',
|
|
227
|
+
'mobile:hidden': device !== 'mobile',
|
|
228
|
+
'mobile:flex': device === 'mobile'
|
|
229
|
+
}),
|
|
230
|
+
style: {
|
|
231
|
+
width: `${WIDTH_HAND}px`,
|
|
232
|
+
top: '0px',
|
|
233
|
+
left: left
|
|
234
|
+
},
|
|
235
|
+
onMouseDown: (e)=>onMouseDown(e, {
|
|
236
|
+
device,
|
|
237
|
+
totalCol,
|
|
238
|
+
index: i
|
|
239
|
+
}),
|
|
240
|
+
onMouseUp: onMouseUp,
|
|
241
|
+
children: [
|
|
242
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
243
|
+
"data-column-hand-visual": true
|
|
244
|
+
}),
|
|
245
|
+
/*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
246
|
+
"data-column-hand-visual-drag": true,
|
|
247
|
+
children: /*#__PURE__*/ jsxRuntime.jsxs("svg", {
|
|
248
|
+
viewBox: "0 0 20 20",
|
|
249
|
+
children: [
|
|
250
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
251
|
+
d: "M12.75 3.5a.75.75 0 0 0 0 1.5h1.19l-3.22 3.22a.75.75 0 0 0 1.06 1.06l3.22-3.22v1.19a.75.75 0 0 0 1.5 0v-3a.75.75 0 0 0-.75-.75h-3Z",
|
|
252
|
+
fill: "currentColor"
|
|
253
|
+
}),
|
|
254
|
+
/*#__PURE__*/ jsxRuntime.jsx("path", {
|
|
255
|
+
d: "M7.25 16.5a.75.75 0 0 0 0-1.5h-1.19l3.22-3.22a.75.75 0 1 0-1.06-1.06l-3.22 3.22v-1.19a.75.75 0 0 0-1.5 0v3c0 .414.336.75.75.75h3Z",
|
|
256
|
+
fill: "currentColor"
|
|
257
|
+
})
|
|
258
|
+
]
|
|
259
|
+
})
|
|
260
|
+
})
|
|
261
|
+
]
|
|
262
|
+
}, `${device}-${i}`));
|
|
263
|
+
}
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
return items;
|
|
269
|
+
};
|
|
270
|
+
return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
271
|
+
children: /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
272
|
+
"data-column": true,
|
|
273
|
+
"data-column-theme-section": isThemeSectionEditor,
|
|
274
|
+
"data-column-is-drag-visible": isDragging,
|
|
275
|
+
children: HandDragItems()
|
|
276
|
+
})
|
|
277
|
+
});
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
exports.default = Column;
|
|
@@ -3,13 +3,19 @@
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
5
|
var jsxRuntime = require('react/jsx-runtime');
|
|
6
|
+
var Column = require('./Column.js');
|
|
6
7
|
var Spacing = require('./Spacing.js');
|
|
7
8
|
|
|
8
9
|
function Resize(props) {
|
|
9
|
-
return /*#__PURE__*/ jsxRuntime.
|
|
10
|
-
children:
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
|
|
11
|
+
children: [
|
|
12
|
+
/*#__PURE__*/ jsxRuntime.jsx(Spacing.default, {
|
|
13
|
+
...props
|
|
14
|
+
}),
|
|
15
|
+
/*#__PURE__*/ jsxRuntime.jsx(Column.default, {
|
|
16
|
+
...props
|
|
17
|
+
})
|
|
18
|
+
]
|
|
13
19
|
});
|
|
14
20
|
}
|
|
15
21
|
|
|
@@ -0,0 +1,276 @@
|
|
|
1
|
+
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import { useState, useRef, 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 { cls } from '../../helpers/cls.js';
|
|
11
|
+
import 'react-transition-group';
|
|
12
|
+
import '@gem-sdk/core';
|
|
13
|
+
import '../../helpers/convert.js';
|
|
14
|
+
|
|
15
|
+
function Column(props) {
|
|
16
|
+
const WIDTH_HAND = 16;
|
|
17
|
+
const isThemeSectionEditor = useBuilderPreviewStore((s)=>s.isThemeSectionEditor);
|
|
18
|
+
const [visualLayout, setVisualLayout] = useState(props.settings?.layout);
|
|
19
|
+
const [currentLayout, setCurrentLayout] = useState(props.settings?.layout);
|
|
20
|
+
const verticalGutter = props.styles?.verticalGutter;
|
|
21
|
+
const dataDrag = useRef();
|
|
22
|
+
const [isDragging, setIsDragging] = useState(false);
|
|
23
|
+
const newValueCols = useRef([]);
|
|
24
|
+
// Watch props change layout
|
|
25
|
+
useEffect(()=>{
|
|
26
|
+
setVisualLayout(props.settings?.layout);
|
|
27
|
+
setCurrentLayout(props.settings?.layout);
|
|
28
|
+
}, [
|
|
29
|
+
props
|
|
30
|
+
]);
|
|
31
|
+
// Validate resize column
|
|
32
|
+
if (![
|
|
33
|
+
'Row',
|
|
34
|
+
'Product',
|
|
35
|
+
'HeroBanner'
|
|
36
|
+
].includes(props.tag)) return;
|
|
37
|
+
const getTotalCol = (cols, i)=>{
|
|
38
|
+
const cloneToIndex = cols.slice().splice(0, i + 1);
|
|
39
|
+
return cloneToIndex.reduce((accumulator, currentValue)=>{
|
|
40
|
+
return accumulator + currentValue;
|
|
41
|
+
}, 0);
|
|
42
|
+
};
|
|
43
|
+
const getPositionLeft = ({ totalCol, len, gap, index })=>{
|
|
44
|
+
const width = totalCol / 12;
|
|
45
|
+
return `calc(100%*${width} - ${gap}*${0.5 - width} + ${gap}*${(12 / len * (index + 1) - totalCol) / (12 / len)} - ${WIDTH_HAND / 2}px)`;
|
|
46
|
+
};
|
|
47
|
+
const endDrag = ()=>{
|
|
48
|
+
setIsDragging(false);
|
|
49
|
+
document.body.style.cursor = '';
|
|
50
|
+
if (!dataDrag.current) return;
|
|
51
|
+
// Emit change value
|
|
52
|
+
const device = dataDrag.current.device;
|
|
53
|
+
const cols = currentLayout?.[device]?.cols || [];
|
|
54
|
+
if (JSON.stringify(newValueCols.current) !== JSON.stringify(cols) && newValueCols.current.length) {
|
|
55
|
+
window.dispatchEvent(new CustomEvent('editor:toolbar:change-column', {
|
|
56
|
+
bubbles: true,
|
|
57
|
+
detail: {
|
|
58
|
+
componentUid: dataDrag.current.componentUid,
|
|
59
|
+
cols: newValueCols.current
|
|
60
|
+
}
|
|
61
|
+
}));
|
|
62
|
+
}
|
|
63
|
+
window.dispatchEvent(new CustomEvent('editor:toolbar:resize-column', {
|
|
64
|
+
bubbles: true,
|
|
65
|
+
detail: {
|
|
66
|
+
value: false
|
|
67
|
+
}
|
|
68
|
+
}));
|
|
69
|
+
// Remove style inline
|
|
70
|
+
setChangeVisualNewColumns(false, []);
|
|
71
|
+
dataDrag.current = undefined;
|
|
72
|
+
document.removeEventListener('mousemove', onMouseMoveDocument);
|
|
73
|
+
document.removeEventListener('mouseup', onMouseUpDocument);
|
|
74
|
+
};
|
|
75
|
+
const setChangeVisualNewColumns = (value, newCols)=>{
|
|
76
|
+
if (!dataDrag.current) return;
|
|
77
|
+
const $components = document.querySelectorAll(`[data-uid="${dataDrag.current.componentUid}"]`);
|
|
78
|
+
if ($components.length) {
|
|
79
|
+
$components.forEach(($component)=>{
|
|
80
|
+
let $row = $component;
|
|
81
|
+
const tagRow = $row.getAttribute('data-component-tag');
|
|
82
|
+
if (tagRow !== 'Row') {
|
|
83
|
+
const $firstCol = $component.querySelector('[data-component-tag="Col"]');
|
|
84
|
+
if ($firstCol && $firstCol.parentElement) {
|
|
85
|
+
$row = $firstCol.parentElement;
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
if ($row) {
|
|
89
|
+
if (value) {
|
|
90
|
+
$row.style.gridTemplateColumns = newCols.map((col)=>`minmax(0, ${col}fr)`).join(' ');
|
|
91
|
+
} else {
|
|
92
|
+
$row.style.gridTemplateColumns = '';
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
});
|
|
96
|
+
}
|
|
97
|
+
};
|
|
98
|
+
const onMouseMoveDocument = (event)=>{
|
|
99
|
+
if (!dataDrag.current) return;
|
|
100
|
+
const currentX = event.clientX;
|
|
101
|
+
const diffX = currentX - (dataDrag.current.startX ?? 0);
|
|
102
|
+
const diffXAbs = Math.abs(diffX);
|
|
103
|
+
const index = dataDrag.current.index;
|
|
104
|
+
const device = dataDrag.current.device ?? 'desktop';
|
|
105
|
+
const itemWidth = dataDrag.current.itemWidth ?? 0;
|
|
106
|
+
const cols = currentLayout?.[device]?.cols || [];
|
|
107
|
+
const newCols = cols.slice();
|
|
108
|
+
// Change value
|
|
109
|
+
if (diffXAbs >= itemWidth) {
|
|
110
|
+
const times = Math.round(diffXAbs / itemWidth);
|
|
111
|
+
const action = diffX >= 0 ? 'plus' : 'minus';
|
|
112
|
+
if (action == 'minus') {
|
|
113
|
+
const currentCol = newCols[index] ?? 1;
|
|
114
|
+
if (currentCol - times > 1) {
|
|
115
|
+
newCols[index] = (newCols[index] ?? 0) - times;
|
|
116
|
+
newCols[index + 1] = (newCols[index + 1] ?? 0) + times;
|
|
117
|
+
} else {
|
|
118
|
+
newCols[index + 1] = (newCols[index + 1] ?? 0) + (newCols[index] ?? 0) - 1;
|
|
119
|
+
newCols[index] = 1;
|
|
120
|
+
}
|
|
121
|
+
} else {
|
|
122
|
+
const nextCol = newCols[index + 1] ?? 1;
|
|
123
|
+
if (nextCol - times > 1) {
|
|
124
|
+
newCols[index + 1] = (newCols[index + 1] ?? 0) - times;
|
|
125
|
+
newCols[index] = (newCols[index] ?? 0) + times;
|
|
126
|
+
} else {
|
|
127
|
+
newCols[index] = (newCols[index] ?? 0) + (newCols[index + 1] ?? 0) - 1;
|
|
128
|
+
newCols[index + 1] = 1;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
// Cancel when value not change
|
|
133
|
+
if (JSON.stringify(newValueCols.current) === JSON.stringify(newCols)) {
|
|
134
|
+
return;
|
|
135
|
+
}
|
|
136
|
+
// Update new value to ui
|
|
137
|
+
if (JSON.stringify(newValueCols.current) !== JSON.stringify(newCols)) {
|
|
138
|
+
newValueCols.current = newCols; // cache new value
|
|
139
|
+
setVisualLayout({
|
|
140
|
+
...currentLayout,
|
|
141
|
+
[device]: {
|
|
142
|
+
...currentLayout?.[device],
|
|
143
|
+
cols: newCols
|
|
144
|
+
}
|
|
145
|
+
});
|
|
146
|
+
setChangeVisualNewColumns(true, newCols);
|
|
147
|
+
}
|
|
148
|
+
};
|
|
149
|
+
const onMouseUpDocument = ()=>{
|
|
150
|
+
endDrag();
|
|
151
|
+
};
|
|
152
|
+
const onMouseDown = (event, { device, totalCol, index })=>{
|
|
153
|
+
const target = event.target;
|
|
154
|
+
if (target) {
|
|
155
|
+
const $component = target.closest('[data-uid]');
|
|
156
|
+
if ($component) {
|
|
157
|
+
document.removeEventListener('mousemove', onMouseMoveDocument);
|
|
158
|
+
document.removeEventListener('mouseup', onMouseUpDocument);
|
|
159
|
+
document.addEventListener('mousemove', onMouseMoveDocument);
|
|
160
|
+
document.addEventListener('mouseup', onMouseUpDocument);
|
|
161
|
+
setIsDragging(true);
|
|
162
|
+
const componentUid = $component.getAttribute('data-uid') || undefined;
|
|
163
|
+
const handRect = target.getBoundingClientRect();
|
|
164
|
+
const componentRect = $component.getBoundingClientRect();
|
|
165
|
+
dataDrag.current = {
|
|
166
|
+
componentUid,
|
|
167
|
+
device,
|
|
168
|
+
index,
|
|
169
|
+
startX: event.clientX,
|
|
170
|
+
itemWidth: (handRect.left - componentRect.left) / totalCol
|
|
171
|
+
};
|
|
172
|
+
document.body.style.cursor = 'grab';
|
|
173
|
+
window.dispatchEvent(new CustomEvent('editor:toolbar:resize-column', {
|
|
174
|
+
bubbles: true,
|
|
175
|
+
detail: {
|
|
176
|
+
value: true
|
|
177
|
+
}
|
|
178
|
+
}));
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
};
|
|
182
|
+
const onMouseUp = ()=>{
|
|
183
|
+
endDrag();
|
|
184
|
+
};
|
|
185
|
+
const isActive = (device, index)=>{
|
|
186
|
+
return dataDrag.current?.componentUid == props.uid && dataDrag.current.device == device && dataDrag.current.index == index;
|
|
187
|
+
};
|
|
188
|
+
const HandDragItems = ()=>{
|
|
189
|
+
const items = [];
|
|
190
|
+
const devices = [
|
|
191
|
+
'desktop',
|
|
192
|
+
'tablet',
|
|
193
|
+
'mobile'
|
|
194
|
+
];
|
|
195
|
+
for (const device of devices){
|
|
196
|
+
if (visualLayout?.[device]) {
|
|
197
|
+
const cols = visualLayout?.[device]?.cols || visualLayout?.desktop?.cols || [];
|
|
198
|
+
const colDisplay = visualLayout?.[device]?.display || visualLayout?.desktop?.display || 'fit';
|
|
199
|
+
if (colDisplay == 'fill') {
|
|
200
|
+
const len = cols.length;
|
|
201
|
+
for(let i = 0; i < len - 1; i++){
|
|
202
|
+
const col = cols[i];
|
|
203
|
+
if (col) {
|
|
204
|
+
const totalCol = getTotalCol(cols, i);
|
|
205
|
+
const gap = verticalGutter?.[device] || verticalGutter?.desktop || '0px';
|
|
206
|
+
const left = getPositionLeft({
|
|
207
|
+
index: i,
|
|
208
|
+
len,
|
|
209
|
+
gap,
|
|
210
|
+
totalCol
|
|
211
|
+
});
|
|
212
|
+
items.push(/*#__PURE__*/ jsxs("div", {
|
|
213
|
+
role: "presentation",
|
|
214
|
+
"data-column-hand-drag": true,
|
|
215
|
+
"data-col": col,
|
|
216
|
+
"data-gap": gap,
|
|
217
|
+
"data-column-hand-drag-active": isActive(device, i),
|
|
218
|
+
className: cls('absolute h-full cursor-grab', {
|
|
219
|
+
hidden: device !== 'desktop',
|
|
220
|
+
flex: device === 'desktop',
|
|
221
|
+
'tablet:hidden': device !== 'tablet',
|
|
222
|
+
'tablet:flex': device === 'tablet',
|
|
223
|
+
'mobile:hidden': device !== 'mobile',
|
|
224
|
+
'mobile:flex': device === 'mobile'
|
|
225
|
+
}),
|
|
226
|
+
style: {
|
|
227
|
+
width: `${WIDTH_HAND}px`,
|
|
228
|
+
top: '0px',
|
|
229
|
+
left: left
|
|
230
|
+
},
|
|
231
|
+
onMouseDown: (e)=>onMouseDown(e, {
|
|
232
|
+
device,
|
|
233
|
+
totalCol,
|
|
234
|
+
index: i
|
|
235
|
+
}),
|
|
236
|
+
onMouseUp: onMouseUp,
|
|
237
|
+
children: [
|
|
238
|
+
/*#__PURE__*/ jsx("div", {
|
|
239
|
+
"data-column-hand-visual": true
|
|
240
|
+
}),
|
|
241
|
+
/*#__PURE__*/ jsx("div", {
|
|
242
|
+
"data-column-hand-visual-drag": true,
|
|
243
|
+
children: /*#__PURE__*/ jsxs("svg", {
|
|
244
|
+
viewBox: "0 0 20 20",
|
|
245
|
+
children: [
|
|
246
|
+
/*#__PURE__*/ jsx("path", {
|
|
247
|
+
d: "M12.75 3.5a.75.75 0 0 0 0 1.5h1.19l-3.22 3.22a.75.75 0 0 0 1.06 1.06l3.22-3.22v1.19a.75.75 0 0 0 1.5 0v-3a.75.75 0 0 0-.75-.75h-3Z",
|
|
248
|
+
fill: "currentColor"
|
|
249
|
+
}),
|
|
250
|
+
/*#__PURE__*/ jsx("path", {
|
|
251
|
+
d: "M7.25 16.5a.75.75 0 0 0 0-1.5h-1.19l3.22-3.22a.75.75 0 1 0-1.06-1.06l-3.22 3.22v-1.19a.75.75 0 0 0-1.5 0v3c0 .414.336.75.75.75h3Z",
|
|
252
|
+
fill: "currentColor"
|
|
253
|
+
})
|
|
254
|
+
]
|
|
255
|
+
})
|
|
256
|
+
})
|
|
257
|
+
]
|
|
258
|
+
}, `${device}-${i}`));
|
|
259
|
+
}
|
|
260
|
+
}
|
|
261
|
+
}
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
return items;
|
|
265
|
+
};
|
|
266
|
+
return /*#__PURE__*/ jsx(Fragment, {
|
|
267
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
268
|
+
"data-column": true,
|
|
269
|
+
"data-column-theme-section": isThemeSectionEditor,
|
|
270
|
+
"data-column-is-drag-visible": isDragging,
|
|
271
|
+
children: HandDragItems()
|
|
272
|
+
})
|
|
273
|
+
});
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
export { Column as default };
|
|
@@ -1,11 +1,17 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import Column from './Column.js';
|
|
2
3
|
import Spacing from './Spacing.js';
|
|
3
4
|
|
|
4
5
|
function Resize(props) {
|
|
5
|
-
return /*#__PURE__*/
|
|
6
|
-
children:
|
|
7
|
-
|
|
8
|
-
|
|
6
|
+
return /*#__PURE__*/ jsxs(Fragment, {
|
|
7
|
+
children: [
|
|
8
|
+
/*#__PURE__*/ jsx(Spacing, {
|
|
9
|
+
...props
|
|
10
|
+
}),
|
|
11
|
+
/*#__PURE__*/ jsx(Column, {
|
|
12
|
+
...props
|
|
13
|
+
})
|
|
14
|
+
]
|
|
9
15
|
});
|
|
10
16
|
}
|
|
11
17
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gem-sdk/core",
|
|
3
|
-
"version": "1.23.0-moon.
|
|
3
|
+
"version": "1.23.0-moon.60",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
},
|
|
26
26
|
"devDependencies": {
|
|
27
27
|
"@gem-sdk/adapter-shopify": "1.23.0-moon.58",
|
|
28
|
-
"@gem-sdk/styles": "1.23.0-moon.
|
|
28
|
+
"@gem-sdk/styles": "1.23.0-moon.60"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
31
|
"react-error-boundary": "4.0.10",
|