Skip to content
This repository was archived by the owner on Apr 4, 2020. It is now read-only.

README - add syntax highlighting #14

Open
adamchainz wants to merge 1 commit into
base: master
Choose a base branch
from
Open

README - add syntax highlighting #14

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
165 changes: 93 additions & 72 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,10 @@ structures in JavaScript; works with both node.js and the browser.

In node.js:

git clone git://github.com/afiore/arboreal
npm install
```sh
git clone git://github.com/afiore/arboreal
npm install
```

To use it in the browser, just load `lib/arboreal.js` in
a script tag.
Expand All @@ -20,134 +22,153 @@ a script tag.
Arboreal provides a set of methods for parsing, manipulating, and
traversing tree like data structures. A tree can be created from scratch and then extended with child elements.

var tree = new Arboreal()
```js
var tree = new Arboreal()

tree
.appendChild()
.appendChild()
.children[0]
.appendChild()
.appendChild();
tree
.appendChild()
.appendChild()
.children[0]
.appendChild()
.appendChild();
```

For each child node, Arboreal will automatically assign an id string representing the depth and the index
the position of the node within the tree structure.

tree.children[0].children[1].id
```js
tree.children[0].children[1].id

// => 0/0/1
// => 0/0/1
```

Alternatively, Arboreal can also parse an existing object into a tree (though it will need to
know the name of the 'children' attribute).

var wikipediaJsCategory = {
category: 'JavaScript',
subcategories: [
{category: 'Ajax (programming)'},
{category: 'JavaScript engines'},
{category: 'JavaScript programming languages family',
subcategories: [{
category: 'JavaScript dialect engines'
}]
},
{category: 'JavaScript based calendar components'},
{category: 'JavaScript based HTML editors'}
]
};

var tree = Arborel.parse(wikipediaJsCategory, 'subcategories');
```js
var wikipediaJsCategory = {
category: 'JavaScript',
subcategories: [
{category: 'Ajax (programming)'},
{category: 'JavaScript engines'},
{category: 'JavaScript programming languages family',
subcategories: [{
category: 'JavaScript dialect engines'
}]
},
{category: 'JavaScript based calendar components'},
{category: 'JavaScript based HTML editors'}
]
};

var tree = Arborel.parse(wikipediaJsCategory, 'subcategories');
```

### Traversal

An Arboreal object can be traversed either upwards or downwards.

function iterator (node) {
var depth = "", i;
for (i = 1; i <= node.depth; i++) depth += ">>";
console.info([depth, node.data.category].join(" "));
}
```js
function iterator (node) {
var depth = "", i;
for (i = 1; i <= node.depth; i++) depth += ">>";
console.info([depth, node.data.category].join(" "));
}

tree.traverseDown(iterator);
tree.traverseDown(iterator);

// => JavaScript
// >> Ajax (programming)
// >> JavaScript engines
// >> JavaScript produgramming languages family
// >>>> JavaScript dialect engines
// >> JavaScript based calendar components
// >> JavaScript based HTML editors
// => JavaScript
// >> Ajax (programming)
// >> JavaScript engines
// >> JavaScript produgramming languages family
// >>>> JavaScript dialect engines
// >> JavaScript based calendar components
// >> JavaScript based HTML editors


tree.children[2].traverseUp(iterator);

// => >> JavaScript produgramming languages family
// >>>> JavaScript dialect engines
// JavaScript
// >> Ajax (programming)
// >> JavaScript engines
// >> JavaScript based calendar components
// >> JavaScript based HTML editors
tree.children[2].traverseUp(iterator);

// => >> JavaScript produgramming languages family
// >>>> JavaScript dialect engines
// JavaScript
// >> Ajax (programming)
// >> JavaScript engines
// >> JavaScript based calendar components
// >> JavaScript based HTML editors
```

Note that in both the `traverseDown` and the `traverseUp` methods, the
value of `this` in the iterator is bound to the value of the
currently traversed `node`. Our iterator function can in fact be
rewritten as:

function iterator () {
var depth = "", i;
for (i = 1; i <= this.depth; i++) depth += ">>";
console.info([depth, this.data.category].join(" "));
}
```js
function iterator () {
var depth = "", i;
for (i = 1; i <= this.depth; i++) depth += ">>";
console.info([depth, this.data.category].join(" "));
}
```

### Search

In order to search for a single node into an arboreal object, one can use the `find`
method.

tree.find(function (node) {
return (/calendar/).test(node.data.category)
}).data.category;
```js
tree.find(function (node) {
return (/calendar/).test(node.data.category)
}).data.category;

// => JavaScript based calendar components
// => JavaScript based calendar components
```

The find method will also accept a string as an argument. In that case,
it will try to find a node by id.

tree.find("0/2/0").data.category
```js
tree.find("0/2/0").data.category

// => JavaScript dialect engines
// => JavaScript dialect engines
```

### Manipulation

While traversing a tree, nodes can be deleted by calling the `remove`
method on the node object bound to the iterator function.

tree.length
```js
tree.length

// => 7
// => 7

tree.traverseDown(function (item) {
var toDelete = 'JavaScript programming languages family';
if (item.data.category === toDelete) {
this.remove();
}
});
tree.traverseDown(function (item) {
var toDelete = 'JavaScript programming languages family';
if (item.data.category === toDelete) {
this.remove();
}
});

tree.length;
tree.length;

// 5
// 5
```

## Testing

Arboreal test suite uses [Jasmine](http://pivotal.github.com/jasmine/).
To run it in node.js..

cd /home/me/code/arboreal && npm test
```sh
cd /home/me/code/arboreal && npm test
```

To run it in the browser, just open the `test/index.html`

## Minfication

A minified version of Arboreal can be generated by running

node make.js
```sh
node make.js
```