supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Create InlineChannel component

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
client/components/InlineChannel.vue Normal file
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>

11
client/js/libs/handlebars/parse.js
View File

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

14
client/js/lounge.js
View File

@ -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");

26
test/client/js/libs/handlebars/parse.js
View File

@ -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>"
);