diff --git a/package-lock.json b/package-lock.json index 70861d2..09c52d7 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index d588202..507f32c 100644 --- a/package.json +++ b/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", diff --git a/src/components/app/RightPanel.vue b/src/components/app/RightPanel.vue index f4ec9c0..aaf4612 100644 --- a/src/components/app/RightPanel.vue +++ b/src/components/app/RightPanel.vue @@ -29,8 +29,11 @@ - +
+
+ +
@@ -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) { - if (shortcode.length < 3) return this.showEmojiSuggestions = false; - const searchArr = emojiParser.searchEmoji(shortcode.slice(1, -1)) - if (searchArr.length <=0) return this.showEmojiSuggestions = false; - return this.showEmojiSuggestions = true; - //console.log(searchArr) - //TODO make a component. - + showEmojiPopout() { + const shortcode = this.message.split(" ").pop(); + if (!shortcode || !shortcode.startsWith(":") || shortcode.endsWith(":") || shortcode.length < 3) + return (this.showEmojiSuggestions = false); + const searchArr = emojiParser.searchEmoji(shortcode.slice(1, -1)); + if (searchArr.length <= 0) return (this.showEmojiSuggestions = false); + 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 { diff --git a/src/components/app/emojiSuggestions.vue b/src/components/app/emojiSuggestions.vue new file mode 100644 index 0000000..c0db650 --- /dev/null +++ b/src/components/app/emojiSuggestions.vue @@ -0,0 +1,59 @@ + + + + + + + diff --git a/src/utils/emojiParser.js b/src/utils/emojiParser.js index 6e5ecf2..6da3108 100644 --- a/src/utils/emojiParser.js +++ b/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']}); } } diff --git a/src/views/App.vue b/src/views/App.vue index 88c7ecd..e5707f9 100644 --- a/src/views/App.vue +++ b/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; }