From c002c43a08242870dcd7b6a519015509076023a8 Mon Sep 17 00:00:00 2001 From: morethanwords Date: Wed, 26 May 2021 17:07:10 +0300 Subject: [PATCH] Temp --- src/components/chat/autocompleteHelper.ts | 5 +++++ .../chat/autocompleteHelperController.ts | 21 +++++++++++++++++++ src/components/chat/commandsHelper.ts | 4 ++-- src/components/chat/emojiHelper.ts | 4 ++-- src/components/chat/input.ts | 19 ++++++++++------- src/components/chat/stickersHelper.ts | 2 +- src/index.hbs | 18 ++++++++-------- 7 files changed, 52 insertions(+), 21 deletions(-) create mode 100644 src/components/chat/autocompleteHelperController.ts diff --git a/src/components/chat/autocompleteHelper.ts b/src/components/chat/autocompleteHelper.ts index bf6478d7..ea373a3f 100644 --- a/src/components/chat/autocompleteHelper.ts +++ b/src/components/chat/autocompleteHelper.ts @@ -19,6 +19,7 @@ export default class AutocompleteHelper extends EventListenerBase<{ protected container: HTMLElement; protected list: HTMLElement; protected resetTarget: () => void; + protected init?(): void; constructor(appendTo: HTMLElement, protected listType: 'xy' | 'x' | 'y', @@ -73,6 +74,10 @@ export default class AutocompleteHelper extends EventListenerBase<{ } public toggle(hide?: boolean) { + if(this.init) { + return; + } + hide = hide === undefined ? this.container.classList.contains('is-visible') && !this.container.classList.contains('backwards') : hide; if(this.hidden === hide) { diff --git a/src/components/chat/autocompleteHelperController.ts b/src/components/chat/autocompleteHelperController.ts new file mode 100644 index 00000000..e3710cda --- /dev/null +++ b/src/components/chat/autocompleteHelperController.ts @@ -0,0 +1,21 @@ +import AutocompleteHelper from "./autocompleteHelper"; + +export default class AutocompleteHelperController { + private helpers: Set = new Set(); + + public addHelpers(helpers: AutocompleteHelper[]) { + for(const helper of helpers) { + this.helpers.add(helper); + } + } + + public toggleHelper(helper: AutocompleteHelper, hide?: boolean) { + this.helpers.forEach(h => { + if(h !== helper) { + helper.toggle(true); + } + }); + + helper.toggle(hide); + } +} diff --git a/src/components/chat/commandsHelper.ts b/src/components/chat/commandsHelper.ts index cac6e852..55cc22d2 100644 --- a/src/components/chat/commandsHelper.ts +++ b/src/components/chat/commandsHelper.ts @@ -15,7 +15,7 @@ export default class CommandsHelper extends AutocompleteHelper { this.container.classList.add('commands-helper'); } - private init() { + protected init() { this.list = document.createElement('div'); this.list.classList.add('commands-helper-commands'); @@ -30,7 +30,7 @@ export default class CommandsHelper extends AutocompleteHelper { }); } - public renderCommands(commands: {userId: number, command: BotCommand}[]) { + public render(commands: {userId: number, command: BotCommand}[]) { if(this.init) { if(!commands.length) { return; diff --git a/src/components/chat/emojiHelper.ts b/src/components/chat/emojiHelper.ts index 25e251fb..66c5684a 100644 --- a/src/components/chat/emojiHelper.ts +++ b/src/components/chat/emojiHelper.ts @@ -14,7 +14,7 @@ export default class EmojiHelper extends AutocompleteHelper { this.container.classList.add('emoji-helper'); } - private init() { + protected init() { this.list = document.createElement('div'); this.list.classList.add('emoji-helper-emojis', 'super-emojis'); @@ -29,7 +29,7 @@ export default class EmojiHelper extends AutocompleteHelper { }); } - public renderEmojis(emojis: string[], waitForKey: boolean) { + public render(emojis: string[], waitForKey: boolean) { if(this.init) { if(!emojis.length) { return; diff --git a/src/components/chat/input.ts b/src/components/chat/input.ts index a5017c82..206f710a 100644 --- a/src/components/chat/input.ts +++ b/src/components/chat/input.ts @@ -62,6 +62,7 @@ import EmojiHelper from './emojiHelper'; import setRichFocus from '../../helpers/dom/setRichFocus'; import SearchIndex from '../../lib/searchIndex'; import CommandsHelper from './commandsHelper'; +import AutocompleteHelperController from './autocompleteHelperController'; const RECORD_MIN_TIME = 500; const POSTING_MEDIA_NOT_ALLOWED = 'Posting media content isn\'t allowed in this group.'; @@ -132,6 +133,7 @@ export default class ChatInput { readonly executedHistory: string[] = []; private canUndoFromHTML = ''; + private autocompleteHelperController: AutocompleteHelperController; private commandsHelper: CommandsHelper; private emojiHelper: EmojiHelper; private stickersHelper: StickersHelper; @@ -366,9 +368,12 @@ export default class ChatInput { this.newMessageWrapper.append(...[this.btnToggleEmoticons, this.inputMessageContainer, this.btnScheduled, this.attachMenu, this.recordTimeEl, this.fileInput].filter(Boolean)); this.rowsWrapper.append(this.replyElements.container); - this.commandsHelper = new CommandsHelper(this.rowsWrapper); - this.emojiHelper = new EmojiHelper(this.rowsWrapper, this); - this.stickersHelper = new StickersHelper(this.rowsWrapper); + this.autocompleteHelperController = new AutocompleteHelperController(); + this.autocompleteHelperController.addHelpers([ + this.commandsHelper = new CommandsHelper(this.rowsWrapper), + this.emojiHelper = new EmojiHelper(this.rowsWrapper, this), + this.stickersHelper = new StickersHelper(this.rowsWrapper) + ]); this.rowsWrapper.append(this.newMessageWrapper); this.btnCancelRecord = ButtonIcon('delete danger btn-circle z-depth-1 btn-record-cancel'); @@ -1271,7 +1276,7 @@ export default class ChatInput { } else { this.hideSuggestions() } - } else */ /* if(!matches[1] && matches[2][0] === '/') { // commands + } else */ if(!matches[1] && matches[2][0] === '/') { // commands if(this.chat.peerId > 0) { this.chat.appProfileManager.getProfileByPeerId(this.chat.peerId).then(full => { const botInfos: BotInfo.botInfo[] = [].concat(full.bot_info); @@ -1287,11 +1292,11 @@ export default class ChatInput { const found = index.search(matches[2]); const filtered = Array.from(found).map(command => commands.get(command)); - this.commandsHelper.renderCommands(filtered); + this.commandsHelper.render(filtered); console.log('found commands', found, filtered); }); } - } else */ { // emoji + } else { // emoji if(value.match(/^\s*:(.+):\s*$/)) { this.emojiHelper.toggle(true); return; @@ -1300,7 +1305,7 @@ export default class ChatInput { this.appEmojiManager.getBothEmojiKeywords().then(() => { const q = matches[2].replace(/^:/, ''); const emojis = this.appEmojiManager.searchEmojis(q); - this.emojiHelper.renderEmojis(emojis, matches[2][0] !== ':'); + this.emojiHelper.render(emojis, matches[2][0] !== ':'); //console.log(emojis); }); } diff --git a/src/components/chat/stickersHelper.ts b/src/components/chat/stickersHelper.ts index 853e9c78..6f42353b 100644 --- a/src/components/chat/stickersHelper.ts +++ b/src/components/chat/stickersHelper.ts @@ -90,7 +90,7 @@ export default class StickersHelper extends AutocompleteHelper { }); } - private init() { + protected init() { this.list = document.createElement('div'); this.list.classList.add('stickers-helper-stickers', 'super-stickers'); diff --git a/src/index.hbs b/src/index.hbs index 05f48457..c70bedcf 100644 --- a/src/index.hbs +++ b/src/index.hbs @@ -9,18 +9,18 @@ - - - - - - + + + + + + - - + + {{# each htmlWebpackPlugin.files.css }}