From 280eeb9d7539e5b7c8d09dfa21a7679eebb09407 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 519eff9ab0..093e65d16e 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 8f8e949dcb..30202b7070 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 a95305caba..e8c6257f3f 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 a915f2e9ef..be9ea22261 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);
+}
--
GitLab