use flipper to refactor

src/components/flipper.ts

@@ -1,9 +1,157 @@
 import Dom from './dom';
+import _ from './utils';
 
 /**
- * Flipper
+ * @class Flipper
+ * @classdesc Flipper is a component that iterates passed items array by TAB and clicks it by ENTER
+ *
+ * @property {Object} LEAF_DIRECTIONS - is a static property that defines flipping direction
+ * @property {FlipperIterator|null} flipperIterator — instance of flipper iterator
+ * @property {Boolean} _activated — flag that defines activation status
+ * @property {Object} callbacks — user-provided callbacks
  */
 export default class Flipper {
+  /**
+   * @type {{RIGHT: string; LEFT: string}}
+   */
+  private static LEAF_DIRECTIONS = {
+    RIGHT: 'right',
+    LEFT: 'left',
+  };
+
+  /**
+   * @type {FlipperIterator|null}
+   */
+  private flipperIterator: FlipperIterator = null;
+
+  /**
+   * @type {boolean}
+   * @private
+   */
+  private _activated: boolean = false;
+
+  /**
+   * Custom callbacks from Flippers clients
+   * On each event flipper can call user-provided callback
+   */
+  private callbacks: {[key: string]: () => void};
+
+  /**
+   * @constructor
+   *
+   * @param {HTMLElement[]} nodeList
+   * @param {string} focusedCssClass
+   * @param {object} callbacks
+   */
+  constructor(
+    nodeList: HTMLElement[],
+    focusedCssClass: string,
+    callbacks: {[key: string]: () => void} = {},
+  ) {
+    this.callbacks = callbacks;
+    this.flipperIterator = new FlipperIterator(nodeList, focusedCssClass);
+
+    /**
+     * Listening all keydowns on document and react on TAB/Enter press
+     * TAB will leaf iterator items
+     * ENTER will click the focused item
+     */
+    document.addEventListener('keydown', (event) => {
+      switch (event.keyCode) {
+        case _.keyCodes.TAB:
+          this.handleTabPress(event);
+          break;
+        case _.keyCodes.ENTER:
+          this.handleEnterPress(event);
+          break;
+      }
+    }, false);
+  }
+
+  /**
+   * @param {Boolean} value
+   */
+  public set activated(value) {
+    this._activated = value;
+  }
+
+  /**
+   * @return {HTMLElement}
+   */
+  public get currentItem(): HTMLElement {
+    return this.flipperIterator.currentItem;
+  }
+
+  /**
+   * When flipper is activated tab press will leaf the items
+   * @param {KeyboardEvent} event
+   */
+  public handleTabPress(event): void {
+    if (!this._activated) {
+      return;
+    }
+
+    event.preventDefault();
+
+    /** this property defines leaf direction */
+    const shiftKey = event.shiftKey,
+      direction = shiftKey ? Flipper.LEAF_DIRECTIONS.LEFT : Flipper.LEAF_DIRECTIONS.RIGHT;
+
+    switch (direction) {
+      case Flipper.LEAF_DIRECTIONS.RIGHT:
+        this.flipperIterator.next();
+        break;
+      case Flipper.LEAF_DIRECTIONS.LEFT:
+        this.flipperIterator.previous();
+        break;
+    }
+  }
+
+  /**
+   * Enter press will click current item if flipper is activated
+   * @param {KeyboardEvent} event
+   */
+  public handleEnterPress(event): void {
+    if (!this._activated) {
+      return;
+    }
+
+    if (this.flipperIterator.currentItem) {
+      this.flipperIterator.currentItem.click();
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (this.callbacks && _.typeof(this.callbacks.onEnterPress) === 'function') {
+      this.callbacks.onEnterPress();
+    }
+  }
+
+  /**
+   * drops flipper's iterator cursor
+   * @see FlipperIterator#dropCursor
+   */
+  public dropCursor(): void {
+    this.flipperIterator.dropCursor();
+  }
+}
+
+/**
+ * @class FlipperIterator
+ * @classdesc standalone iterator above passed similar items. Each next or previous action adds provides CSS-class
+ * and sets cursor to this item
+ *
+ * @property {String} focusedCssClass — user-provided CSS-class name
+ * @property {cursor} number — index of focused item
+ * @property {HTMLElement[]} items — the list of iterable HTML-items
+ */
+class FlipperIterator {
+  /**
+   * CSS class
+   */
+  private focusedCssClass: string;
+
   /**
    * Focused button index.
    * Default is -1 which means nothing is active
@@ -17,12 +165,8 @@ export default class Flipper {
   private items: HTMLElement[] = [];
 
   /**
-   * CSS class
-   */
-  private focusedCssClass: string;
-
-  /**
-   * @constructor
+   * @param {HTMLElement[]} nodeList
+   * @param {string} focusedCssClass
    */
   constructor(
     nodeList: HTMLElement[],
@@ -59,7 +203,7 @@ export default class Flipper {
   }
 
   /**
-   * Drops cursor
+   * Sets cursor to the default position and removes CSS-class from previously focused item
    */
   public dropCursor(): void {
     if (this.cursor === -1) {

src/components/modules/blockEvents.ts

@@ -101,7 +101,7 @@ export default class BlockEvents extends Module {
       return;
     }
 
-    const { InlineToolbar, ConversionToolbar, UI, BlockManager } = this.Editor;
+    const { InlineToolbar, ConversionToolbar, UI, BlockManager, BlockSettings } = this.Editor;
     const block = BlockManager.getBlock(event.target);
 
     /**
@@ -110,6 +110,7 @@ export default class BlockEvents extends Module {
      */
     if (SelectionUtils.almostAllSelected(block.pluginsContent.textContent)) {
       InlineToolbar.close();
+      BlockSettings.close();
       ConversionToolbar.tryToShow(block);
     } else {
       ConversionToolbar.close();
@@ -178,36 +179,24 @@ export default class BlockEvents extends Module {
      */
     this.Editor.BlockSelection.clearSelection(event);
 
-    const { BlockManager, Tools, ConversionToolbar, InlineToolbar } = this.Editor;
+    const { BlockManager, Tools, InlineToolbar, ConversionToolbar } = this.Editor;
     const currentBlock = BlockManager.currentBlock;
 
     if (!currentBlock) {
       return;
     }
 
-    /** Prevent Default behaviour */
-    event.preventDefault();
-    event.stopPropagation();
-
-    /** this property defines leaf direction */
-    const shiftKey = event.shiftKey,
-      direction = shiftKey ? 'left' : 'right';
-
-    const canLeafToolbox = Tools.isInitial(currentBlock.tool) && currentBlock.isEmpty;
-    const canLeafInlineToolbar = !currentBlock.isEmpty && !SelectionUtils.isCollapsed && InlineToolbar.opened;
-    const canLeafConversionToolbar = !currentBlock.isEmpty && ConversionToolbar.opened;
+    const canOpenToolbox = Tools.isInitial(currentBlock.tool) && currentBlock.isEmpty;
+    const conversionToolbarOpened = !currentBlock.isEmpty && ConversionToolbar.opened;
+    const inlineToolbarOpened = !currentBlock.isEmpty && !SelectionUtils.isCollapsed && InlineToolbar.opened;
 
     /**
-     * For empty Blocks we show Plus button via Toobox only for initial Blocks
+     * For empty Blocks we show Plus button via Toolbox only for initial Blocks
      */
-    if (canLeafToolbox) {
-      this.leafToolboxTools(direction);
-    } else if (canLeafInlineToolbar) {
-      this.leafInlineToolbarTools(direction);
-    } else if (canLeafConversionToolbar) {
-      this.leafConversionToolbarTools(direction);
-    } else {
-      this.leafBlockSettingsTools(direction);
+    if (canOpenToolbox) {
+      this.activateToolbox();
+    } else if (!conversionToolbarOpened && !inlineToolbarOpened) {
+      this.activateBlockSettings();
     }
   }
 
@@ -229,6 +218,8 @@ export default class BlockEvents extends Module {
       this.Editor.BlockSettings.close();
     } else if (this.Editor.InlineToolbar.opened) {
       this.Editor.InlineToolbar.close();
+    } else if (this.Editor.ConversionToolbar.opened) {
+      this.Editor.ConversionToolbar.close();
     } else {
       this.Editor.Toolbar.close();
     }
@@ -320,29 +311,14 @@ export default class BlockEvents extends Module {
      * Don't handle Enter keydowns when Tool sets enableLineBreaks to true.
      * Uses for Tools like <code> where line breaks should be handled by default behaviour.
      */
-    if (tool
-      && tool[Tools.apiSettings.IS_ENABLED_LINE_BREAKS]
-      && !BlockSettings.opened
-      && !InlineToolbar.opened
-      && !ConversionToolbar.opened) {
-      return;
-    }
-
-    if (Toolbox.opened && Toolbox.getActiveTool) {
-      event.preventDefault();
-      event.stopPropagation();
-      event.stopImmediatePropagation();
-
-      Toolbox.toolButtonActivate(event, Toolbox.getActiveTool);
+    if (tool && tool[Tools.apiSettings.IS_ENABLED_LINE_BREAKS]) {
       return;
     }
 
-    if (InlineToolbar.opened && InlineToolbar.focusedButton) {
-      event.preventDefault();
-      event.stopPropagation();
-      event.stopImmediatePropagation();
-
-      InlineToolbar.focusedButton.click();
+    /**
+     * This modules uses flipper
+     */
+    if (BlockSettings.opened || InlineToolbar.opened || ConversionToolbar.opened || Toolbox.opened) {
       return;
     }
 
@@ -386,8 +362,6 @@ export default class BlockEvents extends Module {
     }
 
     event.preventDefault();
-    event.stopPropagation();
-    event.stopImmediatePropagation();
   }
 
   /**
@@ -596,46 +570,20 @@ export default class BlockEvents extends Module {
 
   /**
    * If Toolbox is not open, then just open it and show plus button
-   * Next Tab press will leaf Toolbox Tools
-   *
-   * @param {string} direction
    */
-  private leafToolboxTools(direction: string): void {
+  private activateToolbox(): void {
     if (!this.Editor.Toolbar.opened) {
       this.Editor.Toolbar.open(false , false);
       this.Editor.Toolbar.plusButton.show();
-    } else {
-      this.Editor.Toolbox.leaf(direction);
     }
 
     this.Editor.Toolbox.open();
   }
 
-  /**
-   * If InlineToolbar is not open, just open it and focus first button
-   * Next Tab press will leaf InlineToolbar Tools
-   *
-   * @param {string} direction
-   */
-  private leafInlineToolbarTools(direction: string): void {
-    if (this.Editor.InlineToolbar.opened) {
-      this.Editor.InlineToolbar.leaf(direction);
-    }
-  }
-
-  /**
-   * Leaf Conversion Toolbar Tools
-   * @param {string} direction
-   */
-  private leafConversionToolbarTools(direction: string): void {
-    this.Editor.ConversionToolbar.leaf(direction);
-  }
-
   /**
    * Open Toolbar and show BlockSettings before flipping Tools
-   * @param {string} direction
    */
-  private leafBlockSettingsTools(direction: string): void {
+  private activateBlockSettings(): void {
     if (!this.Editor.Toolbar.opened) {
       this.Editor.BlockManager.currentBlock.focused = true;
       this.Editor.Toolbar.open(true, false);
@@ -649,7 +597,5 @@ export default class BlockEvents extends Module {
     if (!this.Editor.BlockSettings.opened) {
       this.Editor.BlockSettings.open();
     }
-
-    this.Editor.BlockSettings.leaf(direction);
   }
 }