element-predictor

Predict which element (DOM) the user wants to interact with so that your web app can react faster!

Installation

npm install --save @jinwangchina/element-predictor

or

<script src="https://unpkg.com/@jinwangchina/element-predictor"></script>

Usage

Generic - html

<script src="https://unpkg.com/@jinwangchina/element-predictor"></script>
<script>
    var ep = elementPredictor.default;
    
    // setup
    ep.setup( {
        elementSelectors: [ "#buttonId1", "#buttonId2", "#buttonId3", "#buttonId4", "#buttonId5" ],
        handler: result => {
            if ( result ) {
                console.log( result.selector );  // the predicted element selector
                console.log( result.element );   // the predicted element object
                console.log( result.distance );  // the distance from cursor to the predicted element
            } else {
                console.log( "nothing predicted" );
            }
        }
    } );
    
    // start predicting
    ep.start();
    
    // stop predicting
    ep.stop();
    
    // destroy the setup
    ep.destroy();
</script>

Webpack

import ep from "@jinwangchina/element-predictor";

// setup
ep.setup( {
    elementSelectors: [ "#buttonId1", "#buttonId2", "#buttonId3", "#buttonId4", "#buttonId5" ],
    handler: result => {
        if ( result ) {
            console.log( result.selector );  // the predicted element selector
            console.log( result.element );   // the predicted element object
            console.log( result.distance );  // the distance from cursor to the predicted element
        } else {
            console.log( "nothing predicted" );
        }
    }
} );

// start predicting
ep.start();

// stop predicting
ep.stop();

// destroy the setup
ep.destroy();

Example

Check out "example" directory for the source code.

License

Apache-2.0