forked from mirror/misskey
fix(client): ✌️
This commit is contained in:
parent
3f71b14637
commit
280eeb9d75
@ -553,10 +553,6 @@ export default Vue.extend({
|
||||
&.full {
|
||||
padding: 0 var(--margin);
|
||||
}
|
||||
|
||||
&.naked {
|
||||
background: var(--bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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;"/>
|
||||
|
@ -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) {
|
||||
|
@ -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);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user