Create InlineChannel component
This commit is contained in:
parent
4f6565c24a
commit
af0d48de72
34
client/components/InlineChannel.vue
Normal file
34
client/components/InlineChannel.vue
Normal file
@ -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>
|
@ -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"],
|
||||
attrs: {
|
||||
role: "button",
|
||||
dir: "auto",
|
||||
tabindex: 0,
|
||||
"data-chan": textPart.channel,
|
||||
props: {
|
||||
channel: textPart.channel,
|
||||
},
|
||||
},
|
||||
fragments
|
||||
|
@ -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");
|
||||
|
@ -30,7 +30,7 @@ describe("parse Handlebars helper", () => {
|
||||
{
|
||||
input: '#&">bug',
|
||||
expected:
|
||||
'<span role="button" dir="auto" tabindex="0" data-chan="#&">bug" class="inline-channel">#&">bug</span>',
|
||||
'<span dir="auto" role="button" tabindex="0" class="inline-channel">#&">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="#"testa" class="inline-channel">' +
|
||||
'<span dir="auto" role="button" tabindex="0" class="inline-channel">' +
|
||||
'<span class="irc-fg12">#"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>"
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user