github/skywalking-booster-ui
2
0
Fork 1
mirror of https://github.com/apache/skywalking-booster-ui.git synced 2025-07-03 01:24:10 +00:00
Code Issues Packages Projects Releases Wiki Activity

scroll fixed again

Browse Source
This commit is contained in:
Peter Olu 2022-04-25 17:56:32 +01:00
parent a5c74c4372
commit d1cf40580b
1 changed files with 31 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -147,14 +147,7 @@ limitations under the License. -->
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { import { ref, watch, onMounted, onBeforeUnmount, defineComponent, toRefs } from "vue";
ref,
watch,
onMounted,
onBeforeUnmount,
defineComponent,
toRefs,
} from "vue";
import { useI18n } from "vue-i18n"; import { useI18n } from "vue-i18n";
import type { PropType } from "vue"; import type { PropType } from "vue";
import { LayoutConfig } from "@/types/dashboard"; import { LayoutConfig } from "@/types/dashboard";
@ -192,10 +185,9 @@ export default defineComponent({
const firstItem = ref<any>(); const firstItem = ref<any>();
const refScrollTimeOut = ref(); const refScrollTimeOut = ref();
const currentScrollY = ref(0); const currentScrollY = ref(0);
const initScroll = ref(0);
const l = dashboardStore.layout.findIndex( const l = dashboardStore.layout.findIndex((d: LayoutConfig) => d.i === props.data.i);
(d: LayoutConfig) => d.i === props.data.i
);
if (dashboardStore.layout[l].children.length) { if (dashboardStore.layout[l].children.length) {
dashboardStore.setCurrentTabItems( dashboardStore.setCurrentTabItems(
dashboardStore.layout[l].children[activeTabIndex.value].children dashboardStore.layout[l].children[activeTabIndex.value].children
@ -216,8 +208,7 @@ export default defineComponent({
if (element.isIntersecting && element.intersectionRatio > 0) { if (element.isIntersecting && element.intersectionRatio > 0) {
setTimeout(() => { setTimeout(() => {
currentItem.value = element.target.id; currentItem.value = element.target.id;
console.log('219-CurrentEl:',currentItem.value); console.log("219-CurrentEl:", currentItem.value);
}, 200); }, 200);
} }
}); });
@ -290,9 +281,7 @@ export default defineComponent({
function clickTabGrid(e: Event, item: LayoutConfig) { function clickTabGrid(e: Event, item: LayoutConfig) {
e.stopPropagation(); e.stopPropagation();
activeTabWidget.value = item.i; activeTabWidget.value = item.i;
dashboardStore.activeGridItem( dashboardStore.activeGridItem(`${props.data.i}-${activeTabIndex.value}-${item.i}`);
`${props.data.i}-${activeTabIndex.value}-${item.i}`
);
handleClick(e); handleClick(e);
} }
function layoutUpdatedEvent() { function layoutUpdatedEvent() {
@ -307,11 +296,32 @@ export default defineComponent({
const noNextEl = const noNextEl =
document?.getElementById(`${currentItem.value}`)?.nextElementSibling === null; document?.getElementById(`${currentItem.value}`)?.nextElementSibling === null;
if (scrollUp && noNextEl) { if (scrollUp && noNextEl) {
console.log(firstItem.value) initScroll.value++;
if (initScroll.value > 1) {
firstItem.value.scrollIntoView(); firstItem.value.scrollIntoView();
initScroll.value = 0;
} }
} }
}
function initScrollWatcher() {
tabObserveContainer?.value?.addEventListener("scroll", (e: Event) => {
if (refScrollTimeOut.value) {
clearTimeout(refScrollTimeOut.value);
}
refScrollTimeOut.value = window.setTimeout(() => {
if (
tabObserveContainer.value?.scrollTop > currentScrollY.value ||
tabObserveContainer.value?.scrollTop === currentScrollY.value
) {
setTimeout(() => {
scrollToFirstGraph(true);
}, 200);
}
currentScrollY.value = tabObserveContainer.value?.scrollTop;
}, 100);
});
}
document.body.addEventListener("click", handleClick, false); document.body.addEventListener("click", handleClick, false);
watch( watch(
() => dashboardStore.activedGridItem, () => dashboardStore.activedGridItem,
@ -329,26 +339,7 @@ export default defineComponent({
} }
); );
onMounted(() => { onMounted(() => {
tabObserveContainer?.value?.addEventListener("scroll", (e: Event) => { initScrollWatcher();
const prevScrollY = tabObserveContainer.value.scrollTop
if (refScrollTimeOut.value) {
clearTimeout(refScrollTimeOut.value);
}
refScrollTimeOut.value = window.setTimeout(() => {
// console.log('prevScroll',prevScrollY, 'currentID:', currentItem.value);
if(tabObserveContainer.value?.scrollTop > currentScrollY.value ||
tabObserveContainer.value?.scrollTop === currentScrollY.value)
{
console.log(tabObserveContainer.value?.scrollTop, currentScrollY.value)
setTimeout(() =>{
scrollToFirstGraph(true)
},200)
// console.log("scrolled Down:", document?.getElementById(`${currentItem.value}`)?.nextElementSibling, firstItem.value)
}
currentScrollY.value = tabObserveContainer.value?.scrollTop
}, 100);
});
tabRef?.value["parentElement"]?.classList?.toggle("item"); tabRef?.value["parentElement"]?.classList?.toggle("item");
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {