(refacto) replace roomFooter ref by element id

Author: antoine92190

src/components/EmojiPickerContainer/EmojiPickerContainer.vue

@@ -41,7 +41,6 @@ export default {
 	props: {
 		emojiOpened: { type: Boolean, default: false },
 		emojiReaction: { type: Boolean, default: false },
-		roomFooterRef: { type: HTMLDivElement, default: null },
 		positionTop: { type: Boolean, default: false },
 		positionRight: { type: Boolean, default: false }
 	},
@@ -62,12 +61,14 @@ export default {
 				setTimeout(() => {
 					this.addCustomStyling()
 
-					this.$refs.emojiPicker.shadowRoot
-						.addEventListener('emoji-click', ({ detail }) => {
+					this.$refs.emojiPicker.shadowRoot.addEventListener(
+						'emoji-click',
+						({ detail }) => {
 							this.$emit('add-emoji', {
 								unicode: detail.unicode
 							})
-						})
+						}
+					)
 				}, 0)
 			}
 		}
@@ -114,8 +115,9 @@ export default {
 		setEmojiPickerPosition(clientY, innerWidth, innerHeight) {
 			setTimeout(() => {
 				const mobileSize = innerWidth < 500 || innerHeight < 700
+				const roomFooterRef = document.getElementById('room-footer')
 
-				if (!this.roomFooterRef) {
+				if (!roomFooterRef) {
 					if (mobileSize) this.emojiPickerRight = '-50px'
 					return
 				}
@@ -125,7 +127,7 @@ export default {
 					this.emojiPickerTop = 100
 					this.emojiPickerHeight = innerHeight - 200
 				} else {
-					const roomFooterTop = this.roomFooterRef.getBoundingClientRect().top
+					const roomFooterTop = roomFooterRef.getBoundingClientRect().top
 					const pickerTopPosition =
 						roomFooterTop - clientY > this.emojiPickerHeight - 50
 

src/lib/Room/Room.vue

@@ -80,7 +80,6 @@
 								:message-actions="messageActions"
 								:room-users="room.users"
 								:text-messages="textMessages"
-								:room-footer-ref="footerRef"
 								:new-messages="newMessages"
 								:show-reaction-emojis="showReactionEmojis"
 								:show-new-messages-divider="showNewMessagesDivider"
@@ -267,9 +266,6 @@ export default {
 		},
 		showMessagesStarted() {
 			return this.messages.length && this.messagesLoaded
-		},
-		footerRef() {
-			return this.getFooterParentRef()?.$refs.roomFooter
 		}
 	},
 

src/lib/Room/RoomFooter/RoomFooter.vue

@@ -1,7 +1,7 @@
 <template>
 	<div
 		v-show="Object.keys(room).length && showFooter"
-		ref="roomFooter"
+		id="room-footer"
 		class="vac-room-footer"
 		:class="{
 			'vac-app-box-shadow': shadowFooter
@@ -89,6 +89,7 @@
 			</div>
 
 			<textarea
+				id="roomTextarea"
 				ref="roomTextarea"
 				:placeholder="textMessages.TYPE_MESSAGE"
 				class="vac-textarea"

src/lib/Room/RoomMessage/MessageActions/MessageActions.vue

@@ -38,7 +38,6 @@
 					:style="{ right: isMessageActions ? '30px' : '5px' }"
 					:emoji-opened="emojiOpened"
 					:emoji-reaction="true"
-					:room-footer-ref="roomFooterRef"
 					:position-right="message.senderId === currentUserId"
 					@add-emoji="sendMessageReaction"
 					@open-emoji="openEmoji"
@@ -98,7 +97,6 @@ export default {
 		currentUserId: { type: [String, Number], required: true },
 		message: { type: Object, required: true },
 		messageActions: { type: Array, required: true },
-		roomFooterRef: { type: HTMLDivElement, default: null },
 		showReactionEmojis: { type: Boolean, required: true },
 		messageHover: { type: Boolean, required: true },
 		hoverMessageId: { type: [String, Number], default: null },
@@ -166,8 +164,10 @@ export default {
 			if (!this.optionsOpened) return
 
 			setTimeout(() => {
+				const roomFooterRef = document.getElementById('room-footer')
+
 				if (
-					!this.roomFooterRef ||
+					!roomFooterRef ||
 					!this.$refs.menuOptions ||
 					!this.$refs.actionIcon
 				) {
@@ -178,7 +178,7 @@ export default {
 					this.$refs.menuOptions.getBoundingClientRect().height
 
 				const actionIconTop = this.$refs.actionIcon.getBoundingClientRect().top
-				const roomFooterTop = this.roomFooterRef.getBoundingClientRect().top
+				const roomFooterTop = roomFooterRef.getBoundingClientRect().top
 
 				const optionsTopPosition =
 					roomFooterTop - actionIconTop > menuOptionsTop + 50

src/lib/Room/RoomMessage/RoomMessage.vue

@@ -158,7 +158,6 @@
 							:current-user-id="currentUserId"
 							:message="message"
 							:message-actions="messageActions"
-							:room-footer-ref="roomFooterRef"
 							:show-reaction-emojis="showReactionEmojis"
 							:message-hover="messageHover"
 							:hover-message-id="hoverMessageId"
@@ -244,7 +243,6 @@ export default {
 		editedMessageId: { type: [String, Number], default: null },
 		roomUsers: { type: Array, default: () => [] },
 		messageActions: { type: Array, required: true },
-		roomFooterRef: { type: HTMLDivElement, default: null },
 		newMessages: { type: Array, default: () => [] },
 		showReactionEmojis: { type: Boolean, required: true },
 		showNewMessagesDivider: { type: Boolean, required: true },