Spacebar/client
1
0
Fork 0
mirror of https://github.com/spacebarchat/client.git synced 2024-11-22 02:12:38 +01:00
Code Issues Releases Activity

remove swipe test

Browse Source
This commit is contained in:
Puyodead1 2023-10-19 15:49:38 -04:00
parent 40cf104caa
commit 8afbdeb691
No known key found for this signature in database
GPG Key ID: A4FA4FEC0DD353FC
3 changed files with 1 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -89,7 +89,7 @@
"homepage": "https://spacebar.chat",
"license": "AGPL-3.0-only",
"name": "spacebar-client",
"packageManager": "pnpm@8.7.6",
"packageManager": "pnpm@8.9.2",
"repository": {
"type": "git",
"url": "git+https://github.com/spacebarchat/client.git"

2
src/App.tsx
View File

@ -15,7 +15,6 @@ import { BannerContext } from "./contexts/BannerContext";
import useLogger from "./hooks/useLogger";
import AppPage from "./pages/AppPage";
import LogoutPage from "./pages/LogoutPage";
import SwipeTest from "./pages/SwipeTest";
import ChannelPage from "./pages/subpages/ChannelPage";
import { useAppStore } from "./stores/AppStore";
import { Globals } from "./utils/Globals";
@ -84,7 +83,6 @@ function App() {
<Route path="/login" element={<UnauthenticatedGuard component={LoginPage} />} />
<Route path="/register" element={<UnauthenticatedGuard component={RegistrationPage} />} />
<Route path="/logout" element={<AuthenticationGuard component={LogoutPage} />} />
<Route path="/swipe" element={<SwipeTest />} />
<Route path="*" element={<NotFoundPage />} />
</Routes>
</Loader>

122
src/pages/SwipeTest.tsx
View File

@ -1,122 +0,0 @@
import { PanInfo, motion, useAnimation } from "framer-motion";
import React, { useState } from "react";
import styled from "styled-components";
const Container = styled.div`
display: flex;
flex-direction: row;
flex: 1;
justify-content: space-between;
`;
const Left = styled.div`
flex: 0 0 15%;
background-color: red;
z-index: -100;
`;
const Center = styled(motion.div)`
background-color: green;
z-index: 100;
position: absolute;
// cover screen
top: 0;
bottom: 0;
left: 0;
right: 0;
flex: 0 0 100%;
box-shadow: -20px 0 20px rgba(0, 0, 0, 0.5), 20px 0 20px rgba(0, 0, 0, 0.5);
`;
const Right = styled.div`
flex: 0 0 15%;
background-color: blue;
z-index: -100;
`;
function LeftComponent() {
return <Left>left</Left>;
}
function RightComponent() {
return <Right>right</Right>;
}
function CenterComponent() {
// on drag, animate center component to the left or right
// max the container should move - 15% either way
const maxWidth = window.innerWidth * 0.15;
// const x = motionValue(0);
// const trans = useTransform(x, [0, window.innerWidth], [0, -maxWidth]);
const [isDragging, setIsDragging] = useState(false);
const [initialX, setInitialX] = useState(0);
const elementControls = useAnimation();
const handleDragStart = (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
setIsDragging(true);
setInitialX(info.point.x); // Store the initial X position
};
const handleDrag = (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
if (isDragging) {
const distanceDragged = info.point.x - initialX; // Use initialX as the starting point
// Update the element's X position based on the distance dragged
elementControls.start({ x: distanceDragged });
}
};
const handleDragEnd = (event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
// Determine if the element should snap left or right based on position
const snapLeftThreshold = -100; // Adjust as needed
const snapRightThreshold = 100; // Adjust as needed
// Determine the velocity of the drag
const velocityThreshold = 600; // Adjust as needed
const distanceDragged = info.point.x - initialX;
if (Math.abs(info.velocity.x) <= velocityThreshold) {
// Snap back to the center for low velocity
elementControls.start({
x: 0,
transition: { type: "spring", stiffness: 300, damping: 20 },
});
} else if (info.velocity.x > velocityThreshold) {
elementControls.start({ x: maxWidth }); // Snap right for high velocity
} else if (info.velocity.x < -velocityThreshold) {
elementControls.start({ x: -maxWidth }); // Snap left for high velocity
} else if (distanceDragged < -snapLeftThreshold) {
elementControls.start({ x: -maxWidth }); // Snap left if dragged a certain distance to the left
} else if (distanceDragged > snapRightThreshold) {
elementControls.start({ x: maxWidth }); // Snap right if dragged a certain distance to the right
}
};
return (
<Center
drag="x"
dragConstraints={{ left: -maxWidth, right: maxWidth }} // Adjust as needed
onDragStart={handleDragStart}
onDrag={handleDrag}
onDragEnd={handleDragEnd}
animate={elementControls}
>
center
</Center>
);
}
export default function SwipeTest() {
const centerRef = React.useRef<HTMLDivElement | null>(null);
return (
<Container>
<LeftComponent />
<CenterComponent />
<RightComponent />
</Container>
);
}