Chore/popover refactoring (#2249)

* Add new popover class * Add flipper * confirmation * confirmation * Add confirmation support * Add search * Add toggle group support and update popover tests * Add custom content support * Fix scroll issue * Add mobile version * Integration * Fix animation * Cleanup * Fix popover position for narrow mode * Fix tests * Update version and changelog * Rename css classes * Move files * Stop using PopoverItem from outside of popover context * Fix jsdoc * Move error animation to popover item * Update css variables * Update docs/CHANGELOG.md Co-authored-by: Ilya Maroz <[email protected]> * Update src/components/block-tunes/block-tune-move-down.ts Co-authored-by: Peter Savchenko <[email protected]> * Update src/components/block-tunes/block-tune-move-up.ts Co-authored-by: Peter Savchenko <[email protected]> * Fixes * Fix imports * Fix toolbox close event * Move search-input file * Fix comment * Rename method * Cleanup * Remove onFlip callback from popover item * Rename * Fix removing event listener * Move popover animations to popover.css file * Cleanup styles * Fix jsdoc * Fix confirmation chains * Close toolbox oly when it's open * Change activation error animation * Update version and changelog * Fix overlay * Update icon border-radius on mobile * Disable item text select * Update changelog * Update yarn.lock * Add rc postfix to version --------- Co-authored-by: Ilya Maroz <[email protected]> Co-authored-by: Peter Savchenko <[email protected]>
codex-team · Feb 10, 2023 · 07b1ce2 · 07b1ce2
1 parent 551e3f1
commit 07b1ce2
Show file tree

Hide file tree

Showing 24 changed files with 1,242 additions and 1,110 deletions.
diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Changelog
 
+### 2.27.0
+
+- `Refactoring` — Popover class refactored.
+- `Improvement` — *Toolbox* — Number of `close()` method calls optimized.
+
 ### 2.26.5
 
 - `Fix` — *Types* — Remove unnecessary import that creates a dependency on the `cypress`.

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.26.5",
+  "version": "2.27.0-rc.0",
   "description": "Editor.js — Native JS, based on API and Open Source",
   "main": "dist/editor.js",
   "types": "./types/index.d.ts",

diff --git a/src/components/block-tunes/block-tune-move-down.ts b/src/components/block-tunes/block-tune-move-down.ts
@@ -5,7 +5,6 @@
  */
 
 import { API, BlockTune } from '../../../types';
-import Popover from '../utils/popover';
 import { IconChevronDown } from '@codexteam/icons';
 import { TunesMenuConfig } from '../../../types/tools';
 
@@ -49,34 +48,21 @@ export default class MoveDownTune implements BlockTune {
     return {
       icon: IconChevronDown,
       title: this.api.i18n.t('Move down'),
-      onActivate: (item, event): void => this.handleClick(event),
+      onActivate: (): void => this.handleClick(),
       name: 'move-down',
     };
   }
 
   /**
    * Handle clicks on 'move down' button
-   *
-   * @param event - click event
    */
-  public handleClick(event: MouseEvent): void {
+  public handleClick(): void {
     const currentBlockIndex = this.api.blocks.getCurrentBlockIndex();
     const nextBlock = this.api.blocks.getBlockByIndex(currentBlockIndex + 1);
 
     // If Block is last do nothing
     if (!nextBlock) {
-      const button = (event.target as HTMLElement)
-        .closest('.' + Popover.CSS.item)
-        .querySelector('.' + Popover.CSS.itemIcon);
-
-      button.classList.add(this.CSS.animation);
-
-      window.setTimeout(() => {
-        button.classList.remove(this.CSS.animation);
-      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-      }, 500);
-
-      return;
+      throw new Error('Unable to move Block down since it is already the last');
     }
 
     const nextBlockElement = nextBlock.holder;

diff --git a/src/components/block-tunes/block-tune-move-up.ts b/src/components/block-tunes/block-tune-move-up.ts
@@ -4,7 +4,6 @@
  * @copyright <CodeX Team> 2018
  */
 import { API, BlockTune } from '../../../types';
-import Popover from '../../components/utils/popover';
 import { IconChevronUp } from '@codexteam/icons';
 import { TunesMenuConfig } from '../../../types/tools';
 
@@ -47,34 +46,21 @@ export default class MoveUpTune implements BlockTune {
     return {
       icon: IconChevronUp,
       title: this.api.i18n.t('Move up'),
-      onActivate: (item, e): void => this.handleClick(e),
+      onActivate: (): void => this.handleClick(),
       name: 'move-up',
     };
   }
 
   /**
    * Move current block up
-   *
-   * @param {MouseEvent} event - click event
    */
-  public handleClick(event: MouseEvent): void {
+  public handleClick(): void {
     const currentBlockIndex = this.api.blocks.getCurrentBlockIndex();
     const currentBlock = this.api.blocks.getBlockByIndex(currentBlockIndex);
     const previousBlock = this.api.blocks.getBlockByIndex(currentBlockIndex - 1);
 
     if (currentBlockIndex === 0 || !currentBlock || !previousBlock) {
-      const button = (event.target as HTMLElement)
-        .closest('.' + Popover.CSS.item)
-        .querySelector('.' + Popover.CSS.itemIcon);
-
-      button.classList.add(this.CSS.animation);
-
-      window.setTimeout(() => {
-        button.classList.remove(this.CSS.animation);
-      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-      }, 500);
-
-      return;
+      throw new Error('Unable to move Block up since it is already the first');
     }
 
     const currentBlockElement = currentBlock.holder;

diff --git a/src/components/modules/toolbar/blockSettings.ts b/src/components/modules/toolbar/blockSettings.ts
@@ -2,12 +2,12 @@ import Module from '../../__module';
 import $ from '../../dom';
 import SelectionUtils from '../../selection';
 import Block from '../../block';
-import Popover, { PopoverEvent } from '../../utils/popover';
 import I18n from '../../i18n';
 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';
 
 /**
  * HTML Elements that used for BlockSettings
@@ -67,13 +67,14 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
    */
   private popover: Popover | undefined;
 
+
   /**
    * Panel with block settings with 2 sections:
    *  - Tool's Settings
    *  - Default Settings [Move, Remove, etc]
    */
   public make(): void {
-    this.nodes.wrapper = $.make('div');
+    this.nodes.wrapper = $.make('div', [ this.CSS.settings ]);
   }
 
   /**
@@ -110,19 +111,19 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
 
     /** Tell to subscribers that block settings is opened */
     this.eventsDispatcher.emit(this.events.opened);
-
     this.popover = new Popover({
-      className: this.CSS.settings,
       searchable: true,
-      filterLabel: I18n.ui(I18nInternalNS.ui.popover, 'Filter'),
-      nothingFoundLabel: I18n.ui(I18nInternalNS.ui.popover, 'Nothing found'),
       items: tunesItems.map(tune => this.resolveTuneAliases(tune)),
       customContent: customHtmlTunesContainer,
       customContentFlippableItems: this.getControls(customHtmlTunesContainer),
       scopeElement: this.Editor.API.methods.ui.nodes.redactor,
+      messages: {
+        nothingFound: I18n.ui(I18nInternalNS.ui.popover, 'Nothing found'),
+        search: I18n.ui(I18nInternalNS.ui.popover, 'Filter'),
+      },
     });
-    this.popover.on(PopoverEvent.OverlayClicked, this.onOverlayClicked);
-    this.popover.on(PopoverEvent.Close, () => this.close());
+
+    this.popover.on(PopoverEvent.Close, this.onPopoverClose);
 
     this.nodes.wrapper.append(this.popover.getElement());
 
@@ -166,13 +167,20 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
     this.eventsDispatcher.emit(this.events.closed);
 
     if (this.popover) {
-      this.popover.off(PopoverEvent.OverlayClicked, this.onOverlayClicked);
+      this.popover.off(PopoverEvent.Close, this.onPopoverClose);
       this.popover.destroy();
       this.popover.getElement().remove();
       this.popover = null;
     }
   }
 
+  /**
+   * Handles popover close event
+   */
+  private onPopoverClose = (): void => {
+    this.close();
+  };
+
   /**
    * Returns list of buttons and inputs inside specified container
    *
@@ -188,13 +196,6 @@ export default class BlockSettings extends Module<BlockSettingsNodes> {
     return Array.from(controls);
   }
 
-  /**
-   * Handles overlay click
-   */
-  private onOverlayClicked = (): void => {
-    this.close();
-  };
-
   /**
    * Resolves aliases in tunes menu items
    *

diff --git a/src/components/modules/toolbar/index.ts b/src/components/modules/toolbar/index.ts
@@ -228,8 +228,13 @@ export default class Toolbar extends Module<ToolbarNodes> {
     /**
      * Close Toolbox when we move toolbar
      */
-    this.toolboxInstance.close();
-    this.Editor.BlockSettings.close();
+    if (this.toolboxInstance.opened) {
+      this.toolboxInstance.close();
+    }
+
+    if (this.Editor.BlockSettings.opened) {
+      this.Editor.BlockSettings.close();
+    }
 
     /**
      * If no one Block selected as a Current
@@ -468,7 +473,9 @@ export default class Toolbar extends Module<ToolbarNodes> {
 
       this.settingsTogglerClicked();
 
-      this.toolboxInstance.close();
+      if (this.toolboxInstance.opened) {
+        this.toolboxInstance.close();
+      }
 
       this.tooltip.hide(true);
     }, true);

diff --git a/src/components/ui/toolbox.ts b/src/components/ui/toolbox.ts
@@ -123,21 +123,23 @@ export default class Toolbox extends EventsDispatcher<ToolboxEvent> {
   public make(): Element {
     this.popover = new Popover({
       scopeElement: this.api.ui.nodes.redactor,
-      className: Toolbox.CSS.toolbox,
       searchable: true,
-      filterLabel: this.i18nLabels.filter,
-      nothingFoundLabel: this.i18nLabels.nothingFound,
+      messages: {
+        nothingFound: this.i18nLabels.nothingFound,
+        search: this.i18nLabels.filter,
+      },
       items: this.toolboxItemsToBeDisplayed,
     });
 
-    this.popover.on(PopoverEvent.OverlayClicked, this.onOverlayClicked);
+    this.popover.on(PopoverEvent.Close, this.onPopoverClose);
 
     /**
      * Enable tools shortcuts
      */
     this.enableShortcuts();
 
     this.nodes.toolbox = this.popover.getElement();
+    this.nodes.toolbox.classList.add(Toolbox.CSS.toolbox);
 
     return this.nodes.toolbox;
   }
@@ -161,7 +163,7 @@ export default class Toolbox extends EventsDispatcher<ToolboxEvent> {
     }
 
     this.removeAllShortcuts();
-    this.popover?.off(PopoverEvent.OverlayClicked, this.onOverlayClicked);
+    this.popover?.off(PopoverEvent.Close, this.onPopoverClose);
   }
 
   /**
@@ -208,10 +210,11 @@ export default class Toolbox extends EventsDispatcher<ToolboxEvent> {
   }
 
   /**
-   * Handles overlay click
+   * Handles popover close event
    */
-  private onOverlayClicked = (): void => {
-    this.close();
+  private onPopoverClose = (): void => {
+    this.opened = false;
+    this.emit(ToolboxEvent.Closed);
   };
 
   /**