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

add bidi support to messages, actions, previews etc

Browse Source
This commit is contained in:
Jay2k1 2019-08-03 14:35:13 +02:00 committed by Jay2k1
parent 2aa5ed44ad
commit c89aea3c1e
6 changed files with 45 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/components/ChatInput.vue
View File

@ -4,6 +4,7 @@
<textarea
id="input"
ref="input"
dir="auto"
:value="channel.pendingMessage"
:placeholder="getInputPlaceholder(channel)"
:aria-label="getInputPlaceholder(channel)"

5
client/components/LinkPreview.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-if="link.shown" v-show="link.canDisplay" ref="container" class="preview">
<div v-if="link.shown" v-show="link.canDisplay" ref="container" class="preview" dir="ltr">
<div
ref="content"
:class="['toggle-content', 'toggle-type-' + link.type, {opened: isContentShown}]"
@ -22,7 +22,7 @@
@load="onPreviewReady"
/>
</a>
<div class="toggle-text">
<div class="toggle-text" dir="auto">
<div class="head">
<div class="overflowable">
<a
@ -38,6 +38,7 @@
v-if="showMoreButton"
:aria-expanded="isContentShown"
:aria-label="moreButtonLabel"
dir="auto"
class="more"
@click="onMoreClick"
>

6
client/components/Message.vue
View File

@ -19,8 +19,8 @@
</template>
<template v-else-if="message.type === 'action'">
<span class="from"><span class="only-copy">* </span></span>
<span class="content">
<Username :user="message.from" />&#32;<ParsedMessage
<span class="content" dir="auto">
<Username :user="message.from" dir="auto" />&#32;<ParsedMessage
:network="network"
:message="message"
/>
@ -47,7 +47,7 @@
<span class="only-copy">- </span>
</template>
</span>
<span class="content">
<span class="content" dir="auto">
<ParsedMessage :network="network" :message="message" />
<LinkPreview
v-for="preview in message.previews"

2
client/css/style.css
View File

@ -1300,6 +1300,7 @@ background on hover (unless active) */
padding-right: 6px;
border-left: 1px solid #f6f6f6;
overflow: hidden; /* Prevents Zalgo text to expand beyond messages */
text-align: left; /* so RTL text will still be aligned left, not right */
}
#chat .unhandled .from {
@ -1537,6 +1538,7 @@ background on hover (unless active) */
#chat .toggle-content .toggle-text {
white-space: nowrap;
overflow: hidden;
text-align: initial;
}
#chat .toggle-content.opened .toggle-text {

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

