<template> <div id="chat-container" class="window" > <div id="chat" :data-id="channel.id" :class="{ 'hide-motd': !this.$root.settings.motd, 'colored-nicks': this.$root.settings.coloredNicks, 'show-seconds': this.$root.settings.showSeconds, }" > <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"> <button class="lt" aria-label="Toggle channel list" /> <span class="title">{{ channel.name }}</span> <span :title="channel.topic" class="topic" ><ParsedMessage v-if="channel.topic" :network="network" :text="channel.topic" /></span> <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> </div> <div v-if="channel.type === 'special'" class="chat-content" > <div class="chat"> <div class="messages"> <div class="msg"> <Component :is="specialComponent" :network="network" :channel="channel" /> </div> </div> </div> </div> <div v-else class="chat-content" > <div :class="['scroll-down tooltipped tooltipped-w', {'scroll-down-shown': !channel.scrolledToBottom}]" aria-label="Jump to recent messages" @click="$refs.messageList.jumpToBottom()" > <div class="scroll-down-arrow" /> </div> <MessageList ref="messageList" :network="network" :channel="channel" /> <ChatUserList v-if="channel.type === 'channel'" :channel="channel" /> </div> </div> </div> <div v-if="this.$root.currentUserVisibleError" id="user-visible-error" @click="hideUserVisibleError" >{{ this.$root.currentUserVisibleError }}</div> <span id="upload-progressbar" /> <ChatInput :network="network" :channel="channel" /> </div> </template> <script> import ParsedMessage from "./ParsedMessage.vue"; import MessageList from "./MessageList.vue"; import ChatInput from "./ChatInput.vue"; import ChatUserList from "./ChatUserList.vue"; import ListBans from "./Special/ListBans.vue"; import ListChannels from "./Special/ListChannels.vue"; import ListIgnored from "./Special/ListIgnored.vue"; export default { name: "Chat", components: { ParsedMessage, MessageList, ChatInput, ChatUserList, }, props: { network: Object, channel: Object, }, computed: { specialComponent() { switch (this.channel.special) { case "list_bans": return ListBans; case "list_channels": return ListChannels; case "list_ignored": return ListIgnored; } return undefined; }, }, methods: { hideUserVisibleError() { this.$root.currentUserVisibleError = null; }, }, }; </script>