(feat) keyboard control over footer items

Author: antoine92190

src/lib/Room/Room.vue

@@ -132,20 +132,26 @@
 		>
 			<room-emojis
 				:filtered-emojis="filteredEmojis"
+				:select-item="selectEmojiItem"
+				:active-up-or-down="activeUpOrDownEmojis"
 				@select-emoji="selectEmoji($event)"
+				@activate-item="activeUpOrDownEmojis = 0"
 			/>
 
 			<room-users-tag
 				:filtered-users-tag="filteredUsersTag"
+				:select-item="selectUsersTagItem"
+				:active-up-or-down="activeUpOrDownUsersTag"
 				@select-user-tag="selectUserTag($event)"
+				@activate-item="activeUpOrDownUsersTag = 0"
 			/>
 
 			<room-templates-text
 				:filtered-templates-text="filteredTemplatesText"
-				:active-template="activeTemplate"
-				:active-up-or-down="activeUpOrDown"
+				:select-item="selectTemplatesTextItem"
+				:active-up-or-down="activeUpOrDownTemplatesText"
 				@select-template-text="selectTemplateText($event)"
-				@active-item="activeUpOrDown = 0"
+				@activate-item="activeUpOrDownTemplatesText = 0"
 			/>
 
 			<room-message-reply
@@ -218,14 +224,14 @@
 					}"
 					@input="onChangeInput"
 					@keydown.esc="escapeTextarea"
-					@keydown.enter.exact.prevent="beforeEnter"
+					@keydown.enter.exact.prevent="selectItem"
 					@paste="onPasteImage"
 					@keydown.tab.exact.prevent=""
-					@keydown.tab="activeTemplate = true"
+					@keydown.tab="selectItem"
 					@keydown.up.exact.prevent=""
-					@keydown.up="upActiveTemplate"
+					@keydown.up="updateActiveUpOrDown(-1)"
 					@keydown.down.exact.prevent=""
-					@keydown.down="downActiveTemplate"
+					@keydown.down="updateActiveUpOrDown(1)"
 				/>
 
 				<div class="vac-icon-textarea">
