Temp

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) {

src/components/chat/autocompleteHelperController.ts

@@ -0,0 +1,21 @@
+import AutocompleteHelper from "./autocompleteHelper";
+
+export default class AutocompleteHelperController {
+  private helpers: Set<AutocompleteHelper> = 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);
+  }
+}

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;

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;

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);
       });
     }

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');
 

src/index.hbs

@@ -9,18 +9,18 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 
 
   <!-- do not paste other icons here, only change these. 'icon' type must be single -->
-  <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/apple-touch-icon.png?v=jw3mK7G9Ry">
-  <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon-32x32.png?v=jw3mK7G9Ry">
-  <!--<link rel="icon" type="image/png" sizes="192x192" href="/assets/img/android-chrome-192x192.png?v=jw3mK7G9Ry">
-  <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon-16x16.png?v=jw3mK7G9Ry">-->
-  <link rel="manifest" href="/assets/img/site.webmanifest?v=jw3mK7G9Ry">
-  <link rel="mask-icon" href="/assets/img/safari-pinned-tab.svg?v=jw3mK7G9Ry" color="#3390ec">
-  <!--<link rel="shortcut icon" href="/assets/img/favicon.ico?v=jw3mK7G9Ry">-->
+  <link rel="apple-touch-icon" sizes="180x180" href="assets/img/apple-touch-icon.png?v=jw3mK7G9Ry">
+  <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png?v=jw3mK7G9Ry">
+  <!--<link rel="icon" type="image/png" sizes="192x192" href="assets/img/android-chrome-192x192.png?v=jw3mK7G9Ry">
+  <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon-16x16.png?v=jw3mK7G9Ry">-->
+  <link rel="manifest" href="assets/img/site.webmanifest?v=jw3mK7G9Ry">
+  <link rel="mask-icon" href="assets/img/safari-pinned-tab.svg?v=jw3mK7G9Ry" color="#3390ec">
+  <!--<link rel="shortcut icon" href="assets/img/favicon.ico?v=jw3mK7G9Ry">-->
   <meta name="apple-mobile-web-app-title" content="Telegram WebK">
   <meta name="application-name" content="Telegram WebK">
   <meta name="msapplication-TileColor" content="#2d89ef">
-  <meta name="msapplication-TileImage" content="/assets/img/mstile-144x144.png?v=jw3mK7G9Ry">
-  <meta name="msapplication-config" content="/assets/img/browserconfig.xml?v=jw3mK7G9Ry">
+  <meta name="msapplication-TileImage" content="assets/img/mstile-144x144.png?v=jw3mK7G9Ry">
+  <meta name="msapplication-config" content="assets/img/browserconfig.xml?v=jw3mK7G9Ry">
   <meta name="theme-color" content="#ffffff">
   <meta name="color-scheme" content="light">
   {{# each htmlWebpackPlugin.files.css }}