Move closeChan functionality to vue.

client/components/Channel.vue

@@ -1,5 +1,10 @@
 <template>
-	<ChannelWrapper :network="network" :channel="channel" :active-channel="activeChannel">
+	<ChannelWrapper
+		ref="wrapper"
+		:network="network"
+		:channel="channel"
+		:active-channel="activeChannel"
+	>
 		<span class="name">{{ channel.name }}</span>
 		<span v-if="channel.unread" :class="{highlight: channel.highlight}" class="badge">{{
 			channel.unread | roundBadgeNumber
@@ -12,13 +17,27 @@
 			>
 				<span class="parted-channel-icon" />
 			</span>
-			<span class="close-tooltip tooltipped tooltipped-w" aria-label="Leave">
-				<button class="close" aria-label="Leave" />
+			<span
+				class="close-tooltip tooltipped tooltipped-w"
+				aria-label="Leave"
+			>
+				<button
+					class="close"
+					aria-label="Leave"
+					@click="close"
+				/>
 			</span>
 		</template>
 		<template v-else>
-			<span class="close-tooltip tooltipped tooltipped-w" aria-label="Close">
-				<button class="close" aria-label="Close" />
+			<span
+				class="close-tooltip tooltipped tooltipped-w"
+				aria-label="Close"
+			>
+				<button
+					class="close"
+					aria-label="Close"
+					@click="close"
+				/>
 			</span>
 		</template>
 	</ChannelWrapper>
@@ -37,5 +56,10 @@ export default {
 		network: Object,
 		channel: Object,
 	},
+	methods: {
+		close() {
+			this.$refs.wrapper.close();
+		},
+	},
 };
 </script>

client/components/ChannelWrapper.vue

@@ -19,6 +19,7 @@
 		:data-name="channel.name"
 		:aria-controls="'#chan-' + channel.id"
 		:aria-selected="activeChannel && channel === activeChannel.channel"
+		:style="closed ? {transition: 'none', opacity: 0.4} : null"
 		role="tab"
 	>
 		<slot :network="network" :channel="channel" :activeChannel="activeChannel" />
@@ -26,6 +27,8 @@
 </template>
 
 <script>
+import socket from "../js/socket";
+
 export default {
 	name: "ChannelWrapper",
 	props: {
@@ -33,7 +36,30 @@ export default {
 		channel: Object,
 		activeChannel: Object,
 	},
+	data() {
+		return {
+			closed: false,
+		};
+	},
 	methods: {
+		close() {
+			let cmd = "/close";
+
+			if (this.channel.type === "lobby") {
+				cmd = "/quit";
+
+				if (!confirm(`Are you sure you want to remove ${this.channel.name}?`)) { // eslint-disable-line no-alert
+					return false;
+				}
+			}
+
+			this.closed = true;
+
+			socket.emit("input", {
+				target: Number(this.channel.id),
+				text: cmd,
+			});
+		},
 		getAriaLabel() {
 			const extra = [];
 

client/js/contextMenuFactory.js

@@ -123,7 +123,16 @@ function addCloseItem() {
 		className: "close",
 		displayName: getCloseDisplay,
 		data: (target) => target.attr("data-target"),
-		callback: (itemData) => utils.closeChan($(`.networks .chan[data-target="${itemData}"]`)),
+		callback(itemData) {
+			const close = document.querySelector(
+				`.networks .chan[data-target="${itemData}"] .close`
+			);
+
+			if (close) {
+				// TODO: After context menus are ported to Vue, figure out a direct api
+				close.click();
+			}
+		},
 	});
 }
 

client/js/lounge.js

@@ -205,10 +205,6 @@ window.vueMounted = () => {
 	$("#help").on("click", "#view-changelog, #back-to-help", openWindow);
 	$("#changelog").on("click", "#back-to-help", openWindow);
 
-	sidebar.on("click", ".close", function() {
-		utils.closeChan($(this).closest(".chan"));
-	});
-
 	$(document).on("visibilitychange focus click", () => {
 		utils.synchronizeNotifiedState();
 	});

client/js/utils.js

@@ -15,7 +15,6 @@ module.exports = {
 	scrollIntoViewNicely,
 	hasRoleInChannel,
 	move,
-	closeChan,
 	synchronizeNotifiedState,
 	requestIdleCallback,
 };
@@ -121,31 +120,6 @@ function move(array, old_index, new_index) {
 	return array;
 }
 
-function closeChan(chan) {
-	const socket = require("./socket");
-	let cmd = "/close";
-
-	if (chan.hasClass("lobby")) {
-		cmd = "/quit";
-		const server = chan.find(".name").html();
-
-		// eslint-disable-next-line no-alert
-		if (!confirm(`Are you sure you want to remove ${server}?`)) {
-			return false;
-		}
-	}
-
-	socket.emit("input", {
-		target: Number(chan.attr("data-id")),
-		text: cmd,
-	});
-	chan.css({
-		transition: "none",
-		opacity: 0.4,
-	});
-	return false;
-}
-
 function requestIdleCallback(callback, timeout) {
 	if (window.requestIdleCallback) {
 		// During an idle period the user agent will run idle callbacks in FIFO order