@ -113,19 +113,27 @@ module.exports = function parse(createElement, text, message = undefined, networ
return link;
}
return [
link,
createElement(
LinkPreviewToggle,
{
class: ["toggle-button", "toggle-preview"],
props: {
link: preview,
},
return createElement(
"span",
{
attrs: {
dir: "auto",
},
fragments
),
];
},
[
link,
createElement(
LinkPreviewToggle,
{
class: ["toggle-button", "toggle-preview"],
props: {
link: preview,
},
},
fragments
),
]
);
} else if (textPart.channel) {
return createElement(
"span",
@ -133,6 +141,7 @@ module.exports = function parse(createElement, text, message = undefined, networ
class: ["inline-channel"],
attrs: {
role: "button",
dir: "auto",
tabindex: 0,
"data-chan": textPart.channel,
},
@ -164,6 +173,7 @@ module.exports = function parse(createElement, text, message = undefined, networ
class: ["user", colorClass(textPart.nick)],
attrs: {
role: "button",
dir: "auto",
"data-name": textPart.nick,
},
},

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

@ -30,7 +30,7 @@ describe("parse Handlebars helper", () => {
{
input: '#&">bug',
expected:
'<span role="button" tabindex="0" data-chan="#&amp;&quot;&gt;bug" class="inline-channel">#&amp;&quot;&gt;bug</span>',
'<span role="button" dir="auto" tabindex="0" data-chan="#&amp;&quot;&gt;bug" class="inline-channel">#&amp;&quot;&gt;bug</span>',
},
];
@ -184,21 +184,21 @@ describe("parse Handlebars helper", () => {
{
input: "#a",
expected:
'<span role="button" tabindex="0" data-chan="#a" class="inline-channel">' +
'<span role="button" dir="auto" tabindex="0" data-chan="#a" class="inline-channel">' +
"#a" +
"</span>",
},
{
input: "#test",
expected:
'<span role="button" tabindex="0" data-chan="#test" class="inline-channel">' +
'<span role="button" dir="auto" tabindex="0" data-chan="#test" class="inline-channel">' +
"#test" +
"</span>",
},
{
input: "#äöü",
expected:
'<span role="button" tabindex="0" data-chan="#äöü" class="inline-channel">' +
'<span role="button" dir="auto" tabindex="0" data-chan="#äöü" class="inline-channel">' +
"#äöü" +
"</span>",
},
@ -206,7 +206,7 @@ describe("parse Handlebars helper", () => {
input: "inline #channel text",
expected:
"inline " +
'<span role="button" tabindex="0" data-chan="#channel" class="inline-channel">' +
'<span role="button" dir="auto" tabindex="0" data-chan="#channel" class="inline-channel">' +
"#channel" +
"</span>" +
" text",
@ -214,7 +214,7 @@ describe("parse Handlebars helper", () => {
{
input: "#1,000",
expected:
'<span role="button" tabindex="0" data-chan="#1,000" class="inline-channel">' +
'<span role="button" dir="auto" tabindex="0" data-chan="#1,000" class="inline-channel">' +
"#1,000" +
"</span>",
},
@ -222,7 +222,7 @@ describe("parse Handlebars helper", () => {
input: "@#a",
expected:
"@" +
'<span role="button" tabindex="0" data-chan="#a" class="inline-channel">' +
'<span role="button" dir="auto" tabindex="0" data-chan="#a" class="inline-channel">' +
"#a" +
"</span>",
},
@ -358,7 +358,7 @@ describe("parse Handlebars helper", () => {
input: "test, MaxLeiter",
expected:
"test, " +
'<span role="button" data-name="MaxLeiter" class="user color-12">' +
'<span role="button" dir="auto" data-name="MaxLeiter" class="user color-12">' +
"MaxLeiter" +
"</span>",
},
@ -378,7 +378,7 @@ describe("parse Handlebars helper", () => {
users: ["MaxLeiter, test"],
input: "#test-channelMaxLeiter",
expected:
'<span role="button" tabindex="0" data-chan="#test-channelMaxLeiter" class="inline-channel">' +
'<span role="button" dir="auto" tabindex="0" data-chan="#test-channelMaxLeiter" class="inline-channel">' +
"#test-channelMaxLeiter" +
"</span>",
},
@ -414,7 +414,7 @@ describe("parse Handlebars helper", () => {
{
input: "\x02#\x038,9thelounge",
expected:
'<span role="button" tabindex="0" data-chan="#thelounge" class="inline-channel">' +
'<span role="button" dir="auto" tabindex="0" data-chan="#thelounge" 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" tabindex="0" data-chan="#i❤️thelounge" class="inline-channel">#i❤️thelounge</span>',
'<span role="button" dir="auto" tabindex="0" data-chan="#i❤️thelounge" 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" tabindex="0" data-chan="#&quot;testa" class="inline-channel">' +
'<span role="button" dir="auto" tabindex="0" data-chan="#&quot;testa" 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" target="_blank" rel="noopener">http://example.com/path</a> ' +
'Channel: <span role="button" tabindex="0" data-chan="##channel" class="inline-channel">##channel</span>'
'Channel: <span role="button" dir="auto" tabindex="0" data-chan="##channel" class="inline-channel">##channel</span>'
);
});
@ -563,7 +563,7 @@ describe("parse Handlebars helper", () => {
const actual = getParsedMessageContents(input);
expect(actual).to.equal(
'<span role="button" tabindex="0" data-chan="#test-https://example.com" class="inline-channel">' +
'<span role="button" dir="auto" tabindex="0" data-chan="#test-https://example.com" class="inline-channel">' +
"#test-https://example.com" +
"</span>"
);