szld-libs 0.2.39 → 0.2.41

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 (12) hide show
  1. package/dist/style.css +1 -1
  2. package/dist/szld-components.es.js +4919 -4884
  3. package/dist/szld-components.umd.js +40 -40
  4. package/es/components/LoopSlide/index.css +1 -1
  5. package/es/components/LoopSlide/index.d.ts +4 -0
  6. package/es/components/LoopSlide/index.js +66 -2
  7. package/es/index.js +1 -1
  8. package/lib/components/LoopSlide/index.css +1 -1
  9. package/lib/components/LoopSlide/index.d.ts +4 -0
  10. package/lib/components/LoopSlide/index.js +66 -2
  11. package/lib/index.js +1 -1
  12. package/package.json +1 -1
package/es/components/LoopSlide/index.css CHANGED
@@ -18,7 +18,7 @@
18
18
  .LoopSlide-module_content_f392a {
19
19
  position: relative;
20
20
  width: 100%;
21
- padding: 10px 0;
21
+ padding: 1px 0;
22
22
  box-sizing: border-box;
23
23
  }
24
24
 
package/es/components/LoopSlide/index.d.ts CHANGED
@@ -8,6 +8,10 @@ interface LoopSlideProps {
8
8
  children: ReactNode;
9
9
  height?: string;
10
10
  mouseControl?: boolean;
11
+ classes?: {
12
+ container?: string;
13
+ content?: string;
14
+ };
11
15
  }
12
16
  declare const LoopSlide: React.FC<LoopSlideProps>;
13
17
  export default LoopSlide;
package/es/components/LoopSlide/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { jsx } from "react/jsx-runtime";
2
+ import classNames from "classnames";
2
3
  import { useRef, useEffect } from "react";
3
4
  const wrapper = "LoopSlide-module_wrapper_dde90";
4
5
  const container = "LoopSlide-module_container_be123";
@@ -18,12 +19,17 @@ const LoopSlide = ({
18
19
  style,
19
20
  children,
20
21
  height = "100vh",
21
- mouseControl = false
22
+ mouseControl = false,
23
+ classes
22
24
  }) => {
23
25
  const wrapperRef = useRef(null);
24
26
  const containerRef = useRef(null);
25
27
  const contentRef = useRef(null);
26
28
  const resizeObserverRef = useRef(null);
29
+ useRef(false);
30
+ const scrollVelocity = useRef(0);
31
+ const animationFrameId = useRef();
32
+ const lastScrollTime = useRef(0);
27
33
  const setupAnimation = () => {
28
34
  if (!containerRef.current || !contentRef.current)
29
35
  return;
@@ -70,9 +76,67 @@ const LoopSlide = ({
70
76
  };
71
77
  const handleMouseLeave = () => {
72
78
  if (mouseControl && containerRef.current) {
79
+ cancelSmoothScroll();
73
80
  containerRef.current.style.animationPlayState = "running";
74
81
  }
75
82
  };
83
+ const smoothScroll = () => {
84
+ if (!containerRef.current || !mouseControl)
85
+ return;
86
+ const container2 = containerRef.current;
87
+ const animation = container2.getAnimations()[0];
88
+ if (!animation)
89
+ return;
90
+ if (Math.abs(scrollVelocity.current) > 0.1) {
91
+ const now = performance.now();
92
+ const deltaTime = now - lastScrollTime.current;
93
+ lastScrollTime.current = now;
94
+ const deceleration = 0.95;
95
+ scrollVelocity.current *= Math.pow(deceleration, deltaTime / 16);
96
+ const currentTime = animation.currentTime || 0;
97
+ animation.currentTime = currentTime + scrollVelocity.current;
98
+ animationFrameId.current = requestAnimationFrame(smoothScroll);
99
+ } else {
100
+ scrollVelocity.current = 0;
101
+ cancelSmoothScroll();
102
+ }
103
+ };
104
+ const handleWheel = (e) => {
105
+ if (!mouseControl || !containerRef.current)
106
+ return;
107
+ e.preventDefault();
108
+ const delta = e.deltaY;
109
+ const acceleration = 0.25;
110
+ scrollVelocity.current += delta * acceleration;
111
+ const maxSpeed = 50;
112
+ scrollVelocity.current = Math.max(-maxSpeed, Math.min(maxSpeed, scrollVelocity.current));
113
+ if (!animationFrameId.current) {
114
+ lastScrollTime.current = performance.now();
115
+ animationFrameId.current = requestAnimationFrame(smoothScroll);
116
+ }
117
+ };
118
+ const cancelSmoothScroll = () => {
119
+ if (animationFrameId.current) {
120
+ cancelAnimationFrame(animationFrameId.current);
121
+ animationFrameId.current = void 0;
122
+ }
123
+ };
124
+ useEffect(() => {
125
+ return () => {
126
+ cancelSmoothScroll();
127
+ };
128
+ }, []);
129
+ useEffect(() => {
130
+ const wrapper2 = wrapperRef.current;
131
+ if (!wrapper2)
132
+ return;
133
+ if (mouseControl) {
134
+ wrapper2.addEventListener("wheel", handleWheel, { passive: false });
135
+ }
136
+ return () => {
137
+ wrapper2.removeEventListener("wheel", handleWheel);
138
+ };
139
+ }, [mouseControl]);
76
140
  return /* @__PURE__ */ jsx(
77
141
  "div",
78
142
  {
@@ -81,7 +145,7 @@ const LoopSlide = ({
81
145
  style: { height, ...style },
82
146
  onMouseEnter: handleMouseEnter,
83
147
  onMouseLeave: handleMouseLeave,
84
- children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: styles.container, children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: styles.content, children }) })
148
+ children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: classNames(styles.container, classes == null ? void 0 : classes.container), children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: classNames(styles.content, classes == null ? void 0 : classes.content), children }) })
85
149
  }
