From dbf613b8174c8a8118b9a30222c8e4ee4af3f2c2 Mon Sep 17 00:00:00 2001 From: Luther Tchofo Safo Date: Tue, 10 Sep 2024 11:21:11 +0200 Subject: [PATCH] Cleaning comments. --- .prettierrc | 3 +- .../carousel-part-cleaned/carousel.tsx | 121 +++++++++++++----- app/(pages)/carousel-part-cleaned/page.tsx | 36 +++--- package-lock.json | 16 ++- package.json | 3 +- 5 files changed, 126 insertions(+), 53 deletions(-) diff --git a/.prettierrc b/.prettierrc index b4bfed3..5d00b64 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,3 +1,4 @@ { - "plugins": ["prettier-plugin-tailwindcss"] + "plugins": ["prettier-plugin-tailwindcss"], + "tailwindFunctions": ["clsx"] } diff --git a/app/(pages)/carousel-part-cleaned/carousel.tsx b/app/(pages)/carousel-part-cleaned/carousel.tsx index 3b04bce..3f5757f 100644 --- a/app/(pages)/carousel-part-cleaned/carousel.tsx +++ b/app/(pages)/carousel-part-cleaned/carousel.tsx @@ -1,11 +1,12 @@ "use client"; -import { AnimatePresence, MotionConfig, motion } from "framer-motion"; -import Image from "next/image"; -import { usePathname, useRouter, useSearchParams } from "next/navigation"; import { MouseEventHandler } from "react"; +import { usePathname, useRouter, useSearchParams } from "next/navigation"; + +import { AnimatePresence, MotionConfig, motion } from "framer-motion"; // @ts-ignore import useKeypress from "react-use-keypress"; +import clsx from "clsx"; let fullAspectRatio = 3 / 2; let collapsedAspectRatio = 1 / 3; @@ -13,8 +14,9 @@ let gap = 4; let fullMargin = 12 - gap; const PAGE = "page"; -const OBJECTFIT = "objectfit"; const NODISTRACTIONS = "nodistractions"; +const OBJECTFIT = "objectfit"; +const SCROLLID = "to-be-scrolled"; export default function Carousel({ images }: { images: string[] }) { const pathname = usePathname(); @@ -22,12 +24,7 @@ export default function Carousel({ images }: { images: string[] }) { const searchParams = useSearchParams(); const currentPage = Number(searchParams.get(PAGE)) || 0; - const currentObjectFit = - searchParams.get(OBJECTFIT) === "contain" - ? "contain" - : searchParams.get(OBJECTFIT) === "cover" - ? "cover" - : "cover"; + const currentNoDistraction = searchParams.get(NODISTRACTIONS) === "true" ? "true" @@ -35,9 +32,18 @@ export default function Carousel({ images }: { images: string[] }) { ? "false" : "false"; + const currentObjectFit = + searchParams.get(OBJECTFIT) === "scroll" + ? "scroll" + : searchParams.get(OBJECTFIT) === "contain" + ? "contain" + : searchParams.get(OBJECTFIT) === "cover" + ? "cover" + : "cover"; + let index = currentPage; - let objectFitting: "contain" | "cover" = currentObjectFit; let noDistracting: "true" | "false" = currentNoDistraction; + let objectFitting: "contain" | "cover" | "scroll" = currentObjectFit; const paramsingIndex = (index: number) => { const params = new URLSearchParams(searchParams); @@ -45,20 +51,38 @@ export default function Carousel({ images }: { images: string[] }) { push(`${pathname}?${params.toString()}`); }; + const paramsingNoDistracting = () => { + const params = new URLSearchParams(searchParams); + if (noDistracting === "true") params.set(NODISTRACTIONS, "false"); + else params.set(NODISTRACTIONS, "true"); + push(`${pathname}?${params.toString()}`); + }; + const paramsingObjectFitting = () => { const params = new URLSearchParams(searchParams); if (objectFitting === "contain") params.set(OBJECTFIT, "cover"); + else if (objectFitting === "cover") params.set(OBJECTFIT, "scroll"); else params.set(OBJECTFIT, "contain"); push(`${pathname}?${params.toString()}`); }; - const paramsingNoDistracting = () => { + const reverseParamsingObjectFitting = () => { const params = new URLSearchParams(searchParams); - if (noDistracting === "true") params.set(NODISTRACTIONS, "false"); - else params.set(NODISTRACTIONS, "true"); + if (objectFitting === "contain") params.set(OBJECTFIT, "scroll"); + else if (objectFitting === "cover") params.set(OBJECTFIT, "contain"); + else params.set(OBJECTFIT, "cover"); push(`${pathname}?${params.toString()}`); }; + const scrollToTop = () => + document.getElementById(SCROLLID)!.scrollTo({ top: 0, behavior: "smooth" }); + + const scrollToBottom = () => + document.getElementById(SCROLLID)!.scrollTo({ + top: document.getElementById(SCROLLID)!.scrollHeight, + behavior: "smooth", + }); + // setIndexFunctionNames kept in reference to original state lifted to URL const setIndexPlusOne = (index: number) => paramsingIndex(index + 1); const setIndexMinusOne = (index: number) => paramsingIndex(index - 1); @@ -72,31 +96,42 @@ export default function Carousel({ images }: { images: string[] }) { useKeypress("ArrowLeft", (event: KeyboardEvent) => { event.preventDefault(); - if (index > 0) + if (index > 0) { if (event.shiftKey) setIndexMinusTen(index); else setIndexMinusOne(index); + scrollToTop(); + } }); useKeypress("ArrowRight", (event: KeyboardEvent) => { event.preventDefault(); - if (index < images.length - 1) + if (index < images.length - 1) { if (event.shiftKey) setIndexPlusTen(index); else setIndexPlusOne(index); + scrollToTop(); + } }); useKeypress("ArrowUp", (event: KeyboardEvent) => { event.preventDefault(); - if (event.shiftKey) setIndexFirst(); + + if (event.shiftKey) { + setIndexFirst(); + scrollToTop(); + } else { + scrollToTop(); + } }); useKeypress("ArrowDown", (event: KeyboardEvent) => { event.preventDefault(); - if (event.shiftKey) setIndexLast(); - }); - useKeypress("Enter", (event: KeyboardEvent) => { - event.preventDefault(); - paramsingObjectFitting(); + if (event.shiftKey) { + setIndexLast(); + scrollToTop(); + } else { + scrollToBottom(); + } }); useKeypress("Backspace", (event: KeyboardEvent) => { @@ -104,12 +139,23 @@ export default function Carousel({ images }: { images: string[] }) { paramsingNoDistracting(); }); + useKeypress("Enter", (event: KeyboardEvent) => { + event.preventDefault(); + if (event.shiftKey) reverseParamsingObjectFitting(); + else paramsingObjectFitting(); + }); + return ( -
-
+ {/* removed relative h-full justify-center */} +
+ {/* removed relative */} + {/* overflow-x-hidden instead of overflow-hidden */} +
{images.map((imageUrl, i) => { @@ -126,12 +172,20 @@ export default function Carousel({ images }: { images: string[] }) { }} key={imageUrl} src={imageUrl} - className="flex h-full w-full shrink-0 items-center justify-center" + // h-fit goes somewhere + // removed items-center justify-center + className="flex h-fit w-full shrink-0" > ); @@ -144,7 +198,10 @@ export default function Carousel({ images }: { images: string[] }) { <> setIndexMinusOne(index)} + handleClick={() => { + setIndexMinusOne(index); + scrollToTop(); + }} > @@ -158,7 +215,10 @@ export default function Carousel({ images }: { images: string[] }) { {index + 1 < images.length && ( setIndexPlusOne(index)} + handleClick={() => { + setIndexPlusOne(index); + scrollToTop(); + }} > @@ -214,7 +274,8 @@ export default function Carousel({ images }: { images: string[] }) { }} className="flex shrink-0 justify-center" > - {objectFitting === "contain" && ( + {(objectFitting === "contain" || + objectFitting === "scroll") && ( `/${directoryPath}/${filePath}`); +const directoryPath = directory.split("/").slice(2).join("/"); +images = files.map((filePath) => `/${directoryPath}/${filePath}`); /* Sorting numerically. All files need to have a number format, and should only be of an image format, with no folders inside. Since this is a personal and internal project, I'm not going to handle errors for now. */ -// const imagesForSorting: [string, number][] = images.map((e) => [ -// e, -// +e.split("/").at(-1)?.split(".").at(0)!, -// ]); -// imagesForSorting.sort((a, b) => a[1] - b[1]); -// images = imagesForSorting.map((e) => e[0]); +const imagesForSorting: [string, number][] = images.map((e) => [ + e, + +e.split("/").at(-1)?.split(".").at(0)!, +]); +imagesForSorting.sort((a, b) => a[1] - b[1]); +images = imagesForSorting.map((e) => e[0]); // console.log(images); /* Replacing the copypasted multiple images. */ -const imagesDynamized = (x: number) => { - return Array.from( - { length: 6 * x }, - (_, i) => `/images/${(i % 6) + 1}.jpeg?${Math.ceil((i + 1) / 6)}`, - ); -}; -images = imagesDynamized(10); +// const imagesDynamized = (x: number) => { +// return Array.from( +// { length: 6 * x }, +// (_, i) => `/images/${(i % 6) + 1}.jpeg?${Math.ceil((i + 1) / 6)}`, +// ); +// }; +// images = imagesDynamized(10); // console.log(images); export default async function Page() { diff --git a/package-lock.json b/package-lock.json index 40e9aeb..00d1d3d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "framer-motion-recipes", "version": "0.1.0", "dependencies": { + "clsx": "^2.1.1", "date-fns": "^3.6.0", "framer-motion": "^12.0.0-alpha.0", "next": "15.0.0-rc.0", @@ -1732,6 +1733,15 @@ "url": "https://github.com/chalk/wrap-ansi?sponsor=1" } }, + "node_modules/clsx": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz", + "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/color": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz", @@ -4067,9 +4077,9 @@ } }, "node_modules/micromatch": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz", - "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 26a3ba3..27846c3 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "lint": "next lint" }, "dependencies": { + "clsx": "^2.1.1", "date-fns": "^3.6.0", "framer-motion": "^12.0.0-alpha.0", "next": "15.0.0-rc.0", @@ -34,4 +35,4 @@ "dockerfile": { "legacyPeerDeps": true } -} \ No newline at end of file +}