Create InlineChannel component

client/components/InlineChannel.vue

@@ -0,0 +1,34 @@
+<template>
+	<span class="inline-channel" dir="auto" role="button" tabindex="0" @click="onClick"
+		><slot></slot
+	></span>
+</template>
+
+<script>
+export default {
+	name: "InlineChannel",
+	props: {
+		channel: String,
+	},
+	methods: {
+		onClick() {
+			const channelToFind = this.channel.toLowerCase();
+			const existingChannel = this.$root.activeChannel.network.channels.find(
+				(c) => c.name.toLowerCase() === channelToFind
+			);
+
+			if (existingChannel) {
+				const $ = require("jquery");
+				$(`#sidebar .chan[data-id="${existingChannel.id}"]`).trigger("click");
+			}
+
+			// TODO: Required here because it breaks tests
+			const socket = require("../js/socket");
+			socket.emit("input", {
+				target: this.$root.activeChannel.channel.id,
+				text: "/join " + this.channel,
+			});
+		},
+	},
+};
+</script>

client/js/libs/handlebars/parse.js

@@ -10,6 +10,7 @@ const colorClass = require("./colorClass");
 const emojiMap = require("../fullnamemap.json");
 const LinkPreviewToggle = require("../../../components/LinkPreviewToggle.vue").default;
 const LinkPreviewFileSize = require("../../../components/LinkPreviewFileSize.vue").default;
+const InlineChannel = require("../../../components/InlineChannel.vue").default;
 const emojiModifiersRegex = /[\u{1f3fb}-\u{1f3ff}]/gu;
 
 // Create an HTML `span` with styling information for a given fragment
@@ -151,14 +152,10 @@ module.exports = function parse(createElement, text, message = undefined, networ
 			);
 		} else if (textPart.channel) {
 			return createElement(
-				"span",
+				InlineChannel,
 				{
-					class: ["inline-channel"],
+					props: {
-					attrs: {
+						channel: textPart.channel,
-						role: "button",
-						dir: "auto",
-						tabindex: 0,
-						"data-chan": textPart.channel,
 					},
 				},
 				fragments

client/js/lounge.js

@@ -45,20 +45,6 @@ window.vueMounted = () => {
 		$(document.body).addClass("is-apple");
 	}
 
-	viewport.on("click", ".inline-channel", function() {
-		const name = $(this).attr("data-chan");
-		const chan = utils.findCurrentNetworkChan(name);
-
-		if (chan) {
-			$(`#sidebar .chan[data-id="${chan.id}"]`).trigger("click");
-		}
-
-		socket.emit("input", {
-			target: vueApp.activeChannel.channel.id,
-			text: "/join " + name,
-		});
-	});
-
 	const openWindow = function openWindow(e, {pushState, replaceHistory} = {}) {
 		const self = $(this);
 		const target = self.attr("data-target");

test/client/js/libs/handlebars/parse.js

@@ -30,7 +30,7 @@ describe("parse Handlebars helper", () => {
 			{
 				input: '#&">bug',
 				expected:
-					'<span role="button" dir="auto" tabindex="0" data-chan="#&amp;&quot;&gt;bug" class="inline-channel">#&amp;&quot;&gt;bug</span>',
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">#&amp;&quot;&gt;bug</span>',
 			},
 		];
 
@@ -184,21 +184,21 @@ describe("parse Handlebars helper", () => {
 			{
 				input: "#a",
 				expected:
-					'<span role="button" dir="auto" tabindex="0" data-chan="#a" class="inline-channel">' +
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 					"#a" +
 					"</span>",
 			},
 			{
 				input: "#test",
 				expected:
-					'<span role="button" dir="auto" tabindex="0" data-chan="#test" class="inline-channel">' +
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 					"#test" +
 					"</span>",
 			},
 			{
 				input: "#äöü",
 				expected:
-					'<span role="button" dir="auto" tabindex="0" data-chan="#äöü" class="inline-channel">' +
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 					"#äöü" +
 					"</span>",
 			},
@@ -206,7 +206,7 @@ describe("parse Handlebars helper", () => {
 				input: "inline #channel text",
 				expected:
 					"inline " +
-					'<span role="button" dir="auto" tabindex="0" data-chan="#channel" class="inline-channel">' +
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 					"#channel" +
 					"</span>" +
 					" text",
@@ -214,7 +214,7 @@ describe("parse Handlebars helper", () => {
 			{
 				input: "#1,000",
 				expected:
-					'<span role="button" dir="auto" tabindex="0" data-chan="#1,000" class="inline-channel">' +
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 					"#1,000" +
 					"</span>",
 			},
@@ -222,7 +222,7 @@ describe("parse Handlebars helper", () => {
 				input: "@#a",
 				expected:
 					"@" +
-					'<span role="button" dir="auto" tabindex="0" data-chan="#a" class="inline-channel">' +
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 					"#a" +
 					"</span>",
 			},
@@ -378,7 +378,7 @@ describe("parse Handlebars helper", () => {
 				users: ["MaxLeiter, test"],
 				input: "#test-channelMaxLeiter",
 				expected:
-					'<span role="button" dir="auto" tabindex="0" data-chan="#test-channelMaxLeiter" class="inline-channel">' +
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 					"#test-channelMaxLeiter" +
 					"</span>",
 			},
@@ -414,7 +414,7 @@ describe("parse Handlebars helper", () => {
 			{
 				input: "\x02#\x038,9thelounge",
 				expected:
-					'<span role="button" dir="auto" tabindex="0" data-chan="#thelounge" class="inline-channel">' +
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 					'<span class="irc-bold">#</span>' +
 					'<span class="irc-bold irc-fg8 irc-bg9">thelounge</span>' +
 					"</span>",
@@ -477,7 +477,7 @@ describe("parse Handlebars helper", () => {
 			input: "#i❤️thelounge",
 			// FIXME: Emoji in text should be `<span class="emoji">❤️</span>`. See https://github.com/thelounge/thelounge/issues/1784
 			expected:
-				'<span role="button" dir="auto" tabindex="0" data-chan="#i❤️thelounge" class="inline-channel">#i❤️thelounge</span>',
+				'<span dir="auto" role="button" tabindex="0" class="inline-channel">#i❤️thelounge</span>',
 		},
 	].forEach((item) => {
 		// TODO: In Node v6+, use `{name, input, expected}`
@@ -493,7 +493,7 @@ describe("parse Handlebars helper", () => {
 					'test \x0312#\x0312\x0312"te\x0312st\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312\x0312a',
 				expected:
 					"test " +
-					'<span role="button" dir="auto" tabindex="0" data-chan="#&quot;testa" class="inline-channel">' +
+					'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 					'<span class="irc-fg12">#&quot;testa</span>' +
 					"</span>",
 			},
@@ -554,7 +554,7 @@ describe("parse Handlebars helper", () => {
 
 		expect(actual).to.equal(
 			'Url: <a href="http://example.com/path" dir="auto" target="_blank" rel="noopener">http://example.com/path</a> ' +
-				'Channel: <span role="button" dir="auto" tabindex="0" data-chan="##channel" class="inline-channel">##channel</span>'
+				'Channel: <span dir="auto" role="button" tabindex="0" class="inline-channel">##channel</span>'
 		);
 	});
 
@@ -563,7 +563,7 @@ describe("parse Handlebars helper", () => {
 		const actual = getParsedMessageContents(input);
 
 		expect(actual).to.equal(
-			'<span role="button" dir="auto" tabindex="0" data-chan="#test-https://example.com" class="inline-channel">' +
+			'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
 				"#test-https://example.com" +
 				"</span>"
 		);