handsontable/focusManager/eventListener.mjs

Handsontable is a JavaScript Data Grid available for React, Angular and Vue.

import { getParentWindow } from "../helpers/dom/element.mjs";
/**
 * An event listener, used for tracking focus-related and click events necessary for focus management.
 *
 * @param {Window} ownerWindow Current window object.
 * @param {object} hooks A callback functions.
 * @param {function(Event)} hooks.onFocus A callback function for focusin events.
 * @param {function(Event)} hooks.onClick A callback function for click events.
 * @param {function(Event)} hooks.onTabKeyDown A callback function for tab key down events.
 * @returns {{mount: function(), unmount: function()}}
 */
export function useEventListener(ownerWindow) {
  let hooks = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  let mouseDown = false;

  /**
   * A callback function for focusin events.
   *
   * @param {Event} event The event object.
   */
  function handleFocus(event) {
    if (!mouseDown) {
      var _hooks$onFocus;
      (_hooks$onFocus = hooks.onFocus) === null || _hooks$onFocus === void 0 || _hooks$onFocus.call(hooks, event);
    }
  }

  /**
   * A callback function for click events.
   *
   * @param {Event} event The event object.
   */
  function handleClick(event) {
    var _hooks$onClick;
    (_hooks$onClick = hooks.onClick) === null || _hooks$onClick === void 0 || _hooks$onClick.call(hooks, event);
  }

  /**
   * A callback function for tab key down events.
   *
   * @param {Event} event The event object.
   */
  function handleKeyDown(event) {
    if (event.key === 'Tab') {
      var _hooks$onTabKeyDown;
      (_hooks$onTabKeyDown = hooks.onTabKeyDown) === null || _hooks$onTabKeyDown === void 0 || _hooks$onTabKeyDown.call(hooks, event);
    }
  }

  /**
   * A callback function for mouse down events.
   */
  function handleMouseDown() {
    mouseDown = true;
  }

  /**
   * A callback function for mouse up events.
   */
  function handleMouseUp() {
    mouseDown = false;
  }

  /**
   * Adds event listeners to the starting window and its parents' windows.
   */
  const mount = () => {
    let frameWindow = ownerWindow;
    while (frameWindow) {
      const {
        documentElement
      } = frameWindow.document;
      documentElement.addEventListener('focusin', handleFocus);
      documentElement.addEventListener('click', handleClick);
      documentElement.addEventListener('keydown', handleKeyDown);
      documentElement.addEventListener('mousedown', handleMouseDown);
      documentElement.addEventListener('mouseup', handleMouseUp);
      frameWindow = getParentWindow(frameWindow);
    }
  };

  /**
   * Removes event listeners from the starting window and its parents' windows.
   */
  const unmount = () => {
    let frameWindow = ownerWindow;
    while (frameWindow) {
      const {
        documentElement
      } = frameWindow.document;
      documentElement.removeEventListener('focusin', handleFocus);
      documentElement.removeEventListener('click', handleClick);
      documentElement.removeEventListener('keydown', handleKeyDown);
      documentElement.removeEventListener('mousedown', handleMouseDown);
      documentElement.removeEventListener('mouseup', handleMouseUp);
      frameWindow = getParentWindow(frameWindow);
    }
  };
  return {
    mount,
    unmount
  };
}