fix: element is not moved as defined

akki-jat · Feb 14, 2021 · 2a65000 · 2a65000
1 parent 6cdf5e8
commit 2a65000
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 11 deletions.
diff --git a/src/components/quirk-boomerang/quirk-boomerang.tsx b/src/components/quirk-boomerang/quirk-boomerang.tsx
@@ -100,7 +100,7 @@ export class QuirkBoomerang {
     while (true) {
       const el = this.quirkContainerEl.querySelector(`[quirk-index="${index}"]`);
 
-      if (el && isElementVisibleInViewportAndParent(el)) {
+      if (el && isElementVisibleInViewportAndParent(el, this.quirkEl.parentElement)) {
         el.classList.add("quirk-visible");
       } else {
         visibleQuirkClassSetFailCount++;
@@ -117,11 +117,7 @@ export class QuirkBoomerang {
       }
     }
 
-    this.setMoveButtonVisibility(
-      isMoveForward ? firstVisibleQuirkIndex : firstVisibleQuirkIndex - this.moveCount,
-      isMoveForward ? lastVisibleQuirkIndex + this.moveCount : lastVisibleQuirkIndex,
-      isFirstRender
-    );
+    this.setMoveButtonVisibility(firstVisibleQuirkIndex, lastVisibleQuirkIndex, isFirstRender);
   }
 
   setMoveButtonVisibility(firstVisibleQuirkIndex: number, lastVisibleQuirkIndex: number, isFirstRender: boolean) {

diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -2,9 +2,10 @@ export const stopClickPropagation = (ev: MouseEvent) => {
   ev.stopPropagation();
 };
 
-export const isElementVisibleInViewportAndParent = (el: Element) => {
+export const isElementVisibleInViewportAndParent = (el: Element, elParentEl?: HTMLElement) => {
+  const parentIgnoreMargin = 10;
   const rect = el.getBoundingClientRect();
-  const parentRect = el.parentElement.getBoundingClientRect();
+  const parentRect = elParentEl.getBoundingClientRect();
 
   return (
     // checks if element is visible in viewport
@@ -14,8 +15,8 @@ export const isElementVisibleInViewportAndParent = (el: Element) => {
     rect.right <= (window.innerWidth || document.documentElement.clientWidth) &&
     // checks if element is visible in parent element
     rect.top >= parentRect.top &&
-    rect.left >= parentRect.left &&
-    rect.bottom <= parentRect.bottom &&
-    rect.right <= parentRect.right
+    rect.left >= parentRect.left - parentIgnoreMargin &&
+    rect.bottom <= parentRect.bottom + parentIgnoreMargin &&
+    rect.right <= parentRect.right + parentIgnoreMargin
   );
 }