catchup-library-web 1.21.11 → 1.21.13

package/dist/index.js

@@ -5391,27 +5391,10 @@ var GroupingActivityMaterialContent = ({
     if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
       const dropZoneElement = dropZoneRefs.current[dropTargetKey];
       if (dropZoneElement) {
-        const targetPosition = dropZoneElement.getBoundingClientRect().top + window.pageYOffset;
-        const startPosition = window.pageYOffset;
-        const distance = targetPosition - startPosition - window.innerHeight / 2 + dropZoneElement.offsetHeight / 2;
-        const duration = 800;
-        let start = null;
-        const easeInOutQuad = (t) => {
-          return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
-        };
-        const animation = (currentTime) => {
-          if (start === null) start = currentTime;
-          const timeElapsed = currentTime - start;
-          const progress = Math.min(timeElapsed / duration, 1);
-          window.scrollTo(
-            0,
-            startPosition + distance * easeInOutQuad(progress)
-          );
-          if (timeElapsed < duration) {
-            requestAnimationFrame(animation);
-          }
-        };
-        requestAnimationFrame(animation);
+        dropZoneElement.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
       }
     }
   }, [dropTargetKey]);
@@ -5822,14 +5805,29 @@ var MatchingActivityMaterialContent = ({
     if (!dropTargetKey || !dropZoneRefs.current[dropTargetKey]) return;
     const dropZoneElement = dropZoneRefs.current[dropTargetKey];
     if (!dropZoneElement) return;
-    const rect = dropZoneElement.getBoundingClientRect();
-    const elementTop = rect.top + window.scrollY;
-    const elementHeight = rect.height;
-    const viewportHeight = window.innerHeight;
-    const targetScroll = elementTop - viewportHeight / 2 + elementHeight / 2;
-    const startScroll = window.scrollY;
+    const findScrollableParent = (element) => {
+      let parent = element.parentElement;
+      while (parent) {
+        const { overflow, overflowY } = window.getComputedStyle(parent);
+        if (overflow === "auto" || overflow === "scroll" || overflowY === "auto" || overflowY === "scroll") {
+          return parent;
+        }
+        parent = parent.parentElement;
+      }
+      return document.documentElement;
+    };
+    const scrollContainer = findScrollableParent(dropZoneElement);
+    if (!scrollContainer) return;
+    const containerRect = scrollContainer.getBoundingClientRect();
+    const elementRect = dropZoneElement.getBoundingClientRect();
+    const elementTop = elementRect.top - containerRect.top + scrollContainer.scrollTop;
+    const elementHeight = elementRect.height;
+    const containerHeight = containerRect.height;
+    const targetScroll = elementTop - containerHeight / 2 + elementHeight / 2;
+    const startScroll = scrollContainer.scrollTop;
     const distance = targetScroll - startScroll;
     console.log("Scrolling to element:", dropTargetKey);
+    console.log("Scroll container:", scrollContainer);
     console.log("Current scroll:", startScroll);
     console.log("Target scroll:", targetScroll);
     console.log("Distance:", distance);
@@ -5841,14 +5839,12 @@ var MatchingActivityMaterialContent = ({
     };
     const animate = (currentTime) => {
       if (startTime === null) startTime = currentTime;
-      console.log("startTime:", startTime);
       const elapsed = currentTime - startTime;
-      console.log("elapsed:", elapsed);
       const progress = Math.min(elapsed / duration, 1);
-      console.log("progress:", progress);
       const easedProgress = easeInOutQuad(progress);
-      console.log("eased progressed: ", easedProgress);
-      window.scrollTo(0, startScroll + distance * easedProgress);
+      const newScrollTop = startScroll + distance * easedProgress;
+      scrollContainer.scrollTop = newScrollTop;
+      console.log("Scrolling to:", newScrollTop);
       if (progress < 1) {
         requestAnimationFrame(animate);
       }

package/dist/index.mjs

@@ -5175,27 +5175,10 @@ var GroupingActivityMaterialContent = ({
     if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
       const dropZoneElement = dropZoneRefs.current[dropTargetKey];
       if (dropZoneElement) {
-        const targetPosition = dropZoneElement.getBoundingClientRect().top + window.pageYOffset;
-        const startPosition = window.pageYOffset;
-        const distance = targetPosition - startPosition - window.innerHeight / 2 + dropZoneElement.offsetHeight / 2;
-        const duration = 800;
-        let start = null;
-        const easeInOutQuad = (t) => {
-          return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
-        };
-        const animation = (currentTime) => {
-          if (start === null) start = currentTime;
-          const timeElapsed = currentTime - start;
-          const progress = Math.min(timeElapsed / duration, 1);
-          window.scrollTo(
-            0,
-            startPosition + distance * easeInOutQuad(progress)
-          );
-          if (timeElapsed < duration) {
-            requestAnimationFrame(animation);
-          }
-        };
-        requestAnimationFrame(animation);
+        dropZoneElement.scrollIntoView({
+          behavior: "smooth",
+          block: "center"
+        });
       }
     }
   }, [dropTargetKey]);
@@ -5606,14 +5589,29 @@ var MatchingActivityMaterialContent = ({
     if (!dropTargetKey || !dropZoneRefs.current[dropTargetKey]) return;
     const dropZoneElement = dropZoneRefs.current[dropTargetKey];
     if (!dropZoneElement) return;
-    const rect = dropZoneElement.getBoundingClientRect();
-    const elementTop = rect.top + window.scrollY;
-    const elementHeight = rect.height;
-    const viewportHeight = window.innerHeight;
-    const targetScroll = elementTop - viewportHeight / 2 + elementHeight / 2;
-    const startScroll = window.scrollY;
+    const findScrollableParent = (element) => {
+      let parent = element.parentElement;
+      while (parent) {
+        const { overflow, overflowY } = window.getComputedStyle(parent);
+        if (overflow === "auto" || overflow === "scroll" || overflowY === "auto" || overflowY === "scroll") {
+          return parent;
+        }
+        parent = parent.parentElement;
+      }
+      return document.documentElement;
+    };
+    const scrollContainer = findScrollableParent(dropZoneElement);
+    if (!scrollContainer) return;
+    const containerRect = scrollContainer.getBoundingClientRect();
+    const elementRect = dropZoneElement.getBoundingClientRect();
+    const elementTop = elementRect.top - containerRect.top + scrollContainer.scrollTop;
+    const elementHeight = elementRect.height;
+    const containerHeight = containerRect.height;
+    const targetScroll = elementTop - containerHeight / 2 + elementHeight / 2;
+    const startScroll = scrollContainer.scrollTop;
     const distance = targetScroll - startScroll;
     console.log("Scrolling to element:", dropTargetKey);
+    console.log("Scroll container:", scrollContainer);
     console.log("Current scroll:", startScroll);
     console.log("Target scroll:", targetScroll);
     console.log("Distance:", distance);
@@ -5625,14 +5623,12 @@ var MatchingActivityMaterialContent = ({
     };
     const animate = (currentTime) => {
       if (startTime === null) startTime = currentTime;
-      console.log("startTime:", startTime);
       const elapsed = currentTime - startTime;
-      console.log("elapsed:", elapsed);
       const progress = Math.min(elapsed / duration, 1);
-      console.log("progress:", progress);
       const easedProgress = easeInOutQuad(progress);
-      console.log("eased progressed: ", easedProgress);
-      window.scrollTo(0, startScroll + distance * easedProgress);
+      const newScrollTop = startScroll + distance * easedProgress;
+      scrollContainer.scrollTop = newScrollTop;
+      console.log("Scrolling to:", newScrollTop);
       if (progress < 1) {
         requestAnimationFrame(animate);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "1.21.11",
+  "version": "1.21.13",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/activities/material-contents/GroupingActivityMaterialContent.tsx

@@ -64,41 +64,15 @@ const GroupingActivityMaterialContent = ({
     ).answerMap = materialMap;
   }, [showCorrectAnswer, answer, materialMap]);
 
+  // Auto-scroll to center the drop zone when hovering
   useEffect(() => {
     if (dropTargetKey && dropZoneRefs.current[dropTargetKey]) {
       const dropZoneElement = dropZoneRefs.current[dropTargetKey];
       if (dropZoneElement) {
-        const targetPosition =
-          dropZoneElement.getBoundingClientRect().top + window.pageYOffset;
-        const startPosition = window.pageYOffset;
-        const distance =
-          targetPosition -
-          startPosition -
-          window.innerHeight / 2 +
-          dropZoneElement.offsetHeight / 2;
-        const duration = 800; // Adjust this value (in milliseconds) to control speed
-        let start: number | null = null;
-
-        const easeInOutQuad = (t: number) => {
-          return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
-        };
-
-        const animation = (currentTime: number) => {
-          if (start === null) start = currentTime;
-          const timeElapsed = currentTime - start;
-          const progress = Math.min(timeElapsed / duration, 1);
-
-          window.scrollTo(
-            0,
-            startPosition + distance * easeInOutQuad(progress)
-          );
-
-          if (timeElapsed < duration) {
-            requestAnimationFrame(animation);
-          }
-        };
-
-        requestAnimationFrame(animation);
+        dropZoneElement.scrollIntoView({
+          behavior: "smooth",
+          block: "center",
+        });
       }
     }
   }, [dropTargetKey]);

package/src/components/activities/material-contents/MatchingActivityMaterialContent.tsx

@@ -68,18 +68,45 @@ const MatchingActivityMaterialContent = ({
     const dropZoneElement = dropZoneRefs.current[dropTargetKey];
     if (!dropZoneElement) return;
 
-    // Get the element's position relative to the viewport
-    const rect = dropZoneElement.getBoundingClientRect();
-    const elementTop = rect.top + window.scrollY;
-    const elementHeight = rect.height;
-    const viewportHeight = window.innerHeight;
-
-    // Calculate target scroll position (center the element in viewport)
-    const targetScroll = elementTop - viewportHeight / 2 + elementHeight / 2;
-    const startScroll = window.scrollY;
+    // Find the scrollable parent container
+    const findScrollableParent = (element: HTMLElement): HTMLElement | null => {
+      let parent = element.parentElement;
+
+      while (parent) {
+        const { overflow, overflowY } = window.getComputedStyle(parent);
+        if (
+          overflow === "auto" ||
+          overflow === "scroll" ||
+          overflowY === "auto" ||
+          overflowY === "scroll"
+        ) {
+          return parent;
+        }
+        parent = parent.parentElement;
+      }
+
+      return document.documentElement; // Fallback to document scroll
+    };
+
+    const scrollContainer = findScrollableParent(dropZoneElement);
+    if (!scrollContainer) return;
+
+    // Get the element's position relative to the scroll container
+    const containerRect = scrollContainer.getBoundingClientRect();
+    const elementRect = dropZoneElement.getBoundingClientRect();
+
+    const elementTop =
+      elementRect.top - containerRect.top + scrollContainer.scrollTop;
+    const elementHeight = elementRect.height;
+    const containerHeight = containerRect.height;
+
+    // Calculate target scroll position (center the element in the container)
+    const targetScroll = elementTop - containerHeight / 2 + elementHeight / 2;
+    const startScroll = scrollContainer.scrollTop;
     const distance = targetScroll - startScroll;
 
     console.log("Scrolling to element:", dropTargetKey);
+    console.log("Scroll container:", scrollContainer);
     console.log("Current scroll:", startScroll);
     console.log("Target scroll:", targetScroll);
     console.log("Distance:", distance);
@@ -97,15 +124,14 @@ const MatchingActivityMaterialContent = ({
     const animate = (currentTime: number) => {
       if (startTime === null) startTime = currentTime;
 
-      console.log("startTime:", startTime);
       const elapsed = currentTime - startTime;
-      console.log("elapsed:", elapsed);
       const progress = Math.min(elapsed / duration, 1);
-      console.log("progress:", progress);
       const easedProgress = easeInOutQuad(progress);
-      console.log("eased progressed: ", easedProgress);
 
-      window.scrollTo(0, startScroll + distance * easedProgress);
+      const newScrollTop = startScroll + distance * easedProgress;
+      scrollContainer.scrollTop = newScrollTop;
+
+      console.log("Scrolling to:", newScrollTop);
 
       if (progress < 1) {
         requestAnimationFrame(animate);