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

Initial restructuring of tab component

Browse Source
This commit is contained in:
Peter Olu 2022-04-28 05:03:08 +01:00
parent f5ee0fffb7
commit 5404e6f621
1 changed files with 44 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -181,7 +181,10 @@ export default defineComponent({
const showTools = ref<boolean>(false); const showTools = ref<boolean>(false);
const tabRef = ref<any>(""); const tabRef = ref<any>("");
const tabObserveContainer = ref<any>(null); const tabObserveContainer = ref<any>(null);
const currentItem = ref(""); /** UPDATING ***/
const arrayOfItems = ref<Element[]>([]);
const currentItem = ref<number>(0);
const isScrolling = ref(false);
const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i); const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i);
if (dashboardStore.layout[l].children.length) { if (dashboardStore.layout[l].children.length) {
@ -193,8 +196,9 @@ export default defineComponent({
observeItems(); observeItems();
}, 1500); }, 1500);
} }
function scrollToGraph(e: any) { function scrollToGraph(e: any, index: number) {
document?.getElementById(`tabitem${e}`)?.scrollIntoView(); document?.getElementById(`tabitem${e}`)?.scrollIntoView();
currentItem.value = index;
} }
function observeItems(kill = false) { function observeItems(kill = false) {
@ -202,12 +206,13 @@ export default defineComponent({
entries.forEach((element) => { entries.forEach((element) => {
if (element.isIntersecting && element.intersectionRatio > 0) { if (element.isIntersecting && element.intersectionRatio > 0) {
setTimeout(() => { setTimeout(() => {
currentItem.value = element.target.id; // currentItem.value = element.target.id;
}, 200); }, 200);
} }
}); });
}); });
document.querySelectorAll(".tabitem").forEach((element) => { document.querySelectorAll(".tabitem").forEach((element) => {
arrayOfItems.value.push(element);
observer.observe(element); observer.observe(element);
}); });
if (kill) { if (kill) {
@ -216,7 +221,24 @@ export default defineComponent({
}); });
} }
} }
function scrollUp() {
if (currentItem.value > 0) {
currentItem.value--;
scrollTo(currentItem.value);
} else if (currentItem.value === 0) {
isScrolling.value = false;
}
}
function scrollDown() {
if (currentItem.value < arrayOfItems?.value?.length - 1) {
currentItem.value++;
scrollTo(currentItem.value);
} else if (currentItem.value === arrayOfItems?.value?.length - 1) {
isScrolling.value = true;
currentItem.value = 0;
scrollTo(currentItem.value);
}
}
watch( watch(
() => dashboardStore.currentTabItems, () => dashboardStore.currentTabItems,
() => { () => {
@ -287,15 +309,25 @@ export default defineComponent({
} }
function initScrollWatcher() { function initScrollWatcher() {
tabObserveContainer?.value?.addEventListener("scroll", (e: Event) => { // tabObserveContainer?.value?.addEventListener("scroll", (e: Event) => {
const isBottom = // const isBottom =
tabObserveContainer?.value?.offsetHeight + // tabObserveContainer?.value?.offsetHeight +
tabObserveContainer?.value?.scrollTop + // tabObserveContainer?.value?.scrollTop +
70 > // 70 >
tabObserveContainer?.value?.scrollHeight; // tabObserveContainer?.value?.scrollHeight;
if (isBottom) { // if (isBottom) {
tabObserveContainer?.value.scroll(0, 0); // tabObserveContainer?.value.scroll(0, 0);
// }
// });
tabObserveContainer?.value?.addEventListener("wheel", (e: WheelEvent) => {
if (isScrolling.value === false) {
isScrolling.value = true;
if (e.deltaY < 0) {
scrollUp();
} else {
scrollDown();
}
} }
}); });
} }