Block tunes as a popover

docs/CHANGELOG.md

@@ -1,5 +1,14 @@
 # Changelog
 
+
+### 2.26.0
+
+- `New` — *UI* — Meet the new Block Tunes look! Vertical menu with simple JSON configuration (and support for legacy way of defining block tunes).
+- `New` — *Block Tunes API* — Now `render()` method of a Block Tune can return `TunesMenuConfig` besides `HTMLElement`. This impovement is a key to the new straightforward way of configuring tune's appearance in Block Tunes menu.
+- `New` — *Tools API* — As well as `render()` in `Tunes Api`, Tool's `renderSettings()` now also supports `TunesMenuConfig` return value format.
+- `Deprecated` — *Styles API* — CSS classes `.cdx-settings-button` and `.cdx-settings-button--active` are not recommended to use. Consider configuring your block settings with new JSON API instead.
+- `Fix` — Prevent flipper from handling the event which caused it's instantiating.
+
 ### 2.25.0
 
 - `New` — *Tools API* — Introducing new feature — toolbox now can have multiple entries for one tool! <br>

example/example-i18n.html

@@ -194,9 +194,11 @@
           "toolbar": {
             "toolbox": {
               "Add": "Добавить",
-              "Filter": "Поиск",
-              "Nothing found": "Ничего не найдено"
             }
+          },
+          "popover": {
+            "Filter": "Поиск",
+            "Nothing found": "Ничего не найдено"
           }
         },
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editorjs/editorjs",
-  "version": "2.25.0",
+  "version": "2.26.0",
   "description": "Editor.js — Native JS, based on API and Open Source",
   "main": "dist/editor.js",
   "types": "./types/index.d.ts",

src/components/block-tunes/block-tune-delete.ts

@@ -4,7 +4,7 @@
  *
  * @copyright <CodeX Team> 2018
  */
-import { API, BlockTune } from '../../../types';
+import { API, BlockTune, PopoverItem } from '../../../types';
 import $ from '../dom';
 
 /**
@@ -23,63 +23,28 @@ export default class DeleteTune implements BlockTune {
    */
   private readonly api: API;
 
-  /**
-   * Styles
-   */
-  private CSS = {
-    button: 'ce-settings__button',
-    buttonDelete: 'ce-settings__button--delete',
-    buttonConfirm: 'ce-settings__button--confirm',
-  };
-
-  /**
-   * Delete confirmation
-   */
-  private needConfirmation: boolean;
-
-  /**
-   * set false confirmation state
-   */
-  private readonly resetConfirmation: () => void;
-
-  /**
-   * Tune nodes
-   */
-  private nodes: {button: HTMLElement} = {
-    button: null,
-  };
-
   /**
    * DeleteTune constructor
    *
    * @param {API} api - Editor's API
    */
   constructor({ api }) {
     this.api = api;
-
-    this.resetConfirmation = (): void => {
-      this.setConfirmation(false);
-    };
   }
 
   /**
-   * Create "Delete" button and add click event listener
-   *
-   * @returns {HTMLElement}
+   * Tune's appearance in block settings menu
    */
-  public render(): HTMLElement {
-    this.nodes.button = $.make('div', [this.CSS.button, this.CSS.buttonDelete], {});
-    this.nodes.button.appendChild($.svg('cross', 12, 12));
-    this.api.listeners.on(this.nodes.button, 'click', (event: MouseEvent) => this.handleClick(event), false);
-
-    /**
-     * Enable tooltip module
-     */
-    this.api.tooltip.onHover(this.nodes.button, this.api.i18n.t('Delete'), {
-      hidingDelay: 300,
-    });
-
-    return this.nodes.button;
+  public render(): PopoverItem {
+    return {
+      icon: $.svg('cross', 14, 14).outerHTML,
+      label: this.api.i18n.t('Delete'),
+      name: 'delete',
+      confirmation: {
+        label: this.api.i18n.t('Click to delete'),
+        onActivate: (item, e): void => this.handleClick(e),
+      },
+    };
   }
 
   /**
@@ -88,43 +53,6 @@ export default class DeleteTune implements BlockTune {
    * @param {MouseEvent} event - click event
    */
   public handleClick(event: MouseEvent): void {
-    /**
-     * if block is not waiting the confirmation, subscribe on block-settings-closing event to reset
-     * otherwise delete block
-     */
-    if (!this.needConfirmation) {
-      this.setConfirmation(true);
-
-      /**
-       * Subscribe on event.
-       * When toolbar block settings is closed but block deletion is not confirmed,
-       * then reset confirmation state
-       */
-      this.api.events.on('block-settings-closed', this.resetConfirmation);
-    } else {
-      /**
-       * Unsubscribe from block-settings closing event
-       */
-      this.api.events.off('block-settings-closed', this.resetConfirmation);
-
-      this.api.blocks.delete();
-      this.api.toolbar.close();
-      this.api.tooltip.hide();
-
-      /**
-       * Prevent firing ui~documentClicked that can drop currentBlock pointer
-       */
-      event.stopPropagation();
-    }
-  }
-
-  /**
-   * change tune state
-   *
-   * @param {boolean} state - delete confirmation state
-   */
-  private setConfirmation(state: boolean): void {
-    this.needConfirmation = state;
-    this.nodes.button.classList.add(this.CSS.buttonConfirm);
+    this.api.blocks.delete();
   }
 }

