feat: nested popover

src/components/dom.ts

@@ -52,11 +52,13 @@ export default class Dom {
    * @param  {object} [attributes] - any attributes
    * @returns {HTMLElement}
    */
-  public static make(tagName: string, classNames: string | string[] | null = null, attributes: object = {}): HTMLElement {
+  public static make(tagName: string, classNames: string | (string | undefined)[] | null = null, attributes: object = {}): HTMLElement {
     const el = document.createElement(tagName);
 
     if (Array.isArray(classNames)) {
-      el.classList.add(...classNames);
+      const validClassnames = classNames.filter(className => className !== undefined) as string[];
+
+      el.classList.add(...validClassnames);
     } else if (classNames) {
       el.classList.add(classNames);
     }

src/components/flipper.ts

@@ -49,15 +49,11 @@ export default class Flipper {
 
   /**
    * Instance of flipper iterator
-   *
-   * @type {DomIterator|null}
    */
-  private readonly iterator: DomIterator = null;
+  private readonly iterator: DomIterator | null = null;
 
   /**
    * Flag that defines activation status
-   *
-   * @type {boolean}
    */
   private activated = false;
 
@@ -77,7 +73,7 @@ export default class Flipper {
   private flipCallbacks: Array<() => void> = [];
 
   /**
-   * @param {FlipperOptions} options - different constructing settings
+   * @param options - different constructing settings
    */
   constructor(options: FlipperOptions) {
     this.iterator = new DomIterator(options.items, options.focusedItemClass);
@@ -110,7 +106,6 @@ export default class Flipper {
    */
   public activate(items?: HTMLElement[], cursorPosition?: number): void {
     this.activated = true;
-
     if (items) {
       this.iterator.setItems(items);
     }

src/components/modules/toolbar/blockSettings.ts

@@ -7,7 +7,8 @@ import { I18nInternalNS } from '../../i18n/namespace-internal';
 import Flipper from '../../flipper';
 import { TunesMenuConfigItem } from '../../../../types/tools';
 import { resolveAliases } from '../../utils/resolve-aliases';
-import Popover, { PopoverEvent } from '../../utils/popover';
+import Popover from '../../utils/popover';
+import { PopoverEvent } from '../../utils/popover/popover.typings';
 
 /**
  * HTML Elements that used for BlockSettings

src/components/ui/toolbox.ts

@@ -5,9 +5,10 @@ import BlockTool from '../tools/block';
 import ToolsCollection from '../tools/collection';
 import { API, BlockToolData, ToolboxConfigEntry, PopoverItem, BlockAPI } from '../../../types';
 import EventsDispatcher from '../utils/events';
-import Popover, { PopoverEvent } from '../utils/popover';
+import Popover from '../utils/popover';
 import I18n from '../i18n';
 import { I18nInternalNS } from '../i18n/namespace-internal';
+import { PopoverEvent } from '../utils/popover/popover.typings';
 
 /**
  * @todo the first Tab on the Block — focus Plus Button, the second — focus Block Tunes Toggler, the third — focus next Block

src/components/utils/bem.ts

@@ -0,0 +1,21 @@
+const ELEMENT_DELIMITER = '__';
+const MODIFIER_DELIMITER = '--';
+
+/**
+ * Utility function that allows to construct class names from block and element names
+ *
+ * @param blockName - string with block name
+ * @param elementName - string with element name
+ * @param modifier - modifier to be appended
+ */
+export function bem(blockName: string) {
+  return (elementName?: string, modifier?: string) => {
+    const className = [blockName, elementName]
+      .filter(x => !!x)
+      .join(ELEMENT_DELIMITER);
+
+    return [className, modifier]
+      .filter(x => !!x)
+      .join(MODIFIER_DELIMITER);
+  };
+}

src/components/utils/popover/components/popover-header/index.ts

@@ -0,0 +1,2 @@
+export * from './popover-header';
+export * from './popover-header.typings';

src/components/utils/popover/components/popover-header/popover-header.const.ts

@@ -0,0 +1,15 @@
+import { bem } from '../../../bem';
+
+/**
+ * Popover header block CSS class constructor
+ */
+const popoverHeaderCn = bem('ce-popover-header');
+
+/**
+ * CSS class names to be used in popover header class
+ */
+export const cls = {
+  root: popoverHeaderCn(),
+  text: popoverHeaderCn('text'),
+  backButton: popoverHeaderCn('back-button'),
+};

src/components/utils/popover/components/popover-header/popover-header.ts

@@ -0,0 +1,84 @@
+import { PopoverHeaderParams } from './popover-header.typings';
+import Dom from '../../../../dom';
+import { cls } from './popover-header.const';
+import { IconChevronLeft } from '@codexteam/icons';
+import Listeners from '../../../listeners';
+
+/**
+ * Represents popover header ui element
+ */
+export class PopoverHeader {
+  /**
+   * Listeners util instance
+   */
+  private listeners = new Listeners();
+
+  /**
+   * Header html elements
+   */
+  private nodes: {
+      root: null | HTMLElement,
+      text: null | HTMLElement,
+      backButton: null | HTMLElement
+    } = {
+      root: null,
+      text: null,
+      backButton: null,
+    };
+
+  /**
+   * Text displayed inside header
+   */
+  private readonly text: string;
+
+  /**
+   * Back button click handler
+   */
+  private readonly onBackButtonClick: () => void;
+
+  /**
+   * Constructs the instance
+   *
+   * @param params - popover header params
+   */
+  constructor({ text, onBackButtonClick }: PopoverHeaderParams) {
+    this.text = text;
+    this.onBackButtonClick = onBackButtonClick;
+    this.make();
+  }
+
+  /**
+   * Returns popover header root html element
+   */
+  public getElement(): HTMLElement | null {
+    return this.nodes.root;
+  }
+
+  /**
+   * Destroys the instance
+   */
+  public destroy(): void {
+    this.nodes.root.remove();
+    this.nodes.root = null;
+    this.nodes.backButton = null;
+    this.nodes.text = null;
+    this.listeners.removeAll();
+    this.listeners.destroy();
+  }
+
+  /**
+   * Constructs HTML elements corresponding to popover header params
+   */
+  private make(): void {
+    this.nodes.root = Dom.make('div', [ cls.root ]);
+
+    this.nodes.backButton = Dom.make('button', [ cls.backButton ]);
+    this.nodes.backButton.innerHTML = IconChevronLeft;
+    this.nodes.root.appendChild(this.nodes.backButton);
+    this.listeners.on(this.nodes.backButton, 'click', this.onBackButtonClick);
+
+    this.nodes.text = Dom.make('div', [ cls.text ]);
+    this.nodes.text.innerText = this.text;
+    this.nodes.root.appendChild(this.nodes.text);
+  }
+}

src/components/utils/popover/components/popover-header/popover-header.typings.ts

@@ -0,0 +1,14 @@
+/**
+ * Popover header params
+ */
+export interface PopoverHeaderParams {
+  /**
+   * Text to be displayed inside header
+   */
+  text: string;
+
+  /**
+   * Back button click handler
+   */
+  onBackButtonClick: () => void;
+}

src/components/utils/popover/components/popover-item/index.ts

@@ -0,0 +1,2 @@
+export * from './popover-item';
+export * from './popover-item.const';

src/components/utils/popover/components/popover-item/popover-item.const.ts

@@ -0,0 +1,26 @@
+import { bem } from '../../../bem';
+
+/**
+ * Popover item block CSS class constructor
+ */
+const className = bem('ce-popover-item');
+
+/**
+ * CSS class names to be used in popover item class
+ */
+export const cls = {
+  container: className(),
+  active: className(null, 'active'),
+  disabled: className(null, 'disabled'),
+  focused: className(null, 'focused'),
+  hidden: className(null, 'hidden'),
+  confirmationState: className(null, 'confirmation'),
+  noHover: className(null, 'no-hover'),
+  noFocus: className(null, 'no-focus'),
+  title: className('title'),
+  secondaryTitle: className('secondary-title'),
+  icon: className('icon'),
+  iconTool: className('icon', 'tool'),
+  iconChevronRight: className('icon', 'chevron-right'),
+  wobbleAnimation: bem('wobble')(),
+};