feat(toolbox): popover adapted for mobile devices

package.json

@@ -97,7 +97,7 @@
   },
   "dependencies": {
     "codex-notifier": "^1.1.2",
-    "codex-tooltip": "^1.0.4",
+    "codex-tooltip": "^1.0.5",
     "nanoid": "^3.1.22"
   }
 }

src/components/modules/toolbar/index.ts

@@ -279,7 +279,7 @@ export default class Toolbar extends Module<ToolbarNodes> {
     /**
      * Move Toolbar to the Top coordinate of Block
      */
-    this.nodes.wrapper.style.transform = `translate3D(0, ${Math.floor(toolbarY)}px, 0)`;
+    this.nodes.wrapper.style.top = `${Math.floor(toolbarY)}px`;
 
     /**
      * Plus Button should be shown only for __empty__ __default__ block

src/components/ui/toolbox.ts

@@ -5,7 +5,8 @@ import BlockTool from '../tools/block';
 import ToolsCollection from '../tools/collection';
 import { API } from '../../../types';
 import EventsDispatcher from '../utils/events';
-import Popover from '../utils/popover';
+import Popover, { PopoverEvent } from '../utils/popover';
+import Listeners from '../utils/listeners';
 
 /**
  * @todo check small tools number — there should not be a scroll
@@ -83,6 +84,11 @@ export default class Toolbox extends EventsDispatcher<ToolboxEvent> {
    */
   private i18nLabels: Record<toolboxTextLabelsKeys, string>;
 
+  /**
+   * Listeners util instance
+   */
+   private listeners: Listeners = new Listeners();
+
   /**
    * Current module HTML Elements
    */
@@ -136,6 +142,7 @@ export default class Toolbox extends EventsDispatcher<ToolboxEvent> {
         return {
           icon: tool.toolbox.icon,
           label: tool.toolbox.title,
+          name: tool.name,
           onClick: (item): void => {
             this.toolButtonActivated(tool.name);
           },
@@ -144,6 +151,16 @@ export default class Toolbox extends EventsDispatcher<ToolboxEvent> {
       }),
     });
 
+    this.popover.on(PopoverEvent.OverlayClicked, () => {
+      this.close();
+    });
+
+    if (_.isMobile) {
+      this.listeners.on(document, 'scroll', () => {
+        this.close();
+      });
+    }
+
     /**
      * Enable tools shortcuts
      */
@@ -175,6 +192,7 @@ export default class Toolbox extends EventsDispatcher<ToolboxEvent> {
     this.api.listeners.offById(this.clickListenerId);
 
     this.removeAllShortcuts();
+    this.listeners.removeAll();
   }
 
   /**

src/components/utils.ts

@@ -762,3 +762,8 @@ export function cacheable<Target, Value, Arguments extends unknown[] = unknown[]
 
   return descriptor;
 };
+
+/**
+ * True if screen has mobile size
+ */
+export const isMobile = window.matchMedia('(max-width: 650px)').matches;

src/components/utils/popover.ts

@@ -1,7 +1,8 @@
 import Dom from '../dom';
 import Listeners from './listeners';
 import Flipper from '../flipper';
-import SearchInput from "./search-input";
+import SearchInput from './search-input';
+import EventsDispatcher from './events';
 
 /**
  * Describe parameters for rendering the single item of Popover
@@ -17,6 +18,11 @@ export interface PopoverItem {
    */
   label: string;
 
+  /**
+   * Item name
+   */
+  name?: string;
+
   /**
    * Additional displayed text
    */
@@ -30,10 +36,20 @@ export interface PopoverItem {
   onClick: (item: PopoverItem) => void;
 }
 
+/**
+ * Event that can be triggered by the Popover
+ */
+export enum PopoverEvent {
+  /**
+   * When popover overlay is clicked
+   */
+  OverlayClicked = 'overlay-clicked',
+}
+
 /**
  * Popover is the UI element for displaying vertical lists
  */
