jpc-like-websites/src/handlers/contextMenu.js

/**
 * Default implementation of a contextmenu-behaviour
 */
const DefaultContextMenu = {
    openContextMenuAction: function (identifier, refPos) {
        if (!refPos) {
            refPos = function (event) {
                return new Sides()
                    .left(event.pageX)
                    .top(event.pageY);
            }
        }

        return function (event) {
            event.preventDefault();

            if (refPos instanceof Function) {
                refPos = refPos(event);
            }

            let menu = document.querySelector(`[data-autocompel="${identifier}"`);

            menu.style.left = `${refPos.getByIndex(SideDirections.LEFT)}px`;
            menu.style.top = `${refPos.getByIndex(SideDirections.TOP)}px`;

            helperFun.toggleElementVisibility(menu, true);
            helperFun.toggleElementVisibility(menu);

            document.addEventListener(
                "click",
                DefaultContextMenu.hideOnClickOutsideBoundsAction(identifier)
            );
            document.addEventListener(
                "keyup",
                DefaultContextMenu.hideOnEscapeAction(identifier)
            );
        }

    }
    ,
    hideOnEscapeAction: function (identifier) {
        return function (event) {
            if (event.key === "Escape") {
                let menu = document.querySelector(`[data-autocompel="${identifier}"`);
                helperFun.toggleElementVisibility(menu, true);
                document.removeEventListener("keyup");
            }
        }
    }
    ,
    hideOnClickOutsideBoundsAction: function (identifier) {
        return function (event) {
            let menu = document.querySelector(`[data-autocompel="${identifier}"`);

            let area = getEnclosingBounds(menu);

            if (!areXYInArea(area, event.clientX, event.clientY)) {
                helperFun.toggleElementVisibility(menu, true);
                document.removeEventListener("click")
            }
        }
    }
};