szld-libs 0.2.39 → 0.2.40

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 (7) hide show
  1. package/dist/szld-components.es.js +3842 -3808
  2. package/dist/szld-components.umd.js +36 -36
  3. package/es/components/LoopSlide/index.js +62 -0
  4. package/es/index.js +1 -1
  5. package/lib/components/LoopSlide/index.js +62 -0
  6. package/lib/index.js +1 -1
  7. package/package.json +1 -1
package/es/components/LoopSlide/index.js CHANGED
@@ -24,6 +24,10 @@ const LoopSlide = ({
24
24
  const containerRef = useRef(null);
25
25
  const contentRef = useRef(null);
26
26
  const resizeObserverRef = useRef(null);
27
+ useRef(false);
28
+ const scrollVelocity = useRef(0);
29
+ const animationFrameId = useRef();
30
+ const lastScrollTime = useRef(0);
27
31
  const setupAnimation = () => {
28
32
  if (!containerRef.current || !contentRef.current)
29
33
  return;
@@ -70,9 +74,67 @@ const LoopSlide = ({
70
74
  };
71
75
  const handleMouseLeave = () => {
72
76
  if (mouseControl && containerRef.current) {
77
+ cancelSmoothScroll();
73
78
  containerRef.current.style.animationPlayState = "running";
74
79
  }
75
80
  };
81
+ const smoothScroll = () => {
82
+ if (!containerRef.current || !mouseControl)
83
+ return;
84
+ const container2 = containerRef.current;
85
+ const animation = container2.getAnimations()[0];
86
+ if (!animation)
87
+ return;
88
+ if (Math.abs(scrollVelocity.current) > 0.1) {
89
+ const now = performance.now();
90
+ const deltaTime = now - lastScrollTime.current;
91
+ lastScrollTime.current = now;
92
+ const deceleration = 0.95;
93
+ scrollVelocity.current *= Math.pow(deceleration, deltaTime / 16);
94
+ const currentTime = animation.currentTime || 0;
95
+ animation.currentTime = currentTime + scrollVelocity.current;
96
+ animationFrameId.current = requestAnimationFrame(smoothScroll);
97
+ } else {
98
+ scrollVelocity.current = 0;
99
+ cancelSmoothScroll();
100
+ }
101
+ };
102
+ const handleWheel = (e) => {
103
+ if (!mouseControl || !containerRef.current)
104
+ return;
105
+ e.preventDefault();
106
+ const delta = e.deltaY;
107
+ const acceleration = 0.25;
108
+ scrollVelocity.current += delta * acceleration;
109
+ const maxSpeed = 50;
110
+ scrollVelocity.current = Math.max(-maxSpeed, Math.min(maxSpeed, scrollVelocity.current));
111
+ if (!animationFrameId.current) {
112
+ lastScrollTime.current = performance.now();
113
+ animationFrameId.current = requestAnimationFrame(smoothScroll);
114
+ }
115
+ };
116
+ const cancelSmoothScroll = () => {
117
+ if (animationFrameId.current) {
118
+ cancelAnimationFrame(animationFrameId.current);
119
+ animationFrameId.current = void 0;
120
+ }
121
+ };
122
+ useEffect(() => {
123
+ return () => {
124
+ cancelSmoothScroll();
125
+ };
126
+ }, []);
127
+ useEffect(() => {
128
+ const wrapper2 = wrapperRef.current;
129
+ if (!wrapper2)
130
+ return;
131
+ if (mouseControl) {
132
+ wrapper2.addEventListener("wheel", handleWheel, { passive: false });
133
+ }
134
+ return () => {
135
+ wrapper2.removeEventListener("wheel", handleWheel);
136
+ };
137
+ }, [mouseControl]);
76
138
  return /* @__PURE__ */ jsx(
77
139
  "div",
78
140
  {
package/es/index.js CHANGED
@@ -61,7 +61,7 @@ const Demo = () => {
61
61
  border: "1px solid #333",
62
62
  margin: "20px"
63
63
  },
64
- children: /* @__PURE__ */ jsx(LoopSlide, { speed: 6, height: "100%", mouseControl: false, children: /* @__PURE__ */ jsx("div", { style: { padding: "0px", textAlign: "center" }, children: creditsData.map((section, i) => /* @__PURE__ */ jsxs("div", { children: [
64
+ children: /* @__PURE__ */ jsx(LoopSlide, { speed: 6, height: "100%", mouseControl: true, children: /* @__PURE__ */ jsx("div", { style: { padding: "0px", textAlign: "center" }, children: creditsData.map((section, i) => /* @__PURE__ */ jsxs("div", { children: [
65
65
  /* @__PURE__ */ jsx("h2", { style: { fontSize: "40px", marginBottom: "20px", fontWeight: "normal" }, children: section.title }),
66
66
  section.people.map((person, j) => /* @__PURE__ */ jsxs("div", { children: [
67
67
  /* @__PURE__ */ jsx("p", { style: { fontSize: "15px", margin: "5px 0" }, children: person.name }),
package/lib/components/LoopSlide/index.js CHANGED
@@ -25,6 +25,10 @@ const LoopSlide = ({
25
25
  const containerRef = react.useRef(null);
26
26
  const contentRef = react.useRef(null);
27
27
  const resizeObserverRef = react.useRef(null);
28
+ react.useRef(false);
29
+ const scrollVelocity = react.useRef(0);
30
+ const animationFrameId = react.useRef();
31
+ const lastScrollTime = react.useRef(0);
28
32
  const setupAnimation = () => {
29
33
  if (!containerRef.current || !contentRef.current)
30
34
  return;
@@ -71,9 +75,67 @@ const LoopSlide = ({
71
75
  };
72
76
  const handleMouseLeave = () => {
73
77
  if (mouseControl && containerRef.current) {
78
+ cancelSmoothScroll();
74
79
  containerRef.current.style.animationPlayState = "running";
75
80
  }
76
81
  };
82
+ const smoothScroll = () => {
83
+ if (!containerRef.current || !mouseControl)
84
+ return;
85
+ const container2 = containerRef.current;
86
+ const animation = container2.getAnimations()[0];
87
+ if (!animation)
88
+ return;
89
+ if (Math.abs(scrollVelocity.current) > 0.1) {
90
+ const now = performance.now();
91
+ const deltaTime = now - lastScrollTime.current;
92
+ lastScrollTime.current = now;
93
+ const deceleration = 0.95;
94
+ scrollVelocity.current *= Math.pow(deceleration, deltaTime / 16);
95
+ const currentTime = animation.currentTime || 0;
96
+ animation.currentTime = currentTime + scrollVelocity.current;
97
+ animationFrameId.current = requestAnimationFrame(smoothScroll);
98
+ } else {
99
+ scrollVelocity.current = 0;
100
+ cancelSmoothScroll();
101
+ }
102
+ };
103
+ const handleWheel = (e) => {
104
+ if (!mouseControl || !containerRef.current)
105
+ return;
106
+ e.preventDefault();
107
+ const delta = e.deltaY;
108
+ const acceleration = 0.25;
109
+ scrollVelocity.current += delta * acceleration;
110
+ const maxSpeed = 50;
111
+ scrollVelocity.current = Math.max(-maxSpeed, Math.min(maxSpeed, scrollVelocity.current));
112
+ if (!animationFrameId.current) {
113
+ lastScrollTime.current = performance.now();
114
+ animationFrameId.current = requestAnimationFrame(smoothScroll);
115
+ }
116
+ };
117
+ const cancelSmoothScroll = () => {
118
+ if (animationFrameId.current) {
119
+ cancelAnimationFrame(animationFrameId.current);
120
+ animationFrameId.current = void 0;
121
+ }
122
+ };
123
+ react.useEffect(() => {
124
+ return () => {
125
+ cancelSmoothScroll();
126
+ };
127
+ }, []);
128
+ react.useEffect(() => {
129
+ const wrapper2 = wrapperRef.current;
130
+ if (!wrapper2)
131
+ return;
132
+ if (mouseControl) {
133
+ wrapper2.addEventListener("wheel", handleWheel, { passive: false });
134
+ }
135
+ return () => {
136
+ wrapper2.removeEventListener("wheel", handleWheel);
137
+ };
138
+ }, [mouseControl]);
77
139
  return /* @__PURE__ */ jsxRuntime.jsx(
78
140
  "div",
79
141
  {
package/lib/index.js CHANGED
@@ -62,7 +62,7 @@ const Demo = () => {
62
62
  border: "1px solid #333",
63
63
  margin: "20px"
64
64
  },
65
- children: /* @__PURE__ */ jsxRuntime.jsx(main.LoopSlide, { speed: 6, height: "100%", mouseControl: false, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0px", textAlign: "center" }, children: creditsData.map((section, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
65
+ children: /* @__PURE__ */ jsxRuntime.jsx(main.LoopSlide, { speed: 6, height: "100%", mouseControl: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0px", textAlign: "center" }, children: creditsData.map((section, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
66
66
  /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { fontSize: "40px", marginBottom: "20px", fontWeight: "normal" }, children: section.title }),
67
67
  section.people.map((person, j) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
68
68
  /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "15px", margin: "5px 0" }, children: person.name }),
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "szld-libs",
3
3
  "private": false,
4
- "version": "0.2.39",
4
+ "version": "0.2.40",
5
5
  "type": "module",
6
6
  "scripts": {
7
7
  "dev": "vite",