nd-element
v0.1.0
Published
stream in dom elements or html strings to add and update them as a nested multidimensional array
Downloads
3
Maintainers
Readme
nd-element
Stream in dom elements or html strings to add and update them as a nested multidimensional array.
Bundle this module with browserify.
Example
var ndElement = require('nd-element');
var target = document.querySelector('#content');
var n = ndElement(target);
var docs = [
'<div data-point="0,0,1">a</div>',
'<div data-point="0,0,2">b</div>',
'<div data-point="2,0,2">c</div>',
'<div data-point="0,1,3">d</div>'
]
docs.forEach(function (doc) { n.write(doc) });
The #content
element will now contain this html structure (without the extra
whitespace added here for legibility):
<div data-container="0">
<div data-container="0">
<div data-container="1">
<div data-point="0,0,1">a</div>
</div>
<div data-container="2">
<div data-point="0,0,2">b</div>
</div>
</div>
<div data-container="1">
<div data-container="3">
<div data-point="0,1,3">d</div>
</div>
</div>
</div>
<div data-container="2">
<div data-container="0">
<div data-container="2">
<div data-point="2,0,2">c</div>
</div>
</div>
</div>
Usage
var n = ndElement(element, opts={})
Returns a new nd-element
writable stream. Write html strings or html elements
with a comma-separated n-dimensional point path in data-point
attribute. The
provided element
will be modified to create the n-dimensional structure
required by the data-point
path.
options
opts.point = 'data-point'
the attribute that contains the point pathopts.container = 'data-container'
the attribute for container indexesopts.tag = 'div'
the tag to use for containersopts.id = element.id || 'nd-element-'+n
the id of the base element (the base element must have an id set for the>
selector this module uses)
Notes
You can use nd-point
to find a
multidimensional point for objects based on their properties.
Contributing
Please make any changes to the .coffee
source files and npm build
before
sending a pull request.
License
MIT