$inView helper

[SimoTod]

I'll give another go to the helper this week. I propose we support this signatures

$inView('#foo') //css selector
$inView($el|$refs.foo) //HTMLElement
$inView({
    target: $el|$refs.foo|'#foo'
    in: () => {...}, // Calback to fire when target enters the viewport
    out: () => {...}, // Calback to fire when target leaves the viewport
})

Use cases

<!-- Animate an element when a component enters the viewport -->
<div x-data>
    <div show.transition.duration.1000ms="$inView($el)">
</div>

<!-- Load more posts when the users scrolls to the bottom of the page -->
<div x-data="..." x-init="$inView({target: $ref.loader, in: () => loadNextPage()})">
    <div class="posts">
        <div class="post">...</div>
        <div class="post">...</div>
        <div class="post">...</div>
    </div>
    <button x-ref="loader" x-text="loading ? 'loading...' : 'load more'" :disabled="loading" @click="loadNextPage()"></button>
</div>

<!-- Show an icon when the menu is not visible -->
<div id="menu">...</div>
...
<div x-show="!$inView('#menu')" class="fixed ...">...</div>

Any thoughts?

[KevinBatdorf]

Love it. Can it default to $el if nothing is passed in?