This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bandolier-template/client/components/IsVisible.svelte

33 lines
744 B

<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>