@gem-sdk/core 1.23.0-staging.261 → 1.23.0-staging.270

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.
Files changed (3) hide show
  1. package/dist/cjs/components/resize/Spacing.js +33 -61
  2. package/dist/esm/components/resize/Spacing.js +33 -61
  3. package/package.json +1 -1
package/dist/cjs/components/resize/Spacing.js CHANGED
@@ -116,81 +116,53 @@ function Spacing(props) {
116
116
  }
117
117
  }
118
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 !== undefined && detail?.marginBottom != null) {
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
- $component.style.marginBottom = newValue;
138
- }
139
- }
140
- }
141
- }, []);
142
- const isPopup = (el)=>{
143
- const tag = el.getAttribute('data-component-tag');
144
- return tag === 'Dialog';
145
- };
146
- const isSticky = (el)=>{
119
+ const isLayoutElement = (el)=>{
147
120
  const tag = el.getAttribute('data-component-tag');
148
- return tag === 'Sticky';
121
+ return tag === 'Row' || tag === 'Product';
149
122
  };
150
- const setPositionSpacing = react.useCallback((paddingLeft)=>{
123
+ const updateSpacing = react.useCallback(()=>{
151
124
  const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
152
- if ($component) {
153
- if (isPopup($component) || isSticky($component)) return;
154
- const toolbar = $component && getChildrenByAttrSelector($component, 'data-toolbar');
155
- const isActive = toolbar && toolbar.getAttribute('data-toolbar-active');
156
- if (isActive && paddingLeft) {
157
- const currentValue = isNaN(parseInt(paddingLeft)) ? 0 : Math.max(parseInt(paddingLeft), 0);
158
- const newValue = `-${currentValue}px`;
159
- const translateCss = `translate(-${currentValue}px, -100%)`;
160
- if ($bottomDrag.current && $bottomBg.current) {
161
- $bottomBg.current.style.left = newValue;
125
+ if (!$component) return;
126
+ const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
127
+ if (!toolbar) return;
128
+ const isActive = toolbar.getAttribute('data-toolbar-active');
129
+ if (!isActive) return;
130
+ const style = getComputedStyle($component);
131
+ const $spacing = getChildrenByAttrSelector($component, 'data-spacing');
132
+ const $marginBottom = ($spacing?.querySelector('[data-spacing-margin-bottom]')) || null;
133
+ if ($marginBottom) {
134
+ if ($bottomBg.current && $bottomDrag.current) {
135
+ let value = style.marginBottom;
136
+ if (parseFloat(value) < 0) {
137
+ value = '0';
138
+ }
139
+ $bottomBg.current.style.height = value;
140
+ $bottomDrag.current.style.top = value;
141
+ $marginBottom.setAttribute('data-spacing-margin-bottom-active', 'true');
142
+ if (isLayoutElement($component)) {
143
+ $bottomBg.current.style.left = '0';
144
+ } else {
145
+ const paddingLeft = style.paddingLeft;
146
+ const leftValue = `-${paddingLeft}`;
147
+ const translateCss = `translate(${leftValue}, -100%)`;
148
+ $bottomBg.current.style.left = leftValue;
162
149
  $bottomDrag.current.style.transform = translateCss;
163
150
  }
164
151
  }
165
152
  }
166
153
  }, []);
167
- const onUpdatePaddingLeft = react.useCallback((e)=>{
168
- if (isDragging.current) return;
169
- const detail = e.detail;
170
- if (detail?.paddingLeft) {
171
- setPositionSpacing(detail.paddingLeft);
172
- }
173
- }, [
174
- setPositionSpacing
175
- ]);
176
154
  react.useEffect(()=>{
177
- const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
178
- if ($component) {
179
- const style = getComputedStyle($component);
180
- const paddingLeft = style.paddingLeft;
181
- setPositionSpacing(paddingLeft);
182
- }
155
+ updateSpacing();
183
156
  });
184
157
  react.useEffect(()=>{
185
- window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
186
- window.addEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
158
+ window.addEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
159
+ window.addEventListener('editor:toolbar:update-padding-left', updateSpacing);
187
160
  return ()=>{
188
- window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
189
- window.removeEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
161
+ window.removeEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
162
+ window.removeEventListener('editor:toolbar:update-padding-left', updateSpacing);
190
163
  };
191
164
  }, [
192
- onUpdateMarginBottom,
193
- onUpdatePaddingLeft
165
+ updateSpacing
194
166
  ]);
195
167
  return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
196
168
  children: props.tag !== 'Section' && /*#__PURE__*/ jsxRuntime.jsx("div", {
package/dist/esm/components/resize/Spacing.js CHANGED
@@ -112,81 +112,53 @@ function Spacing(props) {
112
112
  }
113
113
  }
114
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 !== undefined && detail?.marginBottom != null) {
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
- $component.style.marginBottom = newValue;
134
- }
135
- }
136
- }
137
- }, []);
138
- const isPopup = (el)=>{
139
- const tag = el.getAttribute('data-component-tag');
140
- return tag === 'Dialog';
141
- };
142
- const isSticky = (el)=>{
115
+ const isLayoutElement = (el)=>{
143
116
  const tag = el.getAttribute('data-component-tag');
144
- return tag === 'Sticky';
117
+ return tag === 'Row' || tag === 'Product';
145
118
  };
146
- const setPositionSpacing = useCallback((paddingLeft)=>{
119
+ const updateSpacing = useCallback(()=>{
147
120
  const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
148
- if ($component) {
149
- if (isPopup($component) || isSticky($component)) return;
150
- const toolbar = $component && getChildrenByAttrSelector($component, 'data-toolbar');
151
- const isActive = toolbar && toolbar.getAttribute('data-toolbar-active');
152
- if (isActive && paddingLeft) {
153
- const currentValue = isNaN(parseInt(paddingLeft)) ? 0 : Math.max(parseInt(paddingLeft), 0);
154
- const newValue = `-${currentValue}px`;
155
- const translateCss = `translate(-${currentValue}px, -100%)`;
156
- if ($bottomDrag.current && $bottomBg.current) {
157
- $bottomBg.current.style.left = newValue;
121
+ if (!$component) return;
122
+ const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
123
+ if (!toolbar) return;
124
+ const isActive = toolbar.getAttribute('data-toolbar-active');
125
+ if (!isActive) return;
126
+ const style = getComputedStyle($component);
127
+ const $spacing = getChildrenByAttrSelector($component, 'data-spacing');
128
+ const $marginBottom = ($spacing?.querySelector('[data-spacing-margin-bottom]')) || null;
129
+ if ($marginBottom) {
130
+ if ($bottomBg.current && $bottomDrag.current) {
131
+ let value = style.marginBottom;
132
+ if (parseFloat(value) < 0) {
133
+ value = '0';
134
+ }
135
+ $bottomBg.current.style.height = value;
136
+ $bottomDrag.current.style.top = value;
137
+ $marginBottom.setAttribute('data-spacing-margin-bottom-active', 'true');
138
+ if (isLayoutElement($component)) {
139
+ $bottomBg.current.style.left = '0';
140
+ } else {
141
+ const paddingLeft = style.paddingLeft;
142
+ const leftValue = `-${paddingLeft}`;
143
+ const translateCss = `translate(${leftValue}, -100%)`;
144
+ $bottomBg.current.style.left = leftValue;
158
145
  $bottomDrag.current.style.transform = translateCss;
159
146
  }
160
147
  }
161
148
  }
162
149
  }, []);
163
- const onUpdatePaddingLeft = useCallback((e)=>{
164
- if (isDragging.current) return;
165
- const detail = e.detail;
166
- if (detail?.paddingLeft) {
167
- setPositionSpacing(detail.paddingLeft);
168
- }
169
- }, [
170
- setPositionSpacing
171
- ]);
172
150
  useEffect(()=>{
173
- const $component = $bottomDrag.current?.closest('[data-toolbar-wrap]');
174
- if ($component) {
175
- const style = getComputedStyle($component);
176
- const paddingLeft = style.paddingLeft;
177
- setPositionSpacing(paddingLeft);
178
- }
151
+ updateSpacing();
179
152
  });
180
153
  useEffect(()=>{
181
- window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
182
- window.addEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
154
+ window.addEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
155
+ window.addEventListener('editor:toolbar:update-padding-left', updateSpacing);
183
156
  return ()=>{
184
- window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
185
- window.removeEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
157
+ window.removeEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
158
+ window.removeEventListener('editor:toolbar:update-padding-left', updateSpacing);
186
159
  };
187
160
  }, [
188
- onUpdateMarginBottom,
189
- onUpdatePaddingLeft
161
+ updateSpacing
190
162
  ]);
191
163
  return /*#__PURE__*/ jsx(Fragment, {
192
164
  children: props.tag !== 'Section' && /*#__PURE__*/ jsx("div", {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gem-sdk/core",
3
- "version": "1.23.0-staging.261",
3
+ "version": "1.23.0-staging.270",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",