fix: add custom event for msg outer click

pragmasoft-ua · Dec 11, 2023 · bb02305 · bb02305
1 parent db5b3c0
commit bb02305
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 20 deletions.
diff --git a/packages/kite-chat-component/src/controllers/selection-container-controller.ts b/packages/kite-chat-component/src/controllers/selection-container-controller.ts
@@ -34,10 +34,8 @@ export class SelectionContainerController<U extends SelectableElement> {
     private handleSelectionStartBound: (e: MouseEvent|TouchEvent) => void;
     private handleSelectionEndBound: (e: MouseEvent|TouchEvent) => void;
     private handleIgnoreSelectionBound: () => void;
-    private handleClickBound: (e: Event) => void;
     private pressTimer: number | null = null;
     private ignored = false; 
-    private selected = false; 
 
     constructor(
         private host: ReactiveControllerHost & SelectableContainer<U>,
@@ -60,7 +58,6 @@ export class SelectionContainerController<U extends SelectableElement> {
         this.handleSelectionStartBound = this.handleSelectionStart.bind(this);
         this.handleSelectionEndBound = this.handleSelectionEnd.bind(this);
         this.handleIgnoreSelectionBound = this.handleIgnoreSelection.bind(this);
-        this.handleClickBound = this.handleClick.bind(this);
     }
 
     hostUpdate() {
@@ -72,7 +69,6 @@ export class SelectionContainerController<U extends SelectableElement> {
             this.defaultSlot.removeEventListener('touchstart', this.handleSelectionStartBound,);
             this.defaultSlot.removeEventListener('touchmove', this.handleIgnoreSelectionBound,);
             this.defaultSlot.removeEventListener('touchend', this.handleSelectionEndBound);
-            this.defaultSlot.removeEventListener('click', this.handleClickBound);
         }
     }
 
@@ -84,7 +80,6 @@ export class SelectionContainerController<U extends SelectableElement> {
         this.defaultSlot?.addEventListener('touchstart', this.handleSelectionStartBound, { passive: true });
         this.defaultSlot?.addEventListener('touchmove', this.handleIgnoreSelectionBound, { passive: true });
         this.defaultSlot?.addEventListener('touchend', this.handleSelectionEndBound);
-        this.defaultSlot?.addEventListener('click', this.handleClickBound);
     }
 
     private _updateSelected(selectedElement: SelectableElement) {
@@ -108,7 +103,6 @@ export class SelectionContainerController<U extends SelectableElement> {
         const e = new CustomEvent(this.eventNames.select, {...CUSTOM_EVENT_INIT, detail});
         this.host.dispatchEvent(e);
         if (!e.defaultPrevented) this._updateSelected(selectedElement);
-        this.selected = true;
     }
 
     private getSelectable(target: HTMLElement|EventTarget|null): U | null {
@@ -150,11 +144,4 @@ export class SelectionContainerController<U extends SelectableElement> {
         clearTimeout(this.pressTimer);
         this.ignored = true;
     }
-
-    private handleClick(e: Event) {
-        if(this.selected) {
-            e.preventDefault();
-        }
-        this.selected = false;
-    }
 }
diff --git a/packages/kite-chat-component/src/kite-chat.ts b/packages/kite-chat-component/src/kite-chat.ts
@@ -40,7 +40,7 @@ import {
   ContextMenuAction,
   KitePointerAnchorElement,
 } from './components';
-import {KiteMsgElement} from './kite-msg';
+import {KiteMsgElement, MsgOutsideClick} from './kite-msg';
 
 console.debug('kite-chat loaded');
 
@@ -220,7 +220,7 @@ export class KiteChatElement extends
         >
         </kite-chat-header>
         <main
-          @click=${this._contextMenu}
+          @kite-msg.outsideclick=${this._contextMenu}
           @scroll=${() => this.contextMenu.hide()}
           class="relative flex flex-1 overflow-hidden flex-col-reverse bg-slate-300/50 snap-y overflow-y-auto outline-none border-none"
         >
@@ -357,8 +357,9 @@ export class KiteChatElement extends
     return !e.defaultPrevented;
   }
 
-  private _contextMenu(event: PointerEvent) {
-    if(event.defaultPrevented) return;
+  private _contextMenu(wrapperEvent: CustomEvent<MsgOutsideClick>) {
+    const event = wrapperEvent.detail;
+    if(event.defaultPrevented || this.selectedElements.length > 0) return;
     const msgElement = (event.target as HTMLElement).closest(KiteMsgElement.TAG) as KiteMsgElement | null;
     if(!msgElement) {
       return;

diff --git a/packages/kite-chat-component/src/kite-msg.ts b/packages/kite-chat-component/src/kite-msg.ts
@@ -30,6 +30,13 @@ const hhmmLocalizedFormat = new Intl.DateTimeFormat(
   }
 );
 
+const CUSTOM_EVENT_INIT = {
+  bubbles: true,
+  composed: true,
+};
+
+export type MsgOutsideClick = PointerEvent;
+
 /**
  * Styled chat message component. Presence of the <pre>status</pre> attribute means outgoing message.
  *  @attr status
@@ -100,10 +107,28 @@ export class KiteMsgElement extends LitElement {
     this.selected = false;
   }
 
+  private handleClick(event: Event) {
+    const path = event.composedPath();
+    const isInsideMessageContainer = path.some((node) => node instanceof HTMLElement && node.classList.contains('message-container'));
+
+    if (!isInsideMessageContainer) {
+      // Click occurred on the host but not on .message-container
+      this.dispatchEvent(new CustomEvent('kite-msg.outsideclick', {...CUSTOM_EVENT_INIT, detail: event}));
+    }
+  }  
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener('click', this.handleClick.bind(this));
+  }
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('click', this.handleClick.bind(this));
+  }
+
   override render() {
-    return html` <div class="message-container" @click=${(e: MouseEvent) => {
-      e.stopPropagation();
-    }}><slot></slot>${this._renderStatus()}${this._renderTimestamp()}</div>`;
+    return html` <div class="message-container"><slot></slot>${this._renderStatus()}${this._renderTimestamp()}</div>`;
   }
 
   private _renderStatus() {