@jackuait/blok 0.4.1-beta.1 → 0.4.1-beta.12

package/src/components/domIterator.ts

@@ -0,0 +1,189 @@
+import { Dom } from './dom';
+import { delay } from './utils';
+import { SelectionUtils } from './selection';
+
+/**
+ * Iterator above passed Elements list.
+ * Each next or previous action adds provides CSS-class and sets cursor to this item
+ * @internal
+ */
+export class DomIterator {
+  /**
+   * This is a static property that defines iteration directions
+   * @type {{RIGHT: string, LEFT: string}}
+   */
+  public static directions = {
+    RIGHT: 'right',
+    LEFT: 'left',
+  };
+
+  /**
+   * User-provided CSS-class name for focused button
+   */
+  private focusedCssClass: string;
+
+  /**
+   * Focused button index.
+   * Default is -1 which means nothing is active
+   * @type {number}
+   */
+  private cursor = -1;
+
+  /**
+   * Items to flip
+   */
+  private items: HTMLElement[] = [];
+
+  /**
+   * @param {HTMLElement[]} nodeList — the list of iterable HTML-items
+   * @param {string} focusedCssClass - user-provided CSS-class that will be set in flipping process
+   */
+  constructor(
+    nodeList: HTMLElement[] | null | undefined,
+    focusedCssClass: string
+  ) {
+    this.items = nodeList ?? [];
+    this.focusedCssClass = focusedCssClass;
+  }
+
+  /**
+   * Returns Focused button Node
+   * @returns {HTMLElement | null}
+   */
+  public get currentItem(): HTMLElement | null {
+    if (this.cursor === -1) {
+      return null;
+    }
+
+    return this.items[this.cursor];
+  }
+
+  /**
+   * Sets cursor to specified position
+   * @param cursorPosition - new cursor position
+   */
+  public setCursor(cursorPosition: number): void {
+    if (cursorPosition < this.items.length && cursorPosition >= -1) {
+      this.dropCursor();
+      this.cursor = cursorPosition;
+      this.items[this.cursor].classList.add(this.focusedCssClass);
+      this.items[this.cursor].setAttribute('data-blok-focused', 'true');
+    }
+  }
+
+  /**
+   * Sets items. Can be used when iterable items changed dynamically
+   * @param {HTMLElement[]} nodeList - nodes to iterate
+   */
+  public setItems(nodeList: HTMLElement[]): void {
+    this.items = nodeList;
+  }
+
+  /**
+   * Returns true if iterator has items to navigate
+   */
+  public hasItems(): boolean {
+    return this.items.length > 0;
+  }
+
+  /**
+   * Sets cursor next to the current
+   */
+  public next(): void {
+    this.cursor = this.leafNodesAndReturnIndex(DomIterator.directions.RIGHT);
+  }
+
+  /**
+   * Sets cursor before current
+   */
+  public previous(): void {
+    this.cursor = this.leafNodesAndReturnIndex(DomIterator.directions.LEFT);
+  }
+
+  /**
+   * Sets cursor to the default position and removes CSS-class from previously focused item
+   */
+  public dropCursor(): void {
+    if (this.cursor === -1) {
+      return;
+    }
+
+    this.items[this.cursor].classList.remove(this.focusedCssClass);
+    this.items[this.cursor].removeAttribute('data-blok-focused');
+    this.cursor = -1;
+  }
+
+  /**
+   * Leafs nodes inside the target list from active element
+   * @param {string} direction - leaf direction. Can be 'left' or 'right'
+   * @returns {number} index of focused node
+   */
+  private leafNodesAndReturnIndex(direction: string): number {
+    /**
+     * if items are empty then there is nothing to leaf
+     */
+    if (this.items.length === 0) {
+      return this.cursor;
+    }
+
+    /**
+     * If activeButtonIndex === -1 then we have no chosen Tool in Toolbox
+     * Normalize "previous" Tool index depending on direction.
+     * We need to do this to highlight "first" Tool correctly
+     *
+     * Order of Tools: [0] [1] ... [n - 1]
+     * [0 = n] because of: n % n = 0 % n
+     *
+     * Direction 'right': for [0] the [n - 1] is a previous index
+     * [n - 1] -> [0]
+     *
+     * Direction 'left': for [n - 1] the [0] is a previous index
+     * [n - 1] <- [0]
+     */
+    const defaultIndex = direction === DomIterator.directions.RIGHT ? -1 : 0;
+    const startingIndex = this.cursor === -1 ? defaultIndex : this.cursor;
+
+    /**
+     * If we have chosen Tool then remove highlighting
+     */
+    if (startingIndex !== -1) {
+      this.items[startingIndex].classList.remove(this.focusedCssClass);
+      this.items[startingIndex].removeAttribute('data-blok-focused');
+    }
+
+    /**
+     * Count index for next Tool
+     */
+    const focusedButtonIndex = direction === DomIterator.directions.RIGHT
+      ? /**
+         * If we go right then choose next (+1) Tool
+         * @type {number}
+         */
+      (startingIndex + 1) % this.items.length
+      : /**
+         * If we go left then choose previous (-1) Tool
+         * Before counting module we need to add length before because of "The JavaScript Modulo Bug"
+         * @type {number}
+         */
+      (this.items.length + startingIndex - 1) % this.items.length;
+
+    if (Dom.canSetCaret(this.items[focusedButtonIndex])) {
+      /**
+       * Focus input with micro-delay to ensure DOM is updated
+       */
+       
+      delay(() => SelectionUtils.setCursor(this.items[focusedButtonIndex]), 50)();
+    }
+
+    /**
+     * Highlight new chosen Tool
+     */
+    this.items[focusedButtonIndex].classList.add(this.focusedCssClass);
+    this.items[focusedButtonIndex].setAttribute('data-blok-focused', 'true');
+
+    /**
+     * Return focused button's index
+     */
+    return focusedButtonIndex;
+  }
+}

