hardlounge/client/components/Chat.vue

<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 ListInvites from "./Special/ListInvites.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_invites": return ListInvites;
			case "list_channels": return ListChannels;
			case "list_ignored": return ListIgnored;
			}

			return undefined;
		},
	},
	methods: {
		hideUserVisibleError() {
			this.$root.currentUserVisibleError = null;
		},
	},
};
</script>