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

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 +26 -65
  2. package/dist/esm/components/resize/Spacing.js +26 -65
  3. package/package.json +1 -1
package/dist/cjs/components/resize/Spacing.js CHANGED
@@ -116,81 +116,42 @@ 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;
119
+ const updateSpacing = react.useCallback(()=>{
122
120
  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
- }
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
+ const value = style.marginBottom;
132
+ $bottomBg.current.style.height = value;
133
+ $bottomDrag.current.style.top = value;
134
+ $marginBottom.setAttribute('data-spacing-margin-bottom-active', 'true');
135
+ const paddingLeft = style.paddingLeft;
136
+ const leftValue = `-${paddingLeft}`;
137
+ const translateCss = `translate(${leftValue}, -100%)`;
138
+ $bottomBg.current.style.left = leftValue;
139
+ $bottomDrag.current.style.transform = translateCss;
139
140
  }
140
141
  }
141
142
  }, []);
142
- const isPopup = (el)=>{
143
- const tag = el.getAttribute('data-component-tag');
144
- return tag === 'Dialog';
145
- };
146
- const isSticky = (el)=>{
147
- const tag = el.getAttribute('data-component-tag');
148
- return tag === 'Sticky';
149
- };
150
- const setPositionSpacing = react.useCallback((paddingLeft)=>{
151
- 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;
162
- $bottomDrag.current.style.transform = translateCss;
163
- }
164
- }
165
- }
166
- }, []);
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
143
  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
- }
144
+ updateSpacing();
183
145
  });
184
146
  react.useEffect(()=>{
185
- window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
186
- window.addEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
147
+ window.addEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
148
+ window.addEventListener('editor:toolbar:update-padding-left', updateSpacing);
187
149
  return ()=>{
188
- window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
189
- window.removeEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
150
+ window.removeEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
151
+ window.removeEventListener('editor:toolbar:update-padding-left', updateSpacing);
190
152
  };
191
153
  }, [
192
- onUpdateMarginBottom,
193
- onUpdatePaddingLeft
154
+ updateSpacing
194
155
  ]);
195
156
  return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
196
157
  children: props.tag !== 'Section' && /*#__PURE__*/ jsxRuntime.jsx("div", {
package/dist/esm/components/resize/Spacing.js CHANGED
@@ -112,81 +112,42 @@ function Spacing(props) {
112
112
  }
113
113
  }
114
114
  };
115
- const onUpdateMarginBottom = useCallback((e)=>{
116
- if (isDragging.current) return;
117
- const detail = e.detail;
115
+ const updateSpacing = useCallback(()=>{
118
116
  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
- }
117
+ if (!$component) return;
118
+ const toolbar = getChildrenByAttrSelector($component, 'data-toolbar');
119
+ if (!toolbar) return;
120
+ const isActive = toolbar.getAttribute('data-toolbar-active');
121
+ if (!isActive) return;
122
+ const style = getComputedStyle($component);
123
+ const $spacing = getChildrenByAttrSelector($component, 'data-spacing');
124
+ const $marginBottom = ($spacing?.querySelector('[data-spacing-margin-bottom]')) || null;
125
+ if ($marginBottom) {
126
+ if ($bottomBg.current && $bottomDrag.current) {
127
+ const value = style.marginBottom;
128
+ $bottomBg.current.style.height = value;
129
+ $bottomDrag.current.style.top = value;
130
+ $marginBottom.setAttribute('data-spacing-margin-bottom-active', 'true');
131
+ const paddingLeft = style.paddingLeft;
132
+ const leftValue = `-${paddingLeft}`;
133
+ const translateCss = `translate(${leftValue}, -100%)`;
134
+ $bottomBg.current.style.left = leftValue;
135
+ $bottomDrag.current.style.transform = translateCss;
135
136
  }
136
137
  }
137
138
  }, []);
138
- const isPopup = (el)=>{
139
- const tag = el.getAttribute('data-component-tag');
140
- return tag === 'Dialog';
141
- };
142
- const isSticky = (el)=>{
143
- const tag = el.getAttribute('data-component-tag');
144
- return tag === 'Sticky';
145
- };
146
- const setPositionSpacing = useCallback((paddingLeft)=>{
147
- 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;
158
- $bottomDrag.current.style.transform = translateCss;
159
- }
160
- }
161
- }
162
- }, []);
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
139
  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
- }
140
+ updateSpacing();
179
141
  });
180
142
  useEffect(()=>{
181
- window.addEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
182
- window.addEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
143
+ window.addEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
144
+ window.addEventListener('editor:toolbar:update-padding-left', updateSpacing);
183
145
  return ()=>{
184
- window.removeEventListener('editor:toolbar:update-margin-bottom', onUpdateMarginBottom);
185
- window.removeEventListener('editor:toolbar:update-padding-left', onUpdatePaddingLeft);
146
+ window.removeEventListener('editor:toolbar:update-margin-bottom', updateSpacing);
147
+ window.removeEventListener('editor:toolbar:update-padding-left', updateSpacing);
186
148
  };
187
149
  }, [
188
- onUpdateMarginBottom,
189
- onUpdatePaddingLeft
150
+ updateSpacing
190
151
  ]);
191
152
  return /*#__PURE__*/ jsx(Fragment, {
192
153
  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.268",
4
4
  "license": "MIT",
5
5
  "sideEffects": false,
6
6
  "main": "dist/cjs/index.js",