fui

This is an experimental library to experiment whether handling of events can neatly be abstracted away from the actual event handling code itself.

Examples

There are examples available both in this repository, and online at jsfiddle:

• Simple Draw Example - Manual Event Handling
• Simple Draw Example - Using Template

Example Code

Here is some very early example code (which is actually running):

fui()
  // only continue if the element matches the selector (uses qwery)
  .filter('canvas')
  
  // convert to relative coordinates
  .relative()
  
  // for each of the targets matched, push a context onto the argument list
  .each(function(target) {
      this.args.unshift(target.getContext('2d'));
  })
  
  // handle pointer down events
  .down(function(context, target, x, y) {
      this.state.down = true;
      
      context.beginPath();
      context.moveTo(x, y);
  })
  
  // handle pointer move events
  .move(function(context, target, x, y) {
      if (this.state.down) {
          context.lineTo(x, y);
          context.stroke();
      }
  })
  
  // handle pointer up events
  .up(function(context, target, x, y) {
      this.state.down = false;
      context.closePath();
  });

Reference

bind(target, evtName, callback)

EventChain(opts)

each(handler)

filter(selector)

relative()

pipe(target)

down(handler)

up(handler)

move(handler)

_next(evt)

_on(eventName, handler)

_step(stepHandler)

FuiEventSource

add(chain)

handle(eventName)

_createEvent(name, evt)