mirror of
https://github.com/amir20/dozzle.git
synced 2025-12-26 07:13:41 +01:00
678b197d6a
* Uses intersectionObserver instead * Use intersectionObserver * Updates mods * Adds title when more than one container is active * Updates logic to use native scrolling when only one logger view is open * Fixes broken test * Uses close instead of closed * Fixes scrollingParent
38 lines
1.0 KiB
Vue
38 lines
1.0 KiB
Vue
<template lang="html">
|
|
<div ref="observer" class="control" :class="{ 'is-loading': isLoading }"></div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "InfiniteLoader",
|
|
data() {
|
|
return {
|
|
isLoading: false
|
|
};
|
|
},
|
|
props: {
|
|
onLoadMore: Function,
|
|
enabled: Boolean
|
|
},
|
|
mounted() {
|
|
const intersectionObserver = new IntersectionObserver(
|
|
async entries => {
|
|
if (entries[0].intersectionRatio <= 0) return;
|
|
if (this.onLoadMore && this.enabled) {
|
|
const scrollingParent = this.$el.closest("[data-scrolling]") || document.documentElement;
|
|
const previousHeight = scrollingParent.scrollHeight;
|
|
this.isLoading = true;
|
|
await this.onLoadMore();
|
|
this.isLoading = false;
|
|
this.$nextTick(() => (scrollingParent.scrollTop += scrollingParent.scrollHeight - previousHeight));
|
|
}
|
|
},
|
|
{ threshholds: 1 }
|
|
);
|
|
|
|
intersectionObserver.observe(this.$refs.observer);
|
|
}
|
|
};
|
|
</script>
|
|
<style scoped lang="scss"></style>
|