szld-libs 0.2.38 → 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 (12) hide show
  1. package/dist/style.css +1 -1
  2. package/dist/szld-components.es.js +4783 -4732
  3. package/dist/szld-components.umd.js +40 -40
  4. package/es/components/LoopSlide/index.css +3 -0
  5. package/es/components/LoopSlide/index.d.ts +1 -0
  6. package/es/components/LoopSlide/index.js +85 -2
  7. package/es/index.js +4 -4
  8. package/lib/components/LoopSlide/index.css +3 -0
  9. package/lib/components/LoopSlide/index.d.ts +1 -0
  10. package/lib/components/LoopSlide/index.js +85 -2
  11. package/lib/index.js +4 -4
  12. package/package.json +1 -1
package/es/components/LoopSlide/index.css CHANGED
@@ -10,6 +10,9 @@
10
10
  height: 100%;
11
11
  --content-height: 0px;
12
12
  animation: LoopSlide-module_scrollContent_36ed7 linear infinite;
13
+ backface-visibility: hidden;
14
+ -webkit-font-smoothing: antialiased;
15
+ image-rendering: -webkit-optimize-contrast;
13
16
  }
14
17
 
15
18
  .LoopSlide-module_content_f392a {
package/es/components/LoopSlide/index.d.ts CHANGED
@@ -7,6 +7,7 @@ interface LoopSlideProps {
7
7
  style?: CSSProperties;
8
8
  children: ReactNode;
9
9
  height?: string;
10
+ mouseControl?: boolean;
10
11
  }
11
12
  declare const LoopSlide: React.FC<LoopSlideProps>;
12
13
  export default LoopSlide;
package/es/components/LoopSlide/index.js CHANGED
@@ -17,12 +17,17 @@ const LoopSlide = ({
17
17
  className = "",
18
18
  style,
19
19
  children,
20
- height = "100vh"
20
+ height = "100vh",
21
+ mouseControl = false
21
22
  }) => {
22
23
  const wrapperRef = useRef(null);
23
24
  const containerRef = useRef(null);
24
25
  const contentRef = useRef(null);
25
26
  const resizeObserverRef = useRef(null);
27
+ useRef(false);
28
+ const scrollVelocity = useRef(0);
29
+ const animationFrameId = useRef();
30
+ const lastScrollTime = useRef(0);
26
31
  const setupAnimation = () => {
27
32
  if (!containerRef.current || !contentRef.current)
28
33
  return;
@@ -62,7 +67,85 @@ const LoopSlide = ({
62
67
  }
63
68
  };
64
69
  }, [speed, delay]);
65
- return /* @__PURE__ */ jsx("div", { ref: wrapperRef, className: `${styles.wrapper} ${className}`, style: { height, ...style }, children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: styles.container, children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: styles.content, children }) }) });
70
+ const handleMouseEnter = () => {
71
+ if (mouseControl && containerRef.current) {
72
+ containerRef.current.style.animationPlayState = "paused";
73
+ }
74
+ };
75
+ const handleMouseLeave = () => {
76
+ if (mouseControl && containerRef.current) {
77
+ cancelSmoothScroll();
78
+ containerRef.current.style.animationPlayState = "running";
79
+ }
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]);
138
+ return /* @__PURE__ */ jsx(
139
+ "div",
140
+ {
141
+ ref: wrapperRef,
142
+ className: `${styles.wrapper} ${className}`,
143
+ style: { height, ...style },
144
+ onMouseEnter: handleMouseEnter,
145
+ onMouseLeave: handleMouseLeave,
146
+ children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: styles.container, children: /* @__PURE__ */ jsx("div", { ref: contentRef, className: styles.content, children }) })
147
+ }
148
+ );
66
149
  };
67
150
  export {
68
151
  LoopSlide as default
package/es/index.js CHANGED
@@ -61,11 +61,11 @@ const Demo = () => {
61
61
  border: "1px solid #333",
62
62
  margin: "20px"
63
63
  },
64
- children: /* @__PURE__ */ jsx(LoopSlide, { speed: 4, height: "100%", children: /* @__PURE__ */ jsx("div", { style: { padding: "0px", textAlign: "center" }, children: creditsData.map((section, i) => /* @__PURE__ */ jsxs("div", { children: [
65
- /* @__PURE__ */ jsx("h2", { style: { fontSize: "2rem", marginBottom: "1rem" }, children: section.title }),
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
+ /* @__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
- /* @__PURE__ */ jsx("p", { style: { fontSize: "1.5rem", margin: "0.5rem 0" }, children: person.name }),
68
- person.role && /* @__PURE__ */ jsx("p", { style: { fontSize: "1rem", color: "#aaa", marginBottom: "1.5rem" }, children: person.role })
67
+ /* @__PURE__ */ jsx("p", { style: { fontSize: "15px", margin: "5px 0" }, children: person.name }),
68
+ person.role && /* @__PURE__ */ jsx("p", { style: { fontSize: "12px", color: "#aaa", marginBottom: "15px" }, children: person.role })
69
69
  ] }, j))
70
70
  ] }, i)) }) })
