mikhail_lanskikh/graff.event
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fixes

Browse Source
This commit is contained in:
Lanskikh
2024-09-10 16:41:28 +05:00
parent 8c3f1113e6
commit 57e3d07f2c
3 changed files with 58 additions and 108 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Devices.tsx
+1 -1
View File
@@ -54,7 +54,7 @@ function DesktopDevice({
className="py-10 border-b border-[#3D425C] flex justify-between items-start relative [clip-path:polygon(0%_-50%,100%_-50%,100%_100%,-50%_100%)]"
animate={{
height: hovered
? +(root.current?.clientHeight ?? 0) + descriptionHeight + 24
? (root.current?.clientHeight ?? 0) + descriptionHeight + 24
: 112,
}}
>
src/components/ui/SliderControls.tsx
+18 -53
View File
@@ -1,6 +1,7 @@
import { forwardRef, useEffect, useImperativeHandle, useRef } from 'react';
import { forwardRef, useImperativeHandle, useRef } from 'react';
import { ArrowLeftIcon } from '../icons/ArrowLeftIcon';
import { ArrowRightIcon } from '../icons/ArrowRightIcon';
import { delay } from 'framer-motion';
export const SliderControls = forwardRef<
{ left: () => void; right: () => void },
@@ -32,34 +33,11 @@ export const SliderControls = forwardRef<
const nextBtnRef = useRef<HTMLButtonElement>(null);
const rectRef = useRef<SVGRectElement>(null);
useEffect(() => {
const interval = setInterval(() => {
nextBtnRef.current?.click();
}, 1000);
return () => clearInterval(interval);
}, [onRightClick]);
useImperativeHandle(ref, () => ({
left: () => prevBtnRef.current?.click(),
right: () => nextBtnRef.current?.click(),
}));
// useEffect(() => {
// if (slide + 1 === slidesCount) {
// rectRef.current!.classList.remove('transition-all', 'duration-300');
// rectRef.current!.setAttribute('stroke-dasharray', `0 ${length}`);
// }
// return () => {
// rectRef.current!.classList.add('transition-all', 'duration-300');
// };
// }, [length, slide, slidesCount]);
// useEffect(() => {
// rectRef.current!.classList.add('transition-all', 'duration-300');
// }, []);
return (
<div className={'flex items-center gap-2 ' + className}>
<div className="relative flex justify-center max-sm:order-2">
@@ -102,26 +80,19 @@ export const SliderControls = forwardRef<
ref={prevBtnRef}
onClick={() => {
if (slide === 0) {
let timeout: number | undefined;
rectRef.current!.classList.remove(
'transition-all',
'duration-300',
);
rectRef.current!.setAttribute('stroke-dasharray', `${length} 0`);
new Promise<void>(
res =>
(timeout = setTimeout(() => {
rectRef.current!.classList.add(
'transition-all',
'duration-300',
);
res();
}, 1)),
).then(() => {
onLeftClick();
clearTimeout(timeout);
});
} else onLeftClick();
delay(() => {
rectRef.current!.classList.add(
'transition-all',
'duration-300',
);
}, 1);
}
onLeftClick();
}}
className="rounded-full sm:p-5 p-4 border border-[#3D425C] bg-[#14161F]"
>
@@ -130,25 +101,19 @@ export const SliderControls = forwardRef<
<button
onClick={() => {
if (slide + 1 === slidesCount) {
let timeout: number | undefined;
rectRef.current!.classList.remove(
'transition-all',
'duration-300',
);
rectRef.current!.setAttribute('stroke-dasharray', `0 ${length}`);
new Promise<void>(res => {
timeout = setTimeout(() => {
rectRef.current!.classList.add(
'transition-all',
'duration-300',
);
res();
}, 300);
}).then(() => {
onRightClick();
clearTimeout(timeout);
});
} else onRightClick();
delay(() => {
rectRef.current!.classList.add(
'transition-all',
'duration-300',
);
}, 1);
}
onRightClick();
}}
ref={nextBtnRef}
className="rounded-full sm:p-5 p-4 border border-[#3D425C] bg-[#14161F] max-sm:order-2"
src/components/ui/SliderWithScaling.tsx
+39 -54
View File
@@ -60,32 +60,12 @@ export function SliderWithScaling<T extends { img: string }>({
[slides[slides.length - 1], ...slides, slides[0]],
);
useEffect(() => {
const sliderRefCurrent = sliderRef.current;
sliderRefCurrent?.addEventListener('transitionend', () => {
setTransiting(false);
setCurrentSliding(null);
});
return () => {
sliderRefCurrent?.removeEventListener('transitionend', () => {
setTransiting(false);
setCurrentSliding(null);
});
};
}, [slide]);
function nextSlide() {
// if (!transiting) {
// }
setCurrentSliding('next');
dispatch('next');
}
function prevSlide() {
// if (!transiting) {
// }
setCurrentSliding('prev');
dispatch('prev');
}
@@ -108,6 +88,9 @@ export function SliderWithScaling<T extends { img: string }>({
<div {...handlers} className="h-full">
<div
className={`flex items-${alignItems} gap-x-4 -mr-6 select-none`}
onTransitionEnd={() => {
setTransiting(false);
}}
style={{
minHeight: minHeightScaled,
transform: `translateX(${sliderOffset}px)`,
@@ -115,40 +98,42 @@ export function SliderWithScaling<T extends { img: string }>({
}}
ref={sliderRef}
>
{order.map((slide, index) => (
<motion.div
key={
slide.img +
(index < 1 ? '123' : index > slides.length ? '456' : '')
}
initial={
currentSliding === 'next' && index === 0
? { minWidth: minWidthScaled, minHeight: minHeightScaled }
: index === 3
? { minWidth, minHeight }
: {}
}
transition={{ duration: 1, type: 'just' }}
animate={
index === 1
? {
minWidth: minWidthScaled,
minHeight: minHeightScaled,
}
: {
minWidth,
minHeight,
transition: { duration: index === 3 ? 0.0001 : 1 },
}
}
className={'pointer-events-none ' + childClassName}
>
<SlideElement
{...slide}
ref={index === 1 && !transiting ? itemRef : null}
/>
</motion.div>
))}
{order.map((slide, index) => {
return (
<motion.div
key={
slide.img +
(index < 1 ? '123' : index > slides.length ? '456' : '')
}
initial={
currentSliding === 'next' && index === 0
? { minWidth: minWidthScaled, minHeight: minHeightScaled }
: index === 3
? { minWidth, minHeight }
: {}
}
transition={{ duration: 0.9, type: 'just' }}
animate={
index === 1
? {
minWidth: minWidthScaled,
minHeight: minHeightScaled,
}
: {
minWidth,
minHeight,
transition: { duration: index === 3 ? 0.0001 : 1 },
}
}
className={'pointer-events-none ' + childClassName}
>
<SlideElement
{...slide}
ref={index === 1 && !transiting ? itemRef : null}
/>
</motion.div>
);
})}
</div>
</div>
</div>