doxxy

    0.4.0 • Public • Published

    Doxxy

    DOM Event Proxy - channel all bubbling events via a proxy listener to controller methods.

    Doxxy is a minimalistic, dependency-free tool that allows the markup to change without the event listeners being bound to either the markup or the global context.

    This allows more flexibility between user-actions and page rerenders/reflows regardless whether the markup is rendered on the server or the client side.

    Consider this basic example:

    <!-- html - View -->
    <button onclick="onclick">Click me!</button>
    //js - Controller
    function onclick() {
        alert('Hello world!')
    }

    In this case the onclick handler is created on and referenced from the global context (Window), polluting the global namespace.

    With Doxxy, the event listeners are soft-referenced and live in their scope of declaration.

    Adding listeners with Doxxy:

    <button data-event:click="click">Click me!</button>

    Script

    dx.action('click', e => alert('Hello world!'));

    This way multiple UI control elements can be channelled through the same event listener.

    Doxxy does not conflict with existing frameworks as it is using data-event:[type] attribute and does not rely on other dependencies or frameworks.

    Current development target: latest browsers

    Usage

    Setup

    import doxxy from 'doxxy';
     
    // initialise a Doxxy on a Node
    const dx = doxxy();

    Configuration

    By default doxxy automatically subscribes the proxy listener to all events that bubble up to the `document`` Node.

    You can subscribe to a custom Node with custom events

    const node = document.createElement('video'); // optional
    const events = [ 'canplay', 'timeupdate', 'ended' ]; // optional
    const vx = doxxy({ node, events });

    Adding user actions

    User actions can be either functions or objects grouping together user actions within the same topic

    User action as a function:

    dx.action('hello', e => alert("Hello World!"));

    User actions as an object:

    const start = (e) => e.dataTransfer.setData('text/plain', 'hakuna matata');
    dx.action('drag', { start });

    Proxy/route events to user actions

    Event declaration in the markup's data attribute.

    Concept: Event (such as click) >> User Action (any predefined user action)

    Example

    <button data-event:click="hello">Hello World!</button>

    Or

    <div data-event:dragstart="drag.start" draggable="true"></div>

    Adding parameters to user actions

    In the attribute value: [action]:[param]

    <li data-event:click="showItem:0"></li>

    Or use doxxy attribute generator

    const attr = dx.attribute('click', 'showItem', 0);
    const html = `<li ${attr}></li>`;

    Unbinding Doxxy

    dx.unbind();

    Keywords

    none

    Install

    npm i doxxy

    DownloadsWeekly Downloads

    1

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    30.1 kB

    Total Files

    12

    Last publish

    Collaborators

    • benqus