@gem-sdk/core 1.28.5 → 1.28.8
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.
|
@@ -131,13 +131,58 @@ function Spacing(props) {
|
|
|
131
131
|
}
|
|
132
132
|
}
|
|
133
133
|
}, []);
|
|
134
|
+
const isPopup = (el)=>{
|
|
135
|
+
const tag = el.getAttribute('data-component-tag');
|
|
136
|
+
return tag === 'Dialog';
|
|
137
|
+
};
|
|
138
|
+
const isSticky = (el)=>{
|
|
139
|
+
const tag = el.getAttribute('data-component-tag');
|
|
140
|
+
return tag === 'Sticky';
|
|
141
|
+
};
|
|
142
|
+
const setPositionSpacing = react.useCallback((paddingLeft)=>{
|
|
143
|
+
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
144
|
+
if ($component) {
|
|
145
|
+
if (isPopup($component) || isSticky($component)) return;
|
|
146
|
+
const toolbar = $component && getChildrenByAttrSelector($component, 'data-toolbar');
|
|
147
|
+
const isActive = toolbar && toolbar.getAttribute('data-toolbar-active');
|
|
148
|
+
if (isActive && paddingLeft) {
|
|
149
|
+
const currentValue = isNaN(parseInt(paddingLeft)) ? 0 : Math.max(parseInt(paddingLeft), 0);
|
|
150
|
+
const newValue = `-${currentValue}px`;
|
|
151
|
+
const translateCss = `translate(-${currentValue}px, -100%)`;
|
|
152
|
+
if ($bottomDrag.current && $bottomBg.current) {
|
|
153
|
+
$bottomBg.current.style.left = newValue;
|
|
154
|
+
$bottomDrag.current.style.transform = translateCss;
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
}, []);
|
|
159
|
+
const onUpdatePaddingLeft = react.useCallback((e)=>{
|
|
160
|
+
if (isDragging.current) return;
|
|
161
|
+
const detail = e.detail;
|
|
162
|
+
if (detail?.paddingLeft) {
|
|
163
|
+
setPositionSpacing(detail.paddingLeft);
|
|
164
|
+
}
|
|
165
|
+
}, [
|
|
166
|
+
setPositionSpacing
|
|
167
|
+
]);
|
|
168
|
+
react.useEffect(()=>{
|
|
169
|
+
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
170
|
+
if ($component) {
|
|
171
|
+
const style = getComputedStyle($component);
|
|
172
|
+
const paddingLeft = style.paddingLeft;
|
|
173
|
+
setPositionSpacing(paddingLeft);
|
|
174
|
+
}
|
|
175
|
+
});
|
|
134
176
|
react.useEffect(()=>{
|
|
135
177
|
window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
|
|
178
|
+
window.addEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
|
|
136
179
|
return ()=>{
|
|
137
180
|
window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
|
|
181
|
+
window.removeEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
|
|
138
182
|
};
|
|
139
183
|
}, [
|
|
140
|
-
onUpdateMarginBottom
|
|
184
|
+
onUpdateMarginBottom,
|
|
185
|
+
onUpdatePaddingLeft
|
|
141
186
|
]);
|
|
142
187
|
return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
|
|
143
188
|
children: props.tag !== 'Section' && /*#__PURE__*/ jsxRuntime.jsx("div", {
|
|
@@ -160,8 +160,8 @@ const makeFixedBgAttachmentByDevice = (device, bgAttachment)=>{
|
|
|
160
160
|
[`--pos${suffix}`]: 'absolute'
|
|
161
161
|
},
|
|
162
162
|
content: {
|
|
163
|
-
[`--w${suffix}`]: '
|
|
164
|
-
[`--h${suffix}`]: '
|
|
163
|
+
[`--w${suffix}`]: '100%',
|
|
164
|
+
[`--h${suffix}`]: '100%',
|
|
165
165
|
[`--pos${suffix}`]: 'absolute',
|
|
166
166
|
[`--bga${suffix}`]: bgAttachment
|
|
167
167
|
}
|
|
@@ -127,13 +127,58 @@ function Spacing(props) {
|
|
|
127
127
|
}
|
|
128
128
|
}
|
|
129
129
|
}, []);
|
|
130
|
+
const isPopup = (el)=>{
|
|
131
|
+
const tag = el.getAttribute('data-component-tag');
|
|
132
|
+
return tag === 'Dialog';
|
|
133
|
+
};
|
|
134
|
+
const isSticky = (el)=>{
|
|
135
|
+
const tag = el.getAttribute('data-component-tag');
|
|
136
|
+
return tag === 'Sticky';
|
|
137
|
+
};
|
|
138
|
+
const setPositionSpacing = useCallback((paddingLeft)=>{
|
|
139
|
+
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
140
|
+
if ($component) {
|
|
141
|
+
if (isPopup($component) || isSticky($component)) return;
|
|
142
|
+
const toolbar = $component && getChildrenByAttrSelector($component, 'data-toolbar');
|
|
143
|
+
const isActive = toolbar && toolbar.getAttribute('data-toolbar-active');
|
|
144
|
+
if (isActive && paddingLeft) {
|
|
145
|
+
const currentValue = isNaN(parseInt(paddingLeft)) ? 0 : Math.max(parseInt(paddingLeft), 0);
|
|
146
|
+
const newValue = `-${currentValue}px`;
|
|
147
|
+
const translateCss = `translate(-${currentValue}px, -100%)`;
|
|
148
|
+
if ($bottomDrag.current && $bottomBg.current) {
|
|
149
|
+
$bottomBg.current.style.left = newValue;
|
|
150
|
+
$bottomDrag.current.style.transform = translateCss;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
}, []);
|
|
155
|
+
const onUpdatePaddingLeft = useCallback((e)=>{
|
|
156
|
+
if (isDragging.current) return;
|
|
157
|
+
const detail = e.detail;
|
|
158
|
+
if (detail?.paddingLeft) {
|
|
159
|
+
setPositionSpacing(detail.paddingLeft);
|
|
160
|
+
}
|
|
161
|
+
}, [
|
|
162
|
+
setPositionSpacing
|
|
163
|
+
]);
|
|
164
|
+
useEffect(()=>{
|
|
165
|
+
const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
|
|
166
|
+
if ($component) {
|
|
167
|
+
const style = getComputedStyle($component);
|
|
168
|
+
const paddingLeft = style.paddingLeft;
|
|
169
|
+
setPositionSpacing(paddingLeft);
|
|
170
|
+
}
|
|
171
|
+
});
|
|
130
172
|
useEffect(()=>{
|
|
131
173
|
window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
|
|
174
|
+
window.addEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
|
|
132
175
|
return ()=>{
|
|
133
176
|
window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
|
|
177
|
+
window.removeEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
|
|
134
178
|
};
|
|
135
179
|
}, [
|
|
136
|
-
onUpdateMarginBottom
|
|
180
|
+
onUpdateMarginBottom,
|
|
181
|
+
onUpdatePaddingLeft
|
|
137
182
|
]);
|
|
138
183
|
return /*#__PURE__*/ jsx(Fragment, {
|
|
139
184
|
children: props.tag !== 'Section' && /*#__PURE__*/ jsx("div", {
|
|
@@ -158,8 +158,8 @@ const makeFixedBgAttachmentByDevice = (device, bgAttachment)=>{
|
|
|
158
158
|
[`--pos${suffix}`]: 'absolute'
|
|
159
159
|
},
|
|
160
160
|
content: {
|
|
161
|
-
[`--w${suffix}`]: '
|
|
162
|
-
[`--h${suffix}`]: '
|
|
161
|
+
[`--w${suffix}`]: '100%',
|
|
162
|
+
[`--h${suffix}`]: '100%',
|
|
163
163
|
[`--pos${suffix}`]: 'absolute',
|
|
164
164
|
[`--bga${suffix}`]: bgAttachment
|
|
165
165
|
}
|