src/components/block-tunes/block-tune-move-down.ts

@@ -6,7 +6,8 @@
  */
 
 import $ from '../dom';
-import { API, BlockTune } from '../../../types';
+import { API, BlockTune, PopoverItem } from '../../../types';
+import Popover from '../utils/popover';
 
 /**
  *
@@ -26,12 +27,8 @@ export default class MoveDownTune implements BlockTune {
 
   /**
    * Styles
-   *
-   * @type {{wrapper: string}}
    */
   private CSS = {
-    button: 'ce-settings__button',
-    wrapper: 'ce-tune-move-down',
     animation: 'wobble',
   };
 
@@ -45,43 +42,32 @@ export default class MoveDownTune implements BlockTune {
   }
 
   /**
-   * Return 'move down' button
-   *
-   * @returns {HTMLElement}
+   * Tune's appearance in block settings menu
    */
-  public render(): HTMLElement {
-    const moveDownButton = $.make('div', [this.CSS.button, this.CSS.wrapper], {});
-
-    moveDownButton.appendChild($.svg('arrow-down', 14, 14));
-    this.api.listeners.on(
-      moveDownButton,
-      'click',
-      (event) => this.handleClick(event as MouseEvent, moveDownButton),
-      false
-    );
-
-    /**
-     * Enable tooltip module on button
-     */
-    this.api.tooltip.onHover(moveDownButton, this.api.i18n.t('Move down'), {
-      hidingDelay: 300,
-    });
-
-    return moveDownButton;
+  public render(): PopoverItem {
+    return {
+      icon: $.svg('arrow-down', 14, 14).outerHTML,
+      label: this.api.i18n.t('Move down'),
+      onActivate: (item, event): void => this.handleClick(event),
+      name: 'move-down',
+    };
   }
 
   /**
    * Handle clicks on 'move down' button
    *
-   * @param {MouseEvent} event - click event
-   * @param {HTMLElement} button - clicked button
+   * @param event - click event
    */
-  public handleClick(event: MouseEvent, button: HTMLElement): void {
+  public handleClick(event: MouseEvent): 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(() => {
@@ -110,8 +96,5 @@ export default class MoveDownTune implements BlockTune {
     this.api.blocks.move(currentBlockIndex + 1);
 
     this.api.toolbar.toggleBlockSettings(true);
-
-    /** Hide the Tooltip */
-    this.api.tooltip.hide();
   }
 }

src/components/block-tunes/block-tune-move-up.ts

@@ -5,7 +5,8 @@
  * @copyright <CodeX Team> 2018
  */
 import $ from '../dom';
-import { API, BlockTune } from '../../../types';
+import { API, BlockTune, BlockAPI, PopoverItem } from '../../../types';
+import Popover from '../../components/utils/popover';
 
 /**
  *
@@ -25,12 +26,8 @@ export default class MoveUpTune implements BlockTune {
 
   /**
    * Styles
-   *
-   * @type {{wrapper: string}}
    */
   private CSS = {
-    button: 'ce-settings__button',
-    wrapper: 'ce-tune-move-up',
     animation: 'wobble',
   };
 
@@ -44,43 +41,32 @@ export default class MoveUpTune implements BlockTune {
   }
 
   /**
-   * Create "MoveUp" button and add click event listener
-   *
-   * @returns {HTMLElement}
+   * Tune's appearance in block settings menu
    */
-  public render(): HTMLElement {
-    const moveUpButton = $.make('div', [this.CSS.button, this.CSS.wrapper], {});
-
-    moveUpButton.appendChild($.svg('arrow-up', 14, 14));
-    this.api.listeners.on(
-      moveUpButton,
-      'click',
-      (event) => this.handleClick(event as MouseEvent, moveUpButton),
-      false
-    );
-
-    /**
-     * Enable tooltip module on button
-     */
-    this.api.tooltip.onHover(moveUpButton, this.api.i18n.t('Move up'), {
-      hidingDelay: 300,
-    });
-
-    return moveUpButton;
+  public render(): PopoverItem {
+    return {
+      icon: $.svg('arrow-up', 14, 14).outerHTML,
+      label: this.api.i18n.t('Move up'),
+      onActivate: (item, e): void => this.handleClick(e),
+      name: 'move-up',
+    };
   }
 
   /**
    * Move current block up
    *
    * @param {MouseEvent} event - click event
-   * @param {HTMLElement} button - clicked button
    */
-  public handleClick(event: MouseEvent, button: HTMLElement): void {
+  public handleClick(event: MouseEvent): 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(() => {
@@ -118,8 +104,5 @@ export default class MoveUpTune implements BlockTune {
     this.api.blocks.move(currentBlockIndex - 1);
 
     this.api.toolbar.toggleBlockSettings(true);
-
-    /** Hide the Tooltip */
-    this.api.tooltip.hide();
   }
 }