package/src/components/errors/critical.ts

@@ -0,0 +1,5 @@
+/**
+ * This type of exception will destroy the Blok! Be careful when using it
+ */
+export class CriticalError extends Error {
+}

package/src/components/events/BlockChanged.ts

@@ -0,0 +1,16 @@
+import type { BlockMutationEvent } from '../../../types/events/block';
+
+/**
+ * Fired when some block state has changed
+ */
+export const BlockChanged = 'block changed';
+
+/**
+ * Payload that will be passed with the event
+ */
+export interface BlockChangedPayload {
+  /**
+   * CustomEvent describing a block change
+   */
+  event: BlockMutationEvent;
+}

package/src/components/events/BlockHovered.ts

@@ -0,0 +1,21 @@
+import type { Block } from '../block';
+
+/**
+ * Fired when some block is hovered by user
+ */
+export const BlockHovered = 'block hovered';
+
+/**
+ * Payload that will be passed with the event
+ */
+export interface BlockHoveredPayload {
+  /**
+   * Hovered block
+   */
+  block: Block;
+
+  /**
+   * The actual element that was hovered (could be a nested element like a list item)
+   */
+  target?: Element;
+}

package/src/components/events/BlockSettingsClosed.ts

@@ -0,0 +1,12 @@
+/**
+ * Fired when block settings is closed
+ */
+export const BlockSettingsClosed = 'block-settings-closed';
+
+/**
+ * Payload that will be passed with the event
+ */
+export interface BlockSettingsClosedPayload {
+  // No payload needed for this event
+}
+

package/src/components/events/BlockSettingsOpened.ts

@@ -0,0 +1,12 @@
+/**
+ * Fired when block settings is opened
+ */
+export const BlockSettingsOpened = 'block-settings-opened';
+
+/**
+ * Payload that will be passed with the event
+ */
+export interface BlockSettingsOpenedPayload {
+  // No payload needed for this event
+}
+

package/src/components/events/BlokMobileLayoutToggled.ts

@@ -0,0 +1,15 @@
+/**
+ * Fired when blok mobile layout toggled
+ */
+export const BlokMobileLayoutToggled = 'blok mobile layout toggled';
+
+/**
+ * Payload that will be passed with the event
+ */
+export interface BlokMobileLayoutToggledPayload {
+  /**
+   * True, if mobile layout enabled
+   */
+  isEnabled: boolean;
+}
+

package/src/components/events/FakeCursorAboutToBeToggled.ts

@@ -0,0 +1,17 @@
+/**
+ * Fired before we're adding/removing a fake cursor.
+ *
+ * Allows to disable mutation observer to skip this block change
+ */
+export const FakeCursorAboutToBeToggled = 'fake cursor is about to be toggled';
+
+/**
+ * Payload that will be passed with the event
+ */
+export interface FakeCursorAboutToBeToggledPayload {
+  /**
+   * true - when added a cursor
+   * false - when removed
+   */
+  state: boolean;
+}

