supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Move history logic to MessageList, fix previews not keeping scroll

Browse Source
This commit is contained in:
Pavel Djundik 2018-07-13 13:43:11 +03:00 committed by Pavel Djundik
parent 9926157683
commit bb0450cb31
7 changed files with 181 additions and 199 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
client/components/Chat.vue
View File

@ -54,25 +54,7 @@
<div
v-else
class="chat-content">
<div
ref="chat"
class="chat"
>
<div :class="['show-more', { show: channel.moreHistoryAvailable }]">
<button
ref="loadMoreButton"
:disabled="channel.historyLoading || !$root.connected"
class="btn"
@click="onShowMoreClick"
>
<span v-if="channel.historyLoading">Loading…</span>
<span v-else>Show older messages</span>
</button>
</div>
<MessageList
:channel="channel"
@keepScrollPosition="keepScrollPosition"/>
</div>
<MessageList :channel="channel"/>
<ChatUserList
v-if="channel.type === 'channel'"
:channel="channel"/>
@ -87,8 +69,6 @@
</template>
<script>
require("intersection-observer");
const socket = require("../js/socket");
import ParsedMessage from "./ParsedMessage.vue";
import MessageList from "./MessageList.vue";
import ChatInput from "./ChatInput.vue";
@ -119,92 +99,5 @@ export default {
}
},
},
watch: {
"channel.messages"() {
this.keepScrollPosition();
},
},
created() {
this.$nextTick(() => {
if (!this.$refs.chat) {
return;
}
if (window.IntersectionObserver) {
this.historyObserver = new window.IntersectionObserver(this.onLoadButtonObserved, {
root: this.$refs.chat,
});
}
this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight;
});
},
mounted() {
this.$nextTick(() => {
if (this.historyObserver) {
this.historyObserver.observe(this.$refs.loadMoreButton);
}
});
},
destroyed() {
if (this.historyObserver) {
this.historyObserver.disconnect();
}
},
methods: {
onShowMoreClick() {
let lastMessage = this.channel.messages[0];
lastMessage = lastMessage ? lastMessage.id : -1;
this.$set(this.channel, "historyLoading", true);
socket.emit("more", {
target: this.channel.id,
lastId: lastMessage,
});
},
onLoadButtonObserved(entries) {
entries.forEach((entry) => {
if (!entry.isIntersecting) {
return;
}
entry.target.click();
});
},
keepScrollPosition() {
// If we are already waiting for the next tick to force scroll position,
// we have no reason to perform more checks and set it again in the next tick
if (this.isWaitingForNextTick) {
return;
}
const el = this.$refs.chat;
if (!el) {
return;
}
if (el.scrollHeight - el.scrollTop - el.offsetHeight > 30) {
if (this.channel.historyLoading) {
const heightOld = el.scrollHeight - el.scrollTop;
this.isWaitingForNextTick = true;
this.$nextTick(() => {
this.isWaitingForNextTick = false;
el.scrollTop = el.scrollHeight - heightOld;
});
}
return;
}
this.isWaitingForNextTick = true;
this.$nextTick(() => {
this.isWaitingForNextTick = false;
el.scrollTop = el.scrollHeight;
});
},
},
};
</script>

4
client/components/ChatInput.vue
View File

