fui

Functional User Interaction

fui

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

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

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(contexttargetxy) {
      this.state.down = true;
      
      context.beginPath();
      context.moveTo(x, y);
  })
  
  // handle pointer move events 
  .move(function(contexttargetxy) {
      if (this.state.down) {
          context.lineTo(x, y);
          context.stroke();
      }
  })
  
  // handle pointer up events 
  .up(function(contexttargetxy) {
      this.state.down = false;
      context.closePath();
  });