Skip to content

jwerle/domstream

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

domstream

Turn DOM element events into streams

Installation

$ component install jwerle/domstream

Usage

binding the 'mousemove' and 'mouseout' events as starting and ending points to a stream on a DOM element

var domstream = require('domstream')
  , el = document.getElementById('el')
  , stream = domstream(el).source({start: 'mousemove', end: 'mouseout'})

stream.through(
  function write (data) {
    this.push({x:data.x, y:data.y});
  },
  function end (buf) {
    for (var i = 0; i < buf.length; ++i) {
      var d = buf.shift()
      console.log(d.x, d.y)
    }
  });

The above is just short hand for:

stream.on('data', function (data) {
  stream.push({x: data.x, y: data.y})
});

stream.on('end', function () {
  var buf = stream.read();
  for (var i = 0; i < buf.length; ++i) {
    var d = buf.shift()
    console.log(d.x, d.y)
  }
});

API

domstream(el)

Accepts a DOM Node and returns a readable/writable DOMStream influenced from node.js

var stream = domstream(document.getElementById('node'));

Events

'readable'

When there is data ready to be consumed, this event will fire.

'data'

Emitted when data is written to stream.

'end'

Emitted when the end of stream event has been emitted.

'error'

Emitted if there was an error receiving data.

#source(opts)

  • .start - The event that when emitted instantiates the 'data' event of the stream
  • .end - The event that when emitted instantiates the end of the stream which will emit the 'end' event
stream.source({start: 'dragstart', end: 'dragend'});

#write(data)

Writes data to stream

stream.write({some: 'data'});

#push(data) | queue(data)

Pushes a chunk to the stream buffer

stream.push({data: 'for later'});

#unshift(data)

Unshifts a chunk to the stream buffer

stream.unshift({data: 'for later'});

#read(size, offset)

Reads a given optional size to read from the stream buffer

var data = stream.read(5);
var buf = stream.read();

#end(data)

Writes data to stream and emits end event

stream.end({even: 'more data'});

#use(fn)

Pushes a function to the startStack array for acting like middle ware to data emitted from for the start event defined with bind() or source()

stream.use(function (data, next) {
  data.property = "value";
  next();
});

#through(write, end)

Defines a write and end handle for the stream handle

stream.through(
function write (data) {
  this.push(data);
},
function end () {
  console.log(this.read());
});

#pipe(dest, opts)

Pipes stream to a Writeable stream (lightly ported from node.js)

stream.pipe(otherStream);

License

MIT

About

Turn DOM element events into streams

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published