duoyun-ui/elements/menu.js

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var _DuoyunMenuElement_instances, _DuoyunMenuElement_width_get, _DuoyunMenuElement_menuEles_get, _DuoyunMenuElement_offset, _DuoyunMenuElement_onEnterMenu, _DuoyunMenuElement_execHandle, _DuoyunMenuElement_onKeydown, _DuoyunMenuElement_preventDefault, _DuoyunMenuElement_initPosition, _DuoyunMenuElement_onMaskClick;
import { connectStore, adoptedStyle, customElement } from '@mantou/gem/lib/decorators';
import { GemElement, html } from '@mantou/gem/lib/element';
import { createCSSSheet, css, styleMap, classMap } from '@mantou/gem/lib/utils';
import { createStore, updateStore } from '@mantou/gem/lib/store';
import { icons } from '../lib/icons';
import { locale } from '../lib/locale';
import { setBodyInert } from '../lib/utils';
import { hotkeys } from '../lib/hotkeys';
import { theme } from '../lib/theme';
import { toggleActiveState } from '../lib/element';
import './compartment';
import './button';
import './options';
export const menuStore = createStore({
    menuStack: [],
});
let closeResolve;
const style = createCSSSheet(css `
  :host(:where(:not([hidden]))) {
    display: block;
    position: fixed;
    z-index: calc(${theme.popupZIndex} + 2);
    inset: 0;
    top: env(titlebar-area-height, var(--titlebar-area-height, 0px));
    font-size: 0.875em;
    cursor: default;
    user-select: none;
  }
  .mask {
    position: absolute;
    inset: 0;
  }
  .opaque {
    background: rgba(0, 0, 0, ${theme.maskAlpha});
  }
  .menu-custom-container {
    padding: 0.4em 1em;
  }
  .menu {
    outline: none;
    position: fixed;
    font-size: 1em;
    box-sizing: border-box;
    box-shadow: 0 0.3em 1em rgba(0, 0, 0, calc(${theme.maskAlpha} - 0.1));
    scrollbar-width: none;
  }
  .menu::-webkit-scrollbar {
    width: 0;
  }
`);
/**
 * @customElement dy-menu
 */
