nd-element

0.1.0 • Public • Published

nd-element

Stream in dom elements or html strings to add and update them as a nested multidimensional array.

testling badge

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 path
  • opts.container = 'data-container' the attribute for container indexes
  • opts.tag = 'div' the tag to use for containers
  • opts.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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.1.0
    0
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.1.0
    0

Package Sidebar

Install

npm i nd-element

Weekly Downloads

0

Version

0.1.0

License

MIT

Last publish

Collaborators

  • nrw