tweb-i2p/src/components/buttonMenuToggle.ts

/*
 * https://github.com/morethanwords/tweb
 * Copyright (C) 2019-2021 Eduard Kuzmenko
 * https://github.com/morethanwords/tweb/blob/master/LICENSE
 */

import contextMenuController from '../helpers/contextMenuController';
import cancelEvent from '../helpers/dom/cancelEvent';
import {AttachClickOptions, CLICK_EVENT_NAME} from '../helpers/dom/clickEvent';
import ListenerSetter from '../helpers/listenerSetter';
import ButtonIcon from './buttonIcon';
import ButtonMenu, {ButtonMenuItemOptions} from './buttonMenu';

const ButtonMenuToggle = (
  options: Partial<{
    noRipple: true,
    onlyMobile: true,
    listenerSetter: ListenerSetter,
    asDiv: boolean,
    container: HTMLElement
  }> = {},
  direction: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right',
  buttons: ButtonMenuItemOptions[],
  onOpen?: (e: Event) => void,
  onClose?: () => void
) => {
  options.asDiv = true;
  const button = options.container ?? ButtonIcon('more', options);
  button.classList.add('btn-menu-toggle');

  const btnMenu = ButtonMenu(buttons, options.listenerSetter);
  btnMenu.classList.add(direction);
  ButtonMenuToggleHandler(button, onOpen, options, onClose);
  button.append(btnMenu);
  return button;
};

// TODO: refactor for attachClickEvent, because if move finger after touchstart, it will start anyway
const ButtonMenuToggleHandler = (el: HTMLElement, onOpen?: (e: Event) => void | Promise<any>, options?: AttachClickOptions, onClose?: () => void) => {
  const add = options?.listenerSetter ? options.listenerSetter.add(el) : el.addEventListener.bind(el);

  // console.trace('ButtonMenuToggleHandler attach', el, onOpen, options);
  add(CLICK_EVENT_NAME, (e: Event) => {
    // console.log('ButtonMenuToggleHandler click', e);
    if(!el.classList.contains('btn-menu-toggle')) return false;

    // window.removeEventListener('mousemove', onMouseMove);
    const openedMenu = el.querySelector('.btn-menu') as HTMLDivElement;
    cancelEvent(e);

    if(el.classList.contains('menu-open')) {
      contextMenuController.closeBtnMenu();
    } else {
      const result = onOpen && onOpen(e);
      const open = () => {
        contextMenuController.openBtnMenu(openedMenu, onClose);
      };

      if(result instanceof Promise) {
        result.then(open);
      } else {
        open();
      }
    }
  });
};

export {ButtonMenuToggleHandler};
export default ButtonMenuToggle;