Port join-channel completely to Vue

client/components/Channel.vue

@@ -1,7 +1,6 @@
 <template>
 	<div
 		v-if="!network.isCollapsed || channel.highlight || channel.type === 'lobby'"
-		:key="channel.id"
 		:class="[ channel.type, { active: activeChannel && channel === activeChannel.channel } ]"
 		:aria-label="channel.name"
 		:title="channel.name"
@@ -46,13 +45,13 @@
 					class="badge">{{ channel.unread | roundBadgeNumber }}</span>
 			</div>
 			<span
-				class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch"
+				:aria-label="joinChannelLabel"
-				aria-label="Join a channel…"
+				class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch">
-				data-alt-label="Cancel">
 				<button
+					:class="['add-channel', { opened: isJoinChannelShown }]"
 					:aria-controls="'join-channel-' + channel.id"
-					class="add-channel"
+					:aria-label="joinChannelLabel"
-					aria-label="Join a channel…"/>
+					@click.stop="$emit('toggleJoinChannel')"/>
 			</span>
 		</template>
 		<template v-else>
@@ -94,6 +93,12 @@ export default {
 		activeChannel: Object,
 		network: Object,
 		channel: Object,
+		isJoinChannelShown: Boolean,
+	},
+	computed: {
+		joinChannelLabel() {
+			return this.isJoinChannelShown ? "Cancel" : "Join a channel…";
+		},
 	},
 	methods: {
 		onCollapseClick() {

client/components/JoinChannel.vue

@@ -5,8 +5,12 @@
 		method="post"
 		action=""
 		autocomplete="off"
+		@keydown.esc.prevent="$emit('toggleJoinChannel')"
+		@submit.prevent="onSubmit"
 	>
 		<input
+			v-focus
+			v-model="inputChannel"
 			type="text"
 			class="input"
 			name="channel"
@@ -17,6 +21,7 @@
 			required
 		>
 		<input
+			v-model="inputPassword"
 			type="password"
 			class="input"
 			name="key"
@@ -33,10 +38,45 @@
 </template>
 
 <script>
+import socket from "../js/socket";
+
 export default {
 	name: "JoinChannel",
+	directives: {
+		focus: {
+			inserted(el) {
+				el.focus();
+			},
+		},
+	},
 	props: {
 		channel: Object,
 	},
+	data() {
+		return {
+			inputChannel: "",
+			inputPassword: "",
+		};
+	},
+	methods: {
+		onSubmit() {
+			const utils = require("../js/utils");
+			const existingChannel = utils.findCurrentNetworkChan(this.inputChannel);
+
+			if (existingChannel) {
+				const $ = require("jquery");
+				$(`#sidebar .chan[data-id="${existingChannel.id}"]`).trigger("click");
+			} else {
+				socket.emit("input", {
+					text: `/join ${this.inputChannel} ${this.inputPassword}`,
+					target: this.channel.id,
+				});
+			}
+
+			this.inputChannel = "";
+			this.inputPassword = "";
+			this.$emit("toggleJoinChannel");
+		},
+	},
 };
 </script>

client/components/Network.vue

@@ -31,8 +31,14 @@
 				:channel="network.channels[0]"
 				:network="network"
 				:active-channel="activeChannel"
+				:is-join-channel-shown="network.isJoinChannelShown"
+				@toggleJoinChannel="network.isJoinChannelShown = !network.isJoinChannelShown"
+			/>
+			<JoinChannel
+				v-if="network.isJoinChannelShown"
+				:channel="network.channels[0]"
+				@toggleJoinChannel="network.isJoinChannelShown = !network.isJoinChannelShown"
 			/>
-			<JoinChannel :channel="network.channels[0]"/>
 
 			<Draggable
 				:options="{ draggable: '.chan', ghostClass: 'chan-placeholder' }"

client/css/style.css

@@ -1056,7 +1056,6 @@ background on hover (unless active) */
   * Toggled via JavaScript
   */
 #sidebar .join-form {
-	display: none;
 	padding: 0 18px 8px;
 }
 

client/js/contextMenuFactory.js

@@ -1,11 +1,12 @@
 "use strict";
+
 const $ = require("jquery");
 const socket = require("./socket");
 const utils = require("./utils");
-const JoinChannel = require("./join-channel");
 const ContextMenu = require("./contextMenu");
 const contextMenuActions = [];
 const contextMenuItems = [];
+const {findChannel} = require("./vue");
 
 module.exports = {
 	addContextMenuItem,
@@ -332,8 +333,7 @@ function addBanListItem() {
 
 function addJoinItem() {
 	function openJoinForm(itemData) {
-		const network = $(`#join-channel-${itemData}`).closest(".network");
+		findChannel(Number(itemData)).network.isJoinChannelShown = true;
-		JoinChannel.openForm(network);
 	}
 
 	addContextMenuItem({

client/js/join-channel.js

@@ -1,96 +0,0 @@
-"use strict";
-
-const $ = require("jquery");
-const Mousetrap = require("mousetrap");
-
-const socket = require("./socket");
-const utils = require("./utils");
-
-const sidebar = $("#sidebar");
-
-module.exports = {
-	handleKeybinds,
-	openForm,
-};
-
-function toggleButton(network) {
-	// Transform the + button to a ×
-	network.find("button.add-channel").toggleClass("opened");
-
-	// Toggle content of tooltip
-	const tooltip = network.find(".add-channel-tooltip");
-	const altLabel = tooltip.data("alt-label");
-	tooltip.data("alt-label", tooltip.attr("aria-label"));
-	tooltip.attr("aria-label", altLabel);
-}
-
-function closeForm(network) {
-	const form = network.find(".join-form");
-
-	if (form.is(":visible")) {
-		form.find("input[name='channel']").val("");
-		form.find("input[name='key']").val("");
-		form.hide();
-		toggleButton(network);
-	}
-}
-
-function openForm(network) {
-	const form = network.find(".join-form");
-
-	if (form.is(":hidden")) {
-		form.show();
-		toggleButton(network);
-	}
-
-	// Focus the "Channel" field even if the form was already open
-	form.find(".input[name='channel']").trigger("focus");
-}
-
-sidebar.on("click", ".add-channel", function(e) {
-	const id = $(e.target).closest(".lobby").data("id");
-	const joinForm = $(`#join-channel-${id}`);
-	const network = joinForm.closest(".network");
-
-	if (joinForm.is(":visible")) {
-		closeForm(network);
-	} else {
-		openForm(network);
-	}
-
-	return false;
-});
-
-function handleKeybinds(networks) {
-	for (const network of networks) {
-		const form = $(`.network[data-uuid="${network.uuid}"] .join-form`);
-
-		form.find("input,  button").each(function() {
-			Mousetrap(this).bind("esc", () => {
-				closeForm(form.closest(".network"));
-
-				return false;
-			});
-		});
-
-		form.on("submit", () => {
-			const networkElement = form.closest(".network");
-			const channel = form.find("input[name='channel']").val();
-			const key = form.find("input[name='key']").val();
-			const existingChannel = utils.findCurrentNetworkChan(channel);
-
-			if (existingChannel) {
-				$(`#sidebar .chan[data-id="${existingChannel.id}"]`).trigger("click");
-			} else {
-				socket.emit("input", {
-					text: `/join ${channel} ${key}`,
-					target: networkElement.find(".lobby").data("id"),
-				});
-			}
-
-			closeForm(networkElement);
-
-			return false;
-		});
-	}
-}

client/js/socket-events/init.js

@@ -23,6 +23,7 @@ socket.on("init", function(data) {
 	const networks = new Set(JSON.parse(storage.get("thelounge.networks.collapsed")));
 
 	for (const network of data.networks) {
+		network.isJoinChannelShown = false;
 		network.isCollapsed = networks.has(network.uuid);
 
 		for (const channel of network.channels) {

client/js/socket-events/network.js

@@ -10,6 +10,9 @@ const {vueApp} = require("../vue");
 socket.on("network", function(data) {
 	const network = data.networks[0];
 
+	network.isJoinChannelShown = false;
+	network.isCollapsed = false;
+
 	for (const channel of network.channels) {
 		if (channel.type === "channel") {
 			channel.usersOutdated = true;

client/js/socket-events/topic.js

@@ -4,7 +4,7 @@ const socket = require("../socket");
 const {findChannel} = require("../vue");
 
 socket.on("topic", function(data) {
-	let channel = findChannel(data.chan);
+	const channel = findChannel(data.chan);
 
 	if (channel) {
 		channel.channel.topic = data.topic;