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

A more perfomant way to watch for when to scrollback up

Browse Source
This commit is contained in:
Peter Olu 2022-04-25 18:41:06 +01:00
parent d1cf40580b
commit 36394113e2
1 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/FullVue.vue
View File

@ -13,7 +13,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. -->
<template>
<div class="scroll-snap-container">
<div ref="scrollWrapRef" class="scroll-snap-container">
<div v-if="items.length > 1" class="scroll-handler__wrapper">
<div
@click="scrollToGraph(item.i)"
@ -50,24 +50,20 @@ export default defineComponent({
components: { ...Configuration, ...controls },
setup() {
const dashboardStore = useDashboardStore();
// const tobewatched = reactive(dashboardStore);
// const appStore = useAppStoreWithOut();
const { t } = useI18n();
const p = useRoute().params;
// const layoutKey = ref<string>(`${p.layerId}_${p.entity}_${p.name}`);
// setTemplate();
const currentItem = ref("");
const initScroll = ref(0);
const scrollWrapRef = ref<any>(null);
watch(
() => dashboardStore.layout,
() => {
// console.log('Watching:',currentItem.value)
setTimeout(() => {
observeItems();
}, 500);
}
);
function scrollToGraph(e: any) {
// console.log(currentItem.value)
document?.getElementById(`item${e}`)?.scrollIntoView();
}
function observeItems() {
@ -82,14 +78,40 @@ export default defineComponent({
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 =
scrollWrapRef?.value?.offsetHeight +
scrollWrapRef?.value?.scrollTop +
40 >
scrollWrapRef?.value?.scrollHeight;
if (isBottom) {
scrollWrapRef?.value.scroll(0, 0);
}
});
}
onMounted(() => {
observeItems()
})
observeItems();
initScroller();
});
return {
t,
dashboardStore,
currentItem,
scrollToGraph,
scrollWrapRef,
};
},
});