let DuoyunMenuElement = class DuoyunMenuElement extends GemElement {
    constructor() {
        super({ delegatesFocus: true });
        _DuoyunMenuElement_instances.add(this);
        _DuoyunMenuElement_offset.set(this, 4);
        _DuoyunMenuElement_onEnterMenu.set(this, (evt, menuStackIndex, subMenu) => {
            const { menuStack, openLeft } = menuStore;
            if (subMenu) {
                const itemEle = evt.currentTarget;
                const { left, right, top, bottom, width } = itemEle.getBoundingClientRect();
                const em = parseFloat(getComputedStyle(this).fontSize);
                const expectX = right - 0.75 * em;
                const expectY = top - 0.4 * em;
                const openTop = expectY > innerHeight - 150;
                const isToLeft = (right + width > innerWidth ||
                    openLeft ||
                    (menuStackIndex > 0 && menuStack[menuStackIndex].x < menuStack[menuStackIndex - 1].x)) &&
                    left > 300;
                updateStore(menuStore, {
                    menuStack: [
                        ...menuStack.slice(0, menuStackIndex + 1),
                        {
                            openTop,
                            x: isToLeft ? left - width + 0.75 * em : expectX,
                            y: openTop ? innerHeight - bottom - 0.4 * em : expectY,
                            menu: subMenu,
                        },
                    ],
                });
            }
            else {
                updateStore(menuStore, {
                    menuStack: menuStack.slice(0, menuStackIndex + 1),
                });
            }
        });
        _DuoyunMenuElement_execHandle.set(this, (handle) => {
            if (handle) {
                ContextMenu.close();
                handle();
            }
        });
        _DuoyunMenuElement_onKeydown.set(this, (evt, menuStackIndex) => {
            evt.stopPropagation();
            const focusPrevMenu = () => {
                var _a;
                updateStore(menuStore, {
                    menuStack: menuStore.menuStack.slice(0, menuStackIndex),
                });
                (_a = __classPrivateFieldGet(this, _DuoyunMenuElement_instances, "a", _DuoyunMenuElement_menuEles_get)[menuStackIndex - 1]) === null || _a === void 0 ? void 0 : _a.focus();
            };
            hotkeys({
                esc: menuStackIndex === 0 ? ContextMenu.close : focusPrevMenu,
                left: focusPrevMenu,
                right: () => { var _a; return (_a = __classPrivateFieldGet(this, _DuoyunMenuElement_instances, "a", _DuoyunMenuElement_menuEles_get)[menuStackIndex + 1]) === null || _a === void 0 ? void 0 : _a.focus(); },
            })(evt);
        });
        _DuoyunMenuElement_preventDefault.set(this, (evt) => {
            evt.preventDefault();
        });
        _DuoyunMenuElement_initPosition.set(this, async () => {
            // await `ContextMenu` content update
            await Promise.resolve();
            const element = __classPrivateFieldGet(this, _DuoyunMenuElement_instances, "a", _DuoyunMenuElement_menuEles_get).shift();
            const { activeElement, openLeft, menuStack, maxHeight } = menuStore;
            const { scrollHeight, clientHeight, clientWidth } = element;
            const menu = menuStack[0];
            const height = scrollHeight + 2;
            const width = clientWidth + 2;
            if (activeElement) {
                const { left, right, top, bottom } = activeElement.getBoundingClientRect();
                const showToLeft = openLeft ? left > width + __classPrivateFieldGet(this, _DuoyunMenuElement_offset, "f") : innerWidth - left < width + __classPrivateFieldGet(this, _DuoyunMenuElement_offset, "f");
                const showToTop = innerHeight - bottom < height + 2 * __classPrivateFieldGet(this, _DuoyunMenuElement_offset, "f") && top > innerHeight - bottom;
                const x = showToLeft ? right - width : left;
                const y = showToTop ? Math.max(top - height - 2 * __classPrivateFieldGet(this, _DuoyunMenuElement_offset, "f"), 0) : bottom;
                updateStore(menuStore, {
                    maxHeight: maxHeight || `${showToTop ? top - 2 * __classPrivateFieldGet(this, _DuoyunMenuElement_offset, "f") : innerHeight - bottom - 2 * __classPrivateFieldGet(this, _DuoyunMenuElement_offset, "f")}px`,
                    menuStack: [{ ...menu, x, y }],
                });
            }
            else {
                const y = innerHeight - menu.y > width ? menu.y : Math.max(0, menu.y - (scrollHeight - clientHeight));
                updateStore(menuStore, { menuStack: [{ ...menu, y }] });
            }
        });
        _DuoyunMenuElement_onMaskClick.set(this, () => {
            if (menuStore.maskClosable) {
                ContextMenu.close();
            }
        });
        this.mounted = () => {
            var _a;
            __classPrivateFieldGet(this, _DuoyunMenuElement_initPosition, "f").call(this);
            (_a = __classPrivateFieldGet(this, _DuoyunMenuElement_instances, "a", _DuoyunMenuElement_menuEles_get).shift()) === null || _a === void 0 ? void 0 : _a.focus();
            const restoreInert = setBodyInert(this);
            ContextMenu.instance = this;
            this.addEventListener('contextmenu', __classPrivateFieldGet(this, _DuoyunMenuElement_preventDefault, "f"));
            return () => {
                restoreInert();
                ContextMenu.instance = undefined;
            };
        };
        this.render = () => {
            const { menuStack, maxHeight, maskClosable } = menuStore;
            return html `
      <div class=${classMap({ mask: true, opaque: !maskClosable })} @click=${__classPrivateFieldGet(this, _DuoyunMenuElement_onMaskClick, "f")}></div>
      ${menuStack.map(({ x, y, menu, searchable, openTop, header }, index, _, calcWidth = __classPrivateFieldGet(this, _DuoyunMenuElement_instances, "a", _DuoyunMenuElement_width_get) === 'auto' ? '0px' : __classPrivateFieldGet(this, _DuoyunMenuElement_instances, "a", _DuoyunMenuElement_width_get)) => html `
          <dy-options
            class="menu"
            style=${styleMap({
                width: __classPrivateFieldGet(this, _DuoyunMenuElement_instances, "a", _DuoyunMenuElement_width_get),
                maxHeight: openTop
                    ? '20em'
                    : maxHeight && index === 0
                        ? `${maxHeight}`
                        : `calc(100vh - 0.8em - ${y - __classPrivateFieldGet(this, _DuoyunMenuElement_offset, "f")}px)`,
                [openTop ? 'bottom' : 'top']: `${y + __classPrivateFieldGet(this, _DuoyunMenuElement_offset, "f")}px`,
                left: `min(${x}px, calc(100vw - ${calcWidth} - ${2 * __classPrivateFieldGet(this, _DuoyunMenuElement_offset, "f")}px))`,
            })}
            @keydown=${(evt) => __classPrivateFieldGet(this, _DuoyunMenuElement_onKeydown, "f").call(this, evt, index)}
            ?searchable=${searchable}
            .options=${Array.isArray(menu)
                ? menu.map(({ text, description, tag, tagIcon, handle, disabled, selected, danger, menu: subMenu }, _index, __arr, onPointerEnter = (evt) => __classPrivateFieldGet(this, _DuoyunMenuElement_onEnterMenu, "f").call(this, evt, index, subMenu), onClick = !disabled ? (_evt) => __classPrivateFieldGet(this, _DuoyunMenuElement_execHandle, "f").call(this, handle) : undefined) => {
                    var _a;
                    return ({
                        label: text,
                        description,
                        tag,
                        disabled,
                        danger,
                        highlight: !!(subMenu && subMenu === ((_a = menuStack[index + 1]) === null || _a === void 0 ? void 0 : _a.menu)),
                        tagIcon: subMenu ? icons.right : selected ? icons.check : tagIcon,
                        onClick: subMenu ? onPointerEnter : onClick,
                        onPointerEnter,
                    });
                })
                : undefined}
          >
            ${Array.isArray(menu)
                ? header
                : html `
                  <div class="menu-custom-container">
                    <dy-compartment .content=${menu}></dy-compartment>
                  </div>
                `}
          </dy-options>
        `)}
    `;
        };
        document.body.append(this);
    }
    static async open(menu, options = {}) {
        var _a;
        const { activeElement, openLeft, x = 0, y = 0, width, maxHeight, searchable, header, maskClosable = true, } = options;
        if (Array.isArray(menu) && menu.length === 0)
            throw new Error('menu length is 0');
        toggleActiveState(activeElement, true);
        updateStore(menuStore, {
            width,
            maxHeight,
            activeElement,
            openLeft,
            maskClosable,
            menuStack: [{ x, y, menu, searchable, header }],
        });
        if (ContextMenu.instance) {
            await __classPrivateFieldGet((_a = ContextMenu.instance), _DuoyunMenuElement_initPosition, "f").call(_a);
        }
        else {
            new ContextMenu();
        }
        await new Promise((res) => (closeResolve = res));
    }
    static async confirm(text, options) {
        return new Promise((res, rej) => {
            const onClick = () => {
                ContextMenu.close();
                res(null);
            };
            ContextMenu.open(html `
          <style>
            .confirm-button {
              text-align: right;
              margin-top: 2em;
            }
          </style>
          <div class="confirm-text">${text}</div>
          <div class="confirm-button">
            <dy-button @click=${onClick} .color=${options.danger ? 'danger' : 'normal'}>
              ${options.okText || locale.ok}
            </dy-button>
          </div>
        `, options).then(rej);
        });
    }
    static close() {
        var _a, _b;
        if (!ContextMenu.instance)
            return;
        toggleActiveState(menuStore.activeElement, false);
        closeResolve();
        ContextMenu.instance.remove();
        // specify keyboard navigation location
        (_a = menuStore.activeElement) === null || _a === void 0 ? void 0 : _a.focus();
        (_b = menuStore.activeElement) === null || _b === void 0 ? void 0 : _b.blur();
    }
};
_DuoyunMenuElement_offset = new WeakMap(), _DuoyunMenuElement_onEnterMenu = new WeakMap(), _DuoyunMenuElement_execHandle = new WeakMap(), _DuoyunMenuElement_onKeydown = new WeakMap(), _DuoyunMenuElement_preventDefault = new WeakMap(), _DuoyunMenuElement_initPosition = new WeakMap(), _DuoyunMenuElement_onMaskClick = new WeakMap(), _DuoyunMenuElement_instances = new WeakSet(), _DuoyunMenuElement_width_get = function _DuoyunMenuElement_width_get() {
    return menuStore.width || '15em';
}, _DuoyunMenuElement_menuEles_get = function _DuoyunMenuElement_menuEles_get() {
    return [...this.shadowRoot.querySelectorAll('.menu')];
};
DuoyunMenuElement = __decorate([
    customElement('dy-menu'),
    connectStore(menuStore),
    adoptedStyle(style)
], DuoyunMenuElement);
export { DuoyunMenuElement };
export const ContextMenu = DuoyunMenuElement;
//# sourceMappingURL=menu.js.map