From a1e0c866aafec521b6aca1e8bb3099c82ba925f5 Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Sun, 31 May 2020 12:53:06 +0900
Subject: feat(client): 自動でもっと見るオプション (#6403)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* wip

* ugokanai

* wip

* implement setting subscribing

* fix lint

* :v:

* Update notifications.vue

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
---
 src/client/scripts/paging.ts | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

(limited to 'src/client/scripts/paging.ts')

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);
-- 
cgit v1.2.3-freya