added suggestions list

package-lock.json

@@ -6759,6 +6759,20 @@
         "object-visit": "^1.0.0"
       }
     },
+    "match-sorter": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-2.3.0.tgz",
+      "integrity": "sha512-0/F1ezfjs5vegTvdH0sJEDrIi+w7wvUeDW/yqLMsK6jQWgNNJRv8jYCLBc8QrCxQNpSEpei6vrOcnJwAbnYhkw==",
+      "requires": {
+        "diacritic": "0.0.2"
+      },
+      "dependencies": {
+        "diacritic": {
+          "version": "0.0.2",
+          "bundled": true
+        }
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",

package.json

@@ -14,6 +14,7 @@
     "filesize": "^4.1.2",
     "futoji": "^0.2.4",
     "jquery": "^3.3.1",
+    "match-sorter": "^2.3.0",
     "socket.io": "^2.2.0",
     "socket.io-client": "^2.2.0",
     "twemoji": "^11.3.0",

src/components/app/RightPanel.vue

@@ -29,8 +29,11 @@
         <uploadsQueue v-if="uploadQueue !== undefined" :queue="uploadQueue"/>
       </div>
     </div>
-    <news v-else/>
+    <news v-if="!selectedChannelID && !messages[selectedChannelID]"/>
     <div class="chat-input-area" v-if="selectedChannelID">
+      <div class="emoji-suggestion-outer" v-if="showEmojiSuggestions">
+        <emoji-suggestions :emojiArray="emojiSuggestionsArray"/>
+      </div>
       <div class="message-area">
         <input type="file" ref="sendFileBrowse" @change="attachmentChange" class="hidden">
         <div class="attachment-button" @click="attachmentButton">
@@ -80,6 +83,7 @@ import Message from "../../components/app/MessageTemplate.vue";
 import Spinner from "@/components/Spinner.vue";
 import TypingStatus from "@/components/app/TypingStatus.vue";
 import uploadsQueue from "@/components/app/uploadsQueue.vue";
+import emojiSuggestions from "@/components/app/emojiSuggestions.vue";
 import emojiParser from "@/utils/emojiParser.js";
 
 export default {
@@ -88,7 +92,8 @@ export default {
     Spinner,
     News,
     TypingStatus,
-    uploadsQueue
+    uploadsQueue,
+    emojiSuggestions
   },
   data() {
     return {
@@ -98,7 +103,8 @@ export default {
       getTimerID: null,
       typing: false,
       whosTyping: "",
-      showEmojiSuggestions: false
+      showEmojiSuggestions: false,
+      emojiSuggestionsArray: []
     };
   },
   methods: {
@@ -132,7 +138,6 @@ export default {
       const msg = emojiParser.replaceShortcode(this.message);
       const tempID = this.generateNum(25);
 
-
       this.$store.dispatch("addMessage", {
         sender: true,
         channelID: this.selectedChannelID,
@@ -168,7 +173,7 @@ export default {
     },
     async postTimer() {
       this.postTimerID = setInterval(async () => {
-        if (this.$refs["input-box"].value.trim() == "") {
+        if (this.message.trim() == "") {
           clearInterval(this.postTimerID);
           return (this.postTimerID = null);
         }
@@ -189,16 +194,17 @@ export default {
     delayedResize(event) {
       this.resize(event);
     },
-    showEmojiPopout(shortcode) {
+    showEmojiPopout() {
-      if (shortcode.length < 3) return this.showEmojiSuggestions = false;
+      const shortcode = this.message.split(" ").pop();
-      const searchArr = emojiParser.searchEmoji(shortcode.slice(1, -1))
+      if (!shortcode || !shortcode.startsWith(":") || shortcode.endsWith(":") || shortcode.length < 3)
-      if (searchArr.length <=0) return this.showEmojiSuggestions = false;
+        return (this.showEmojiSuggestions = false);
-      return this.showEmojiSuggestions = true;
+      const searchArr = emojiParser.searchEmoji(shortcode.slice(1, -1));
-      //console.log(searchArr)
+      if (searchArr.length <= 0) return (this.showEmojiSuggestions = false);
-      //TODO make a component.
+      this.showEmojiSuggestions = true;
-      
+      this.emojiSuggestionsArray = searchArr;
     },
     async onInput(event) {
+      this.showEmojiPopout();
       this.delayedResize(event);
       this.messageLength = this.message.length;
       const value = event.target.value.trim();
@@ -206,9 +212,6 @@ export default {
         this.postTimer();
         await typingService.post(this.selectedChannelID);
       }
-
-      const shortCode = this.message.split(" ").pop()
-      if (shortCode && shortCode.startsWith(":")) this.showEmojiPopout(shortCode);
     },
     chatInput(event) {
       this.delayedResize(event);
@@ -370,7 +373,9 @@ export default {
   display: flex;
   flex-shrink: 0;
 }
-
+.emoji-suggestion-outer {
+  position: relative;
+}
 .show-menu-button {
   display: inline-block;
   margin: auto;
@@ -399,6 +404,7 @@ export default {
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  position: relative;
 }
 .message-logs {
   overflow: auto;
@@ -418,6 +424,7 @@ export default {
   flex-direction: column;
   padding-top: 10px;
   margin-bottom: 5px;
+  position: relative;
 }
 
 .attachment-button {

src/components/app/emojiSuggestions.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="emoji-suggetions-list">
+    <div class="emoji" v-for="emoji in $props.emojiArray" :key="emoji.hexcode">
+      <div class="preview">{{emoji.unicode}}</div>
+      <div class="short-code">:{{emoji.shortcodes[0]}}:</div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+
+
+
+export default {
+  props: ['emojiArray'],
+  methods: {},
+  computed: {}
+};
+</script>
+
+
+<style scoped>
+.emoji-suggetions-list{
+  position: absolute;
+  bottom: 0;
+  left: 70px;
+  max-height: 400px;
+  overflow-y: auto;
+
+  background: rgba(32, 32, 32, 0.87);
+  color: white;
+  padding: 5px;
+  transition: 0.3s;
+  border-radius: 5px;
+  user-select: none;
+  cursor: default;
+}
+.emoji-suggetions-list:hover{
+  background: rgba(32, 32, 32, 0.966);
+}
+.preview{
+
+  margin-right: 5px;
+}
+.name{
+  flex: 1;
+}
+.short-code {
+  margin-right: 10px;
+}
+.emoji{
+  display: flex;
+  padding: 5px;
+}
+.emoji.selected {
+
+}
+</style>

src/utils/emojiParser.js

@@ -1,4 +1,5 @@
 import emojis from "emojibase-data/en/compact.json";
+import matchSorter from "match-sorter";
 import {
 	groups
 } from "emojibase-data/meta/groups.json";
@@ -22,10 +23,10 @@ export default {
 			for (let i = 0; i < element.shortcodes.length; i++) {
 				const el2 = element.shortcodes[i];
 				if (el2.includes(shortCode)) array.push(element);
-				if (array.length >= 10) return array;
+
 			}
 		}
-		return array;
+		return matchSorter(emojis, shortCode, {keys: ['shortcodes']});
 	}
 }
 

src/views/App.vue

@@ -162,16 +162,19 @@ body {
 /* Track */
 ::-webkit-scrollbar-track {
   background: #8080806b;
+  border-radius: 10px;
 }
 
 /* Handle */
 ::-webkit-scrollbar-thumb {
   background: #f5f5f559;
+    border-radius: 10px;
 }
 
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
   background: #f5f5f59e;
+    border-radius: 10px;
 }
 </style>