@doyourjob/gravity-ui-page-constructor 5.31.236 → 5.31.237

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 (6) hide show
  1. package/build/cjs/blocks/Scroller/Scroller.css +2 -0
  2. package/build/cjs/blocks/Scroller/Scroller.js +61 -12
  3. package/build/esm/blocks/Scroller/Scroller.css +2 -0
  4. package/build/esm/blocks/Scroller/Scroller.js +61 -12
  5. package/package.json +1 -1
  6. package/widget/index.js +1 -1
package/build/cjs/blocks/Scroller/Scroller.css CHANGED
@@ -63,6 +63,7 @@ unpredictable css rules order in build */
63
63
  z-index: 1;
64
64
  flex: none;
65
65
  max-width: 100%;
66
+ cursor: pointer;
66
67
  }
67
68
  .pc-scroller-block__pagination-container {
68
69
  display: flex;
@@ -105,6 +106,7 @@ unpredictable css rules order in build */
105
106
  height: 6px;
106
107
  border-radius: 50%;
107
108
  background: rgba(0, 26, 43, 0.3);
109
+ cursor: pointer;
108
110
  transition: width 0.3s ease, border-radius 0.3s ease;
109
111
  }
110
112
  .pc-scroller-block__pip_active {
package/build/cjs/blocks/Scroller/Scroller.js CHANGED
@@ -131,9 +131,46 @@ const ScrollerBlock = (props) => {
131
131
  scrollToChild(content, nextElement);
132
132
  }
133
133
  }, [childCount, currentElement, infinite]);
134
+ const scrollToIndex = (0, react_1.useCallback)((targetIndex) => {
135
+ if (autoScroll) {
136
+ setIsPaused(true);
137
+ }
138
+ const content = contentRef.current;
139
+ if (!content || childCount <= 1 || targetIndex < 0 || targetIndex >= childCount) {
140
+ return;
141
+ }
142
+ if (!infinite) {
143
+ const child = getChild(content, targetIndex);
144
+ if (child) {
145
+ scrollToChild(content, child);
146
+ }
147
+ return;
148
+ }
149
+ const centeredIndex = getCenteredChildIndex(content);
150
+ const currentCopy = Math.floor(centeredIndex / childCount);
151
+ const logicalIndex = centeredIndex % childCount;
152
+ const middleCopy = 1;
153
+ const scrollToTargetInMiddleCopy = () => {
154
+ const targetChild = getChild(content, childCount + targetIndex);
155
+ if (targetChild) {
156
+ scrollToChild(content, targetChild);
157
+ }
158
+ };
159
+ if (currentCopy !== middleCopy) {
160
+ const middleChild = getChild(content, childCount + logicalIndex);
161
+ if (middleChild) {
162
+ const left = middleChild.offsetLeft -
163
+ (content.offsetWidth - middleChild.offsetWidth) / 2;
164
+ content.scrollTo({ left, behavior: 'auto' });
165
+ }
166
+ requestAnimationFrame(scrollToTargetInMiddleCopy);
167
+ return;
168
+ }
169
+ scrollToTargetInMiddleCopy();
170
+ }, [autoScroll, childCount, infinite]);
134
171
  (0, react_1.useEffect)(() => {
135
172
  let timeout = null;
136
- if (!isPaused) {
173
+ if (autoScroll && !isPaused) {
137
174
  timeout = setTimeout(() => {
138
175
  scrollToNext();
139
176
  }, autoScrollInterval);
@@ -143,7 +180,7 @@ const ScrollerBlock = (props) => {
143
180
  clearTimeout(timeout);
144
181
  }
145
182
  };
146
- }, [isPaused, currentElement, autoScrollInterval, scrollToNext]);
183
+ }, [autoScroll, isPaused, currentElement, autoScrollInterval, scrollToNext]);
147
184
  return (react_1.default.createElement(components_1.AnimateBlock, { className: b({ fullWidth }), animate: animated },
148
185
  react_1.default.createElement("div", { className: b('root'), ref: rootRef },
149
186
  react_1.default.createElement("div", { className: b('content', {
@@ -151,17 +188,29 @@ const ScrollerBlock = (props) => {
151
188
  fullWidth,
152
189
  'scroll-snap-center': infinite ? false : scrollSnapCenter,
153
190
  }), ref: contentRef }, (infinite ? [0, 1, 2] : [0])
154
- .map((mi) => react_1.default.Children.map(children, (child, index) => (react_1.default.createElement("div", { key: mi * childCount + index, className: b('item'), style: { width: (widths === null || widths === void 0 ? void 0 : widths[index]) || 'auto' } }, child))))
191
+ .map((mi) => react_1.default.Children.map(children, (child, index) => {
192
+ const physicalIndex = mi * childCount + index;
193
+ return (react_1.default.createElement("div", { key: physicalIndex, role: "button", tabIndex: 0, className: b('item'), style: { width: (widths === null || widths === void 0 ? void 0 : widths[index]) || 'auto' }, onClick: () => scrollToIndex(index), onKeyDown: (event) => {
194
+ if (event.key === 'Enter' || event.key === ' ') {
195
+ event.preventDefault();
196
+ scrollToIndex(index);
197
+ }
198
+ } }, child));
199
+ }))
155
200
  .flat())),
156
- autoScroll && childCount > 0 && (react_1.default.createElement("div", { className: b('pagination-container') },
157
- react_1.default.createElement("div", { className: b('pagination') }, Array.from({ length: childCount }, (_, index) => (react_1.default.createElement("div", { key: index, className: b('pip', { active: index === currentElement }) },
158
- react_1.default.createElement("div", { style: {
159
- transition: `width ${autoScrollInterval}ms, opacity 0.5s ease`,
160
- }, className: b('pip-inner', {
161
- active: index === currentElement,
162
- paused: isPaused,
163
- }) }))))),
164
- react_1.default.createElement("button", { className: b('pagination-button'), onClick: () => setIsPaused(!isPaused) }, isPaused ? react_1.default.createElement(PlayIcon, null) : react_1.default.createElement(PauseIcon, null))))));
201
+ childCount > 0 && (react_1.default.createElement("div", { className: b('pagination-container') },
202
+ react_1.default.createElement("div", { className: b('pagination') }, Array.from({ length: childCount }, (_, index) => (react_1.default.createElement("div", { key: index, role: "button", tabIndex: 0, className: b('pip', { active: index === currentElement }), onClick: () => scrollToIndex(index), onKeyDown: (event) => {
203
+ if (event.key === 'Enter' || event.key === ' ') {
204
+ event.preventDefault();
205
+ scrollToIndex(index);
206
+ }
207
+ } }, autoScroll && (react_1.default.createElement("div", { style: {
208
+ transition: `width ${autoScrollInterval}ms, opacity 0.5s ease`,
209
+ }, className: b('pip-inner', {
210
+ active: index === currentElement,
211
+ paused: isPaused,
212
+ }) })))))),
213
+ autoScroll && (react_1.default.createElement("button", { className: b('pagination-button'), onClick: () => setIsPaused(!isPaused) }, isPaused ? react_1.default.createElement(PlayIcon, null) : react_1.default.createElement(PauseIcon, null)))))));
165
214
  };
