From 41ce5ae36aa38c7dbacfeeea360c4790aa907e4e Mon Sep 17 00:00:00 2001 From: supertiger Date: Sat, 16 Mar 2019 17:57:44 +0000 Subject: [PATCH] improved emoji suggestions open method --- src/components/app/News.vue | 105 +++++++++++++----------- src/components/app/RightPanel.vue | 86 ++++++++++++++----- src/components/app/emojiSuggestions.vue | 85 +++++++++++++++---- src/utils/emojiParser.js | 17 ++-- src/utils/messageFormatter.js | 14 ++-- 5 files changed, 206 insertions(+), 101 deletions(-) diff --git a/src/components/app/News.vue b/src/components/app/News.vue index caf6e8b..da44f79 100644 --- a/src/components/app/News.vue +++ b/src/components/app/News.vue @@ -3,74 +3,72 @@
Changes in this release -
-
{{changelog.date}}
-
{{changelog.title}}
-
- -
- What's new?
-
    -
  • {{wnew}}
    • -
-
-
- Issues fixed
-
    -
  • {{wfix}}
    • -
-
-
- Up next
-
    -
  • {{wnext}}
    • -
-
-
- {{changelog.msg}} -
- +
+
+
{{change.date}}
+
{{change.title}}
+
+
+
+ What's new? +
+
    +
  • {{wnew}}
    • +
-
+
+ Issues fixed +
+
    +
  • {{wfix}}
    • +
+
+
+ Up next +
+
    +
  • {{wnext}}
    • +
+
+
{{change.msg}}
+
+
Planned Features

Features that are coming soon:

    -
  • Online, Offline status (Done)
    • -
  • Profile picture
    • -
  • Typing indicator
    • -
  • Sending files
    • +
  • Online, Offline status(Done)
    • +
  • Profile picture (done)
    • +
  • Typing indicator (done)
    • +
  • Sending files (done)
  • Custom emojis
  • Guilds
-
diff --git a/src/components/app/RightPanel.vue b/src/components/app/RightPanel.vue index aaf4612..64a20ce 100644 --- a/src/components/app/RightPanel.vue +++ b/src/components/app/RightPanel.vue @@ -9,13 +9,13 @@ {{channelName}} -
+
- +
+
@@ -44,8 +45,8 @@ rows="1" ref="input-box" placeholder="Message" - @keydown="chatInput" - @keyup="delayedResize" + @keydown="keyDown" + @keyup="keyUp" @change="resize" @input="onInput" v-model="message" @@ -131,6 +132,7 @@ export default { if (this.message == "") return; if (this.message.length > 5000) return; + this.showEmojiSuggestions = false; clearInterval(this.postTimerID); this.postTimerID = null; this.messageLength = 0; @@ -150,6 +152,10 @@ export default { }); this.message = ""; + + let input = this.$refs["input-box"]; + input.style.height = "1em"; + this.$store.dispatch("updateChannelLastMessage", this.selectedChannelID); const { ok, error, result } = await messagesService.post( this.selectedChannelID, @@ -191,21 +197,52 @@ export default { input.style.height = `calc(${input.scrollHeight}px - 1em)`; } }, - delayedResize(event) { - this.resize(event); + emojiSwitchKey(event) { + if (!this.showEmojiSuggestions) return; + + const keyCode = event.keyCode; + + if (keyCode == 38) { + //up + bus.$emit("emojiSuggestions:up"); + event.preventDefault(); + return; + } + if (keyCode == 40) { + //down + bus.$emit("emojiSuggestions:down"); + event.preventDefault(); + return; + } }, - 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; + 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; + }, + 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) + + 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; + } }, async onInput(event) { - this.showEmojiPopout(); - this.delayedResize(event); + this.resize(event); this.messageLength = this.message.length; const value = event.target.value.trim(); if (value && this.postTimerID == null) { @@ -213,9 +250,13 @@ export default { await typingService.post(this.selectedChannelID); } }, - chatInput(event) { - this.delayedResize(event); - + keyUp(event) { + this.resize(event); + this.showEmojiPopout(event); + }, + keyDown(event) { + this.resize(event); + this.emojiSwitchKey(event); // when enter is press if (event.keyCode == 13) { // and the shift key is not held @@ -331,8 +372,9 @@ export default { channel() { return this.$store.getters.channels[this.selectedChannelID]; }, - messages() { - return this.$store.getters.messages; + selectedChannelMessages() { + const selectedChannel = this.$store.getters.selectedChannelID; + return this.$store.getters.messages[selectedChannel]; }, selectedChannelID() { return this.$store.getters.selectedChannelID; diff --git a/src/components/app/emojiSuggestions.vue b/src/components/app/emojiSuggestions.vue index c0db650..c4a4c9c 100644 --- a/src/components/app/emojiSuggestions.vue +++ b/src/components/app/emojiSuggestions.vue @@ -1,27 +1,75 @@ - diff --git a/src/utils/emojiParser.js b/src/utils/emojiParser.js index 6da3108..5c313df 100644 --- a/src/utils/emojiParser.js +++ b/src/utils/emojiParser.js @@ -1,3 +1,4 @@ +import twemoji from "twemoji"; import emojis from "emojibase-data/en/compact.json"; import matchSorter from "match-sorter"; import { @@ -15,17 +16,15 @@ export default { return x }); }, + replaceEmojis: (string) => { + return twemoji.parse(string, + function (icon, options, variant) { + if (!icon) return string; + return require("twemoji/2/svg/" + icon + ".svg") + }) + }, searchEmoji: (shortCode) => { - let array = [] - for (let index = 0; index < emojis.length; index++) { - const element = emojis[index]; - for (let i = 0; i < element.shortcodes.length; i++) { - const el2 = element.shortcodes[i]; - if (el2.includes(shortCode)) array.push(element); - - } - } return matchSorter(emojis, shortCode, {keys: ['shortcodes']}); } } diff --git a/src/utils/messageFormatter.js b/src/utils/messageFormatter.js index 9a6e8f9..d685e28 100644 --- a/src/utils/messageFormatter.js +++ b/src/utils/messageFormatter.js @@ -1,15 +1,11 @@ import futoji from 'futoji' import twemoji from 'twemoji' +import emojiParser from '@/utils/emojiParser'; export default (message) => { - message = twemoji.parse(escapeHtml(message), - function (icon, options, variant) { - if (!icon) return message; - return require("twemoji/2/svg/" + icon + ".svg") - }) futoji.addTransformer({ name: 'bold-and-italic', @@ -58,7 +54,13 @@ export default (message) => { recursive: false, transformer: text => `${text}`, }) - return futoji.format(message); + + + message = futoji.format(escapeHtml(message)); + + message = emojiParser.replaceEmojis(message); + + return message; } /**