fix: auto-hide identity + reaction details on unmount

prose-im · May 27, 2024 · 06dddcc · 06dddcc
1 parent 60c1ac2
commit 06dddcc
Show file tree

Hide file tree

Showing 3 changed files with 122 additions and 27 deletions.
diff --git a/src/messaging/components/message/message.js b/src/messaging/components/message/message.js
@@ -97,6 +97,9 @@ function Message(message) {
     date: null,
     attributes: null,
 
+    __visibleIdentities: {},
+    __visibleReactions: {},
+
     // --> METHODS <--
 
     /**
@@ -184,23 +187,89 @@ function Message(message) {
       return Object.keys(attributesMap);
     },
 
+    /**
+     * Checks whether item visibility can be changed or not
+     * @private
+     * @param  {string}  lineId
+     * @param  {object}  visibilityRegister
+     * @param  {boolean} [visible]
+     * @return {boolean} Whether to change visibility
+     */
+    __doChangeVisibility(lineId, visibilityRegister, visible = true) {
+      if (
+        (visible === true && visibilityRegister[lineId] !== true) ||
+        (visible === false && visibilityRegister[lineId] === true)
+      ) {
+        // Update visible reactions
+        if (visible === true) {
+          visibilityRegister[lineId] = true;
+        } else {
+          delete visibilityRegister[lineId];
+        }
+
+        // Visibility change shall be proceeded
+        return true;
+      }
+
+      // Visibility change must not be proceeded
+      return false;
+    },
+
     // --> EVENT LISTENERS <--
 
+    /**
+     * Triggers when the user identity element is unmounted
+     * @public
+     * @param  {string} lineId
+     * @return {undefined}
+     */
+    onIdentityUnmounted(lineId) {
+      // Trigger a mouse leave event
+      this.onIdentityMouseEnterOrLeave(lineId, false);
+    },
+
     /**
      * Triggers when the mouse enters or leaves the user identity
      * @public
-     * @param  {object}  event
      * @param  {string}  lineId
      * @param  {boolean} [visible]
+     * @param  {object}  [event]
      * @return {undefined}
      */
-    onIdentityMouseEnterOrLeave(event, lineId, visible = true) {
-      // Emit message author identity event
-      $event._emit("message:author:identity", {
-        id: lineId,
-        origin: MessageHelper.generateEventOrigin("element", event),
-        visible
-      });
+    onIdentityMouseEnterOrLeave(lineId, visible = true, event = null) {
+      // Assert that event is set when visible
+      if (visible === true && event === null) {
+        throw new Error("Identity visibility requested but no event provided");
+      }
+
+      // Dispatch actual event?
+      if (
+        this.__doChangeVisibility(lineId, this.__visibleIdentities, visible) ===
+        true
+      ) {
+        // Emit message author identity event
+        $event._emit("message:author:identity", {
+          id: lineId,
+          visible: visible,
+
+          origin:
+            event !== null
+              ? MessageHelper.generateEventOrigin("element", event)
+              : undefined
+        });
+      }
+    },
+
+    /**
+     * Triggers when the reaction element is unmounted
+     * @public
+     * @param  {string} lineId
+     * @param  {string} reactionEmoji
+     * @return {undefined}
+     */
+    onReactionUnmounted(lineId, reactionEmoji) {
+      // Trigger a mouse leave event
+      this.onReactionMouseEnterOrLeave(lineId, reactionEmoji, false);
     },
 
     /**
@@ -228,20 +297,42 @@ function Message(message) {
     /**
      * Triggers when the mouse enters or leaves the reaction button
      * @public
-     * @param  {object}  event
      * @param  {string}  lineId
      * @param  {string}  reactionEmoji
      * @param  {boolean} [visible]
+     * @param  {object}  [event]
      * @return {undefined}
      */
-    onReactionMouseEnterOrLeave(event, lineId, reactionEmoji, visible = true) {
-      // Emit message reactions authors event
-      $event._emit("message:reactions:authors", {
-        id: lineId,
-        origin: MessageHelper.generateEventOrigin("button", event),
-        reaction: reactionEmoji,
-        visible
-      });
+    onReactionMouseEnterOrLeave(
+      lineId,
+      reactionEmoji,
+      visible = true,
+      event = null
+    ) {
+      // Assert that event is set when visible
+      if (visible === true && event === null) {
+        throw new Error(
+          "Reaction authors visibility requested but no event provided"
+        );
+      }
+
+      // Dispatch actual event?
+      if (
+        this.__doChangeVisibility(lineId, this.__visibleReactions, visible) ===
+        true
+      ) {
+        // Emit message reactions authors event
+        $event._emit("message:reactions:authors", {
+          id: lineId,
+          reaction: reactionEmoji,
+          visible: visible,
+
+          origin:
+            event !== null
+              ? MessageHelper.generateEventOrigin("button", event)
+              : undefined
+        });
+      }
     },
 
     /**

diff --git a/src/messaging/messaging.html b/src/messaging/messaging.html
@@ -87,8 +87,9 @@
 
             <span
               v-else-if="avatarUrl"
-              @mouseenter="onIdentityMouseEnterOrLeave($event, line.id, true)"
-              @mouseleave="onIdentityMouseEnterOrLeave($event, line.id, false)"
+              @vue:unmounted="onIdentityUnmounted(line.id)"
+              @mouseenter="onIdentityMouseEnterOrLeave(line.id, true, $event)"
+              @mouseleave="onIdentityMouseEnterOrLeave(line.id, false)"
               :style="{
                 backgroundImage: ('url(\'' + avatarUrl + '\')')
               }"
@@ -97,8 +98,9 @@
 
             <span
               v-else
-              @mouseenter="onIdentityMouseEnterOrLeave($event, line.id, true)"
-              @mouseleave="onIdentityMouseEnterOrLeave($event, line.id, false)"
+              @vue:unmounted="onIdentityUnmounted(line.id)"
+              @mouseenter="onIdentityMouseEnterOrLeave(line.id, true, $event)"
+              @mouseleave="onIdentityMouseEnterOrLeave(line.id, false)"
               :style="{ backgroundColor: defaultPalette }"
               class="avatar-image avatar-image--placeholder"
             >
@@ -111,8 +113,9 @@
           <div class="message-inner">
             <div v-if="user && lineIndex === 0" class="message-origin">
               <span
-                @mouseenter="onIdentityMouseEnterOrLeave($event, line.id, true)"
-                @mouseleave="onIdentityMouseEnterOrLeave($event, line.id, false)"
+                @vue:unmounted="onIdentityUnmounted(line.id)"
+                @mouseenter="onIdentityMouseEnterOrLeave(line.id, true, $event)"
+                @mouseleave="onIdentityMouseEnterOrLeave(line.id, false)"
                 class="message-origin-name"
               >
                 {{ user.name || user.jid }}
@@ -156,9 +159,10 @@
               <span v-if="line.reactions" class="message-reactions">
                 <span
                   v-for="reactionData in line.reactions"
+                  @vue:unmounted="onReactionUnmounted(line.id, reactionData.reaction)"
                   @click.stop="onReactionClick(line.id, reactionData.reaction, reactionData.authors)"
-                  @mouseenter="onReactionMouseEnterOrLeave($event, line.id, reactionData.reaction, true)"
-                  @mouseleave="onReactionMouseEnterOrLeave($event, line.id, reactionData.reaction, false)"
+                  @mouseenter="onReactionMouseEnterOrLeave(line.id, reactionData.reaction, true, $event)"
+                  @mouseleave="onReactionMouseEnterOrLeave(line.id, reactionData.reaction, false)"
                   :key="'reaction/' + reactionData.reaction"
                   :class="[
                     'message-reaction',

diff --git a/types/messaging.ts b/types/messaging.ts
@@ -180,7 +180,7 @@ export declare interface EventMessageAnyOrigin {
 
 export declare interface EventMessageAuthorIdentity {
   id: string;
-  origin: EventMessageAnyOrigin;
+  origin?: EventMessageAnyOrigin;
   visible: boolean;
 }
 
@@ -196,7 +196,7 @@ export declare interface EventMessageReactionsView {
 
 export declare interface EventMessageReactionsAuthors {
   id: string;
-  origin: EventMessageAnyOrigin;
+  origin?: EventMessageAnyOrigin;
   reaction: string;
   visible: boolean;
 }