166
215
  exports.ScrollerBlock = ScrollerBlock;
167
216
  exports.default = exports.ScrollerBlock;
package/build/esm/blocks/Scroller/Scroller.css CHANGED
@@ -63,6 +63,7 @@ unpredictable css rules order in build */
63
63
  z-index: 1;
64
64
  flex: none;
65
65
  max-width: 100%;
66
+ cursor: pointer;
66
67
  }
67
68
  .pc-scroller-block__pagination-container {
68
69
  display: flex;
@@ -105,6 +106,7 @@ unpredictable css rules order in build */
105
106
  height: 6px;
106
107
  border-radius: 50%;
107
108
  background: rgba(0, 26, 43, 0.3);
109
+ cursor: pointer;
108
110
  transition: width 0.3s ease, border-radius 0.3s ease;
109
111
  }
110
112
  .pc-scroller-block__pip_active {
package/build/esm/blocks/Scroller/Scroller.js CHANGED
@@ -128,9 +128,46 @@ export const ScrollerBlock = (props) => {
128
128
  scrollToChild(content, nextElement);
129
129
  }
130
130
  }, [childCount, currentElement, infinite]);
131
+ const scrollToIndex = useCallback((targetIndex) => {
132
+ if (autoScroll) {
133
+ setIsPaused(true);
134
+ }
135
+ const content = contentRef.current;
136
+ if (!content || childCount <= 1 || targetIndex < 0 || targetIndex >= childCount) {
137
+ return;
138
+ }
139
+ if (!infinite) {
140
+ const child = getChild(content, targetIndex);
141
+ if (child) {
142
+ scrollToChild(content, child);
143
+ }
144
+ return;
145
+ }
146
+ const centeredIndex = getCenteredChildIndex(content);
147
+ const currentCopy = Math.floor(centeredIndex / childCount);
148
+ const logicalIndex = centeredIndex % childCount;
149
+ const middleCopy = 1;
150
+ const scrollToTargetInMiddleCopy = () => {
151
+ const targetChild = getChild(content, childCount + targetIndex);
152
+ if (targetChild) {
153
+ scrollToChild(content, targetChild);
154
+ }
155
+ };
156
+ if (currentCopy !== middleCopy) {
157
+ const middleChild = getChild(content, childCount + logicalIndex);
158
+ if (middleChild) {
159
+ const left = middleChild.offsetLeft -
160
+ (content.offsetWidth - middleChild.offsetWidth) / 2;
161
+ content.scrollTo({ left, behavior: 'auto' });
162
+ }
163
+ requestAnimationFrame(scrollToTargetInMiddleCopy);
164
+ return;
165
+ }
166
+ scrollToTargetInMiddleCopy();
167
+ }, [autoScroll, childCount, infinite]);
131
168
  useEffect(() => {
132
169
  let timeout = null;
133
- if (!isPaused) {
170
+ if (autoScroll && !isPaused) {
134
171
  timeout = setTimeout(() => {
135
172
  scrollToNext();
136
173
  }, autoScrollInterval);
@@ -140,7 +177,7 @@ export const ScrollerBlock = (props) => {
140
177
  clearTimeout(timeout);
141
178
  }
142
179
  };
143
- }, [isPaused, currentElement, autoScrollInterval, scrollToNext]);
180
+ }, [autoScroll, isPaused, currentElement, autoScrollInterval, scrollToNext]);
144
181
  return (React.createElement(AnimateBlock, { className: b({ fullWidth }), animate: animated },
145
182
  React.createElement("div", { className: b('root'), ref: rootRef },
146
183
  React.createElement("div", { className: b('content', {
@@ -148,16 +185,28 @@ export const ScrollerBlock = (props) => {
148
185
  fullWidth,
149
186
  'scroll-snap-center': infinite ? false : scrollSnapCenter,
150
187
  }), ref: contentRef }, (infinite ? [0, 1, 2] : [0])
151
- .map((mi) => React.Children.map(children, (child, index) => (React.createElement("div", { key: mi * childCount + index, className: b('item'), style: { width: (widths === null || widths === void 0 ? void 0 : widths[index]) || 'auto' } }, child))))
188
+ .map((mi) => React.Children.map(children, (child, index) => {
189
+ const physicalIndex = mi * childCount + index;
190
+ return (React.createElement("div", { key: physicalIndex, role: "button", tabIndex: 0, className: b('item'), style: { width: (widths === null || widths === void 0 ? void 0 : widths[index]) || 'auto' }, onClick: () => scrollToIndex(index), onKeyDown: (event) => {
191
+ if (event.key === 'Enter' || event.key === ' ') {
192
+ event.preventDefault();
193
+ scrollToIndex(index);
194
+ }
195
+ } }, child));
196
+ }))
152
197
  .flat())),
153
- autoScroll && childCount > 0 && (React.createElement("div", { className: b('pagination-container') },
154
- React.createElement("div", { className: b('pagination') }, Array.from({ length: childCount }, (_, index) => (React.createElement("div", { key: index, className: b('pip', { active: index === currentElement }) },
155
- React.createElement("div", { style: {
156
- transition: `width ${autoScrollInterval}ms, opacity 0.5s ease`,
157
- }, className: b('pip-inner', {
158
- active: index === currentElement,
159
- paused: isPaused,
160
- }) }))))),
161
- React.createElement("button", { className: b('pagination-button'), onClick: () => setIsPaused(!isPaused) }, isPaused ? React.createElement(PlayIcon, null) : React.createElement(PauseIcon, null))))));
198
+ childCount > 0 && (React.createElement("div", { className: b('pagination-container') },
199
+ React.createElement("div", { className: b('pagination') }, Array.from({ length: childCount }, (_, index) => (React.createElement("div", { key: index, role: "button", tabIndex: 0, className: b('pip', { active: index === currentElement }), onClick: () => scrollToIndex(index), onKeyDown: (event) => {
200
+ if (event.key === 'Enter' || event.key === ' ') {
201
+ event.preventDefault();
202
+ scrollToIndex(index);
203
+ }
204
+ } }, autoScroll && (React.createElement("div", { style: {
205
+ transition: `width ${autoScrollInterval}ms, opacity 0.5s ease`,
206
+ }, className: b('pip-inner', {
207
+ active: index === currentElement,
208
+ paused: isPaused,
209
+ }) })))))),
210
+ autoScroll && (React.createElement("button", { className: b('pagination-button'), onClick: () => setIsPaused(!isPaused) }, isPaused ? React.createElement(PlayIcon, null) : React.createElement(PauseIcon, null)))))));
162
211
  };
163
212
  export default ScrollerBlock;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@doyourjob/gravity-ui-page-constructor",
3
- "version": "5.31.236",
3
+ "version": "5.31.237",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {