malice

<script lang="ts">

  import { tick } from 'svelte';

  import { lightbox } from './lightbox';

  let closeBtn: HTMLButtonElement | null = null;

  let returnFocus: HTMLElement | null = null;

  $: if ($lightbox) void focusClose();

  async function focusClose(): Promise<void> {

    if (!returnFocus) returnFocus = document.activeElement as HTMLElement | null;

    await tick();

    closeBtn?.focus();

  }

  function close(): void {

    lightbox.set(null);

    returnFocus?.focus();

    returnFocus = null;

  }

  function onKey(ev: KeyboardEvent): void {

    if ($lightbox && ev.key === 'Escape') {

      ev.stopPropagation();

      close();

    }

  }

</script>

<svelte:window on:keydown|capture={onKey} />

{#if $lightbox}

  <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->

  <div class="lightbox" role="dialog" tabindex="-1" aria-modal="true" aria-label={$lightbox.filename} on:click|self={close}>

    <div class="lightbox-bar">

      <span class="lightbox-name">{$lightbox.filename}</span>

      <a class="ghost-btn" href={$lightbox.src} target="_blank" rel="noopener noreferrer">Open original</a>

      <a class="ghost-btn" href={$lightbox.src} download={$lightbox.filename}>Download</a>

      <button type="button" class="icon-btn" aria-label="Close image" title="Close (Esc)" bind:this={closeBtn} on:click={close}>

        <span aria-hidden="true">✕</span>

      </button>

    </div>

    <!-- svelte-ignore a11y_click_events_have_key_events a11y_no_noninteractive_element_interactions -->

    <img class="lightbox-image" src={$lightbox.src} alt={$lightbox.alt} on:click={close} />

  </div>

{/if}

<style>

  .lightbox {

    position: fixed;

    inset: 0;

    z-index: 100;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 56px 24px 24px;

    background: rgb(0 0 0 / 0.82);

    backdrop-filter: blur(4px);

  }

  .lightbox-bar {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 10px 16px;

    color: #fff;

  }

  .lightbox-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }

  .lightbox-bar a { text-decoration: none; }

  .lightbox-image {

    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

    border-radius: 6px;

    box-shadow: 0 12px 40px rgb(0 0 0 / 0.5);

    cursor: zoom-out;

  }

</style>