Browse Source

RTL support in message input

master
morethanwords 4 years ago
parent
commit
eded39cad2
  1. 15
      src/components/chat/input.ts
  2. 11
      src/helpers/string.ts
  3. 4
      src/scss/partials/_chatBubble.scss

15
src/components/chat/input.ts

@ -21,6 +21,7 @@ import { ripple } from '../ripple';
import Scrollable from "../scrollable"; import Scrollable from "../scrollable";
import { toast } from "../toast"; import { toast } from "../toast";
import { wrapReply } from "../wrappers"; import { wrapReply } from "../wrappers";
import { checkRTL } from '../../helpers/string';
const RECORD_MIN_TIME = 500; const RECORD_MIN_TIME = 500;
const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.'; const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.';
@ -182,6 +183,7 @@ export class ChatInput {
this.messageInput.addEventListener('input', (e) => { this.messageInput.addEventListener('input', (e) => {
//console.log('messageInput input', this.messageInput.innerText, this.serializeNodes(Array.from(this.messageInput.childNodes))); //console.log('messageInput input', this.messageInput.innerText, this.serializeNodes(Array.from(this.messageInput.childNodes)));
this.setDirection();
const value = this.messageInput.innerText; const value = this.messageInput.innerText;
@ -585,6 +587,17 @@ export class ChatInput {
} }
this.updateSendBtn(); this.updateSendBtn();
this.setDirection();
}
public setDirection() {
const char = this.messageInput.innerText[0];
let direction = 'ltr';
if(char && checkRTL(char)) {
direction = 'rtl';
}
this.messageInput.style.direction = direction;
} }
public sendMessage() { public sendMessage() {
@ -695,6 +708,7 @@ export class ChatInput {
this.editMsgID = 0; this.editMsgID = 0;
this.helperType = this.helperFunc = undefined; this.helperType = this.helperFunc = undefined;
this.chatInput.parentElement.classList.remove('is-helper-active'); this.chatInput.parentElement.classList.remove('is-helper-active');
this.setDirection();
} }
public setTopInfo(type: ChatInputHelperType, callerFunc: () => void, title = '', subtitle = '', input?: string, message?: any) { public setTopInfo(type: ChatInputHelperType, callerFunc: () => void, title = '', subtitle = '', input?: string, message?: any) {
@ -721,6 +735,7 @@ export class ChatInput {
setTimeout(() => { setTimeout(() => {
this.updateSendBtn(); this.updateSendBtn();
this.setDirection();
}, 0); }, 0);
} }

11
src/helpers/string.ts

@ -74,4 +74,13 @@ export function splitStringByLength(str: string, maxLength: number) {
} while(true); } while(true);
return out; return out;
} }
// https://stackoverflow.com/a/14824756
export const checkRTL = (s: string) => {
const ltrChars = 'A-Za-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF'+'\u2C00-\uFB1C\uFDFE-\uFE6F\uFEFD-\uFFFF',
rtlChars = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC',
rtlDirCheck = new RegExp('^[^'+ltrChars+']*['+rtlChars+']');
return rtlDirCheck.test(s);
};

4
src/scss/partials/_chatBubble.scss

@ -62,6 +62,7 @@ $bubble-margin: .25rem;
position: relative; position: relative;
z-index: 1; z-index: 1;
margin: 0 auto; margin: 0 auto;
user-select: none;
&.is-highlighted, &.is-selected, /* #bubbles.is-selecting */ & { &.is-highlighted, &.is-selected, /* #bubbles.is-selecting */ & {
&:after { &:after {
@ -238,6 +239,7 @@ $bubble-margin: .25rem;
height: fit-content; height: fit-content;
z-index: 2; z-index: 2;
transition: .2s transform; transition: .2s transform;
user-select: text;
@include respond-to(not-handhelds) { @include respond-to(not-handhelds) {
max-width: 85%; max-width: 85%;
@ -1037,7 +1039,7 @@ $bubble-margin: .25rem;
line-height: 1; line-height: 1;
vertical-align: middle; vertical-align: middle;
pointer-events: none; // do not show title pointer-events: none; // do not show title
display: inline-block; display: inline-flex;
/* display: inline-flex; /* display: inline-flex;
align-items: center; */ align-items: center; */

Loading…
Cancel
Save