❤
npm
Sign UpSign In

emitit

0.2.0-beta • Public • Published

emitit

For when you just want to listen to decent events and then do something...

Technical Overview

Emitit is abstraction on top of the DOMs native event-API. This feels to be necessary, because of weird-ish DOM-behaviour (Opinion). What you want to is to abstract events, listen for them and then act on them and specific data, not whole DOM-objects. Also this module guides the user gently to bind events as low as possible for performance reasons. While we are at it we can add CSS on a per node basis, forcibly preventing defaults, such as user-select.

For convenience the module can be called in a script tag without requiring or including it explicitly. This works after including the JS-file in the header of the HTML-document. This is because the node-style JS is build with browserify and attached to the global window object.

Pass in options into the constructor and be ready to listen to events.

Usage

npm install emitit
# and require it in your own browserify build 

or

<!DOCTYPE html>
<html>
<head>
  <script src="../dist/emitter.min.js" charset="utf-8"></script> 
</head>
<body>
    <div class="container">
     <div class="emitter boxes">
       <div class="emitter square over">over</div>
       <div class="emitter square click">click</div>
     </div>
   </div>
 
   <script type="text/javascript">
 
     // bind all target boxes through css electors
     var opts = {
       targets: [
         //  '.emitter.square', // proof that dupes will be filtered
         '.emitter.square.over',
         '.emitter.square.click'
       ],
       eventNames: ['click'], //required, no default fallback
       emitMessage: 'hello',
       //  deffered: false, // speed deferrance default: false
       queryRoot: document.body,
       //  allowDupes: false,
       //  allowToggle: true,
       preventDefaults: [
         { property:'user-select', value: 'none'}
       ],
       //  map: [
       //    {mapTarget: '.emitter.square.up', eventName: 'mouseup'},
       //    {mapTarget: '.emitter.square.down', eventName: 'mousedown'}
       //  ]
     }
 
     var emitter = new Emitter(opts);
 
     emitter.on('hello', function() {
       console.log('hello from emitter 1');
     })
 
     emitter.on('error', function() {
       console.log(err);
     })
 
     emitter.emit('hello')
   </script> 
</body>
</html>

TODOs

  1. Test-suite
  2. CI-builds

Dependencies (0)

    Dev Dependencies (16)

    Package Sidebar

    Install

    npm i emitit

    Repository

    github.com/eljefedelrodeodeljefe/emitit

    Homepage

    github.com/eljefedelrodeodeljefe/emitit

    Weekly Downloads

    1

    Version

    0.2.0-beta

    License

    MIT

    Last publish

    Collaborators

    • eljefederodeodeljefe
    Try on RunKit
    Report malware