BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/framework/helpers/dropdowns.ts

   1
   2
   3
   4 interface HandleDropdownParams {
   5     toggle: HTMLElement;
   6     menu: HTMLElement;
   7     showOnHover?: boolean,
   8     onOpen?: Function | undefined;
   9     onClose?: Function | undefined;
  10 }
  11
  12 export function handleDropdown(options: HandleDropdownParams) {
  13     const {menu, toggle, onClose, onOpen, showOnHover} = options;
  14     let clickListener: Function|null = null;
  15
  16     const hide = () => {
  17         menu.hidden = true;
  18         if (clickListener) {
  19             window.removeEventListener('click', clickListener as EventListener);
  20         }
  21         if (onClose) {
  22             onClose();
  23         }
  24     };
  25
  26     const show = () => {
  27         menu.hidden = false
  28         clickListener = (event: MouseEvent) => {
  29             if (!toggle.contains(event.target as HTMLElement) && !menu.contains(event.target as HTMLElement)) {
  30                 hide();
  31             }
  32         }
  33         window.addEventListener('click', clickListener as EventListener);
  34         if (onOpen) {
  35             onOpen();
  36         }
  37     };
  38
  39     const toggleShowing = (event: MouseEvent) => {
  40         menu.hasAttribute('hidden') ? show() : hide();
  41     };
  42     toggle.addEventListener('click', toggleShowing);
  43     if (showOnHover) {
  44         toggle.addEventListener('mouseenter', toggleShowing);
  45     }
  46
  47     menu.addEventListener('mouseleave', hide);
  48 }