camwiegert/in-view

Simplify `enter` / `exit` events processing with callback: possible to pass the event type into the callback?

WhereJuly opened this issue · 0 comments

The utility is great and thanks a lot for this.

However it would be twice as efficient for a user not to be obliged to write two callbacks, one per each type of event, but instead write only one callback which would process both events.

Now a user has to write two callbacks like this:

    function testHandlerEnter(elt) {
        console.log(elt.id + ' enters viewport');
        // do necessary things on entering viewport
    }

    function testHandlerExit(elt) {
        console.log(elt.id + ' exiting viewport');
       // do necessary things on exiting viewport
    }

I assume the change is quite quick, some 10 minutes including build somewhere here in registry.js (I wish I could pull and make a change but I cannot work with ES6 yet):

    /**
    * Emit event on given element. Used mostly
    * internally, but could be useful for users.
    */
    emit(event, element) {
        while(this.singles[event].length) {
            // Add event here ??
            this.singles[event].pop()(element, event); 
        }
        let length = this.handlers[event].length;
        while (--length > -1) {
            // Or here??
            this.handlers[event][length](element, event);
        }
        return this;
    }

With this small change the user just needs only one function to process both events. E.g.:

    // See event type passed into the callback
    function inViewHandler(elt, event) {
        console.log(elt.id + event+ ' viewport');
       if (event === 'enter') {
           // do necessary things on entering viewport
       } else {
           // do necessary things on exiting viewport
       }
    }

This could be much clearer.
Thanks in advance.

And BTW being able to pass the DOM element reference to inView could be a great simplification for a tiny time spent.

Thanks again.