From 4a7d97f17a39bd3263a5a2e87eb0bfbb5062f074 Mon Sep 17 00:00:00 2001 From: MayaWolf Date: Wed, 28 Mar 2018 15:51:05 +0200 Subject: [PATCH] 0.2.18 - add webchat --- .gitignore | 2 +- bbcode/Editor.vue | 20 +- bbcode/core.ts | 37 +-- bbcode/parser.ts | 238 ++++++-------- bbcode/standard.ts | 112 ++++--- chat/Chat.vue | 59 ++-- chat/ChatView.vue | 16 +- chat/CommandHelp.vue | 17 +- chat/ConversationView.vue | 68 ++-- chat/Logs.vue | 138 ++++---- chat/RecentConversations.vue | 2 +- chat/SettingsView.vue | 26 +- chat/UserMenu.vue | 5 +- chat/bbcode.ts | 73 ++--- chat/common.ts | 3 +- chat/conversations.ts | 6 +- chat/core.ts | 6 +- chat/interfaces.ts | 24 +- chat/localize.ts | 19 +- chat/localstorage.ts | 74 ----- chat/message_view.ts | 5 +- chat/notifications.ts | 5 +- chat/profile_api.ts | 27 +- chat/slash_commands.ts | 12 +- chat/user_view.ts | 14 +- components/Dropdown.vue | 38 ++- components/FilterableSelect.vue | 5 +- components/tabs.ts | 12 +- electron/Index.vue | 40 ++- electron/Window.vue | 69 ++-- electron/application.json | 8 +- electron/chat.ts | 15 +- electron/common.ts | 2 +- electron/dictionaries.ts | 50 +++ electron/filesystem.ts | 71 ++++- electron/importer.ts | 3 +- electron/main.ts | 115 +++---- electron/package.json | 2 +- electron/qs.ts | 2 - electron/webpack.config.js | 12 +- fchat/channels.ts | 9 +- fchat/characters.ts | 4 +- fchat/connection.ts | 8 +- mobile/Index.vue | 5 +- mobile/android/app/build.gradle | 4 +- .../android/app/src/main/AndroidManifest.xml | 1 + .../kotlin/net/f_list/fchat/MainActivity.kt | 30 +- .../kotlin/net/f_list/fchat/Notifications.kt | 1 + mobile/filesystem.ts | 11 +- mobile/index.html | 2 +- mobile/ios/F-Chat.xcodeproj/project.pbxproj | 4 +- mobile/ios/F-Chat/ViewController.swift | 40 ++- mobile/package.json | 2 +- mobile/tsconfig.json | 2 - mobile/webpack.config.js | 10 +- package.json | 1 - scss/_bbcode.scss | 15 +- scss/_character_page.scss | 296 +++++++++--------- scss/_chat.scss | 7 + scss/_flist_derived.scss | 8 +- scss/themes/variables/_dark_derived.scss | 2 +- scss/themes/variables/_default_derived.scss | 4 +- scss/themes/variables/_light_derived.scss | 2 +- site/character_page/character_page.vue | 9 +- site/character_page/images.vue | 2 +- site/character_page/kinks.vue | 8 +- site/character_page/sidebar.vue | 25 +- site/directives/vue-select.ts | 2 +- site/utils.ts | 4 +- webchat/chat.ts | 80 +++++ webchat/logs.ts | 121 +++++++ webchat/package.json | 14 + webchat/tsconfig.json | 20 ++ webchat/webpack.config.js | 53 ++++ 74 files changed, 1361 insertions(+), 897 deletions(-) delete mode 100644 chat/localstorage.ts create mode 100644 electron/dictionaries.ts delete mode 100644 electron/qs.ts create mode 100644 webchat/chat.ts create mode 100644 webchat/logs.ts create mode 100644 webchat/package.json create mode 100644 webchat/tsconfig.json create mode 100644 webchat/webpack.config.js diff --git a/.gitignore b/.gitignore index f9a15fc..97c08d2 100644 --- a/.gitignore +++ b/.gitignore @@ -2,4 +2,4 @@ node_modules/ /electron/app /electron/dist /mobile/www -*.vue.ts \ No newline at end of file +/webchat/dist \ No newline at end of file diff --git a/bbcode/Editor.vue b/bbcode/Editor.vue index 7a0f299..e8c902f 100644 --- a/bbcode/Editor.vue +++ b/bbcode/Editor.vue @@ -76,17 +76,23 @@ private undoStack: string[] = []; private undoIndex = 0; private lastInput = 0; + //tslint:disable:strict-boolean-expressions + private resizeListener!: () => void; created(): void { this.parser = new CoreBBCodeParser(); + this.resizeListener = () => { + const styles = getComputedStyle(this.element); + this.maxHeight = parseInt(styles.maxHeight!, 10) || 250; + this.minHeight = parseInt(styles.minHeight!, 10) || 60; + }; } mounted(): void { this.element = this.$refs['input']; const styles = getComputedStyle(this.element); - this.maxHeight = parseInt(styles.maxHeight! , 10); - //tslint:disable-next-line:strict-boolean-expressions - this.minHeight = parseInt(styles.minHeight!, 10) || 50; + this.maxHeight = parseInt(styles.maxHeight!, 10) || 250; + this.minHeight = parseInt(styles.minHeight!, 10) || 60; setInterval(() => { if(Date.now() - this.lastInput >= 500 && this.text !== this.undoStack[0] && this.undoIndex === 0) { if(this.undoStack.length >= 30) this.undoStack.pop(); @@ -101,6 +107,12 @@ this.sizer.style.top = '0'; this.sizer.style.visibility = 'hidden'; this.resize(); + window.addEventListener('resize', this.resizeListener); + } + //tslint:enable + + destroyed(): void { + window.removeEventListener('resize', this.resizeListener); } get finalClasses(): string | undefined { @@ -227,8 +239,10 @@ resize(): void { this.sizer.style.fontSize = this.element.style.fontSize; this.sizer.style.lineHeight = this.element.style.lineHeight; + this.sizer.style.width = `${this.element.offsetWidth}px`; this.sizer.textContent = this.element.value; this.element.style.height = `${Math.max(Math.min(this.sizer.scrollHeight, this.maxHeight), this.minHeight)}px`; + this.sizer.style.width = '0'; } onPaste(e: ClipboardEvent): void { diff --git a/bbcode/core.ts b/bbcode/core.ts index d4e695d..df7e48b 100644 --- a/bbcode/core.ts +++ b/bbcode/core.ts @@ -1,4 +1,4 @@ -import {BBCodeCustomTag, BBCodeParser, BBCodeSimpleTag} from './parser'; +import {BBCodeCustomTag, BBCodeParser, BBCodeSimpleTag, BBCodeTextTag} from './parser'; const urlFormat = '((?:https?|ftps?|irc)://[^\\s/$.?#"\']+\\.[^\\s"]+)'; export const findUrlRegex = new RegExp(`(\\[url[=\\]]\\s*)?${urlFormat}`, 'gi'); @@ -21,31 +21,27 @@ export class CoreBBCodeParser extends BBCodeParser { /*tslint:disable-next-line:typedef*///https://github.com/palantir/tslint/issues/711 constructor(public makeLinksClickable = true) { super(); - this.addTag('b', new BBCodeSimpleTag('b', 'strong')); - this.addTag('i', new BBCodeSimpleTag('i', 'em')); - this.addTag('u', new BBCodeSimpleTag('u', 'u')); - this.addTag('s', new BBCodeSimpleTag('s', 'del')); - this.addTag('noparse', new BBCodeSimpleTag('noparse', 'span', [], [])); - this.addTag('sub', new BBCodeSimpleTag('sub', 'sub', [], ['b', 'i', 'u', 's'])); - this.addTag('sup', new BBCodeSimpleTag('sup', 'sup', [], ['b', 'i', 'u', 's'])); - this.addTag('color', new BBCodeCustomTag('color', (parser, parent, param) => { - const el = parser.createElement('span'); - parent.appendChild(el); + this.addTag(new BBCodeSimpleTag('b', 'strong')); + this.addTag(new BBCodeSimpleTag('i', 'em')); + this.addTag(new BBCodeSimpleTag('u', 'u')); + this.addTag(new BBCodeSimpleTag('s', 'del')); + this.addTag(new BBCodeSimpleTag('noparse', 'span', [], [])); + this.addTag(new BBCodeSimpleTag('sub', 'sub', [], ['b', 'i', 'u', 's'])); + this.addTag(new BBCodeSimpleTag('sup', 'sup', [], ['b', 'i', 'u', 's'])); + this.addTag(new BBCodeCustomTag('color', (parser, parent, param) => { const cregex = /^(red|blue|white|yellow|pink|gray|green|orange|purple|black|brown|cyan)$/; if(!cregex.test(param)) { parser.warning('Invalid color parameter provided.'); - return el; + return undefined; } - el.className = `${param}Text`; - return el; - })); - this.addTag('url', new BBCodeCustomTag('url', (parser, parent, _) => { const el = parser.createElement('span'); + el.className = `${param}Text`; parent.appendChild(el); return el; - }, (parser, element, _, param) => { - const content = element.textContent!.trim(); - while(element.firstChild !== null) element.removeChild(element.firstChild); + })); + this.addTag(new BBCodeTextTag('url', (parser, parent, param, content) => { + const element = parser.createElement('span'); + parent.appendChild(element); let url: string, display: string = content; if(param.length > 0) { @@ -80,7 +76,8 @@ export class CoreBBCodeParser extends BBCodeParser { span.textContent = ` [${domain(url)}]`; (span).bbcodeHide = true; element.appendChild(span); - }, [])); + return element; + })); } parseEverything(input: string): HTMLElement { diff --git a/bbcode/parser.ts b/bbcode/parser.ts index b062ef6..778424c 100644 --- a/bbcode/parser.ts +++ b/bbcode/parser.ts @@ -1,4 +1,4 @@ -export abstract class BBCodeTag { +abstract class BBCodeTag { noClosingTag = false; allowedTags: {[tag: string]: boolean | undefined} | undefined; @@ -17,11 +17,7 @@ export abstract class BBCodeTag { this.allowedTags[tag] = true; } - //tslint:disable-next-line:no-empty - afterClose(_: BBCodeParser, __: HTMLElement, ___: HTMLElement | undefined, ____?: string): void { - } - - abstract createElement(parser: BBCodeParser, parent: HTMLElement, param: string): HTMLElement | undefined; + abstract createElement(parser: BBCodeParser, parent: HTMLElement, param: string, content: string): HTMLElement | undefined; } export class BBCodeSimpleTag extends BBCodeTag { @@ -42,39 +38,25 @@ export class BBCodeSimpleTag extends BBCodeTag { } } -export type CustomElementCreator = (parser: BBCodeParser, parent: HTMLElement, param: string) => HTMLElement | undefined; -export type CustomCloser = (parser: BBCodeParser, current: HTMLElement, parent: HTMLElement, param: string) => void; - export class BBCodeCustomTag extends BBCodeTag { - constructor(tag: string, private customCreator: CustomElementCreator, private customCloser?: CustomCloser, tagList?: string[]) { + constructor(tag: string, private customCreator: (parser: BBCodeParser, parent: HTMLElement, param: string) => HTMLElement | undefined, + tagList?: string[]) { super(tag, tagList); } createElement(parser: BBCodeParser, parent: HTMLElement, param: string): HTMLElement | undefined { return this.customCreator(parser, parent, param); } - - afterClose(parser: BBCodeParser, current: HTMLElement, parent: HTMLElement, param: string): void { - if(this.customCloser !== undefined) - this.customCloser(parser, current, parent, param); - } } -enum BufferType { Raw, Tag } - -class ParserTag { - constructor(public tag: string, public param: string, public element: HTMLElement, public parent: HTMLElement | undefined, - public line: number, public column: number) { +export class BBCodeTextTag extends BBCodeTag { + constructor(tag: string, private customCreator: (parser: BBCodeParser, parent: HTMLElement, + param: string, content: string) => HTMLElement | undefined) { + super(tag, []); } - appendElement(child: HTMLElement): void { - this.element.appendChild(child); - } - - append(content: string, start: number, end: number): void { - if(content.length === 0) - return; - this.element.appendChild(document.createTextNode(content.substring(start, end))); + createElement(parser: BBCodeParser, parent: HTMLElement, param: string, content: string): HTMLElement | undefined { + return this.customCreator(parser, parent, param, content); } } @@ -83,8 +65,8 @@ export class BBCodeParser { private _tags: {[tag: string]: BBCodeTag | undefined} = {}; private _line = -1; private _column = -1; - private _currentTag!: ParserTag; private _storeWarnings = false; + private _currentTag!: {tag: string, line: number, column: number}; parseEverything(input: string): HTMLElement { if(input.length === 0) @@ -92,23 +74,22 @@ export class BBCodeParser { this._warnings = []; this._line = 1; this._column = 1; - const stack: ParserTag[] = this.parse(input, 0, input.length); + const parent = document.createElement('span'); + parent.className = 'bbcode'; + this._currentTag = {tag: '', line: 1, column: 1}; + this.parse(input, 0, undefined, parent, () => true); - for(let i = stack.length - 1; i > 0; i--) { - this._currentTag = stack.pop(); - this.warning('Automatically closing tag at end of input.'); - } - if(process.env.NODE_ENV !== 'production' && this._warnings.length > 0) - console.log(this._warnings); - return stack[0].element; + //if(process.env.NODE_ENV !== 'production' && this._warnings.length > 0) + // console.log(this._warnings); + return parent; } createElement(tag: K): HTMLElementTagNameMap[K] { return document.createElement(tag); } - addTag(tag: string, impl: BBCodeTag): void { - this._tags[tag] = impl; + addTag(impl: BBCodeTag): void { + this._tags[impl.tag] = impl; } removeTag(tag: string): void { @@ -133,126 +114,85 @@ export class BBCodeParser { this._warnings.push(newMessage); } - private parse(input: string, start: number, end: number): ParserTag[] { - const ignoreClosing: {[key: string]: number} = {}; - - function ignoreNextClosingTag(tagName: string): void { - //tslint:disable-next-line:strict-boolean-expressions - ignoreClosing[tagName] = (ignoreClosing[tagName] || 0) + 1; + private parse(input: string, start: number, self: BBCodeTag | undefined, parent: HTMLElement | undefined, + isAllowed: (tag: string) => boolean): number { + let currentTag = this._currentTag; + const selfAllowed = self !== undefined ? isAllowed(self.tag) : true; + if(self !== undefined) { + const parentAllowed = isAllowed; + isAllowed = (name) => self.isAllowed(name) && parentAllowed(name); + currentTag = this._currentTag = {tag: self.tag, line: this._line, column: this._column}; } - - const stack: ParserTag[] = []; - - function stackTop(): ParserTag { - return stack[stack.length - 1]; - } - - function quickReset(i: number): void { - stackTop().append(input, start, i + 1); - start = i + 1; - curType = BufferType.Raw; - } - - let curType: BufferType = BufferType.Raw; - // Root tag collects output. - const rootTag = new ParserTag('', '', this.createElement('span'), undefined, 1, 1); - stack.push(rootTag); - this._currentTag = rootTag; - let paramStart = -1; - for(let i = start; i < end; ++i) { + let tagStart = -1, paramStart = -1, mark = start; + for(let i = start; i < input.length; ++i) { const c = input[i]; ++this._column; if(c === '\n') { ++this._line; this._column = 1; - quickReset(i); - stackTop().appendElement(this.createElement('br')); } - switch(curType) { - case BufferType.Raw: - if(c === '[') { - stackTop().append(input, start, i); - start = i; - curType = BufferType.Tag; + if(c === '[') { + tagStart = i; + paramStart = -1; + } else if(c === '=' && paramStart === -1) + paramStart = i; + else if(c === ']') { + const paramIndex = paramStart === -1 ? i : paramStart; + let tagKey = input.substring(tagStart + 1, paramIndex).trim().toLowerCase(); + if(tagKey.length === 0) { + tagStart = -1; + continue; + } + const param = paramStart > tagStart ? input.substring(paramStart + 1, i).trim() : ''; + const close = tagKey[0] === '/'; + if(close) tagKey = tagKey.substr(1).trim(); + if(this._tags[tagKey] === undefined) { + tagStart = -1; + continue; + } + if(!close) { + const tag = this._tags[tagKey]!; + const allowed = isAllowed(tagKey); + if(parent !== undefined) { + parent.appendChild(document.createTextNode(input.substring(mark, allowed ? tagStart : i + 1))); + mark = i + 1; } - break; - case BufferType.Tag: - if(c === '[') { - stackTop().append(input, start, i); - start = i; - } else if(c === '=' && paramStart === -1) - paramStart = i; - else if(c === ']') { - const paramIndex = paramStart === -1 ? i : paramStart; - let tagKey = input.substring(start + 1, paramIndex).trim(); - if(tagKey.length === 0) { - quickReset(i); - continue; - } - let param = ''; - if(paramStart !== -1) - param = input.substring(paramStart + 1, i).trim(); - paramStart = -1; - const close = tagKey[0] === '/'; - if(close) tagKey = tagKey.substr(1).trim(); - if(typeof this._tags[tagKey] === 'undefined') { - quickReset(i); - continue; - } - if(!close) { - let allowed = true; - for(let k = stack.length - 1; k > 0; --k) { - allowed = allowed && this._tags[stack[k].tag]!.isAllowed(tagKey); - if(!allowed) - break; - } - const tag = this._tags[tagKey]!; - if(!allowed) { - ignoreNextClosingTag(tagKey); - quickReset(i); - continue; - } - const parent = stackTop().element; - const el: HTMLElement | undefined = tag.createElement(this, parent, param); - if(el === undefined) { - quickReset(i); - continue; - } - (el).bbcodeTag = tagKey; - if(param.length > 0) (el).bbcodeParam = param; - if(!this._tags[tagKey]!.noClosingTag) - stack.push(new ParserTag(tagKey, param, el, parent, this._line, this._column)); - } else if(ignoreClosing[tagKey] > 0) { - ignoreClosing[tagKey] -= 1; - stackTop().append(input, start, i + 1); - } else { - let closed = false; - for(let k = stack.length - 1; k >= 0; --k) { - if(stack[k].tag !== tagKey) continue; - for(let y = stack.length - 1; y >= k; --y) { - const closeTag = stack.pop(); - this._currentTag = closeTag; - if(y > k) - this.warning(`Unexpected closing ${tagKey} tag. Needed ${closeTag.tag} tag instead.`); - this._tags[closeTag.tag]!.afterClose(this, closeTag.element, closeTag.parent, closeTag.param); - } - this._currentTag = stackTop(); - closed = true; - break; - } - if(!closed) { - this.warning(`Found closing ${tagKey} tag that was never opened.`); - stackTop().append(input, start, i + 1); - } - } - start = i + 1; - curType = BufferType.Raw; + if(!allowed || parent === undefined) { + i = this.parse(input, i + 1, tag, parent, isAllowed); + mark = i + 1; + continue; } + let element: HTMLElement | undefined; + if(tag instanceof BBCodeTextTag) { + i = this.parse(input, i + 1, tag, undefined, isAllowed); + element = tag.createElement(this, parent, param, input.substring(mark, input.lastIndexOf('[', i))); + } else { + element = tag.createElement(this, parent, param, ''); + if(!tag.noClosingTag) + i = this.parse(input, i + 1, tag, element !== undefined ? element : parent, isAllowed); + } + mark = i + 1; + this._currentTag = currentTag; + if(element === undefined) continue; + (element).bbcodeTag = tagKey; + if(param.length > 0) (element).bbcodeParam = param; + } else if(self !== undefined) { //tslint:disable-line:curly + if(self.tag === tagKey) { + if(parent !== undefined) + parent.appendChild(document.createTextNode(input.substring(mark, selfAllowed ? tagStart : i + 1))); + return i; + } else if(!selfAllowed) + return tagStart - 1; + else if(isAllowed(tagKey)) + this.warning(`Unexpected closing ${tagKey} tag. Needed ${self} tag instead.`); + } else if(isAllowed(tagKey)) this.warning(`Found closing ${tagKey} tag that was never opened.`); } } - if(start < input.length) - stackTop().append(input, start, input.length); - - return stack; + if(mark < input.length && parent !== undefined) { + parent.appendChild(document.createTextNode(input.substring(mark))); + mark = input.length; + } + if(self !== undefined) this.warning('Automatically closing tag at end of input.'); + return mark; } } \ No newline at end of file diff --git a/bbcode/standard.ts b/bbcode/standard.ts index f05356d..715321f 100644 --- a/bbcode/standard.ts +++ b/bbcode/standard.ts @@ -1,6 +1,6 @@ import {CoreBBCodeParser} from './core'; import {InlineDisplayMode} from './interfaces'; -import {BBCodeCustomTag, BBCodeSimpleTag} from './parser'; +import {BBCodeCustomTag, BBCodeSimpleTag, BBCodeTextTag} from './parser'; interface InlineImage { id: number @@ -39,8 +39,8 @@ export class StandardBBCodeParser extends CoreBBCodeParser { super(); const hrTag = new BBCodeSimpleTag('hr', 'hr', [], []); hrTag.noClosingTag = true; - this.addTag('hr', hrTag); - this.addTag('quote', new BBCodeCustomTag('quote', (parser, parent, param) => { + this.addTag(hrTag); + this.addTag(new BBCodeCustomTag('quote', (parser, parent, param) => { if(param !== '') parser.warning('Unexpected paramter on quote tag.'); const element = parser.createElement('blockquote'); @@ -51,15 +51,23 @@ export class StandardBBCodeParser extends CoreBBCodeParser { parent.appendChild(element); return element; })); - this.addTag('left', new BBCodeSimpleTag('left', 'span', ['leftText'])); - this.addTag('right', new BBCodeSimpleTag('right', 'span', ['rightText'])); - this.addTag('center', new BBCodeSimpleTag('center', 'span', ['centerText'])); - this.addTag('justify', new BBCodeSimpleTag('justify', 'span', ['justifyText'])); - this.addTag('big', new BBCodeSimpleTag('big', 'span', ['bigText'], ['url', 'i', 'u', 'b', 'color', 's'])); - this.addTag('small', new BBCodeSimpleTag('small', 'span', ['smallText'], ['url', 'i', 'u', 'b', 'color', 's'])); - this.addTag('indent', new BBCodeSimpleTag('indent', 'div', ['indentText'])); - this.addTag('heading', new BBCodeSimpleTag('heading', 'h2', [], ['url', 'i', 'u', 'b', 'color', 's'])); - this.addTag('collapse', new BBCodeCustomTag('collapse', (parser, parent, param) => { + this.addTag(new BBCodeSimpleTag('left', 'span', ['leftText'])); + this.addTag(new BBCodeSimpleTag('right', 'span', ['rightText'])); + this.addTag(new BBCodeSimpleTag('center', 'span', ['centerText'])); + this.addTag(new BBCodeSimpleTag('justify', 'span', ['justifyText'])); + this.addTag(new BBCodeSimpleTag('big', 'span', ['bigText'], ['url', 'i', 'u', 'b', 'color', 's'])); + this.addTag(new BBCodeSimpleTag('small', 'span', ['smallText'], ['url', 'i', 'u', 'b', 'color', 's'])); + this.addTag(new BBCodeSimpleTag('indent', 'div', ['indentText'])); + this.addTag(new BBCodeSimpleTag('heading', 'h2', [], ['url', 'i', 'u', 'b', 'color', 's'])); + this.addTag(new BBCodeSimpleTag('row', 'div', ['row'])); + this.addTag(new BBCodeCustomTag('col', (parser, parent, param) => { + const col = parser.createElement('div'); + col.className = param === '1' ? 'col-lg-3 col-md-4 col-12' : param === '2' ? 'col-lg-4 col-md-6 col-12' : + param === '3' ? 'col-lg-6 col-md-8 col-12' : 'col-md'; + parent.appendChild(col); + return col; + })); + this.addTag(new BBCodeCustomTag('collapse', (parser, parent, param) => { if(param === '') { //tslint:disable-line:curly parser.warning('title parameter is required.'); // HACK: Compatability fix with old site. Titles are not trimmed on old site, so empty collapse titles need to be allowed. @@ -76,25 +84,33 @@ export class StandardBBCodeParser extends CoreBBCodeParser { headerText.appendChild(document.createTextNode(param)); outer.appendChild(headerText); const body = parser.createElement('div'); - body.className = 'card-body bbcode-collapse-body closed'; + body.className = 'bbcode-collapse-body'; body.style.height = '0'; outer.appendChild(body); + const inner = parser.createElement('div'); + inner.className = 'card-body'; + body.appendChild(inner); + let timeout: number; headerText.addEventListener('click', () => { const isCollapsed = parseInt(body.style.height!, 10) === 0; - body.style.height = isCollapsed ? `${body.scrollHeight}px` : '0'; + if(isCollapsed) timeout = window.setTimeout(() => body.style.height = '', 200); + else { + clearTimeout(timeout); + body.style.transition = 'initial'; + setImmediate(() => { + body.style.transition = ''; + body.style.height = '0'; + }); + } + body.style.height = `${body.scrollHeight}px`; icon.className = `fas fa-chevron-${isCollapsed ? 'up' : 'down'}`; }); parent.appendChild(outer); - return body; + return inner; })); - this.addTag('user', new BBCodeCustomTag('user', (parser, parent, _) => { - const el = parser.createElement('span'); - parent.appendChild(el); - return el; - }, (parser, element, parent, param) => { + this.addTag(new BBCodeTextTag('user', (parser, parent, param, content) => { if(param !== '') parser.warning('Unexpected parameter on user tag.'); - const content = element.innerText; if(!usernameRegex.test(content)) return; const a = parser.createElement('a'); @@ -102,16 +118,12 @@ export class StandardBBCodeParser extends CoreBBCodeParser { a.target = '_blank'; a.className = 'character-link'; a.appendChild(document.createTextNode(content)); - parent.replaceChild(a, element); - }, [])); - this.addTag('icon', new BBCodeCustomTag('icon', (parser, parent, _) => { - const el = parser.createElement('span'); - parent.appendChild(el); - return el; - }, (parser, element, parent, param) => { + parent.appendChild(a); + return a; + })); + this.addTag(new BBCodeTextTag('icon', (parser, parent, param, content) => { if(param !== '') parser.warning('Unexpected parameter on icon tag.'); - const content = element.innerText; if(!usernameRegex.test(content)) return; const a = parser.createElement('a'); @@ -120,17 +132,14 @@ export class StandardBBCodeParser extends CoreBBCodeParser { const img = parser.createElement('img'); img.src = `${this.settings.staticDomain}images/avatar/${content.toLowerCase()}.png`; img.className = 'character-avatar icon'; + img.title = img.alt = content; a.appendChild(img); - parent.replaceChild(a, element); - }, [])); - this.addTag('eicon', new BBCodeCustomTag('eicon', (parser, parent, _) => { - const el = parser.createElement('span'); - parent.appendChild(el); - return el; - }, (parser, element, parent, param) => { + parent.appendChild(a); + return a; + })); + this.addTag(new BBCodeTextTag('eicon', (parser, parent, param, content) => { if(param !== '') parser.warning('Unexpected parameter on eicon tag.'); - const content = element.innerText; if(!usernameRegex.test(content)) return; @@ -140,14 +149,11 @@ export class StandardBBCodeParser extends CoreBBCodeParser { const img = parser.createElement('img'); img.src = `${this.settings.staticDomain}images/eicon/${content.toLowerCase()}${extension}`; img.className = 'character-avatar icon'; - parent.replaceChild(img, element); - }, [])); - this.addTag('img', new BBCodeCustomTag('img', (parser, parent) => { - const el = parser.createElement('span'); - parent.appendChild(el); - return el; - }, (p, element, parent, param) => { - const content = element.textContent!; + img.title = img.alt = content; + parent.appendChild(img); + return img; + })); + this.addTag(new BBCodeTextTag('img', (p, parent, param, content) => { const parser = p; if(!this.allowInlines) { parser.warning('Inline images are not allowed here.'); @@ -168,24 +174,26 @@ export class StandardBBCodeParser extends CoreBBCodeParser { return undefined; } inline.name = content; + let element: HTMLElement; if(displayMode === InlineDisplayMode.DISPLAY_NONE || (displayMode === InlineDisplayMode.DISPLAY_SFW && inline.nsfw)) { - const el = parser.createElement('a'); + const el = element = parser.createElement('a'); el.className = 'unloadedInline'; el.href = '#'; el.dataset.inlineId = param; el.onclick = () => { - Array.prototype.forEach.call(document.getElementsByClassName('unloadedInline'), ((e: HTMLElement) => { - const showInline = parser.inlines![e.dataset.inlineId!]; + Array.from(document.getElementsByClassName('unloadedInline')).forEach((e) => { + const showInline = parser.inlines![(e).dataset.inlineId!]; if(typeof showInline !== 'object') return; e.parentElement!.replaceChild(parser.createInline(showInline), e); - })); + }); return false; }; const prefix = inline.nsfw ? '[NSFW Inline] ' : '[Inline] '; el.appendChild(document.createTextNode(prefix)); - parent.replaceChild(el, element); - } else parent.replaceChild(parser.createInline(inline), element); - }, [])); + parent.appendChild(el); + } else parent.appendChild(element = parser.createInline(inline)); + return element; + })); } } diff --git a/chat/Chat.vue b/chat/Chat.vue index 711039a..bfea171 100644 --- a/chat/Chat.vue +++ b/chat/Chat.vue @@ -31,40 +31,43 @@ import Modal from '../components/Modal.vue'; import Channels from '../fchat/channels'; import Characters from '../fchat/characters'; + import {Keys} from '../keys'; import ChatView from './ChatView.vue'; - import {errorToString} from './common'; + import {errorToString, getKey} from './common'; import Conversations from './conversations'; import core from './core'; import l from './localize'; type BBCodeNode = Node & {bbcodeTag?: string, bbcodeParam?: string, bbcodeHide?: boolean}; - function copyNode(str: string, node: BBCodeNode, range: Range, flags: {endFound?: true, rootFound?: true}): string { + function copyNode(str: string, node: BBCodeNode, range: Range, flags: {endFound?: true}): string { + if(node === range.endContainer) flags.endFound = true; if(node.bbcodeTag !== undefined) str = `[${node.bbcodeTag}${node.bbcodeParam !== undefined ? `=${node.bbcodeParam}` : ''}]${str}[/${node.bbcodeTag}]`; if(node.nextSibling !== null && !flags.endFound) { - if(node instanceof HTMLElement && getComputedStyle(node).display === 'block') str += '\n'; + if(node instanceof HTMLElement && getComputedStyle(node).display === 'block') str += '\r\n'; str += scanNode(node.nextSibling!, range, flags); } - if(node.parentElement === null) flags.rootFound = true; - if(flags.rootFound && flags.endFound) return str; + if(node.parentElement === null) return str; return copyNode(str, node.parentNode!, range, flags); } - function scanNode(node: BBCodeNode, range: Range, flags: {endFound?: true}): string { - if(node.bbcodeHide) return ''; - if(node === range.endContainer) { - flags.endFound = true; - return node.nodeValue!.substr(0, range.endOffset); - } + function scanNode(node: BBCodeNode, range: Range, flags: {endFound?: true}, hide?: boolean): string { let str = ''; + hide = hide || node.bbcodeHide; + if(node === range.endContainer) { + if(node instanceof HTMLElement && node.children.length === 1 && node.firstElementChild instanceof HTMLImageElement) + str += scanNode(node.firstElementChild, range, flags, hide); + flags.endFound = true; + } if(node.bbcodeTag !== undefined) str += `[${node.bbcodeTag}${node.bbcodeParam !== undefined ? `=${node.bbcodeParam}` : ''}]`; - if(node instanceof Text) str += node.nodeValue; - if(node.firstChild !== null) str += scanNode(node.firstChild, range, flags); + if(node instanceof Text) str += node === range.endContainer ? node.nodeValue!.substr(0, range.endOffset) : node.nodeValue; + else if(node instanceof HTMLImageElement) str += node.alt; + if(node.firstChild !== null && !flags.endFound) str += scanNode(node.firstChild, range, flags, hide); if(node.bbcodeTag !== undefined) str += `[/${node.bbcodeTag}]`; - if(node instanceof HTMLElement && getComputedStyle(node).display === 'block') str += '\n'; - if(node.nextSibling !== null && !flags.endFound) str += scanNode(node.nextSibling, range, flags); - return str; + if(node instanceof HTMLElement && getComputedStyle(node).display === 'block') str += '\r\n'; + if(node.nextSibling !== null && !flags.endFound) str += scanNode(node.nextSibling, range, flags, hide); + return hide ? '' : str; } @Component({ @@ -80,16 +83,36 @@ connecting = false; connected = false; l = l; + copyPlain = false; mounted(): void { + window.addEventListener('beforeunload', (e) => { + if(!this.connected) return; + e.returnValue = l('chat.confirmLeave'); + return l('chat.confirmLeave'); + }); document.addEventListener('copy', ((e: ClipboardEvent) => { + if(this.copyPlain) { + this.copyPlain = false; + return; + } const selection = document.getSelection(); if(selection.isCollapsed) return; const range = selection.getRangeAt(0); - e.clipboardData.setData('text/plain', copyNode(range.startContainer.nodeValue!.substr(range.startOffset), - range.startContainer, range, {})); + const start = range.startContainer; + let startValue = start.nodeValue !== null ? + start.nodeValue.substring(range.startOffset, start === range.endContainer ? range.endOffset : undefined) : ''; + if(start instanceof HTMLElement && start.children.length === 1 && start.firstElementChild instanceof HTMLImageElement) + startValue += scanNode(start.firstElementChild, range, {}); + e.clipboardData.setData('text/plain', copyNode(startValue, start, range, {})); e.preventDefault(); }) as EventListener); + window.addEventListener('keydown', (e) => { + if(getKey(e) === Keys.KeyC && e.shiftKey && (e.ctrlKey || e.metaKey) && !e.altKey) { + this.copyPlain = true; + document.execCommand('copy'); + } + }); core.register('characters', Characters(core.connection)); core.register('channels', Channels(core.connection, core.characters)); core.register('conversations', Conversations()); diff --git a/chat/ChatView.vue b/chat/ChatView.vue index 5ac7c7c..811b1f3 100644 --- a/chat/ChatView.vue +++ b/chat/ChatView.vue @@ -4,7 +4,7 @@ @touchend="$refs['userMenu'].handleEvent($event)"> - {{ownCharacter.name}} + {{ownCharacter.name}} {{l('chat.logout')}}
{{l('chat.status')}} @@ -36,7 +36,7 @@ {{conversation.character.name}}
@@ -97,7 +97,7 @@ import {Keys} from '../keys'; import ChannelList from './ChannelList.vue'; import CharacterSearch from './CharacterSearch.vue'; - import {characterImage, getKey} from './common'; + import {characterImage, getKey, profileLink} from './common'; import ConversationView from './ConversationView.vue'; import core from './core'; import {Character, Connection, Conversation} from './interfaces'; @@ -269,6 +269,10 @@ return core.characters.ownCharacter; } + get ownCharacterLink(): string { + return profileLink(core.characters.ownCharacter.name); + } + getClasses(conversation: Conversation): string { return conversation === core.conversations.selectedConversation ? ' active' : unreadClasses[conversation.unread]; } @@ -285,7 +289,7 @@ } .bbcode, .message, .profile-viewer { - user-select: initial; + user-select: text; } .list-group.conversation-nav { @@ -342,7 +346,7 @@ align-items: stretch; flex-direction: row; - @media (max-width: breakpoint-max(xs)) { + @media (max-width: breakpoint-max(sm)) { display: flex; } @@ -387,7 +391,7 @@ .body a.btn { padding: 2px 0; } - @media (min-width: breakpoint-min(sm)) { + @media (min-width: breakpoint-min(md)) { .sidebar { position: static; margin: 0; diff --git a/chat/CommandHelp.vue b/chat/CommandHelp.vue index 77ab5d7..4e93868 100644 --- a/chat/CommandHelp.vue +++ b/chat/CommandHelp.vue @@ -1,5 +1,5 @@ \ No newline at end of file + + + \ No newline at end of file diff --git a/chat/RecentConversations.vue b/chat/RecentConversations.vue index c3f94b6..35d1b8a 100644 --- a/chat/RecentConversations.vue +++ b/chat/RecentConversations.vue @@ -1,5 +1,5 @@