forked from MapComplete/MapComplete
34 lines
951 B
Svelte
34 lines
951 B
Svelte
|
<script lang="ts">
|
||
|
|
import {UIEventSource} from "../../Logic/UIEventSource";
|
||
|
|
import {onDestroy} from "svelte";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Functions as 'If', but uses 'display:hidden' instead.
|
||
|
|
*/
|
||
|
|
export let condition: UIEventSource<boolean>;
|
||
|
|
let _c = condition.data;
|
||
|
|
let hasBeenShownPositive = false
|
||
|
|
let hasBeenShownNegative = false
|
||
|
|
onDestroy(condition.addCallbackAndRun(c => {
|
||
|
|
/* Do _not_ abbreviate this as `.addCallback(c => _c = c)`. This is the same as writing `.addCallback(c => {return _c = c})`,
|
||
|
|
which will _unregister_ the callback if `c = true`! */
|
||
|
|
hasBeenShownPositive = hasBeenShownPositive || c
|
||
|
|
hasBeenShownNegative = hasBeenShownNegative || !c
|
||
|
|
_c = c;
|
||
|
|
return false
|
||
|
|
}))
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
{#if hasBeenShownPositive}
|
||
|
|
<span class={_c ? "" : "hidden"}>
|
||
|
|
<slot/>
|
||
|
|
</span>
|
||
|
|
{/if}
|
||
|
|
|
||
|
|
{#if hasBeenShownNegative}
|
||
|
|
<span class={_c ? "hidden" : ""}>
|
||
|
|
<slot name="else"/>
|
||
|
|
</span>
|
||
|
|
{/if}
|