Create InlineChannel component

This commit is contained in:
Pavel Djundik 2019-10-17 17:17:02 +03:00
parent 4f6565c24a
commit af0d48de72
4 changed files with 51 additions and 34 deletions

View 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>

View file

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

View file

@ -45,20 +45,6 @@ window.vueMounted = () => {
$(document.body).addClass("is-apple"); $(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 openWindow = function openWindow(e, {pushState, replaceHistory} = {}) {
const self = $(this); const self = $(this);
const target = self.attr("data-target"); const target = self.attr("data-target");

View file

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