feat(client): 自動でもっと見るオプション (#6403)

* wip

* ugokanai

* wip

* implement setting subscribing

* fix lint

* :v:

* Update notifications.vue

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>

1 files changed, 31 insertions, 0 deletions

diff --git a/src/client/scripts/paging.ts b/src/client/scripts/paging.ts
index 048c797753..1f302753e1 100644
--- a/src/client/scripts/paging.ts
+++ b/src/client/scripts/paging.ts
@@ -15,6 +15,14 @@ export default (opts) => ({
 			more: false,
 			backed: false,
 			isBackTop: false,
+			ilObserver: new IntersectionObserver(
+				(entries) => entries.some((entry) => entry.isIntersecting)
+					&& !this.moreFetching
+					&& !this.fetching
+					&& this.fetchMore()
+				),
+			loadMoreElement: null as Element,
+			unsubscribeInfiniteScrollMutation: null as any,
 		};
 	},
 
@@ -51,6 +59,29 @@ export default (opts) => ({
 		});
 	},
 
+	mounted() {
+		this.$nextTick(() => {
+			if (this.$refs.loadMore) {
+				this.loadMoreElement = this.$refs.loadMore instanceof Element ? this.$refs.loadMore : this.$refs.loadMore.$el;
+				if (this.$store.state.device.enableInfiniteScroll) this.ilObserver.observe(this.loadMoreElement);
+				this.loadMoreElement.addEventListener('click', this.fetchMore);
+
+				this.unsubscribeInfiniteScrollMutation = this.$store.subscribe(mutation => {
+					if (mutation.type !== 'device/setInfiniteScrollEnabling') return;
+
+					if (mutation.payload) return this.ilObserver.observe(this.loadMoreElement);
+					return this.ilObserver.unobserve(this.loadMoreElement);
+				});
+			}
+		});
+	},
+
+	beforeDestroy() {
+		this.ilObserver.disconnect();
+		if (this.$refs.loadMore) this.loadMoreElement.removeEventListener('click', this.fetchMore);
+		if (this.unsubscribeInfiniteScrollMutation) this.unsubscribeInfiniteScrollMutation();
+	},
+
 	methods: {
 		updateItem(i, item) {
 			Vue.set((this as any).items, i, item);