Merge pull request #1 from Daniel-Hug/v1.0

V1.0

README.md

@@ -1,40 +1,69 @@
-DOM-Builder
+DOM Builder
 ===========
 
-Dom Builder comes with two functions, `DOM.buildNode` which accepts a [node object](#user-content-node-objects) as its only argument, and `DOM.buildDocFrag` which accepts an array of node objects as its only argument.
+Generate views from JS easy peasy with `dom()`
 
+### Create an element
+**pass:** [node value](#node-values)  
+**returns:** DOM node
+
+```js
+var checkbox = dom({
+	// specify element name
+	el: 'input',
+
+	// set attributes
+	type: 'checkbox',
+
+	// set JS properties
+	_checked: true
+
+	// listen to events:
+	on_change: function() {
+	    console.log(this.checked);
+	}
+});
+```
+
+
+### Create multiple elements
+**pass:** array of [node values](#node-values)  
+**returns:** [document fragment](https://developer.mozilla.org/en-US/docs/Web/API/Document/createDocumentFragment)
+
+```js
+var docFrag = dom([
+	{ el: 'li', text: 'Milk' },
+	{ el: 'li', text: 'Butter' },
+	{ el: 'li', text: 'Juice' }
+]);
+document.querySelector('.shopping-list').appendChild(docFrag);
+```
 
-## <a name="user-content-node-objects"></a>node objects
-A **node object** can either be a DOM node; a string, in which case a `textNode` will be created; or an object like the following, which creates an element.
+
+### Add child elements
+Set the `kids` property to an array of [node values](#node-values)
 
 ```js
-var input = DOM.buildNode({
-    el: 'input',
-    type: 'text',
-    placeholder: 'type something',
-    _autofocus: true
+var label = dom({
+	el: 'label',
+	kids: [checkbox, 'Satisfied?']
 });
-var output = DOM.buildNode({ el: 'output' });
-
-document.body.appendChild(DOM.buildDocFrag([
-    {
-        el: 'form',
-        on_submit: function(event) {
-            event.preventDefault();
-            output.textContent = input.value ? ' Text: ' + input.value : '';
-        },
-        kids: [ input, { el: 'button', kid: 'Go' } ]
-    },
-    output
-]));
+document.body.appendChild(label);
 ```
 
-### Node object properties
+### node values
+
+Node values can be any of the following:
+ - **object:** creates an element
+ - **string:** creates a text node
+ - **DOM node without parent:** uses the node
+
 
-All are optional. If `el` is unspecified, the element type defaults to 'div'.
+### properties
+These are the properties available for object literal [node values](#node-values). All are optional. If `el` is unspecified, the element type defaults to 'div'.
 
  - `el` (string): element type
- - `kids` (array of node objects): child nodes to append
- - `kid` (node object): single child node to append
- - `_className`, `_contenteditable`, etc. (string, boolean, etc.): JS properties to set on element
- - `on_input`, `on_click`, etc. (function or array of functions): event listener(s) to add
+ - `kids` (array of [node values](#node-values)): child nodes to append
+ - `text` (string): sets the text of the element
+ - `_className`, `_innerHTML`, etc. (string, boolean, etc.): JS properties to set on element
+ - `on_input`, `on_click`, etc. (function or array of functions): event listener(s) to add

dom.js

@@ -0,0 +1,63 @@
+// https://github.com/Daniel-Hug/DOM-Builder
+(function (root, factory) {
+	'use strict';
+	if (typeof define === 'function' && define.amd) {
+		// anonymous AMD module
+		define(factory);
+	} else {
+		// Browser globals
+		root.dom = factory();
+	}
+})(this, function() {
+	'use strict';
+	return function dom(nodeData) {
+		// string -> text node
+		if (typeof nodeData === 'string')
+			return document.createTextNode(nodeData);
+
+		// DOM node -> DOM node
+		if (nodeData instanceof Node) return nodeData;
+
+		// array -> document fragment
+		if (Array.isArray(nodeData)) {
+			// build each node and stick in docFrag
+			var docFrag = document.createDocumentFragment();
+			nodeData.forEach(function(nodeData) {
+				docFrag.appendChild(dom(nodeData));
+			});
+
+			return docFrag;
+		}
+
+		// object -> element
+		var el = document.createElement(nodeData.el || 'div');
+
+		for (var attr in nodeData) {
+			if (['el', 'kid', 'kids'].indexOf(attr) === -1) {
+				// set JS properties
+				if (attr[0] === '_') el[attr.slice(1)] = nodeData[attr];
+
+				// add event listeners
+				else if (attr.slice(0, 3) === 'on_') {
+					var eventName = attr.slice(3);
+					var handlers = nodeData[attr];
+
+					// accept a function
+					if (typeof handlers === 'function') handlers = [handlers];
+
+					// or an array of functions
+					for (var i = 0; i < handlers.length; i++) el.addEventListener(eventName, handlers[i], false);
+				}
+
+				// add html attributes
+				else el.setAttribute(attr, nodeData[attr]);
+			}
+		}
+
+		// add child nodes
+		if (nodeData.text) el.textContent = nodeData.text;
+		else if (nodeData.kids) el.appendChild(dom(nodeData.kids));
+
+		return el;
+	};
+});