Cleaning comments.

LutherTS · Sep 10, 2024 · dbf613b · dbf613b
1 parent a8d32a2
commit dbf613b
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 53 deletions.
diff --git 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
@@ -1,64 +1,88 @@
 "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;
 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();
   const { push } = useRouter(); // push instead replace to go back and forth in the browser's history
   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"
       : searchParams.get(NODISTRACTIONS) === "false"
         ? "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);
     params.set(PAGE, index.toString());
     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,44 +96,66 @@ 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) => {
     event.preventDefault();
     paramsingNoDistracting();
   });
 
+  useKeypress("Enter", (event: KeyboardEvent) => {
+    event.preventDefault();
+    if (event.shiftKey) reverseParamsingObjectFitting();
+    else paramsingObjectFitting();
+  });
+
   return (
     <MotionConfig transition={{ duration: 0.7, ease: [0.32, 0.72, 0, 1] }}>
-      <div className="relative mx-auto flex h-full flex-col justify-center">
-        <div className="relative overflow-hidden">
+      {/* removed relative h-full justify-center */}
+      <div className="mx-auto flex h-full flex-col">
+        {/* removed relative */}
+        {/* overflow-x-hidden instead of overflow-hidden */}
+        <div className="overflow-x-hidden" id={SCROLLID}>
           <motion.div
-            className="flex h-screen items-center"
+            // h-screen reacts
+            // removed items-center
+            className={`flex h-screen`}
             animate={{ x: `-${index * 100}%` }}
           >
             {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"
                 >
                   <img
                     src={imageUrl}
                     alt=""
-                    className={`h-full w-full ${objectFitting === "contain" ? "object-contain" : "object-cover"}`}
+                    className={clsx(
+                      "w-full",
+                      objectFitting === "contain" && "h-screen object-contain",
+                      objectFitting === "cover" && "h-screen object-cover",
+                      objectFitting === "scroll" && "h-full",
+                    )}
+                    // className={`h-screen w-full ${objectFitting === "contain" ? "object-contain" : "object-cover"}`} // object-cover is like a default, actually no, fill is the default
                   />
                 </motion.div>
               );
@@ -144,7 +198,10 @@ export default function Carousel({ images }: { images: string[] }) {
                 <>
                   <ChevronButton
                     isLeft={true}
-                    handleClick={() => setIndexMinusOne(index)}
+                    handleClick={() => {
+                      setIndexMinusOne(index);
+                      scrollToTop();
+                    }}
                   >
                     <ChevronLeftIcon />
                   </ChevronButton>
@@ -158,7 +215,10 @@ export default function Carousel({ images }: { images: string[] }) {
               {index + 1 < images.length && (
                 <ChevronButton
                   isLeft={false}
-                  handleClick={() => setIndexPlusOne(index)}
+                  handleClick={() => {
+                    setIndexPlusOne(index);
+                    scrollToTop();
+                  }}
                 >
                   <ChevronRightIcon />
                 </ChevronButton>
@@ -214,7 +274,8 @@ export default function Carousel({ images }: { images: string[] }) {
                     }}
                     className="flex shrink-0 justify-center"
                   >
-                    {objectFitting === "contain" && (
+                    {(objectFitting === "contain" ||
+                      objectFitting === "scroll") && (
                       <img
                         src={imageUrl}
                         alt=""

diff --git a/app/(pages)/carousel-part-cleaned/page.tsx b/app/(pages)/carousel-part-cleaned/page.tsx
@@ -1,33 +1,33 @@
-// import * as fs from "node:fs";
+import * as fs from "node:fs";
 import { Suspense } from "react";
 
 import Carousel from "./carousel";
 
 let images: string[];
 
-// const directory = "./public/images4";
-// const files = fs.readdirSync(directory);
+const directory = "./public/images4";
+const files = fs.readdirSync(directory);
 
-// const directoryPath = directory.split("/").slice(2).join("/");
-// images = files.map((filePath) => `/${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
diff --git 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
   }
-}
+}