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

initial major progress with performance optimized

Browse Source
This commit is contained in:
Peter Olu 2022-04-28 04:14:48 +01:00
parent f96569a758
commit 05312c72ea
1 changed files with 49 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/FullVue.vue
View File

@ -40,10 +40,9 @@ import Configuration from "../views/dashboard/configuration";
import controls from "../views/dashboard/controls/index";
interface Item {
id: string,
index: number,
viewOffset: number
id: string;
index: number;
viewOffset: number;
}
export default defineComponent({
name: "FullView",
@ -58,8 +57,8 @@ export default defineComponent({
const dashboardStore = useDashboardStore();
const { t } = useI18n();
const p = useRoute().params;
const arrayOfItems = ref<Item[]>([])
const currentItem = ref<number>(0);
const arrayOfItems = ref<Element[]>([]);
const currentItem = ref<number>(6);
const scrollWrapRef = ref<any>(null);
const isScrolling = ref(false);
watch(
@ -82,30 +81,55 @@ export default defineComponent({
});
});
document.querySelectorAll(".item").forEach((element, index) => {
arrayOfItems.value.push({
id: element.id,
index: index,
viewOffset: element?.offsetTop
})
// console.log(element);
arrayOfItems.value.push(element);
observer.observe(element);
});
console.log(arrayOfItems.value[0])
document.getElementById(`${arrayOfItems.value[0]}`)?.scrollIntoView()
console.log(arrayOfItems.value[0]);
}
function scrollTo(index: number) {
const item: Element = arrayOfItems.value[index];
console.log(item);
arrayOfItems.value[index]?.scrollIntoView();
if (isScrolling.value) {
setTimeout(() => {
console.log("Ran Timeout");
isScrolling.value = false;
}, 1020);
}
}
function scrollUp() {
console.log("scrollUP")
if (currentItem.value > 0) {
console.log("scrollUP");
currentItem.value--;
scrollTo(currentItem.value);
} else if (currentItem.value === 0) {
isScrolling.value = false;
console.log("At the top, cant scroll");
}
}
function scrollDown() {
if (currentItem.value < arrayOfItems?.value?.length - 1) {
currentItem.value++;
scrollTo(currentItem.value);
} else if (currentItem.value === arrayOfItems?.value?.length - 1) {
isScrolling.value = false;
currentItem.value = 0;
scrollTo(currentItem.value);
}
}
function initScroller() {
scrollWrapRef?.value?.addEventListener("wheel", (e: WheelEvent) => {
console.log(isScrolling.value === false, e?.deltaY );
// console.log(isScrolling.value === false, e?.deltaY);
if (isScrolling.value === false) {
isScrolling.value = true;
if (e.deltaY < 0) {
scrollUp()
scrollUp();
// scrollUp
} else {
scrollDown();
// scrollDown
console.log("Scroll Down")
console.log("Scroll Down");
}
}
// const isBottom =
@ -120,8 +144,11 @@ export default defineComponent({
onMounted(() => {
observeItems();
initScroller();
console.log(arrayOfItems.value);
window.arrayOfItems = arrayOfItems.value
// console.log("ARRAY OF ITMS::", arrayOfItems.value);
// setTimeout(() => {
// console.log("Scroll");
// arrayOfItems.value[currentItem.value]?.scrollIntoView();
// },3000);
});
return {
t,