(feature) add emojis autocompletion

Author: antoine92190

src/ChatWindow/Room/Room.vue

@@ -132,14 +132,21 @@
 				</template>
 			</room-message-reply>
 
+			<room-emojis
+				:filtered-emojis="filteredEmojis"
+				@select-emoji="selectEmoji($event)"
+			/>
+
 			<room-users-tag
 				:filtered-users-tag="filteredUsersTag"
 				@select-user-tag="selectUserTag($event)"
 			/>
 
 			<div
 				class="vac-box-footer"
-				:class="{ 'vac-app-box-shadow': filteredUsersTag.length }"
+				:class="{
+					'vac-app-box-shadow': filteredEmojis.length || filteredUsersTag.length
+				}"
 			>
 				<div
 					v-if="showAudio && !imageFile && !videoFile"
@@ -330,6 +337,7 @@ import EmojiPicker from '../../components/EmojiPicker'
 import RoomHeader from './RoomHeader'
 import RoomMessageReply from './RoomMessageReply'
 import RoomUsersTag from './RoomUsersTag'
+import RoomEmojis from './RoomEmojis'
 import Message from '../Message/Message'
 
 import filteredUsers from '../../utils/filter-items'
@@ -348,6 +356,7 @@ export default {
 		RoomHeader,
 		RoomMessageReply,
 		RoomUsersTag,
+		RoomEmojis,
 		Message
 	},
 
@@ -402,6 +411,7 @@ export default {
 			scrollMessagesCount: 0,
 			newMessages: [],
 			keepKeyboardOpen: false,
+			filteredEmojis: [],
 			filteredUsersTag: [],
 			selectedUsersTag: [],
 			textareaCursorPosition: null,
@@ -521,16 +531,18 @@ export default {
 				}
 			}
 
-			this.updateShowUsersTag()
+			this.updateFooterList('@')
+			this.updateFooterList(':')
 		})
 
 		this.$refs['roomTextarea'].addEventListener('click', () => {
 			if (isMobile) this.keepKeyboardOpen = true
-			this.updateShowUsersTag()
+			this.updateFooterList('@')
+			this.updateFooterList(':')
 		})
 
 		this.$refs['roomTextarea'].addEventListener('blur', () => {
-			this.resetUsersTag()
+			this.resetFooterList()
 			if (isMobile) setTimeout(() => (this.keepKeyboardOpen = false), 0)
 		})
 	},
@@ -550,9 +562,15 @@ export default {
 				this.scrollIcon = bottomScroll > 500 || this.scrollMessagesCount
 			}, 200)
 		},
