Context Menu

const $contextMenuConfig = {
  queries: {
    /* How the init function finds the context menu trigger */
    trigger: ".bux-context-menu__trigger", /* How the init function finds the context menu body container */
    container: ".bux-context-menu__container", /* What the BuxContextMenuController uses to find its menu items */
    items: "a, button",
  },
  /** Keyboard keys that we may need to handle keypresses from */
  navKeys: [" ", "Tab", "ArrowDown", "ArrowUp", "Home", "End", "Escape"],
  clipPaths: {
    fromCollapsed: "polygon(0 0, 100% 0, 100% 0, 0 0)",
    toCollapsed: "polygon(0 100%, 100% 100%, 100% 100%, 0 100%)",
    expanded: "polygon(0 0, 100% 0, 100% 100%, 0 100%)"
  }
}

/**
 * Takes a BuxContextMenuController or BuxContextMenuItem and returns:
 * - a `focus` object with the focus callables for the:
 *   - next item
 *   - previous item
 *   - first item
 *   - last item
 *
 * (from the context of whichever component type was passed in)
 *
 * and the `contextMenu` to use to call its `collapse()` or `expand()` method.
 */
const getKeydownHandlers = (component) => {
  const contextMenu = component instanceof BuxContextMenuController
    ? component
    : component.parentController;
  const nextItem = component instanceof BuxContextMenuController
    ? component.firstItem
    : component.nextItem;
  const previousItem = component instanceof BuxContextMenuController
    ? component.lastItem
    : component.previousItem;
  const firstItem = contextMenu.firstItem;
  const lastItem = contextMenu.lastItem;
  return {
    nextItem,
    previousItem,
    firstItem,
    lastItem,
    contextMenu,
  };
};

/**
 * navByKb gets called from event listeners, so it gets bound with a `this` that
 * is either a BuxContextMenuController or BuxContextMenuItem.
 */
const navByKb = function (event) {
  const {
    key,
    shiftKey
  } = event;

  /* If the nav is being called by the controller while it's collapsed, we only
  need to handle space bar keypresses -- so, we can potentially bail early */
  if (this instanceof
    BuxContextMenuController &&
    !this.isExpanded &&
    key !==
    " ") {
    return;
  }
  /* Bail early if it's not a key we care about */
  if (!($contextMenuConfig.navKeys.includes(key))) return;

  /* Now we know we're going to handle it, so we can prevent default */
  event.preventDefault();

  /* Since this function gets called from either the item or the container, we
     ask getKeydownHandlers to get the relevant items and the context menu
     instance for us */
  const {
    nextItem,
    previousItem,
    firstItem,
    lastItem,
    contextMenu
  } = getKeydownHandlers(this);

  if ((key === "Tab" && !shiftKey) || key === "ArrowDown") {
    nextItem.element.focus();
  } else if ((key === "Tab" && shiftKey) || key === "ArrowUp") {
    previousItem.element.focus();
  } else if (key === "Home") {
    firstItem.element.focus();
  } else if (key === "End") {
    lastItem.element.focus();
  } else if (key ===
    "Escape" ||
    (key ===
      " " &&
      this instanceof
      BuxContextMenuController &&
      this.isExpanded)) {
    contextMenu.collapse();
  } else if (key === " ") {
    contextMenu.expand();
  }
};


/* ==============
    Main classes
   ============== */

/**
 * Items contained within a `BuxContextMenuController` that handle their keydown
 * behavior and expose their `nextItem` and `previousItem` siblings.
 */
class BuxContextMenuItem {

  constructor(element, contextMenuIndex, parentController) {
    this.element = element;
    this.contextMenuIndex = contextMenuIndex;
    this.parentController = parentController;
    this.element.addEventListener("keydown",
      (event) => navByKb.bind(this)(event));
  }

  get nextItem() {
    if (this === this.parentController.lastItem) {
      return this.parentController.trigger;
    } else {
      return this.parentController.items[this.contextMenuIndex + 1];
    }
  }

  get previousItem() {
    if (this === this.parentController.firstItem) {
      return this.parentController.trigger;
    } else {
      return this.parentController.items[this.contextMenuIndex - 1];
    }
  }
}


class BuxContextMenuIndicator {
  /**
   * @param indicatorElement {HTMLElement}
   * @param parentController {BuxContextMenuController}
   */
  constructor(indicatorElement, parentController) {
    this.element = indicatorElement;
    this.parentController = parentController;
    this.collapse();
  }

  get currentTransform() {
    const style = window.getComputedStyle(this.element);
    const transform = style.getPropertyValue('transform')
    const matches = transform?.match(
      /matrix\(\d*, \d*, \d*, \d*, (-?\d*\.?\d*), (-?\d*\.?\d*)\)/)
    return {
      x: parseInt(matches?.[1] ?? '0'),
      y: parseInt(matches?.[2] ?? '0'),
    }
  }