@@ -416,8 +422,12 @@ export default {
 			filteredUsersTag: [],
 			selectedUsersTag: [],
 			filteredTemplatesText: [],
-			activeTemplate: null,
-			activeUpOrDown: null,
+			selectEmojiItem: null,
+			selectUsersTagItem: null,
+			selectTemplatesTextItem: null,
+			activeUpOrDownEmojis: null,
+			activeUpOrDownUsersTag: null,
+			activeUpOrDownTemplatesText: null,
 			textareaCursorPosition: null,
 			cursorRangePosition: null,
 			emojisDB: new Database(),
@@ -536,7 +546,11 @@ export default {
 					if (isMobile) {
 						this.message = this.message + '\n'
 						setTimeout(() => this.onChangeInput())
-					} else if (!this.filteredTemplatesText.length) {
+					} else if (
+						!this.filteredEmojis.length &&
+						!this.filteredUsersTag.length &&
+						!this.filteredTemplatesText.length
+					) {
 						this.sendMessage()
 					}
 				}
@@ -736,6 +750,10 @@ export default {
 			this.filteredEmojis = emojis.map(emoji => emoji.unicode)
 		},
 		selectEmoji(emoji) {
+			this.selectEmojiItem = false
+
+			if (!emoji) return
+
 			const { position, endPosition } = this.getCharPosition(':')
 
 			this.message =
@@ -755,6 +773,10 @@ export default {
 			).filter(user => user._id !== this.currentUserId)
 		},
 		selectUserTag(user, editMode = false) {
+			this.selectUsersTagItem = false
+
+			if (!user) return
+
 			const { position, endPosition } = this.getCharPosition('@')
 
 			const space = this.message.substr(endPosition, endPosition).length
@@ -785,7 +807,7 @@ export default {
 			)
 		},
 		selectTemplateText(template) {
-			this.activeTemplate = false
+			this.selectTemplatesTextItem = false
 
 			if (!template) return
 
@@ -806,16 +828,23 @@ export default {
 
 			this.focusTextarea()
 		},
-		beforeEnter() {
-			if (this.filteredTemplatesText.length > 0) {
-				this.activeTemplate = true
+		updateActiveUpOrDown(direction) {
+			if (this.filteredEmojis.length) {
+				this.activeUpOrDownEmojis = direction
+			} else if (this.filteredUsersTag.length) {
+				this.activeUpOrDownUsersTag = direction
+			} else if (this.filteredTemplatesText.length) {
+				this.activeUpOrDownTemplatesText = direction
 			}
 		},
-		upActiveTemplate() {
-			this.activeUpOrDown = -1
-		},
-		downActiveTemplate() {
-			this.activeUpOrDown = 1
+		selectItem() {
+			if (this.filteredEmojis.length) {
+				this.selectEmojiItem = true
+			} else if (this.filteredUsersTag.length) {
+				this.selectUsersTagItem = true
+			} else if (this.filteredTemplatesText.length) {
+				this.selectTemplatesTextItem = true
+			}
 		},
 		resetFooterList(tagChar = null) {
 			if (tagChar === ':') {

src/lib/Room/RoomEmojis/RoomEmojis.scss

@@ -13,10 +13,10 @@
 		cursor: pointer;
 		background: var(--chat-footer-bg-color-tag);
 		transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+	}
 
-		&:hover {
-			background: var(--chat-footer-bg-color-tag-active);
-		}
+	.vac-emoji-element-active {
+		background: var(--chat-footer-bg-color-tag-active);
 	}
 }
 

src/lib/Room/RoomEmojis/RoomEmojis.vue

@@ -6,9 +6,11 @@
 			:style="{ bottom: `${$parent.$refs.roomFooter.clientHeight}px` }"
 		>
 			<div
-				v-for="emoji in filteredEmojis"
+				v-for="(emoji, index) in filteredEmojis"
 				:key="emoji"
 				class="vac-emoji-element"
+				:class="{ 'vac-emoji-element-active': index === activeItem }"
+				@mouseover="activeItem = index"
 				@click="$emit('select-emoji', emoji)"
 			>
 				{{ emoji }}
@@ -22,9 +24,39 @@ export default {
 	name: 'RoomEmojis',
 
 	props: {
-		filteredEmojis: { type: Array, required: true }
+		filteredEmojis: { type: Array, required: true },
+		selectItem: { type: Boolean, default: null },
+		activeUpOrDown: { type: Number, default: null }
 	},
 
-	emits: ['select-emoji']
+	emits: ['select-emoji', 'active-item'],
+
+	data() {
+		return {
+			activeItem: null
+		}
+	},
+
+	watch: {
+		filteredEmojis() {
+			this.activeItem = 0
+		},
+		selectItem(val) {
+			if (val) {
+				this.$emit('select-emoji', this.filteredEmojis[this.activeItem])
+			}
+		},
+		activeUpOrDown() {
+			if (
+				this.activeUpOrDown > 0 &&
+				this.activeItem < this.filteredEmojis.length - 1
+			) {
+				this.activeItem++
+			} else if (this.activeUpOrDown < 0 && this.activeItem > 0) {
+				this.activeItem--
+			}
+			this.$emit('activate-item')
+		}
+	}
 }
 </script>

src/lib/Room/RoomTemplatesText/RoomTemplatesText.vue

@@ -29,9 +29,10 @@
 <script>
 export default {
 	name: 'RoomTemplatesText',
+
 	props: {
 		filteredTemplatesText: { type: Array, required: true },
-		activeTemplate: { type: Boolean, default: null },
+		selectItem: { type: Boolean, default: null },
 		activeUpOrDown: { type: Number, default: null }
 	},
 
@@ -42,12 +43,13 @@ export default {
 			activeItem: null
 		}
 	},
+
 	watch: {
 		filteredTemplatesText() {
 			this.activeItem = 0
 		},
-		activeTemplate() {
-			if (this.activeTemplate) {
+		selectItem(val) {
+			if (val) {
 				this.$emit(
 					'select-template-text',
 					this.filteredTemplatesText[this.activeItem]
@@ -63,7 +65,7 @@ export default {
 			} else if (this.activeUpOrDown < 0 && this.activeItem > 0) {
 				this.activeItem--
 			}
-			this.$emit('active-item')
+			this.$emit('activate-item')
 		}
 	}
 }

src/lib/Room/RoomUsersTag/RoomUsersTag.scss

@@ -12,10 +12,10 @@
 		cursor: pointer;
 		background: var(--chat-footer-bg-color-tag);
 		transition: background-color 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
+	}
 
-		&:hover {
-			background: var(--chat-footer-bg-color-tag-active);
-		}
+	.vac-tags-box-active {
+		background: var(--chat-footer-bg-color-tag-active);
 	}
 
 	.vac-tags-info {

src/lib/Room/RoomUsersTag/RoomUsersTag.vue

@@ -6,9 +6,11 @@
 			:style="{ bottom: `${$parent.$refs.roomFooter.clientHeight}px` }"
 		>
 			<div
-				v-for="user in filteredUsersTag"
+				v-for="(user, index) in filteredUsersTag"
 				:key="user._id"
 				class="vac-tags-box"
+				:class="{ 'vac-tags-box-active': index === activeItem }"
+				@mouseover="activeItem = index"
 				@click="$emit('select-user-tag', user)"
 			>
 				<div class="vac-tags-info">
@@ -31,9 +33,39 @@ export default {
 	name: 'RoomUsersTag',
 
 	props: {
-		filteredUsersTag: { type: Array, required: true }
+		filteredUsersTag: { type: Array, required: true },
+		selectItem: { type: Boolean, default: null },
+		activeUpOrDown: { type: Number, default: null }
 	},
 
-	emits: ['select-user-tag']
+	emits: ['select-user-tag', 'active-item'],
+
+	data() {
+		return {
+			activeItem: null
+		}
+	},
+
+	watch: {
+		filteredUsersTag() {
+			this.activeItem = 0
+		},
+		selectItem(val) {
+			if (val) {
+				this.$emit('select-user-tag', this.filteredUsersTag[this.activeItem])
+			}
+		},
+		activeUpOrDown() {
+			if (
+				this.activeUpOrDown > 0 &&
+				this.activeItem < this.filteredUsersTag.length - 1
+			) {
+				this.activeItem++
+			} else if (this.activeUpOrDown < 0 && this.activeItem > 0) {
+				this.activeItem--
+			}
+			this.$emit('activate-item')
+		}
+	}
 }
 </script>