-export default class Popover {
+export default class Popover extends EventsDispatcher<PopoverEvent> {
   /**
    * Items list to be displayed
    */
@@ -44,12 +60,16 @@ export default class Popover {
    */
   private nodes: {
     wrapper: HTMLElement;
+    popover: HTMLElement;
     items: HTMLElement;
     nothingFound: HTMLElement;
+    overlay: HTMLElement;
   } = {
     wrapper: null,
+    popover: null,
     items: null,
     nothingFound: null,
+    overlay: null,
   }
 
   /**
@@ -90,6 +110,8 @@ export default class Popover {
     itemSecondaryLabel: string;
     noFoundMessage: string;
     noFoundMessageShown: string;
+    popoverOverlay: string;
+    popoverOverlayHidden: string;
     } {
     return {
       popover: 'ce-popover',
@@ -103,6 +125,8 @@ export default class Popover {
       itemSecondaryLabel: 'ce-popover__item-secondary-label',
       noFoundMessage: 'ce-popover__no-found',
       noFoundMessageShown: 'ce-popover__no-found--shown',
+      popoverOverlay: 'ce-popover__overlay',
+      popoverOverlayHidden: 'ce-popover__overlay--hidden',
     };
   }
 
@@ -122,6 +146,7 @@ export default class Popover {
     filterLabel: string;
     nothingFoundLabel: string;
   }) {
+    super();
     this.items = items;
     this.className = className || '';
     this.searchable = searchable;
@@ -145,7 +170,8 @@ export default class Popover {
    * Shows the Popover
    */
   public show(): void {
-    this.nodes.wrapper.classList.add(Popover.CSS.popoverOpened);
+    this.nodes.popover.classList.add(Popover.CSS.popoverOpened);
+    this.nodes.overlay.classList.remove(Popover.CSS.popoverOverlayHidden);
     this.flipper.activate();
 
     if (this.searchable) {
@@ -159,7 +185,8 @@ export default class Popover {
    * Hides the Popover
    */
   public hide(): void {
-    this.nodes.wrapper.classList.remove(Popover.CSS.popoverOpened);
+    this.nodes.popover.classList.remove(Popover.CSS.popoverOpened);
+    this.nodes.overlay.classList.add(Popover.CSS.popoverOverlayHidden);
     this.flipper.deactivate();
   }
 
@@ -181,32 +208,40 @@ export default class Popover {
    * Makes the UI
    */
   private render(): void {
-    this.nodes.wrapper = Dom.make('div', [Popover.CSS.popover, this.className]);
+    this.nodes.wrapper = Dom.make('div', this.className);
+    this.nodes.popover = Dom.make('div', Popover.CSS.popover);
+    this.nodes.wrapper.appendChild(this.nodes.popover);
+
+    this.nodes.overlay = Dom.make('div', [Popover.CSS.popoverOverlay, Popover.CSS.popoverOverlayHidden]);
+    this.nodes.wrapper.appendChild(this.nodes.overlay);
 
     if (this.searchable) {
-      this.addSearch(this.nodes.wrapper);
+      this.addSearch(this.nodes.popover);
     }
 
     this.nodes.items = Dom.make('div', Popover.CSS.itemsWrapper);
-
     this.items.forEach(item => {
       this.nodes.items.appendChild(this.createItem(item));
     });
 
-    this.nodes.wrapper.appendChild(this.nodes.items);
-    this.nodes.nothingFound = Dom.make('div', [Popover.CSS.noFoundMessage], {
+    this.nodes.popover.appendChild(this.nodes.items);
+    this.nodes.nothingFound = Dom.make('div', [ Popover.CSS.noFoundMessage ], {
       textContent: this.nothingFoundLabel,
     });
 
-    this.nodes.wrapper.appendChild(this.nodes.nothingFound);
+    this.nodes.popover.appendChild(this.nodes.nothingFound);
 
-    this.listeners.on(this.nodes.wrapper, 'click', (event: KeyboardEvent|MouseEvent) => {
+    this.listeners.on(this.nodes.popover, 'click', (event: KeyboardEvent|MouseEvent) => {
       const clickedItem = (event.target as HTMLElement).closest(`.${Popover.CSS.item}`) as HTMLElement;
 
       if (clickedItem) {
         this.itemClicked(clickedItem);
       }
     });
+
+    this.listeners.on(this.nodes.overlay, 'click', () => {
+      this.emit(PopoverEvent.OverlayClicked);
+    });
   }
 
   /**
@@ -255,6 +290,8 @@ export default class Popover {
    */
   private createItem(item: PopoverItem): HTMLElement {
     const el = Dom.make('div', Popover.CSS.item);
+
+    el.setAttribute('data-tool', item.name);
     const label = Dom.make('div', Popover.CSS.itemLabel, {
       innerHTML: item.label,
     });

src/styles/popover.css

@@ -11,9 +11,11 @@
   overflow: hidden;
   box-sizing: border-box;
   flex-shrink: 0;
-
+  
   @apply --overlay-pane;
 
+  z-index: 4;
+
   flex-wrap: nowrap;
 
   &--opened {
@@ -33,7 +35,7 @@
     border-bottom-width: 4px;
   }
 
-  @media (--mobile){
+  @media (--mobile) {
     position: fixed;
     max-width: none;
     min-width: auto;
@@ -99,4 +101,23 @@
       background-color: transparent;
     }
   }
+
+  @media (--mobile) {
+    &__overlay {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: var(--color-dark);
+      opacity: 0.5;
+      z-index: 3;
+    }
+  }
+
+  &__overlay--hidden {
+    opacity: 0;
+    z-index: 0;
+    display: none;
+  }
 }

src/styles/toolbar.css

@@ -4,7 +4,8 @@
   right: 0;
   top: 0;
   transition: opacity 100ms ease;
-  will-change: opacity, transform;
+  will-change: opacity;
+
   display: none;
 
   &--opened {

src/styles/variables.css

@@ -1,5 +1,6 @@
 @custom-media --mobile (width <= 650px);
 @custom-media --not-mobile (width >= 651px);
+@custom-media --can-hover (hover: hover);
 
 :root {
   /**
@@ -119,9 +120,11 @@
       height: var(--toolbox-buttons-size--mobile);
     }
 
-    &:hover,
-    &--active {
-      background-color: var(--bg-light);
+    @media (--can-hover) {
+      &:hover,
+      &--active {
+        background-color: var(--bg-light);
+      }
     }
 
     &--active{

test/cypress/tests/block-ids.spec.ts

@@ -31,7 +31,7 @@ describe.only('Block ids', () => {
       .click();
 
     cy.get('[data-cy=editorjs]')
-      .get('li.ce-toolbox__button[data-tool=header]')
+      .get('div.ce-popover__item[data-tool=header]')
       .click();
 
     cy.get('[data-cy=editorjs]')

test/cypress/tests/onchange.spec.ts

@@ -104,7 +104,7 @@ describe('onChange callback', () => {
       .click();
 
     cy.get('[data-cy=editorjs]')
-      .get('li.ce-toolbox__button[data-tool=header]')
+      .get('div.ce-popover__item[data-tool=header]')
       .click();
 
     cy.get('@onChange').should('be.calledTwice');
@@ -171,6 +171,11 @@ describe('onChange callback', () => {
   it('should fire onChange callback when block is removed', () => {
     createEditor();
 
+    cy.get('[data-cy=editorjs]')
+      .get('div.ce-block')
+      .click()
+      .type('some text');
+
     cy.get('[data-cy=editorjs]')
       .get('div.ce-block')
       .click();

yarn.lock

@@ -2813,9 +2813,10 @@ codex-notifier@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/codex-notifier/-/codex-notifier-1.1.2.tgz#a733079185f4c927fa296f1d71eb8753fe080895"
 
-codex-tooltip@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/codex-tooltip/-/codex-tooltip-1.0.4.tgz#bb8c6e0fe7accc68ce79cdcb7c71bf7b4bf1317a"
+codex-tooltip@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/codex-tooltip/-/codex-tooltip-1.0.5.tgz#ba25fd5b3a58ba2f73fd667c2b46987ffd1edef2"
+  integrity sha512-IuA8LeyLU5p1B+HyhOsqR6oxyFQ11k3i9e9aXw40CrHFTRO2Y1npNBVU3W1SvhKAbUU7R/YikUBdcYFP0RcJag==
 
 [email protected]:
   version "3.0.1"