  set height(height) {
    this.element.style.setProperty("--item-height", `${ height }px`);
  }

  collapse() {
    this.element.animate([{clipPath: $contextMenuConfig.clipPaths.expanded}, { clipPath: $contextMenuConfig.clipPaths.toCollapsed }], {
      easing: 'cubic-bezier(.4, 0, .2, 1)',
      fill: 'both',
      duration: 150
    });
  }

  expand() {
    this.element.animate([{clipPath: $contextMenuConfig.clipPaths.fromCollapsed}, { clipPath: $contextMenuConfig.clipPaths.expanded }], {
      easing: 'cubic-bezier(.4, 0, .2, 1)',
      fill: 'both',
      duration: 150
    });
  }

  getTransformForItem(newItem) {
    const newItemRect = newItem.element.getBoundingClientRect();
    this.height = newItemRect.height;
    const currentIndicatorRect = this.element.getBoundingClientRect();
    const currentTransform = this.currentTransform;
    return {
      x: newItemRect.x - currentIndicatorRect.x + currentTransform.x,
      y: newItemRect.y - currentIndicatorRect.y + currentTransform.y
    }
  }

  /**
   * @param newItem {BuxContextMenuItem}
   */
  teleportTo(newItem) {
    const transform = this.getTransformForItem(newItem);
    this.element.animate([{
      transform: `translateX(${ transform.x }px) translateY(${ transform.y }px)`
    }], {
      easing: 'cubic-bezier(.4, 0, .2, 1)',
      fill: 'both',
      duration: 0
    })
  }

  /**
   * @param newItem {BuxContextMenuItem}
   */
  animateTo(newItem) {
    const toTransform = this.getTransformForItem(newItem);
    this.element.animate([{
      transform: `translateX(${ toTransform.x }px) translateY(${ toTransform.y }px)`
    }], {
      easing: 'cubic-bezier(.4, 0, .2, 1)',
      fill: 'both',
      duration: 150
    })
  }
}


/**
 * Handles a context menu that handles expand/collapse functionality and instantiates the items it contains with
 * `BuxContextMenuItem`s.
 */
class BuxContextMenuController extends BuxPopoverController {
  constructor(triggerElement, containerElement) {
    /* BuxPopoverController takes care of all toggling and positioning, and adds
    * the trigger, caret, and container elements */
    super(triggerElement, containerElement);

    this.trigger.element.addEventListener("keydown",
      (event) => navByKb.bind(this)(event));

    const indicatorElement = this.container.element.querySelector(
      '.bux-context-menu__active-item-indicator');
    this.indicator = new BuxContextMenuIndicator(indicatorElement, this);

    /* Init items */
    this.items =
      Array.from(this.container.element.querySelectorAll($contextMenuConfig.queries.items))
        .map((itemElement, index) => new BuxContextMenuItem(itemElement,
          index,
          this));
    this.items.forEach(this.addIndicatorListeners.bind(this));

  }

  get firstItem() {
    return this.items[0];
  }

  get lastItem() {
    return this.items[this.items.length - 1];
  }

  get itemElements() {
    return this.items.map(i => i.element);
  }

  expand() {
    super.expand();
    this.indicator.teleportTo(this.firstItem);
    requestAnimationFrame(() => {
      this.firstItem.element.focus();
    })
  }

  /**
   * @param item {BuxContextMenuItem}
   */
  addIndicatorListeners(item) {
    item.element.addEventListener("mouseenter", (event) => {
      if (this.itemElements.includes(event.relatedTarget)) {
        this.indicator.animateTo(item);
      } else {
        this.indicator.teleportTo(item);
        this.indicator.expand();
      }
    });
    item.element.addEventListener("mouseleave", (event) => {
      if (this.itemElements.includes(event.relatedTarget)) {
        return;
      }
      this.indicator.collapse();
    })
  }

}

/* ===============
    Instantiation
   =============== */

/**
 * Finds the first element that comes after the given trigger element in the DOM and has the popover container classname
 */
const getContainerFromTrigger = (trigger) => Array.from(document.querySelectorAll(
  $contextMenuConfig.queries.container))
  .find(container => trigger.compareDocumentPosition(container) === 4);

/**
 * Finds triggers, matches them with containers, and initializes controllers
 */
const initBuxContextMenus = () => {
  const triggers = Array.from(document.querySelectorAll($contextMenuConfig.queries.trigger));
  triggers.forEach(trigger => {
    const container = getContainerFromTrigger(trigger);
    if (!container) {
      console.warn(
        "BUX Context Menu found a trigger element, but couldn't find a container element that came after it in the DOM. This is probably an issue with the page's markup. No BUX Popover Context Menu can be created.");
      return;
    }
    return new BuxContextMenuController(trigger, container);
  });
};

initBuxContextMenus();