bandolier-website/client/components/IsVisible.svelte

<script>
  import { visibility } from "$/client/helpers.js";
  import { createEventDispatcher } from "svelte";

  export let options = { threshold: 0};
  export let visible = false;
  export let idempotent = false; // this will make the visible slot stick
  const dispatch = createEventDispatcher();

  const show = (entry) => {
    visible = true;
    dispatch("visible", entry);
  }

  const hide = (entry) => {
    // only do the hide if status is false
    if(!idempotent) {
      visible = false;
      dispatch("hidden", entry);
    }
  }
</script>

<div use:visibility={ options } on:visible={ show } on:hidden={ hide }>
  {#if visible}
    <slot name="visible">
    </slot>
  {:else}
    <slot name="hidden">
    </slot>
  {/if}
</div>