emoji suggestions finished

src/components/app/RightPanel.vue

@@ -31,8 +31,8 @@
     </div>
     <news v-if="!selectedChannelID "/>
     <div class="chat-input-area" v-if="selectedChannelID">
-      <div class="emoji-suggestion-outer" v-if="showEmojiSuggestions">
-        <emoji-suggestions :emojiArray="emojiSuggestionsArray"/>
+      <div class="emoji-suggestion-outer" v-if="emojiArray">
+        <emoji-suggestions :emojiArray="emojiArray"/>
       </div>
 
       <div class="message-area">
@@ -103,9 +103,7 @@ export default {
       postTimerID: null,
       getTimerID: null,
       typing: false,
-      whosTyping: "",
-      showEmojiSuggestions: false,
-      emojiSuggestionsArray: []
+      whosTyping: ""
     };
   },
   methods: {
@@ -132,7 +130,7 @@ export default {
 
       if (this.message == "") return;
       if (this.message.length > 5000) return;
-      this.showEmojiSuggestions = false;
+      (this.$store.dispatch('setEmojiArray', null));
       clearInterval(this.postTimerID);
       this.postTimerID = null;
       this.messageLength = 0;
@@ -198,48 +196,53 @@ export default {
       }
     },
     emojiSwitchKey(event) {
-      if (!this.showEmojiSuggestions) return;
+      if (!this.emojiArray) return;
 
       const keyCode = event.keyCode;
 
       if (keyCode == 38) {
         //up
-        bus.$emit("emojiSuggestions:up");
+        bus.$emit("emojiSuggestions:key", "up");
         event.preventDefault();
         return;
       }
       if (keyCode == 40) {
         //down
-        bus.$emit("emojiSuggestions:down");
+        bus.$emit("emojiSuggestions:key", "down");
         event.preventDefault();
         return;
       }
     },
-    GetWordByPos(str, pos) {
-      let left = str.substr(0, pos);
-      let right = str.substr(pos);
-
-      left = left.replace(/^.+ /g, "");
-      right = right.replace(/ .+$/g, "");
-
-      return left + right;
+    ReturnWord(text, caretPos) {
+      var index = text.indexOf(caretPos);
+      var preText = text.substring(0, caretPos);
+      if (preText.indexOf(" ") > 0) {
+        var words = preText.split(" ");
+        return words[words.length - 1]; //return last word
+      } else {
+        return preText;
+      }
     },
     showEmojiPopout(event) {
       if (event.keyCode == 38 || event.keyCode == 40) return; // up/down
 
       const cursorPosition = event.target.selectionStart;
-      const cursorWord = this.GetWordByPos(this.message, cursorPosition)
-      const cursorLetter = this.message.substring(cursorPosition - 1, cursorPosition)
+      const cursorWord = this.ReturnWord(this.message, cursorPosition);
+      const cursorLetter = this.message.substring(
+        cursorPosition - 1,
+        cursorPosition
+      );
 
-      if (cursorLetter.trim() == "" || cursorWord.endsWith(":")) 
-        return this.showEmojiSuggestions = false;
-      
-      if (cursorWord.startsWith(":") && cursorWord.length >= 3) {
-        const searchArr = emojiParser.searchEmoji(cursorWord.slice(1, -1));
-        if (searchArr.length <= 0) return (this.showEmojiSuggestions = false);
-        this.emojiSuggestionsArray = searchArr;
-        this.showEmojiSuggestions = true;
-      }
+      if (cursorLetter.trim() == "" || cursorWord.endsWith(":"))
+        return (this.$store.dispatch('setEmojiArray', null));
+
+      if (!cursorWord.startsWith(":") || cursorWord.length <= 2)
+        return (this.$store.dispatch('setEmojiArray', null));
+
+      const searchArr = emojiParser.searchEmoji(cursorWord.slice(1, -1));
+      if (searchArr.length <= 0) return (this.$store.dispatch('setEmojiArray', null));
+
+      (this.$store.dispatch('setEmojiArray', searchArr));
     },
     async onInput(event) {
       this.resize(event);
@@ -254,6 +257,18 @@ export default {
       this.resize(event);
       this.showEmojiPopout(event);
     },
+    enterEmojiSuggestion(){
+      this.$refs["input-box"].focus();
+      const emojiShortCode = `:${this.emojiArray[this.emojiIndex].shortcodes[0]}:`
+      const cursorPosition = this.$refs['input-box'].selectionStart;
+      const cursorWord = this.ReturnWord(this.message, cursorPosition);
+
+      const start = cursorPosition - cursorWord.length;
+      const end = cursorPosition;
+
+      this.message = this.message.substring(0, start) + emojiShortCode + this.message.substring(end);
+      return (this.$store.dispatch('setEmojiArray', null));
+    },
     keyDown(event) {
       this.resize(event);
       this.emojiSwitchKey(event);
@@ -262,6 +277,10 @@ export default {
         // and the shift key is not held
         if (!event.shiftKey) {
           event.preventDefault();
+          if (this.emojiArray){
+            this.enterEmojiSuggestion();
+            return;
+          }
           this.sendMessage();
         }
       }
@@ -333,6 +352,7 @@ export default {
       }, 2500);
     };
     bus.$on("newMessage", this.hideTypingStatus);
+    bus.$on("emojiSuggestions:Selected", this.enterEmojiSuggestion)
     //dismiss notification on focus
     window.onfocus = () => {
       bus.$emit("title:change", "Nertivia");
@@ -349,6 +369,7 @@ export default {
   },
   beforeDestroy() {
     bus.$off("newMessage", this.hideTypingStatus);
+    bus.$off("emojiSuggestions:Selected", this.enterEmojiSuggestion)
     delete this.$options.sockets.typingStatus;
   },
   computed: {
@@ -381,6 +402,12 @@ export default {
     },
     channelName() {
       return this.$store.getters.channelName;
+    },
+    emojiArray() {
+      return this.$store.getters.emojiArray;
+    },
+    emojiIndex() {
+      return this.$store.getters.getEmojiIndex;
     }
   }
 };

src/components/app/emojiSuggestions.vue

@@ -2,8 +2,9 @@
   <div class="emoji-suggetions-list">
     <div
       v-for="(emoji, index) in $props.emojiArray.slice(0,10)"
-      :class="{emoji: true, selected: index === selectedIndex}"
+      :class="{emojiItem: true, selected: index === emojiIndex}"
       @mouseover="hoverEvent"
+      @click="clickEvent"
       :key="emoji.hexcode"
     >
       <div class="preview" v-html="emojiParser(emoji.unicode)"></div>
@@ -17,48 +18,51 @@ import { bus } from "@/main";
 import emojiParser from "@/utils/emojiParser.js";
 export default {
   props: ["emojiArray"],
-  data() {
-    return {
-      selectedIndex: 0
-    };
-  },
   methods: {
     emojiParser(emoji) {
       return emojiParser.replaceEmojis(emoji);
     },
     hoverEvent(event) {
-      const emoji = event.target.closest(".emoji");
+      const emoji = event.target.closest(".emojiItem");
       const parent = event.target.parentElement.children;
-      if (!emoji || !emoji) return;
+      if (!emoji) return;
       const index = [...parent].findIndex(el => el === emoji);
-      if (index >= 0) this.selectedIndex = index;
+      if (index >= 0) this.$store.dispatch("changeIndex", index);
     },
     KeySwitch(key) {
       if (key == "up") {
-        if (this.selectedIndex == 0)
-          return (this.selectedIndex =
-            this.$props.emojiArray.slice(0, 10).length - 1);
+        if (this.emojiIndex == 0)
+          return this.$store.dispatch(
+            "changeIndex",
+            this.$props.emojiArray.slice(0, 10).length - 1
+          );
 
-        this.selectedIndex--;
+        this.$store.dispatch("changeIndex", this.emojiIndex - 1);
       }
       if (key == "down") {
-        if (
-          this.selectedIndex ==
-          this.$props.emojiArray.slice(0, 10).length - 1
-        )
-          return (this.selectedIndex = 0);
-
-        this.selectedIndex++;
+        if (this.emojiIndex == this.$props.emojiArray.slice(0, 10).length - 1)
+          return this.$store.dispatch("changeIndex", 0);
+        this.$store.dispatch("changeIndex", this.emojiIndex + 1);
       }
     },
+    clickEvent() {
+      bus.$emit('emojiSuggestions:Selected')
+    }
   },
   mounted() {
-    bus.$on("emojiSuggestions:up", () => this.KeySwitch("up"));
-    bus.$on("emojiSuggestions:down", () => this.KeySwitch("down"));
+    bus.$on("emojiSuggestions:key", this.KeySwitch);
+  },
+  destroyed() {
+    bus.$off("emojiSuggestions:key", this.KeySwitch);
   },
   watch: {
     emojiArray() {
-      this.selectedIndex = 0;
+      this.$store.dispatch("changeIndex", 0);
+    }
+  },
+  computed: {
+    emojiIndex() {
+      return this.$store.getters.getEmojiIndex;
     }
   }
 };
@@ -96,7 +100,7 @@ export default {
 .short-code {
   margin-right: 10px;
 }
-.emoji {
+.emojiItem {
   display: flex;
   padding: 5px;
   align-content: center;

src/store/index.js

@@ -8,6 +8,7 @@ import notificationsModule from './modules/notificationsModule';
 import settingsModule from './modules/settingsModule';
 import uploadFilesModule from './modules/uploadFilesModule';
 import popoutsModule from './modules/popoutsModule';
+import emojiSuggestionModule from './modules/emojiSuggestionModule';
 import {
   router
 } from './../router'
@@ -23,7 +24,8 @@ export const store = new Vuex.Store({
     socketModule,
     settingsModule,
     uploadFilesModule,
-    popoutsModule
+    popoutsModule,
+    emojiSuggestionModule
   },
   state: {
 

src/store/modules/emojiSuggestionModule.js

@@ -0,0 +1,47 @@
+import axios from 'axios'
+import Vue from 'vue'
+import {
+  bus
+} from '../../main'
+import VueRouter from 'vue-router';
+import NotificationSounds from '@/utils/notificationSound';
+
+const state = {
+  array: null,
+  index: 0,
+}
+
+const getters = {
+  emojiArray(state) {
+    return state.array;
+  },
+  getEmojiIndex(state) {
+    return state.index;
+  }
+}
+
+const actions = {
+  setEmojiArray(context, array) {
+    context.commit('setEmojiArray', array)
+  },
+  changeIndex(context, index) {
+    context.commit('changeIndex', index)
+  }
+}
+
+const mutations = {
+  setEmojiArray(state, array) {
+    Vue.set(state, "array", array);
+  },
+  changeIndex(state, index) {
+    Vue.set(state, "index", index);
+  }
+}
+
+export default {
+  namespace: true,
+  state,
+  getters,
+  actions,
+  mutations
+}