Turn DOM elements into readable / writable streams.
Designed for use with Browserify and domnode or component.
var domstream = require('domnode-dom')
, input = document.querySelector('input[type=text]')
, output = document.querySelector('div#output')
// replace the contents entirely with plain text generated
// by the <input> element!
domstream
.createReadStream(input)
.pipe(domstream.createWriteStream(output, 'text/plain'))
// grab a url and replace the body with its contents!
http
.get('/some/url')
.pipe(domstream.createAppendStream(output, 'text/html'))
// extend mimetypes:
domstream.WriteStream.prototype.constructImagePng = function(data) {
var img = document.createElement('img')
img.src = data
return img
}
// now anything you type will be used as the source for an image tag!
// or replace the contents entirely with plain text!
domstream
.createReadStream(input)
.pipe(domstream.createWriteStream(output, 'image/png'))
To view the example:
$ git clone git://github.com/chrisdickinson/domnode-dom.git
$ cd domnode-dom.git
$ browserify example.js > examples/main.bundle.js
$ python -m SimpleHTTPServer 9090 &; bg;
$ open http://localhost:9090/
Creates a writable stream out of an element. Writing to this stream
will replace the contents of el
with the incoming data (transformed
by the mimetype.)
As above, this will create a writable stream to an element's contents.
However, unlike the above, writes to this element will append their data (transformed by mimetype) to the element, instead of replacing it.
Currently only two mimetypes are supported:
text/plain
andtext/html
. The writable stream object dispatches based on its mimetype in the following fashion:
text/html
->writeStream.constructTextHtml
text/plain
->writeStream.constructTextPlain
application/json
->writeStream.constructApplicationJson
(example only)
text/plain
will properly create text nodes out of incoming data, whiletext/html
will create full DOMNodes out of the incoming data.
Creates a readable stream out of eventName
events emitted by el
.
In most cases, the emitted event will simply be the DOM event object.
However, in the case of submit
, change
, keyup
and keydown
, the
emitted data will be the current value of the element.
In the case of form elements, the current value will be a key-value mapping of all of their constituent inputs:
<form id="form">
<input type="text" id="text" name="text" />
<input type="submit" name="submit" value="submit" />
</form>
<a href="#" id="anchor">anchor</a>
var form = document.getElementById('form')
, text = document.getElementById('text')
, anchor = document.getElementById('anchor')
var domstream = require('domstream')
// will emit dom Event objects on click
domstream.createReadStream(anchor, 'click')
.on('data', function(data) { console.log(data) })
// will emit the current value of the input on keyup
domstream.createReadStream(text, 'keyup')
.on('data', function(data) { console.log(data) })
// will emit an object containing { text: <value of text input> }
// when submitted
domstream.createReadStream(form, 'submit')
.on('data', function(data) { console.log(data) })
MIT.