-		updateShowUsersTag() {
+		updateFooterList(tagChar) {
 			if (!this.$refs['roomTextarea']) return
-			if (!this.room.users || this.room.users.length <= 2) return
+
+			if (
+				tagChar === '@' &&
+				(!this.room.users || this.room.users.length <= 2)
+			) {
+				return
+			}
 
 			if (
 				this.textareaCursorPosition ===
@@ -567,7 +585,7 @@ export default {
 
 			while (
 				position > 0 &&
-				this.message.charAt(position - 1) !== '@' &&
+				this.message.charAt(position - 1) !== tagChar &&
 				this.message.charAt(position - 1) !== ' '
 			) {
 				position--
@@ -577,25 +595,23 @@ export default {
 			const notLetterNumber = !beforeTag.match(/^[0-9a-zA-Z]+$/)
 
 			if (
-				this.message.charAt(position - 1) === '@' &&
+				this.message.charAt(position - 1) === tagChar &&
 				(!beforeTag || beforeTag === ' ' || notLetterNumber)
 			) {
 				const query = this.message.substring(
 					position,
 					this.textareaCursorPosition
 				)
-
-				this.filteredUsersTag = filteredUsers(
-					this.room.users,
-					'username',
-					query,
-					true
-				).filter(user => user._id !== this.currentUserId)
+				if (tagChar === ':') {
+					this.updateEmojis(query)
+				} else if (tagChar === '@') {
+					this.updateShowUsersTag(query)
+				}
 			} else {
-				this.resetUsersTag()
+				this.resetFooterList()
 			}
 		},
-		selectUserTag(user) {
+		getCharPosition() {
 			const cursorPosition = this.$refs['roomTextarea'].selectionStart
 
 			let position = cursorPosition
@@ -611,6 +627,37 @@ export default {
 				endPosition++
 			}
 
+			return { position, endPosition }
+		},
+		updateEmojis(query) {
+			if (!query) return
+
+			const emojisListKeys = Object.keys(this.emojisList)
+			const matchingKeys = emojisListKeys.filter(key => key.startsWith(query))
+
+			this.filteredEmojis = matchingKeys.map(key => this.emojisList[key])
+		},
+		selectEmoji(emoji) {
+			const { position, endPosition } = this.getCharPosition()
+
+			this.message =
+				this.message.substr(0, position - 1) +
+				emoji +
+				this.message.substr(endPosition, this.message.length - 1)
+
+			this.focusTextarea()
+		},
+		updateShowUsersTag(query) {
+			this.filteredUsersTag = filteredUsers(
+				this.room.users,
+				'username',
+				query,
+				true
+			).filter(user => user._id !== this.currentUserId)
+		},
+		selectUserTag(user) {
+			const { position, endPosition } = this.getCharPosition()
+
 			const space = this.message.substr(endPosition, endPosition).length
 				? ''
 				: ' '
@@ -625,7 +672,8 @@ export default {
 
 			this.focusTextarea()
 		},
-		resetUsersTag() {
+		resetFooterList() {
+			this.filteredEmojis = []
 			this.filteredUsersTag = []
 			this.textareaCursorPosition = null
 		},
@@ -657,7 +705,7 @@ export default {
 			}
 
 			this.selectedUsersTag = []
-			this.resetUsersTag()
+			this.resetFooterList()
 			this.resetTextareaSize()
 			this.message = ''
 			this.editedMessage = {}

src/ChatWindow/Room/RoomEmojis.vue

@@ -0,0 +1,67 @@
+<template>
+	<transition name="vac-slide-up">
+		<div
+			v-if="filteredEmojis.length"
+			class="vac-emojis-container vac-app-box-shadow"
+			:style="{ bottom: `${$parent.$refs.roomFooter.clientHeight}px` }"
+		>
+			<div
+				v-for="emoji in filteredEmojis"
+				:key="emoji"
+				class="vac-emoji-element"
+				@click="$emit('select-emoji', emoji)"
+			>
+				{{ emoji }}
+			</div>
+		</div>
+	</transition>
+</template>
+
+<script>
+export default {
+	name: 'RoomEmojis',
+
+	props: {
+		filteredEmojis: { type: Array, required: true }
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.vac-emojis-container {
+	position: absolute;
+	width: 100%;
+	padding: 10px 8px;
+	background: var(--chat-footer-bg-color);
+	display: flex;
+	align-items: center;
+	overflow: auto;
+
+	.vac-emoji-element {
+		padding: 0 8px;
+		font-size: 30px;
+		border-radius: 4px;
+		cursor: pointer;
+
+		&:hover {
+			background: var(--chat-footer-bg-color-tag-active);
+			transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+		}
+
+		&:not(:hover) {
+			transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+		}
+	}
+}
+
+@media only screen and (max-width: 768px) {
+	.vac-emojis-container {
+		padding: 7px 5px;
+
+		.vac-emoji-element {
+			padding: 0 7px;
+			font-size: 26px;
+		}
+	}
+}
+</style>

src/ChatWindow/Room/RoomUsersTag.vue

@@ -9,7 +9,7 @@
 				v-for="user in filteredUsersTag"
 				:key="user._id"
 				class="vac-tags-box"
-				@click="selectUserTag(user)"
+				@click="$emit('select-user-tag', user)"
 			>
 				<div class="vac-tags-info">
 					<div
@@ -32,12 +32,6 @@ export default {
 
 	props: {
 		filteredUsersTag: { type: Array, required: true }
-	},
-
-	methods: {
-		selectUserTag(user) {
-			this.$emit('select-user-tag', user)
-		}
 	}
 }
 </script>