node package manager

svelte-panel-click

svelte-panel-click

Small web component to determine if clicks occur inside or outside a panel.

install

The normal way: npm install --save svelte-panel-click

api

Any time a click event happens within the window, this component emits one of two events:

  • clickInternal - When the click event happens inside the component element.
  • clickExternal - When the click event happens outside the component element.

example

This component might be used for a modal popup that is hidden when click events outside the modal happen:

<p>Normal body text.</p>
{{#if visible}}
    <PanelClick
        on:clickExternal="externalClickHandler(event)"
        on:clickInternal="internalClickHandler(event)"
    >
        <p>Text inside the panel.</p>
        <button on:click="set({ visible: false })">
            Hide Panel
        </button>
    </PanelClick>
{{/if}}
<p>More normal body text.</p>
<button
    ref:button
    on:click="set({ visible: true })"
>
    Show Panel
</button>
 
<script>
import PanelClick from 'svelte-panel-click'
export default {
    components: { PanelClick },
    methods: {
        externalClickHandler(event) {
            if (event.target !== this.refs.button) {
                // the click was *not* on the "Show Panel" button 
                this.set({ visible: false })
            }
        }
    }
}
</script> 

license

Published and released under the Very Open License.