From d71808d036974c06f08b2a9296a6c0d70cb95e1a Mon Sep 17 00:00:00 2001
From: Peter Olu <pemeraldy@gmail.com>
Date: Mon, 25 Apr 2022 18:56:09 +0100
Subject: [PATCH] scroll perfomant implemetation

---
 src/components/FullVue.vue           | 15 +---------
 src/views/dashboard/controls/Tab.vue | 42 +++++++---------------------
 2 files changed, 11 insertions(+), 46 deletions(-)

diff --git a/src/components/FullVue.vue b/src/components/FullVue.vue
index 1bb2b273..027aa735 100644
--- a/src/components/FullVue.vue
+++ b/src/components/FullVue.vue
@@ -35,7 +35,6 @@ import { ref, watch, onMounted, defineComponent } from "vue";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import { useDashboardStore } from "@/store/modules/dashboard";
-// import { useAppStoreWithOut } from "@/store/modules/app";
 import Configuration from "../views/dashboard/configuration";
 import controls from "../views/dashboard/controls/index";
 
@@ -53,7 +52,6 @@ export default defineComponent({
     const { t } = useI18n();
     const p = useRoute().params;
     const currentItem = ref("");
-    const initScroll = ref(0);
     const scrollWrapRef = ref<any>(null);
     watch(
       () => dashboardStore.layout,
@@ -77,18 +75,7 @@ export default defineComponent({
       document.querySelectorAll(".item").forEach((element) => {
         observer.observe(element);
       });
-    }
-    function scrollToFirstGraph(scrollUp: boolean) {
-      // const noNextEl =
-      // document?.getElementById(`${currentItem.value}`)?.nextElementSibling === null;
-      // if (scrollUp && noNextEl) {
-      //   initScroll.value++;
-      //   if (initScroll.value > 1) {
-      //     firstItem.value.scrollIntoView();
-      //     initScroll.value = 0;
-      //   }
-      // }
-    }
+    } 
     function initScroller() {
       scrollWrapRef?.value?.addEventListener("scroll", (e: Event) => {
         const isBottom =
diff --git a/src/views/dashboard/controls/Tab.vue b/src/views/dashboard/controls/Tab.vue
index 7c5612d6..09f32929 100644
--- a/src/views/dashboard/controls/Tab.vue
+++ b/src/views/dashboard/controls/Tab.vue
@@ -182,10 +182,7 @@ export default defineComponent({
     const tabRef = ref<any>("");
     const tabObserveContainer = ref<any>(null);
     const currentItem = ref("");
-    const firstItem = ref<any>();
-    const refScrollTimeOut = ref();
-    const currentScrollY = ref(0);
-    const initScroll = ref(0);
+    
 
     const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i);
     if (dashboardStore.layout[l].children.length) {
@@ -202,18 +199,15 @@ export default defineComponent({
     }
 
     function observeItems(kill = false) {
-      const graphs = JSON.parse(JSON.stringify(dashboardStore.currentTabItems));
       const observer = new IntersectionObserver((entries) => {
         entries.forEach((element) => {
           if (element.isIntersecting && element.intersectionRatio > 0) {
             setTimeout(() => {
               currentItem.value = element.target.id;
-              console.log("219-CurrentEl:", currentItem.value);
             }, 200);
           }
         });
       });
-      firstItem.value = document?.getElementById(`tabitem${graphs[0].i}`);
       document.querySelectorAll(".tabitem").forEach((element) => {
         observer.observe(element);
       });
@@ -292,34 +286,18 @@ export default defineComponent({
         dashboardStore.layout[l].children[activeTabIndex.value].children
       );
     }
-    function scrollToFirstGraph(scrollUp: boolean) {
-      const noNextEl =
-        document?.getElementById(`${currentItem.value}`)?.nextElementSibling === null;
-      if (scrollUp && noNextEl) {
-        initScroll.value++;
-        if (initScroll.value > 1) {
-          firstItem.value.scrollIntoView();
-          initScroll.value = 0;
-        }
-      }
-    }
+    
     function initScrollWatcher() {
       tabObserveContainer?.value?.addEventListener("scroll", (e: Event) => {
-        if (refScrollTimeOut.value) {
-          clearTimeout(refScrollTimeOut.value);
-        }
-        refScrollTimeOut.value = window.setTimeout(() => {
-          if (
-            tabObserveContainer.value?.scrollTop > currentScrollY.value ||
-            tabObserveContainer.value?.scrollTop === currentScrollY.value
-          ) {
-            setTimeout(() => {
-              scrollToFirstGraph(true);
-            }, 200);
-          }
+        const isBottom =
+          tabObserveContainer?.value?.offsetHeight +
+            tabObserveContainer?.value?.scrollTop +
+            70 >
+          tabObserveContainer?.value?.scrollHeight;
 
-          currentScrollY.value = tabObserveContainer.value?.scrollTop;
-        }, 100);
+        if (isBottom) {
+          tabObserveContainer?.value.scroll(0, 0);
+        }
       });
     }
     document.body.addEventListener("click", handleClick, false);