malice

<script lang="ts" context="module">

  export interface MenuItem {

    label: string;

    action: () => void;

    danger?: boolean;

    disabled?: boolean;

  }

</script>

<script lang="ts">

  import { onMount, tick } from 'svelte';

  export let items: MenuItem[];

  export let x: number;

  export let y: number;

  export let onClose: () => void;

  const MARGIN = 8;

  let menu: HTMLDivElement;

  let left = x;

  let top = y;

  onMount(async () => {

    await tick();

    const rect = menu.getBoundingClientRect();

    left = Math.max(MARGIN, Math.min(x, window.innerWidth - rect.width - MARGIN));

    top = Math.max(MARGIN, Math.min(y, window.innerHeight - rect.height - MARGIN));

    menu.querySelector<HTMLButtonElement>('button:not(:disabled)')?.focus();

  });

  function pick(item: MenuItem): void {

    onClose();

    item.action();

  }

  function outside(ev: PointerEvent): void {

    if (!menu.contains(ev.target as Node)) onClose();

  }

  function key(ev: KeyboardEvent): void {

    if (ev.key === 'Escape') {

      ev.stopPropagation();

      onClose();

    }

  }

</script>

<svelte:window on:pointerdown|capture={outside} on:keydown|capture={key} on:resize={onClose} on:blur={onClose} />

<div class="context-menu" role="menu" style={`left:${left}px;top:${top}px`} bind:this={menu}>

  {#each items as item}

    <button type="button" role="menuitem" class:danger={item.danger} disabled={item.disabled} on:click={() => pick(item)}>

      {item.label}

    </button>

  {/each}

</div>

<style>

  .context-menu {

    position: fixed;

    z-index: 90;

    min-width: 180px;

    display: flex;

    flex-direction: column;

    padding: 4px;

    background: var(--panel-2);

    border: 1px solid var(--border);

    border-radius: 8px;

    box-shadow: 0 8px 24px rgb(0 0 0 / 0.35);

  }

  button {

    background: transparent;

    border: none;

    border-radius: 6px;

    color: var(--text);

    font: inherit;

    font-size: 13.5px;

    text-align: left;

    padding: 7px 10px;

    cursor: pointer;

  }

  button:hover:not(:disabled), button:focus-visible { background: var(--hover); outline: none; }

  button:disabled { opacity: 0.5; cursor: default; }

  .danger { color: var(--danger); }

</style>