@gem-sdk/core 1.28.5 → 1.28.7
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", {
|
|
@@ -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", {
|