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

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