upend/webui/src/components/BrowseColumn.svelte

<script lang="ts">
  import { createEventDispatcher, onMount, setContext, tick } from "svelte";
  import { normUrl } from "../util/history";
  import IconButton from "./utils/IconButton.svelte";
  import { selected } from "./EntitySelect.svelte";
  import type { BrowseContext } from "../util/browse";
  import { writable } from "svelte/store";
  import { useParams } from "svelte-navigator";
  import { i18n } from "../i18n";
  const dispatch = createEventDispatcher();
  const params = useParams();

  export let address: string | undefined = undefined;
  export let index: number;
  export let only: boolean;
  export let background = "var(--background-lighter)";
  export let forceDetail = false;
  let shifted = false;
  let key = Math.random();

  let detail = only || forceDetail;
  let detailChanged = false;
  $: if (!detailChanged) detail = only || forceDetail;
  $: if (detailChanged) tick().then(() => dispatch("detail", detail));

  let indexStore = writable(index);
  $: $indexStore = index;

  let addressesStore = writable([]);
  $: $addressesStore = $params.addresses?.split(",") || [];

  setContext("browse", {
    index: indexStore,
    addresses: addressesStore,
  } as BrowseContext);

  onMount(() => {
    // Required to make detail mode detection work in Browse
    dispatch("detail", detail);
  });
  $: if ($selected.length) {
    detail = false;
  }

  function visit() {
    window.open(normUrl(`/browse/${address}`), "_blank");
  }

  let width = 460;
  if (window.innerWidth < 600) {
    width = window.innerWidth - 6;
  }
  function drag(ev: MouseEvent) {
    const startWidth = width;
    const startX = ev.screenX;

    function onMouseMove(ev: MouseEvent) {
      width = startWidth + (ev.screenX - startX);
      width = width < 300 ? 300 : width;
    }
    function onMouseUp(_: MouseEvent) {
      window.removeEventListener("mousemove", onMouseMove);
      window.removeEventListener("mouseup", onMouseUp);
    }
    window.addEventListener("mousemove", onMouseMove);
    window.addEventListener("mouseup", onMouseUp);
  }

  function reload() {
    key = Math.random();
  }
</script>

<div
  class="browse-column"
  class:detail
  style="--background-color: {background}"
  on:mousemove={(ev) => (shifted = ev.shiftKey)}
>
  <div class="view" style="--width: {width}px">
    <header>
      {#if address}
        <IconButton name="link" on:click={() => visit()} disabled={only}>
          {$i18n.t("Detach")}
        </IconButton>
      {/if}
      {#if !forceDetail}
        <IconButton
          name={detail ? "zoom-out" : "zoom-in"}
          on:click={() => {
            detail = !detail;
            detailChanged = true;
          }}
          active={detail}
        >
          {$i18n.t("Detail")}
        </IconButton>
      {:else}
        <div class="noop"></div>
      {/if}
      {#if address}
        <IconButton
          name="intersect"
          on:click={() => dispatch("combine", address)}
        >
          {$i18n.t("Combine")}
        </IconButton>
      {/if}
      {#if !shifted}
        <IconButton
          name="x-circle"
          on:click={() => dispatch("close")}
          disabled={only}
        >
          {$i18n.t("Close")}
        </IconButton>
      {:else}
        <IconButton name="refresh" on:click={() => reload()}>
          {$i18n.t("Reload")}
        </IconButton>
      {/if}
    </header>
    {#key key}
      <slot {detail} />
    {/key}
  </div>
  <div class="resizeHandle" on:mousedown|preventDefault={drag} />
</div>

<style lang="scss">
  .browse-column {
    display: flex;
  }

  .browse-column.detail {
    width: 100%;

    .view {
      @media screen and (min-width: 600px) {
        min-width: 85vw;
        max-width: min(85vw, 1920px);
        margin-left: auto;
        margin-right: auto;
      }
    }
  }

  .view {
    min-width: var(--width);
    max-width: var(--width);

    display: flex;
    flex-direction: column;

    background: var(--background-color);
    color: var(--foreground-lighter);
    border: 1px solid var(--foreground-lightest);
    border-radius: 0.5em;
    padding: 1rem;

    // transition: min-width 0.2s, max-width 0.2s;
    // TODO - container has nowhere to scroll, breaking `detail` scroll

    header {
      font-size: 20px;
      position: relative;
      min-height: 1em;

      display: flex;
      justify-content: space-between;

      flex: none;
    }
  }

  .resizeHandle {
    cursor: ew-resize;
    height: 100%;
    width: 0.5rem;

    @media screen and (max-width: 600px) {
      display: none;
    }
  }
</style>