86
150
  );
87
151
  };
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.css CHANGED
@@ -18,7 +18,7 @@
18
18
  .LoopSlide-module_content_f392a {
19
19
  position: relative;
20
20
  width: 100%;
21
- padding: 10px 0;
21
+ padding: 1px 0;
22
22
  box-sizing: border-box;
23
23
  }
24
24
 
package/lib/components/LoopSlide/index.d.ts CHANGED
@@ -8,6 +8,10 @@ interface LoopSlideProps {
8
8
  children: ReactNode;
9
9
  height?: string;
10
10
  mouseControl?: boolean;
11
+ classes?: {
12
+ container?: string;
13
+ content?: string;
14
+ };
11
15
  }
12
16
  declare const LoopSlide: React.FC<LoopSlideProps>;
13
17
  export default LoopSlide;
package/lib/components/LoopSlide/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  "use strict";
2
2
  const jsxRuntime = require("react/jsx-runtime");
3
+ const classNames = require("classnames");
3
4
  const react = require("react");
4
5
  const wrapper = "LoopSlide-module_wrapper_dde90";
5
6
  const container = "LoopSlide-module_container_be123";
@@ -19,12 +20,17 @@ const LoopSlide = ({
19
20
  style,
20
21
  children,
21
22
  height = "100vh",
22
- mouseControl = false
23
+ mouseControl = false,
24
+ classes
23
25
  }) => {
24
26
  const wrapperRef = react.useRef(null);
25
27
  const containerRef = react.useRef(null);
26
28
  const contentRef = react.useRef(null);
27
29
  const resizeObserverRef = react.useRef(null);
30
+ react.useRef(false);
31
+ const scrollVelocity = react.useRef(0);
32
+ const animationFrameId = react.useRef();
33
+ const lastScrollTime = react.useRef(0);
28
34
  const setupAnimation = () => {
29
35
  if (!containerRef.current || !contentRef.current)
30
36
  return;
@@ -71,9 +77,67 @@ const LoopSlide = ({
71
77
  };
72
78
  const handleMouseLeave = () => {
73
79
  if (mouseControl && containerRef.current) {
80
+ cancelSmoothScroll();
74
81
  containerRef.current.style.animationPlayState = "running";
75
82
  }
76
83
  };
84
+ const smoothScroll = () => {
85
+ if (!containerRef.current || !mouseControl)
86
+ return;
87
+ const container2 = containerRef.current;
88
+ const animation = container2.getAnimations()[0];
89
+ if (!animation)
90
+ return;
91
+ if (Math.abs(scrollVelocity.current) > 0.1) {
92
+ const now = performance.now();
93
+ const deltaTime = now - lastScrollTime.current;
94
+ lastScrollTime.current = now;
95
+ const deceleration = 0.95;
96
+ scrollVelocity.current *= Math.pow(deceleration, deltaTime / 16);
97
+ const currentTime = animation.currentTime || 0;
98
+ animation.currentTime = currentTime + scrollVelocity.current;
99
+ animationFrameId.current = requestAnimationFrame(smoothScroll);
100
+ } else {
101
+ scrollVelocity.current = 0;
102
+ cancelSmoothScroll();
103
+ }
104
+ };
105
+ const handleWheel = (e) => {
106
+ if (!mouseControl || !containerRef.current)
107
+ return;
108
+ e.preventDefault();
109
+ const delta = e.deltaY;
110
+ const acceleration = 0.25;
111
+ scrollVelocity.current += delta * acceleration;
112
+ const maxSpeed = 50;
113
+ scrollVelocity.current = Math.max(-maxSpeed, Math.min(maxSpeed, scrollVelocity.current));
114
+ if (!animationFrameId.current) {
115
+ lastScrollTime.current = performance.now();
116
+ animationFrameId.current = requestAnimationFrame(smoothScroll);
117
+ }
118
+ };
119
+ const cancelSmoothScroll = () => {
120
+ if (animationFrameId.current) {
121
+ cancelAnimationFrame(animationFrameId.current);
122
+ animationFrameId.current = void 0;
123
+ }
124
+ };
125
+ react.useEffect(() => {
126
+ return () => {
127
+ cancelSmoothScroll();
128
+ };
129
+ }, []);
130
+ react.useEffect(() => {
131
+ const wrapper2 = wrapperRef.current;
132
+ if (!wrapper2)
133
+ return;
134
+ if (mouseControl) {
135
+ wrapper2.addEventListener("wheel", handleWheel, { passive: false });
136
+ }
137
+ return () => {
138
+ wrapper2.removeEventListener("wheel", handleWheel);
139
+ };
140
+ }, [mouseControl]);
77
141
  return /* @__PURE__ */ jsxRuntime.jsx(
78
142
  "div",
79
143
  {
@@ -82,7 +146,7 @@ const LoopSlide = ({
82
146
  style: { height, ...style },
83
147
  onMouseEnter: handleMouseEnter,
84
148
  onMouseLeave: handleMouseLeave,
85
- children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: styles.container, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: styles.content, children }) })
149
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: classNames(styles.container, classes == null ? void 0 : classes.container), children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: classNames(styles.content, classes == null ? void 0 : classes.content), children }) })
86
150
  }
87
151
  );
88
152
  };
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.41",
5
5
  "type": "module",
6
6
  "scripts": {
7
7
  "dev": "vite",