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 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

71
src/components/FullVue.vue
View File

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