71
71
  }
package/lib/components/LoopSlide/index.css CHANGED
@@ -10,6 +10,9 @@
10
10
  height: 100%;
11
11
  --content-height: 0px;
12
12
  animation: LoopSlide-module_scrollContent_36ed7 linear infinite;
13
+ backface-visibility: hidden;
14
+ -webkit-font-smoothing: antialiased;
15
+ image-rendering: -webkit-optimize-contrast;
13
16
  }
14
17
 
15
18
  .LoopSlide-module_content_f392a {
package/lib/components/LoopSlide/index.d.ts CHANGED
@@ -7,6 +7,7 @@ interface LoopSlideProps {
7
7
  style?: CSSProperties;
8
8
  children: ReactNode;
9
9
  height?: string;
10
+ mouseControl?: boolean;
10
11
  }
11
12
  declare const LoopSlide: React.FC<LoopSlideProps>;
12
13
  export default LoopSlide;
package/lib/components/LoopSlide/index.js CHANGED
@@ -18,12 +18,17 @@ const LoopSlide = ({
18
18
  className = "",
19
19
  style,
20
20
  children,
21
- height = "100vh"
21
+ height = "100vh",
22
+ mouseControl = false
22
23
  }) => {
23
24
  const wrapperRef = react.useRef(null);
24
25
  const containerRef = react.useRef(null);
25
26
  const contentRef = react.useRef(null);
26
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);
27
32
  const setupAnimation = () => {
28
33
  if (!containerRef.current || !contentRef.current)
29
34
  return;
@@ -63,6 +68,84 @@ const LoopSlide = ({
63
68
  }
64
69
  };
65
70
  }, [speed, delay]);
66
- return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: wrapperRef, className: `${styles.wrapper} ${className}`, style: { height, ...style }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: styles.container, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: styles.content, children }) }) });
71
+ const handleMouseEnter = () => {
72
+ if (mouseControl && containerRef.current) {
73
+ containerRef.current.style.animationPlayState = "paused";
74
+ }
75
+ };
76
+ const handleMouseLeave = () => {
77
+ if (mouseControl && containerRef.current) {
78
+ cancelSmoothScroll();
79
+ containerRef.current.style.animationPlayState = "running";
80
+ }
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]);
139
+ return /* @__PURE__ */ jsxRuntime.jsx(
140
+ "div",
141
+ {
142
+ ref: wrapperRef,
143
+ className: `${styles.wrapper} ${className}`,
144
+ style: { height, ...style },
145
+ onMouseEnter: handleMouseEnter,
146
+ onMouseLeave: handleMouseLeave,
147
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: containerRef, className: styles.container, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: contentRef, className: styles.content, children }) })
148
+ }
149
+ );
67
150
  };
68
151
  module.exports = LoopSlide;
package/lib/index.js CHANGED
@@ -62,11 +62,11 @@ const Demo = () => {
62
62
  border: "1px solid #333",
63
63
  margin: "20px"
64
64
  },
65
- children: /* @__PURE__ */ jsxRuntime.jsx(main.LoopSlide, { speed: 4, height: "100%", children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "0px", textAlign: "center" }, children: creditsData.map((section, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
66
- /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { fontSize: "2rem", marginBottom: "1rem" }, children: section.title }),
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
+ /* @__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
- /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "1.5rem", margin: "0.5rem 0" }, children: person.name }),
69
- person.role && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "1rem", color: "#aaa", marginBottom: "1.5rem" }, children: person.role })
68
+ /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "15px", margin: "5px 0" }, children: person.name }),
69
+ person.role && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: "12px", color: "#aaa", marginBottom: "15px" }, children: person.role })
70
70
  ] }, j))
71
71
  ] }, i)) }) })
72
72
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "szld-libs",
3
3
  "private": false,
4
- "version": "0.2.38",
4
+ "version": "0.2.40",
5
5
  "type": "module",
6
6
  "scripts": {
7
7
  "dev": "vite",