2018-07-08 10:50:11 +00:00
|
|
|
<template>
|
2018-07-08 13:42:54 +00:00
|
|
|
<div
|
|
|
|
id="chat-container"
|
|
|
|
class="window">
|
|
|
|
<div
|
|
|
|
id="chat"
|
2018-07-09 10:44:12 +00:00
|
|
|
:data-id="channel.id"
|
2018-07-08 17:26:26 +00:00
|
|
|
:class="{
|
|
|
|
'hide-motd': !settings.motd,
|
|
|
|
'hide-status-messages': settings.statusMessages === 'hidden',
|
|
|
|
'condensed-status-messages': settings.statusMessages === 'condensed',
|
|
|
|
'colored-nicks': settings.coloredNicks,
|
2018-07-08 17:28:52 +00:00
|
|
|
'show-seconds': settings.showSeconds,
|
2018-07-08 17:26:26 +00:00
|
|
|
}"
|
|
|
|
>
|
2018-07-08 12:18:17 +00:00
|
|
|
<div
|
|
|
|
:id="'chan-' + channel.id"
|
|
|
|
:class="[channel.type, 'chan', 'active']"
|
|
|
|
:data-id="channel.id"
|
|
|
|
:data-type="channel.type"
|
|
|
|
:aria-label="channel.name"
|
|
|
|
role="tabpanel"
|
|
|
|
>
|
|
|
|
<div class="header">
|
2018-07-08 10:50:11 +00:00
|
|
|
<button
|
2018-07-08 12:18:17 +00:00
|
|
|
class="lt"
|
|
|
|
aria-label="Toggle channel list"/>
|
|
|
|
<span class="title">{{ channel.name }}</span>
|
|
|
|
<span
|
|
|
|
:title="channel.topic"
|
2018-07-12 08:41:40 +00:00
|
|
|
class="topic"><ParsedMessage
|
|
|
|
v-if="channel.topic"
|
|
|
|
:text="channel.topic"/></span>
|
2018-07-08 12:18:17 +00:00
|
|
|
<button
|
|
|
|
class="menu"
|
|
|
|
aria-label="Open the context menu"
|
|
|
|
/>
|
|
|
|
<span
|
|
|
|
v-if="channel.type === 'channel'"
|
|
|
|
class="rt-tooltip tooltipped tooltipped-w"
|
|
|
|
aria-label="Toggle user list">
|
|
|
|
<button
|
|
|
|
class="rt"
|
|
|
|
aria-label="Toggle user list"/>
|
|
|
|
</span>
|
2018-07-08 10:50:11 +00:00
|
|
|
</div>
|
2018-07-10 09:16:24 +00:00
|
|
|
<div
|
|
|
|
v-if="channel.type === 'special'"
|
|
|
|
class="chat-content">
|
|
|
|
<component
|
|
|
|
:is="specialComponent"
|
|
|
|
:channel="channel"/>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
v-else
|
|
|
|
class="chat-content">
|
2018-07-09 17:16:19 +00:00
|
|
|
<div
|
|
|
|
ref="chat"
|
|
|
|
class="chat"
|
|
|
|
>
|
2018-07-10 16:51:45 +00:00
|
|
|
<div :class="['show-more', { show: channel.moreHistoryAvailable }]">
|
2018-07-08 13:42:54 +00:00
|
|
|
<button
|
2018-07-08 17:53:23 +00:00
|
|
|
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>
|
2018-07-08 12:18:17 +00:00
|
|
|
</div>
|
2018-07-08 17:22:01 +00:00
|
|
|
<MessageList :channel="channel"/>
|
2018-07-08 12:18:17 +00:00
|
|
|
</div>
|
2018-07-08 17:22:01 +00:00
|
|
|
<ChatUserList
|
2018-07-08 12:18:17 +00:00
|
|
|
v-if="channel.type === 'channel'"
|
2018-07-08 17:22:01 +00:00
|
|
|
:channel="channel"/>
|
2018-07-08 10:50:11 +00:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2018-07-08 12:18:17 +00:00
|
|
|
<div id="connection-error"/>
|
2018-07-08 13:42:54 +00:00
|
|
|
<ChatInput
|
|
|
|
:network="network"
|
|
|
|
:channel="channel"/>
|
2018-07-08 10:50:11 +00:00
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
2018-07-08 13:42:54 +00:00
|
|
|
require("intersection-observer");
|
|
|
|
const socket = require("../js/socket");
|
2018-07-12 08:41:40 +00:00
|
|
|
import ParsedMessage from "./ParsedMessage.vue";
|
2018-07-08 17:22:01 +00:00
|
|
|
import MessageList from "./MessageList.vue";
|
2018-07-08 13:42:54 +00:00
|
|
|
import ChatInput from "./ChatInput.vue";
|
2018-07-08 17:22:01 +00:00
|
|
|
import ChatUserList from "./ChatUserList.vue";
|
2018-07-10 09:16:24 +00:00
|
|
|
import ListBans from "./Special/ListBans.vue";
|
2018-07-10 09:37:48 +00:00
|
|
|
import ListChannels from "./Special/ListChannels.vue";
|
2018-07-11 07:54:32 +00:00
|
|
|
import ListIgnored from "./Special/ListIgnored.vue";
|
2018-07-08 10:50:11 +00:00
|
|
|
|
|
|
|
export default {
|
|
|
|
name: "Chat",
|
|
|
|
components: {
|
2018-07-12 08:41:40 +00:00
|
|
|
ParsedMessage,
|
2018-07-08 17:22:01 +00:00
|
|
|
MessageList,
|
2018-07-08 13:42:54 +00:00
|
|
|
ChatInput,
|
2018-07-08 17:22:01 +00:00
|
|
|
ChatUserList,
|
2018-07-08 10:50:11 +00:00
|
|
|
},
|
|
|
|
props: {
|
2018-07-08 17:26:26 +00:00
|
|
|
settings: Object,
|
2018-07-08 12:18:17 +00:00
|
|
|
network: Object,
|
2018-07-08 10:50:11 +00:00
|
|
|
channel: Object,
|
|
|
|
},
|
2018-07-10 09:16:24 +00:00
|
|
|
computed: {
|
|
|
|
specialComponent() {
|
2018-07-10 09:37:48 +00:00
|
|
|
switch (this.channel.special) {
|
|
|
|
case "list_bans": return ListBans;
|
|
|
|
case "list_channels": return ListChannels;
|
2018-07-11 07:54:32 +00:00
|
|
|
case "list_ignored": return ListIgnored;
|
2018-07-10 09:16:24 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
2018-07-10 07:45:54 +00:00
|
|
|
watch: {
|
|
|
|
"channel.messages"() {
|
|
|
|
const el = this.$refs.chat;
|
|
|
|
|
2018-07-10 12:04:25 +00:00
|
|
|
if (!el) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (el.scrollHeight - el.scrollTop - el.offsetHeight > 30) {
|
2018-07-10 07:45:54 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.$nextTick(() => {
|
|
|
|
el.scrollTop = el.scrollHeight;
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
2018-07-08 13:42:54 +00:00
|
|
|
created() {
|
2018-07-10 12:04:25 +00:00
|
|
|
this.$nextTick(() => {
|
|
|
|
if (!this.$refs.chat) {
|
|
|
|
return;
|
|
|
|
}
|
2018-07-10 09:16:24 +00:00
|
|
|
|
2018-07-10 12:04:25 +00:00
|
|
|
if (window.IntersectionObserver) {
|
|
|
|
this.historyObserver = new window.IntersectionObserver(loadMoreHistory, {
|
|
|
|
root: this.$refs.chat,
|
|
|
|
});
|
|
|
|
}
|
2018-07-09 17:16:19 +00:00
|
|
|
|
|
|
|
this.$refs.chat.scrollTop = this.$refs.chat.scrollHeight;
|
|
|
|
});
|
2018-07-08 13:42:54 +00:00
|
|
|
},
|
|
|
|
mounted() {
|
2018-07-10 12:04:25 +00:00
|
|
|
this.$nextTick(() => {
|
|
|
|
if (this.historyObserver) {
|
|
|
|
this.historyObserver.observe(this.$refs.loadMoreButton);
|
|
|
|
}
|
|
|
|
});
|
2018-07-08 13:42:54 +00:00
|
|
|
},
|
|
|
|
destroyed() {
|
|
|
|
if (this.historyObserver) {
|
2018-07-08 14:57:02 +00:00
|
|
|
this.historyObserver.disconnect();
|
2018-07-08 13:42:54 +00:00
|
|
|
}
|
|
|
|
},
|
2018-07-08 10:50:11 +00:00
|
|
|
methods: {
|
2018-07-08 13:42:54 +00:00
|
|
|
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,
|
|
|
|
});
|
|
|
|
},
|
2018-07-08 10:50:11 +00:00
|
|
|
},
|
|
|
|
};
|
2018-07-08 13:42:54 +00:00
|
|
|
|
|
|
|
function loadMoreHistory(entries) {
|
|
|
|
entries.forEach((entry) => {
|
|
|
|
if (!entry.isIntersecting) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
entry.target.click();
|
|
|
|
});
|
|
|
|
}
|
2018-07-08 10:50:11 +00:00
|
|
|
</script>
|