feat!: add last activator feature, fix outside action

BREAKING CHANGE: 'outsideclick' initiator type replaced with 'outsideaction'
exadel-inc · Jan 31, 2021 · 76bd08b · 76bd08b
1 parent 78170ae
commit 76bd08b
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 10 deletions.
diff --git a/src/modules/esl-base-popup/core/esl-base-popup.ts b/src/modules/esl-base-popup/core/esl-base-popup.ts
@@ -7,7 +7,6 @@ import {DeviceDetector} from '../../esl-utils/environment/device-detector';
 import {DelayedTask} from '../../esl-utils/async/delayed-task';
 import {ESLBaseElement, attr, jsonAttr, boolAttr} from '../../esl-base-element/core';
 
-
 export interface PopupActionParams {
   initiator?: string;
   delay?: number;
@@ -16,9 +15,11 @@ export interface PopupActionParams {
   force?: boolean;
   silent?: boolean;
   trackHover?: boolean;
-  trigger?: HTMLElement;
+  activator?: HTMLElement;
 }
 
+const activators: WeakMap<ESLBasePopup, HTMLElement | undefined> = new WeakMap();
+
 @ExportNs('BasePopup')
 export class ESLBasePopup extends ESLBaseElement {
   static get observedAttributes() {
@@ -68,6 +69,7 @@ export class ESLBasePopup extends ESLBaseElement {
   protected disconnectedCallback() {
     super.disconnectedCallback();
     this.unbindEvents();
+    activators.delete(this);
   }
 
   protected setInitialState() {
@@ -157,6 +159,11 @@ export class ESLBasePopup extends ESLBaseElement {
     }, defined(params.hideDelay, params.delay));
   }
 
+  /** Last element that activate popup. Uses {@link PopupActionParams.activator}*/
+  public get activator() {
+    return activators.get(this);
+  }
+
   /**
    * Returns element to apply a11y attributes
    */
@@ -179,6 +186,7 @@ export class ESLBasePopup extends ESLBaseElement {
    * Action to show popup
    */
   protected onShow(params: PopupActionParams) {
+    activators.set(this, params.activator);
     this.open = this._open = true;
     CSSUtil.addCls(this, this.activeClass);
     CSSUtil.addCls(document.body, this.bodyClass);
@@ -190,6 +198,7 @@ export class ESLBasePopup extends ESLBaseElement {
    * Action to hide popup
    */
   protected onHide(params: PopupActionParams) {
+    activators.delete(this);
     this.open = this._open = false;
     CSSUtil.removeCls(this, this.activeClass);
     CSSUtil.removeCls(document.body, this.bodyClass);
@@ -201,15 +210,15 @@ export class ESLBasePopup extends ESLBaseElement {
   protected _onClick(e: MouseEvent) {
     const target = e.target as HTMLElement;
     if (this.closeTrigger && target.closest(this.closeTrigger)) {
-      this.hide({initiator: 'close', trigger: target});
+      this.hide({initiator: 'close', activator: target});
     }
   }
   @bind
   protected _onOutsideAction(e: MouseEvent) {
     const target = e.target as HTMLElement;
-    if (!this.contains(target)) {
-      this.hide({initiator: 'outsideclick', trigger: target});
-    }
+    if (this.contains(target)) return;
+    if (this.activator && this.activator.contains(target)) return;
+    this.hide({initiator: 'outsideaction', activator: target});
   }
 
   @bind

diff --git a/src/modules/esl-trigger/core/esl-trigger.ts b/src/modules/esl-trigger/core/esl-trigger.ts
@@ -106,7 +106,7 @@ export class ESLTrigger extends ESLBaseElement {
       this.attachEventListener(this.showEvent, this._onShowEvent);
       this.attachEventListener(this.hideEvent, this._onHideEvent);
     }
-    const popupClass = this._popup.constructor as typeof ESLBasePopup;
+
     this.popup.addEventListener('esl:show', this._onPopupStateChange);
     this.popup.addEventListener('esl:hide', this._onPopupStateChange);
 
@@ -117,7 +117,6 @@ export class ESLTrigger extends ESLBaseElement {
     (this.__unsubscribers || []).forEach((off) => off());
     if (!this.popup) return;
 
-    const popupClass = this._popup.constructor as typeof ESLBasePopup;
     this.popup.removeEventListener('esl:show', this._onPopupStateChange);
     this.popup.removeEventListener('esl:hide', this._onPopupStateChange);
 
@@ -135,15 +134,15 @@ export class ESLTrigger extends ESLBaseElement {
   protected _onShowEvent(e: Event) {
     (e.type === 'click' && this.popup.closeOnOutsideAction) && e.stopPropagation();
     this.popup.show({
-      trigger: this,
+      activator: this,
       delay: this.showDelayValue
     });
   }
   @bind
   protected _onHideEvent(e: Event) {
     (e.type === 'click' && this.popup.closeOnOutsideAction) && e.stopPropagation();
     this.popup.hide({
-      trigger: this,
+      activator: this,
       delay: this.hideDelayValue,
       trackHover: this.event === 'hover' && this.mode === 'toggle'
     });