|
|
|
/*
|
|
|
|
* 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;
|