Outside - Lithesome

Preview

Code

<script lang="ts">
	import { outside } from 'lithesome';
	import { Container } from '$site/index.js';

	let count = $state<number>(0);
	let otherElement = $state<HTMLElement>();

	const increment = () => {
		count++;
	};
</script>

<div class="flex flex-col justify-center gap-8">
	<Container
		containerClass="w-[450px]"
		bodyClass="text-center select-none"
		{@attach outside(increment, { exclude: [otherElement] })}
	>
		<span>Clicked {count} time{count !== 1 ? 's' : ''}</span>
	</Container>

	<Container containerClass="w-[450px]" bodyClass="text-center select-none" bind:ref={otherElement}>
		<span> Don't run on this element. </span>
	</Container>
</div>

Basic Example

<script>
	import { outside } from 'lithesome';

	const callback = () => {
		alert('Out clicked outside!')
	}
</script>

<div {@attach outside(callback)}>
	Howdy!
</div>

Excluding elements

If you’re in the need to exclude elements from firing the callback, pass an optional object with the exclude property.

Any elements (string or HTMLElement) will be ignored when checking.

<script>
	import { outside } from 'lithesome';

	let button = $state();

	const callback = () => {
		alert('Out clicked outside!')
	}
</script>

<button bind:this={button}>Click me</button>
<button class="fancy-button">Click me</button>

<div {@attach outside(callback, { exlcude: [button, '.fancy-button'] })}>
	Howdy!
</div>

Now whenever we click any of the buttons, the outside callback will not be fired!

Different event

In some cases clicking is not the correct event to listen for.

By passing the on property into the optional object you can set which event is used to fire the callback.

<script>
	import { outside } from 'lithesome';

	const callback = () => {
		alert('Out clicked outside!')
	}
</script>

<div {@attach outside(callback, { on: 'mousemove' })}>
	Howdy!
</div>

The example above will now be called if the user moves their cursor outside the element.