From 32940565a4a0685f7e3404ac31f2c53b09e7e746 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 19 Jul 2020 12:26:05 +0900
Subject: [PATCH] fix(client): :v:

---
 src/client/app.vue                            |  4 ---
 src/client/pages/drive.vue                    |  2 +-
 src/client/pages/messaging/messaging-room.vue | 34 +++++--------------
 src/client/scripts/scroll.ts                  | 24 +++++++++++++
 4 files changed, 33 insertions(+), 31 deletions(-)

diff --git a/src/client/app.vue b/src/client/app.vue
index 519eff9ab..093e65d16 100644
--- a/src/client/app.vue
+++ b/src/client/app.vue
@@ -553,10 +553,6 @@ export default Vue.extend({
 					&.full {
 						padding: 0 var(--margin);
 					}
-
-					&.naked {
-						background: var(--bg);
-					}
 				}
 			}
 
diff --git a/src/client/pages/drive.vue b/src/client/pages/drive.vue
index 8f8e949dc..30202b707 100644
--- a/src/client/pages/drive.vue
+++ b/src/client/pages/drive.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="naked full">
+<div class="full">
 	<portal to="header">
 		<button @click="menu" class="_button _jmoebdiw_">
 			<fa :icon="faCloud" style="margin-right: 8px;"/>
diff --git a/src/client/pages/messaging/messaging-room.vue b/src/client/pages/messaging/messaging-room.vue
index a95305cab..e8c6257f3 100644
--- a/src/client/pages/messaging/messaging-room.vue
+++ b/src/client/pages/messaging/messaging-room.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-messaging-room naked"
+<div class="mk-messaging-room"
 	@dragover.prevent.stop="onDragover"
 	@drop.prevent.stop="onDrop"
 >
@@ -41,6 +41,7 @@ import XList from '../../components/date-separated-list.vue';
 import XMessage from './messaging-room.message.vue';
 import XForm from './messaging-room.form.vue';
 import parseAcct from '../../../misc/acct/parse';
+import { isBottom, onScrollBottom } from '../../scripts/scroll';
 
 export default Vue.extend({
 	components: {
@@ -91,8 +92,6 @@ export default Vue.extend({
 	beforeDestroy() {
 		this.connection.dispose();
 
-		window.removeEventListener('scroll', this.onScroll);
-
 		document.removeEventListener('visibilitychange', this.onVisibilitychange);
 
 		this.ilObserver.disconnect();
@@ -118,8 +117,6 @@ export default Vue.extend({
 			this.connection.on('read', this.onRead);
 			this.connection.on('deleted', this.onDeleted);
 
-			window.addEventListener('scroll', this.onScroll, { passive: true });
-
 			document.addEventListener('visibilitychange', this.onVisibilitychange);
 
 			this.fetchMessages().then(() => {
@@ -198,7 +195,7 @@ export default Vue.extend({
 		onMessage(message) {
 			this.$root.sound('chat');
 
-			const isBottom = this.isBottom();
+			const _isBottom = isBottom(this.$el, 64);
 
 			this.messages.push(message);
 			if (message.userId != this.$store.state.i.id && !document.hidden) {
@@ -207,7 +204,7 @@ export default Vue.extend({
 				});
 			}
 
-			if (isBottom) {
+			if (_isBottom) {
 				// Scroll to bottom
 				this.$nextTick(() => {
 					this.scrollToBottom();
@@ -244,17 +241,6 @@ export default Vue.extend({
 			}
 		},
 
-		isBottom() {
-			const asobi = 64;
-			const current = this.isNaked
-				? window.scrollY + window.innerHeight
-				: this.$el.scrollTop + this.$el.offsetHeight;
-			const max = this.isNaked
-				? document.body.offsetHeight
-				: this.$el.scrollHeight;
-			return current > (max - asobi);
-		},
-
 		scrollToBottom() {
 			window.scroll(0, document.body.offsetHeight);
 		},
@@ -267,6 +253,10 @@ export default Vue.extend({
 		notifyNewMessage() {
 			this.showIndicator = true;
 
+			onScrollBottom(this.$el, () => {
+				this.showIndicator = false;
+			});
+
 			if (this.timer) clearTimeout(this.timer);
 
 			this.timer = setTimeout(() => {
@@ -274,14 +264,6 @@ export default Vue.extend({
 			}, 4000);
 		},
 
-		onScroll() {
-			const el = this.isNaked ? window.document.documentElement : this.$el;
-			const current = el.scrollTop + el.clientHeight;
-			if (current > el.scrollHeight - 1) {
-				this.showIndicator = false;
-			}
-		},
-
 		onVisibilitychange() {
 			if (document.hidden) return;
 			for (const message of this.messages) {
diff --git a/src/client/scripts/scroll.ts b/src/client/scripts/scroll.ts
index a915f2e9e..be9ea2226 100644
--- a/src/client/scripts/scroll.ts
+++ b/src/client/scripts/scroll.ts
@@ -26,6 +26,19 @@ export function onScrollTop(el: Element, cb) {
 	container.addEventListener('scroll', onScroll, { passive: true });
 }
 
+export function onScrollBottom(el: Element, cb) {
+	const container = getScrollContainer(el) || window;
+	const onScroll = ev => {
+		if (!document.body.contains(el)) return;
+		const pos = getScrollPosition(el);
+		if (pos + el.clientHeight > el.scrollHeight - 1) {
+			cb();
+			container.removeEventListener('scroll', onscroll);
+		}
+	};
+	container.addEventListener('scroll', onScroll, { passive: true });
+}
+
 export function scroll(el: Element, top: number) {
 	const container = getScrollContainer(el);
 	if (container == null) {
@@ -34,3 +47,14 @@ export function scroll(el: Element, top: number) {
 		container.scrollTop = top;
 	}
 }
+
+export function isBottom(el: Element, asobi = 0) {
+	const container = getScrollContainer(el);
+	const current = container
+		? el.scrollTop + el.offsetHeight
+		: window.scrollY + window.innerHeight;
+	const max = container
+		? el.scrollHeight
+		: document.body.offsetHeight;
+	return current >= (max - asobi);
+}