Function spatialNavigationHandler

mods/spatial-navigation-polyfill.js:83–143

* Add event handlers for the spatial navigation behavior. * This function defines which input methods trigger the spatial navigation behavior. * @function spatialNavigationHandler

()

   * @function spatialNavigationHandler
   */
  function spatialNavigationHandler() {
    /*
     * keydown EventListener :
     * If arrow key pressed, get the next focusing element and send it to focusing controller
     */
    window.addEventListener('keydown', (e) => {
      const currentKeyMode = (parent && parent.__spatialNavigation__.keyMode) || window.__spatialNavigation__.keyMode;
      const eventTarget = document.activeElement;
      const dir = ARROW_KEY_CODE[e.keyCode];

      if (e.keyCode === TAB_KEY_CODE) {
        startingPoint = null;
      }

      if (!currentKeyMode ||
          (currentKeyMode === 'NONE') ||
          ((currentKeyMode === 'SHIFTARROW') && !e.shiftKey) ||
          ((currentKeyMode === 'ARROW') && e.shiftKey))
        return;

      if (!e.defaultPrevented) {
        let focusNavigableArrowKey = {left: true, up: true, right: true, down: true};

        // Edge case (text input, area) : Don't move focus, just navigate cursor in text area
        if ((eventTarget.nodeName === 'INPUT') || eventTarget.nodeName === 'TEXTAREA') {
          focusNavigableArrowKey = handlingEditableElement(e);
        }

        if (focusNavigableArrowKey[dir]) {
          e.preventDefault();
          mapOfBoundRect = new Map();

          navigate(dir);

          mapOfBoundRect = null;
          startingPoint = null;
        }
      }
    });

    /*
     * mouseup EventListener :
     * If the mouse click a point in the page, the point will be the starting point.
     * NOTE: Let UA set the spatial navigation starting point based on click
     */
    document.addEventListener('mouseup', (e) => {
      startingPoint = {x: e.clientX, y: e.clientY};
    });

    /*
     * focusin EventListener :
     * When the element get the focus, save it and its DOMRect for resetting the search origin
     * if it disappears.
     */
    window.addEventListener('focusin', (e) => {
      if (e.target !== window) {
        savedSearchOrigin.element = e.target;
        savedSearchOrigin.rect = e.target.getBoundingClientRect();