fix(client): ✌️

This commit is contained in:
syuilo 2020-07-19 12:26:05 +09:00
parent 3f71b14637
commit 280eeb9d75
4 changed files with 33 additions and 31 deletions

View File

@ -553,10 +553,6 @@ export default Vue.extend({
&.full { &.full {
padding: 0 var(--margin); padding: 0 var(--margin);
} }
&.naked {
background: var(--bg);
}
} }
} }

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="naked full"> <div class="full">
<portal to="header"> <portal to="header">
<button @click="menu" class="_button _jmoebdiw_"> <button @click="menu" class="_button _jmoebdiw_">
<fa :icon="faCloud" style="margin-right: 8px;"/> <fa :icon="faCloud" style="margin-right: 8px;"/>

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-messaging-room naked" <div class="mk-messaging-room"
@dragover.prevent.stop="onDragover" @dragover.prevent.stop="onDragover"
@drop.prevent.stop="onDrop" @drop.prevent.stop="onDrop"
> >
@ -41,6 +41,7 @@ import XList from '../../components/date-separated-list.vue';
import XMessage from './messaging-room.message.vue'; import XMessage from './messaging-room.message.vue';
import XForm from './messaging-room.form.vue'; import XForm from './messaging-room.form.vue';
import parseAcct from '../../../misc/acct/parse'; import parseAcct from '../../../misc/acct/parse';
import { isBottom, onScrollBottom } from '../../scripts/scroll';
export default Vue.extend({ export default Vue.extend({
components: { components: {
@ -91,8 +92,6 @@ export default Vue.extend({
beforeDestroy() { beforeDestroy() {
this.connection.dispose(); this.connection.dispose();
window.removeEventListener('scroll', this.onScroll);
document.removeEventListener('visibilitychange', this.onVisibilitychange); document.removeEventListener('visibilitychange', this.onVisibilitychange);
this.ilObserver.disconnect(); this.ilObserver.disconnect();
@ -118,8 +117,6 @@ export default Vue.extend({
this.connection.on('read', this.onRead); this.connection.on('read', this.onRead);
this.connection.on('deleted', this.onDeleted); this.connection.on('deleted', this.onDeleted);
window.addEventListener('scroll', this.onScroll, { passive: true });
document.addEventListener('visibilitychange', this.onVisibilitychange); document.addEventListener('visibilitychange', this.onVisibilitychange);
this.fetchMessages().then(() => { this.fetchMessages().then(() => {
@ -198,7 +195,7 @@ export default Vue.extend({
onMessage(message) { onMessage(message) {
this.$root.sound('chat'); this.$root.sound('chat');
const isBottom = this.isBottom(); const _isBottom = isBottom(this.$el, 64);
this.messages.push(message); this.messages.push(message);
if (message.userId != this.$store.state.i.id && !document.hidden) { 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 // Scroll to bottom
this.$nextTick(() => { this.$nextTick(() => {
this.scrollToBottom(); 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() { scrollToBottom() {
window.scroll(0, document.body.offsetHeight); window.scroll(0, document.body.offsetHeight);
}, },
@ -267,6 +253,10 @@ export default Vue.extend({
notifyNewMessage() { notifyNewMessage() {
this.showIndicator = true; this.showIndicator = true;
onScrollBottom(this.$el, () => {
this.showIndicator = false;
});
if (this.timer) clearTimeout(this.timer); if (this.timer) clearTimeout(this.timer);
this.timer = setTimeout(() => { this.timer = setTimeout(() => {
@ -274,14 +264,6 @@ export default Vue.extend({
}, 4000); }, 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() { onVisibilitychange() {
if (document.hidden) return; if (document.hidden) return;
for (const message of this.messages) { for (const message of this.messages) {

View File

@ -26,6 +26,19 @@ export function onScrollTop(el: Element, cb) {
container.addEventListener('scroll', onScroll, { passive: true }); 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) { export function scroll(el: Element, top: number) {
const container = getScrollContainer(el); const container = getScrollContainer(el);
if (container == null) { if (container == null) {
@ -34,3 +47,14 @@ export function scroll(el: Element, top: number) {
container.scrollTop = top; 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);
}