@ -67,8 +67,7 @@ export default {
channel: Object,
},
watch: {
"channel.pendingMessage": {
handler: function() {
"channel.pendingMessage"() {
const style = window.getComputedStyle(this.$refs.input);
const lineHeight = parseFloat(style.lineHeight, 10) || 1;
@ -82,7 +81,6 @@ export default {
this.$refs.input.style.height = Math.ceil(this.$refs.input.scrollHeight / lineHeight) * lineHeight + "px";
},
},
},
mounted() {
if (this.$root.settings.autocomplete) {
require("../js/autocompletion").enable(this.$refs.input);

14
client/components/LinkPreview.vue
View File

@ -125,6 +125,7 @@ export default {
name: "LinkPreview",
props: {
link: Object,
keepScrollPosition: Function,
},
data() {
return {
@ -137,12 +138,21 @@ export default {
return this.isContentShown ? "Less" : "More";
},
},
watch: {
"link.type"() {
this.onPreviewUpdate();
},
},
mounted() {
// Don't display previews while they are loading on the server
if (this.link.type === "loading") {
return;
}
this.onPreviewUpdate();
},
methods: {
onPreviewUpdate() {
// Error don't have any media to render
if (this.link.type === "error") {
this.onPreviewReady();
@ -153,13 +163,11 @@ export default {
this.onPreviewReady();
}
},
methods: {
onPreviewReady() {
const options = require("../js/options");
this.$set(this.link, "canDisplay", this.link.type !== "loading" && options.shouldOpenMessagePreview(this.link.type));
// parent 1 - message - parent 2 - messagelist
this.$parent.$parent.$emit("keepScrollPosition");
this.keepScrollPosition();
if (this.link.type !== "link") {
return;

14
client/components/Message.vue
View File

@ -21,6 +21,17 @@
:is="messageComponent"
:message="message"/>
</template>
<template v-if="message.type === 'action'">
<span class="from"/>
<span class="content">
<span class="text"><Username :user="message.from"/> <ParsedMessage :message="message"/></span>
<LinkPreview
v-for="preview in message.previews"
:keep-scroll-position="keepScrollPosition"
:key="preview.link"
:link="preview"/>
</span>
</template>
<template v-else>
<span class="from">
<template v-if="message.from && message.from.nick">
@ -29,9 +40,9 @@
</span>
<span class="content">
<span class="text"><ParsedMessage :message="message"/></span>
<LinkPreview
v-for="preview in message.previews"
:keep-scroll-position="keepScrollPosition"
:key="preview.link"
:link="preview"/>
</span>
@ -54,6 +65,7 @@ export default {
components: MessageTypes,
props: {
message: Object,
keepScrollPosition: Function,
},
computed: {
messageComponent() {

104
client/components/MessageList.vue
View File

@ -1,4 +1,19 @@
<template>
<div
ref="chat"
class="chat"
>
<div :class="['show-more', { show: channel.moreHistoryAvailable }]">
<button
ref="loadMoreButton"
:disabled="channel.historyLoading || !$root.connected"
class="btn"
@click="onShowMoreClick"
>
<span v-if="channel.historyLoading">Loading…</span>
<span v-else>Show older messages</span>
</button>
</div>
<div
class="messages"
role="log"
@ -36,12 +51,16 @@
v-else
:message="message"
:key="message.id"
:keep-scroll-position="keepScrollPosition"
@linkPreviewToggle="onLinkPreviewToggle"/>
</template>
</div>
</div>
</template>
<script>
require("intersection-observer");
const constants = require("../js/constants");
const clipboard = require("../js/clipboard");
import socket from "../js/socket";
@ -94,6 +113,38 @@ export default {
return condensed;
},
},
watch: {
"channel.messages"() {
this.keepScrollPosition();
},
},
created() {
this.$nextTick(() => {
if (!this.$refs.chat) {
return;
}
if (window.IntersectionObserver) {
this.historyObserver = new window.IntersectionObserver(this.onLoadButtonObserved, {
root: this.$refs.chat,
});
}
this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight;
});
},
mounted() {
this.$nextTick(() => {
if (this.historyObserver) {
this.historyObserver.observe(this.$refs.loadMoreButton);
}
});
},
destroyed() {
if (this.historyObserver) {
this.historyObserver.disconnect();
}
},
methods: {
shouldDisplayDateMarker(message, id) {
const previousMessage = this.condensedMessages[id - 1];
@ -127,6 +178,59 @@ export default {
shown: preview.shown,
});
},
onShowMoreClick() {
let lastMessage = this.channel.messages[0];
lastMessage = lastMessage ? lastMessage.id : -1;
this.$set(this.channel, "historyLoading", true);
socket.emit("more", {
target: this.channel.id,
lastId: lastMessage,
});
},
onLoadButtonObserved(entries) {
entries.forEach((entry) => {
if (!entry.isIntersecting) {
return;
}
entry.target.click();
});
},
keepScrollPosition() {
// If we are already waiting for the next tick to force scroll position,
// we have no reason to perform more checks and set it again in the next tick
if (this.isWaitingForNextTick) {
return;
}
const el = this.$refs.chat;
if (!el) {
return;
}
if (el.scrollHeight - el.scrollTop - el.offsetHeight > 30) {
if (this.channel.historyLoading) {
const heightOld = el.scrollHeight - el.scrollTop;
this.isWaitingForNextTick = true;
this.$nextTick(() => {
this.isWaitingForNextTick = false;
el.scrollTop = el.scrollHeight - heightOld;
});
}
return;
}
this.isWaitingForNextTick = true;
this.$nextTick(() => {
this.isWaitingForNextTick = false;
el.scrollTop = el.scrollHeight;
});
},
},
};
</script>

30
client/components/MessageTypes/action.vue
View File

@ -1,30 +0,0 @@
<template>
<span class="content">
<Username :user="message.from"/>
<span
ref="text"
class="text"><ParsedMessage :message="message"/></span>
<LinkPreview
v-for="preview in message.previews"
:key="preview.link"
:link="preview"/>
</span>
</template>
<script>
import ParsedMessage from "../ParsedMessage.vue";
import LinkPreview from "../LinkPreview.vue";
import Username from "../Username.vue";
export default {
name: "MessageTypeAction",
components: {
ParsedMessage,
LinkPreview,
Username,
},
props: {
message: Object,
},
};
</script>

3
client/js/socket-events/msg_preview.js
View File

@ -1,7 +1,6 @@
"use strict";
const socket = require("../socket");
const {shouldOpenMessagePreview} = require("../options");
const {vueApp, findChannel} = require("../vue");
socket.on("msg:preview", function(data) {
@ -15,8 +14,6 @@ socket.on("msg:preview", function(data) {
const previewIndex = message.previews.findIndex((m) => m.link === data.preview.link);
if (previewIndex > -1) {
data.preview.canDisplay = shouldOpenMessagePreview(data.preview.type);
vueApp.$set(message.previews, previewIndex, data.preview);
}
});