From c59494f6046330a377871180c20d025544cba7c8 Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Sat, 10 Mar 2018 05:29:04 +0200
Subject: [PATCH] Emote autocomplete ui

---
 client/src/builtin/EmoteModule.js             | 11 +++++++++
 client/src/ui/automanip.js                    |  9 ++++---
 client/src/ui/bdui.js                         |  1 +
 .../src/ui/components/common/Autocomplete.vue | 24 ++++++++++++++++---
 4 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/client/src/builtin/EmoteModule.js b/client/src/builtin/EmoteModule.js
index 1034df3a..9bb29aaa 100644
--- a/client/src/builtin/EmoteModule.js
+++ b/client/src/builtin/EmoteModule.js
@@ -99,4 +99,15 @@ export default class {
         const filtered = emotes.filter(emote => re.test(emote.id));
         return filtered.slice(0, 10);
     }
+
+    static filter(regex, limit) {
+        let index = 0;
+        return emotes.filter(emote => {
+            if (index >= limit) return false;
+            if (regex.test(emote.id)) {
+                index++;
+                return true;
+            }
+        });
+    }
 }
diff --git a/client/src/ui/automanip.js b/client/src/ui/automanip.js
index 59497ed9..9c4c7afd 100644
--- a/client/src/ui/automanip.js
+++ b/client/src/ui/automanip.js
@@ -77,7 +77,8 @@ export default class extends EventListener {
             { id: 'server-switch', callback: this.manipAll },
             { id: 'channel-switch', callback: this.manipAll },
             { id: 'discord:MESSAGE_CREATE', callback: this.markupInjector },
-            { id: 'discord:MESSAGE_UPDATE', callback: this.markupInjector }
+            { id: 'discord:MESSAGE_UPDATE', callback: this.markupInjector },
+            { id: 'gkh:keyup', callback: this.injectAutocomplete }
         ];
     }
 
@@ -198,7 +199,9 @@ export default class extends EventListener {
         return document.getElementById('app-mount');
     }
 
-    injectAutocomplete() {
+    injectAutocomplete(e) {
+        if (document.querySelector('.bd-autocomplete')) return;
+        if (!e.target.closest('[class*=channelTextArea]')) return;
         const root = document.createElement('span');
         const parent = document.querySelector('[class*="channelTextArea"] > [class*="inner"]');
         if (!parent) return;
@@ -207,7 +210,7 @@ export default class extends EventListener {
             root,
             DOM.createElement('span'),
             { Autocomplete },
-            `<Autocomplete/>`,
+           `<Autocomplete initial="${e.target.value}"/>`,
             true
         );
     }
diff --git a/client/src/ui/bdui.js b/client/src/ui/bdui.js
index 1a7c3e2d..091193a2 100644
--- a/client/src/ui/bdui.js
+++ b/client/src/ui/bdui.js
@@ -51,6 +51,7 @@ export default class {
             server: TempApi.currentGuild,
             channel: TempApi.currentChannel
         };
+        window.addEventListener('keyup', e => Events.emit('gkh:keyup', e));
         this.autoManip = new AutoManip();
         const defer = setInterval(() => {
             if (!this.profilePopupModule) return;
diff --git a/client/src/ui/components/common/Autocomplete.vue b/client/src/ui/components/common/Autocomplete.vue
index 517e59ae..c58ea64c 100644
--- a/client/src/ui/components/common/Autocomplete.vue
+++ b/client/src/ui/components/common/Autocomplete.vue
@@ -15,7 +15,7 @@
                 <div class="bd-autocompleteSelector">
                     <div class="bd-autocompleteTitle">
                         Emotes Matching:
-                        <strong>Kappa</strong>
+                        <strong>{{title || initial}}</strong>
                     </div>
                 </div>
             </div>
@@ -32,14 +32,23 @@
 </template>
 <script>
     import { EmoteModule } from 'builtin';
+    import { Events } from 'modules';
     export default {
         data() {
             return {
-                emotes: []
+                emotes: [],
+                title: null
             }
         },
+        props: ['initial'],
         beforeMount() {
-            this.emotes = EmoteModule.filterTest();
+            this.emotes = EmoteModule.filter(new RegExp(this.initial, 'i'), 10);
+        },
+        created() {
+            document.querySelector('.chat textarea').addEventListener('keyup', this.searchEmotes);
+        },
+        destroyed() {
+            document.querySelector('.chat textarea').removeEventListener('keyup', this.searchEmotes);
         },
         methods: {
             getEmoteSrc(emote) {
@@ -47,6 +56,15 @@
                 if (value.id) value = value.id;
                 const uri = emote.type === 2 ? 'https://cdn.betterttv.net/emote/:id/1x' : emote.type === 1 ? 'https://cdn.frankerfacez.com/emoticon/:id/1' : 'https://static-cdn.jtvnw.net/emoticons/v1/:id/1.0';
                 return uri.replace(':id', value);
+            },
+            searchEmotes(e) {
+                const sterm = e.target.value.split(' ').slice(-1).pop();
+                if (sterm.length < 3) {
+                    this.emotes = null;
+                    return;
+                }
+                this.title = sterm;
+                this.emotes = EmoteModule.filter(new RegExp(sterm, 'i'), 10);
             }
         }
     }