package/src/components/events/FakeCursorHaveBeenSet.ts

@@ -0,0 +1,17 @@
+/**
+ * Fired after we've added/removed a fake cursor.
+ *
+ * Allows to enable mutation observer which was disabled before setting
+ */
+export const FakeCursorHaveBeenSet = 'fake cursor have been set';
+
+/**
+ * Payload that will be passed with the event
+ */
+export interface FakeCursorHaveBeenSetPayload {
+  /**
+   * true - when added a cursor
+   * false - when removed
+   */
+  state: boolean;
+}

package/src/components/events/HistoryStateChanged.ts

@@ -0,0 +1,19 @@
+/**
+ * Event name for history state changes
+ */
+export const HistoryStateChanged = 'history:state-changed';
+
+/**
+ * Payload for history state change event
+ */
+export interface HistoryStateChangedPayload {
+  /**
+   * Whether undo action is available
+   */
+  canUndo: boolean;
+
+  /**
+   * Whether redo action is available
+   */
+  canRedo: boolean;
+}

package/src/components/events/RedactorDomChanged.ts

@@ -0,0 +1,14 @@
+/**
+ * Fired when blocks wrapper dom changed
+ */
+export const RedactorDomChanged = 'redactor dom changed';
+
+/**
+ * Payload that will be passed with the event
+ */
+export interface RedactorDomChangedPayload {
+  /**
+   * Mutations happened with blocks wrapper
+   */
+  mutations: MutationRecord[];
+}

package/src/components/events/index.ts

@@ -0,0 +1,46 @@
+import type { RedactorDomChangedPayload } from './RedactorDomChanged';
+import { RedactorDomChanged } from './RedactorDomChanged';
+import type { BlockChangedPayload } from './BlockChanged';
+import { BlockChanged } from './BlockChanged';
+import type { BlockHovered, BlockHoveredPayload } from './BlockHovered';
+import type { FakeCursorAboutToBeToggledPayload } from './FakeCursorAboutToBeToggled';
+import { FakeCursorAboutToBeToggled } from './FakeCursorAboutToBeToggled';
+import type { FakeCursorHaveBeenSetPayload } from './FakeCursorHaveBeenSet';
+import { FakeCursorHaveBeenSet } from './FakeCursorHaveBeenSet';
+import type { BlokMobileLayoutToggledPayload } from './BlokMobileLayoutToggled';
+import { BlokMobileLayoutToggled } from './BlokMobileLayoutToggled';
+import type { BlockSettingsOpenedPayload } from './BlockSettingsOpened';
+import { BlockSettingsOpened } from './BlockSettingsOpened';
+import type { BlockSettingsClosedPayload } from './BlockSettingsClosed';
+import { BlockSettingsClosed } from './BlockSettingsClosed';
+import type { HistoryStateChangedPayload } from './HistoryStateChanged';
+import { HistoryStateChanged } from './HistoryStateChanged';
+
+/**
+ * Events fired by Blok Event Dispatcher
+ */
+export {
+  RedactorDomChanged,
+  BlockChanged,
+  FakeCursorAboutToBeToggled,
+  FakeCursorHaveBeenSet,
+  BlokMobileLayoutToggled,
+  BlockSettingsOpened,
+  BlockSettingsClosed,
+  HistoryStateChanged
+};
+
+/**
+ * Event name -> Event payload
+ */
+export interface BlokEventMap {
+  [BlockHovered]: BlockHoveredPayload;
+  [RedactorDomChanged]: RedactorDomChangedPayload;
+  [BlockChanged]: BlockChangedPayload;
+  [FakeCursorAboutToBeToggled]: FakeCursorAboutToBeToggledPayload;
+  [FakeCursorHaveBeenSet]: FakeCursorHaveBeenSetPayload;
+  [BlokMobileLayoutToggled]: BlokMobileLayoutToggledPayload;
+  [BlockSettingsOpened]: BlockSettingsOpenedPayload;
+  [BlockSettingsClosed]: BlockSettingsClosedPayload;
+  [HistoryStateChanged]: HistoryStateChangedPayload;
+}