refactor: cleanup for ESLBasePopupGroupManager

Rename ESLBasePopupGroupManager to ESLPopupGroupDispatcher.
ESLPopupGroupDispatcher use hidden dom element to manage state.

BREAKING CHANGE:
 rename ESLBasePopupGroupManager to ESLPopupGroupDispatcher

src/modules/all.less

@@ -5,6 +5,7 @@
 
 @import "./esl-scrollbar/core.less";
 
+@import "./esl-base-popup/core.less";
 @import "./esl-popup/core.less";
 @import "./esl-trigger/core.less";
 

src/modules/esl-base-popup/README.md

@@ -8,6 +8,11 @@ Authors: *Julia Murashko*, *Alexey Stsefanovich (ala'n)*.
 
 ESLBasePopup - is a custom element, that is used as a base for "Popup like" components creation.
 
+ESLPopupDispatcher - plugin component, that prevents activation of multiple ESLBasePopup instances in bounds of managed container.
+Usually (and by default) binds to document.body. Use native dom events to manage controlled instances state.
+
+Use `ESLPopupDispatcher.init()` to initialize (and bind) ESLPopupDispatcher.
+
 ---
 
 ### Implementation API

src/modules/esl-base-popup/core.less

@@ -0,0 +1 @@
+@import "./core/esl-popup-dispatcher.less";

src/modules/esl-base-popup/core.ts

@@ -1,2 +1,2 @@
 export * from './core/esl-base-popup';
-export * from './core/esl-base-popup-group-manager';
+export * from './core/esl-popup-dispatcher';

src/modules/esl-base-popup/core/esl-popup-dispatcher.less

@@ -0,0 +1,3 @@
+esl-popup-dispatcher {
+  display: none;
+}

src/modules/esl-base-popup/core/esl-popup-dispatcher.ts

@@ -0,0 +1,125 @@
+import {ESLBasePopup} from './esl-base-popup';
+import {ESLBaseElement} from '../../esl-base-element/core';
+import {bind} from '../../esl-utils/decorators/bind';
+import {EventUtils} from '../../esl-utils/dom/events';
+import {ExportNs} from '../../esl-utils/environment/export-ns';
+
+@ExportNs('PopupGroupDispatcher')
+export class ESLPopupDispatcher extends ESLBaseElement {
+  public static readonly is = 'esl-popup-dispatcher';
+
+  /**
+   * Initialize PopupGroupDispatcher
+   * Uses esl-popup-dispatcher tag and document body root by default
+   */
+  public static init(root: HTMLElement = document.body, tagName: string = this.is) {
+    if (!root) throw new Error('Root element should be specified');
+    const instances = root.getElementsByTagName(tagName);
+    if (instances.length) return;
+    this.register(tagName);
+    root.insertAdjacentElement('afterbegin', document.createElement(tagName));
+  }
+
+  protected _root: HTMLElement | null;
+  protected _popups: Map<string, ESLBasePopup> = new Map<string, ESLBasePopup>();
+
+  protected connectedCallback() {
+    super.connectedCallback();
+    this.root = this.parentElement;
+  }
+  protected disconnectedCallback() {
+    super.disconnectedCallback();
+    this.root = null;
+  }
+
+  protected bindEvents() {
+    if (!this.root) return;
+    this.root.addEventListener('esl:before:show', this._onBeforeShow);
+    this.root.addEventListener('esl:show', this._onShow);
+    this.root.addEventListener('esl:hide', this._onHide);
+    this.root.addEventListener('esl:change:group', this._onChangeGroup);
+  }
+  protected unbindEvents() {
+    if (!this.root) return;
+    this.root.removeEventListener('esl:before:show', this._onBeforeShow);
+    this.root.removeEventListener('esl:show', this._onShow);
+    this.root.removeEventListener('esl:hide', this._onHide);
+    this.root.removeEventListener('esl:change:group', this._onChangeGroup);
+  }
+
+  /** Observed element */
+  public get root(): HTMLElement | null {
+    return this._root;
+  }
+  public set root(root: HTMLElement | null) {
+    this.unbindEvents();
+    this._root = root;
+    this.bindEvents();
+  }
+
+  /** Guard-condition for targets */
+  protected isAcceptable(target: any): target is ESLBasePopup {
+    if (!(target instanceof ESLBasePopup)) return false;
+    return !!target.groupName;
+  }
+
+  /** Hide active popup in group */
+  public hideActive(groupName: string) {
+    this.getActive(groupName)?.hide();
+  }
+
+  /** Set active popup in group */
+  public setActive(groupName: string, popup: ESLBasePopup) {
+    if (!groupName) return;
+    this.hideActive(groupName);
+    this._popups.set(groupName, popup);
+  }
+
+  /** Get active popup in group or undefined if group doesn't exist */
+  public getActive(groupName: string): ESLBasePopup | undefined {
+    return this._popups.get(groupName);
+  }
+
+  /** Delete popup from the group if passed popup is currently active */
+  public deleteActive(groupName: string, popup: ESLBasePopup) {
+    if (this.getActive(groupName) !== popup) return;
+    this._popups.delete(groupName);
+  }
+
+  /** Hide active popup before e.target (popup) will be shown */
+  @bind
+  protected _onBeforeShow(e: CustomEvent) {
+    const target = EventUtils.source(e);
+    if (!this.isAcceptable(target)) return;
+    this.hideActive(target.groupName);
+  }
+
+  /** Update active popup after a new popup is shown */
+  @bind
+  protected _onShow(e: CustomEvent) {
+    const target = EventUtils.source(e);
+    if (!this.isAcceptable(target)) return;
+
+    this.setActive(target.groupName, target);
+  }
+
+  /** Update group state after active popup is hidden */
+  @bind
+  protected _onHide(e: CustomEvent) {
+    const target = EventUtils.source(e);
+    if (!this.isAcceptable(target)) return;
+
+    this.deleteActive(target.groupName, target);
+  }
+
+  /** Update active popups */
+  @bind
+  protected _onChangeGroup(e: CustomEvent) {
+    const target = EventUtils.source(e);
+    if (!this.isAcceptable(target)) return;
+
+    const {oldGroupName, newGroupName} = e.detail;
+    this.deleteActive(oldGroupName, target);
+    this.setActive(newGroupName, target);
+  }
+}

src/modules/lib.ts

@@ -7,7 +7,7 @@ import type {ESLMedia} from './esl-media/core/esl-media';
 
 import type {ESLScrollbar} from './esl-scrollbar/core/esl-scrollbar';
 
-import type {ESLBasePopupGroupManager} from './esl-base-popup/core/esl-base-popup-group-manager';
+import type {ESLPopupDispatcher} from './esl-base-popup/core/esl-popup-dispatcher';
 import type {ESLBasePopup} from './esl-base-popup/core/esl-base-popup';
 import type {ESLPopup} from './esl-popup/core/esl-popup';
 import type {ESLTrigger} from './esl-trigger/core/esl-trigger';
@@ -33,14 +33,14 @@ declare global {
   const ESL: ESLLibrary;
 
   export interface ESLLibrary {
-    BasePopupGroupManager?: typeof ESLBasePopupGroupManager;
     DeviceDetector?: typeof DeviceDetector;
-
     MediaBreakpoints?: typeof ESLMediaBreakpoints;
 
     Image?: typeof ESLImage;
     Media?: typeof ESLMedia;
+    Scrollbar?: typeof ESLScrollbar;
 
+    PopupGroupDispatcher?: typeof ESLPopupDispatcher;
     BasePopup?: typeof ESLBasePopup;
     Popup?: typeof ESLPopup;
     Trigger?: typeof ESLTrigger;
@@ -51,8 +51,6 @@ declare global {
     TabsContainer?: typeof ESLTabsContainer;
     ScrollableTabs?: typeof ESLScrollableTabs;
 
-    Scrollbar?: typeof ESLScrollbar;
-
     Carousel?: typeof ESLCarousel;
     CarouselPlugins: {
       Dots?: typeof ESLCarouselDotsPlugin;

test-server/src/localdev.ts

@@ -25,7 +25,7 @@ import {
   ESLScrollableTabs,
   ESLScrollbar,
   ESLAlert,
-  ESLBasePopupGroupManager
+  ESLPopupDispatcher
 } from '../../src/modules/all';
 
 import '../../src/modules/esl-media/providers/iframe-provider';
@@ -42,7 +42,7 @@ import {
 ESLImage.register();
 ESLMedia.register();
 
-ESLBasePopupGroupManager.init();
+ESLPopupDispatcher.init();
 ESLPopup.register();
 ESLPanel.register();
 ESLPanelStack.register();