github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-05-15 01:33:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

still on scroll optimization

Browse Source
This commit is contained in:
Peter Olu 2022-04-24 19:19:35 +01:00
parent 1cf0bfb474
commit e9744cbc79
1 changed files with 15 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/views/dashboard/controls/Tab.vue
View File

@ -189,7 +189,7 @@ export default defineComponent({
const tabRef = ref<any>(""); const tabRef = ref<any>("");
const tabObserveContainer = ref<any>(null); const tabObserveContainer = ref<any>(null);
const currentItem = ref(""); const currentItem = ref("");
const lastItem = ref(""); const firstItem = ref<any>();
const refScrollTimeOut = ref(); const refScrollTimeOut = ref();
const currentScrollY = ref(0); const currentScrollY = ref(0);
@ -208,20 +208,9 @@ export default defineComponent({
function scrollToGraph(e: any) { function scrollToGraph(e: any) {
document?.getElementById(`tabitem${e}`)?.scrollIntoView(); document?.getElementById(`tabitem${e}`)?.scrollIntoView();
} }
// function debounce(func: any, wait: number) {
// let timeout: any = null;
// return function (func, delayMs) {
// clearTimeout(timeout);
// timeout = setTimeout(() => {
// func();
// }, delayMs || 500);
// };
// }
// function scrollDecider() {
// console.log("runing debounce");
// console.log(window.scrollY);
// }
function observeItems(kill = false) { function observeItems(kill = false) {
const graphs = JSON.parse(JSON.stringify(dashboardStore.currentTabItems));
const observer = new IntersectionObserver((entries) => { const observer = new IntersectionObserver((entries) => {
entries.forEach((element) => { entries.forEach((element) => {
if (element.isIntersecting && element.intersectionRatio > 0) { if (element.isIntersecting && element.intersectionRatio > 0) {
@ -231,11 +220,7 @@ export default defineComponent({
} }
}); });
}); });
lastItem.value = `${ firstItem.value = document?.getElementById(`tabitem${graphs[0].i}`)
dashboardStore.currentTabItems[
dashboardStore.currentTabItems.length - 1
].i
}`;
document.querySelectorAll(".tabitem").forEach((element) => { document.querySelectorAll(".tabitem").forEach((element) => {
observer.observe(element); observer.observe(element);
}); });
@ -250,8 +235,7 @@ export default defineComponent({
() => dashboardStore.currentTabItems, () => dashboardStore.currentTabItems,
() => { () => {
setTimeout(() => { setTimeout(() => {
observeItems(); observeItems();
// console.log("Last Value:", lastItem.value);
}, 500); }, 500);
} }
); );
@ -318,9 +302,11 @@ export default defineComponent({
); );
} }
function scrollToFirstGraph(scrollUp: boolean) { function scrollToFirstGraph(scrollUp: boolean) {
const graphs = JSON.parse(JSON.stringify(dashboardStore.currentTabItems)); const graphs = JSON.parse(JSON.stringify(dashboardStore.currentTabItems));
if (scrollUp) { const thereisNextEl = document?.getElementById(`${currentItem.value}`) !== null
document?.getElementById(`tabitem${graphs[0].i}`)?.scrollIntoView(); if (scrollUp && !thereisNextEl) {
console.log(firstItem.value)
firstItem.value.scrollIntoView();
} }
} }
document.body.addEventListener("click", handleClick, false); document.body.addEventListener("click", handleClick, false);
@ -346,12 +332,15 @@ export default defineComponent({
} }
// console.log("WindowScrollY Outside:", tabObserveContainer.value); // console.log("WindowScrollY Outside:", tabObserveContainer.value);
refScrollTimeOut.value = window.setTimeout(() => { refScrollTimeOut.value = window.setTimeout(() => {
if (tabObserveContainer.value?.scrollTop === currentScrollY.value) { if (
tabObserveContainer.value?.scrollTop > currentScrollY.value ||
tabObserveContainer.value?.scrollTop === currentScrollY.value
) {
scrollToFirstGraph(true) scrollToFirstGraph(true)
console.log("Scrolled Down!") console.log("Scrolled Down!")
} }
currentScrollY.value = tabObserveContainer.value?.scrollTop currentScrollY.value = tabObserveContainer.value?.scrollTop
console.log("CurrentScrollY:", currentScrollY.value); console.log("CurrentScrollY:", document?.getElementById(`${currentItem.value}`));
}, 100); }, 100);
}); });