From f6d259afb8ee51b0e19cd2e8f115dc523797d98b Mon Sep 17 00:00:00 2001 From: Daniel Hug Date: Mon, 18 Jan 2016 10:24:56 -0800 Subject: [PATCH] refactor dom.js, update demo --- bower.json | 1 - dom.js | 79 ++++++++++++++++++++++++++++++++---------------------- 2 files changed, 47 insertions(+), 33 deletions(-) diff --git a/bower.json b/bower.json index fad2f24..52807e2 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,5 @@ { "name": "DOM-Builder", - "version": "0.0.0", "homepage": "https://github.com/Daniel-Hug/DOM-Builder", "authors": [ "Daniel Hug" diff --git a/dom.js b/dom.js index 94033b5..525af16 100644 --- a/dom.js +++ b/dom.js @@ -10,54 +10,69 @@ } })(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)); - }); + function createDocFrag(array) { + // build each node and stick in docFrag + var docFrag = document.createDocumentFragment(); + array.forEach(function(nodeData, i) { + docFrag.appendChild(dom(nodeData)); + }); - return docFrag; - } + return docFrag; + } - // object -> element - var el = document.createElement(nodeData.el || 'div'); + function createEl(elData) { + var el = document.createElement(elData.el || 'div'); - for (var attr in nodeData) { - if (['el', 'kid', 'kids'].indexOf(attr) === -1) { + Object.keys(elData).forEach(function(key) { + if (['el', 'text', 'kids'].indexOf(key) === -1) { // set JS properties - if (attr[0] === '_') el[attr.slice(1)] = nodeData[attr]; + if (key[0] === '_') { + el[key.slice(1)] = elData[key]; + } - // add event listeners - else if (attr.slice(0, 3) === 'on_') { - var eventName = attr.slice(3); - var handlers = nodeData[attr]; + // add event listener(s) + else if (key.slice(0, 3) === 'on_') { + var eventName = key.slice(3); + var handlers = elData[key]; // 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); + for (var i = 0; i < handlers.length; i++) { + el.addEventListener(eventName, handlers[i], false); + } } // add html attributes - else el.setAttribute(attr, nodeData[attr]); + else el.setAttribute(key, elData[key]); } - } + }); - // add child nodes - if (nodeData.text) el.textContent = nodeData.text; - else if (nodeData.kids) el.appendChild(dom(nodeData.kids)); + // set text + if (elData.text) el.textContent = elData.text; + + // otherwise add child nodes + else if (elData.kids) el.appendChild(createDocFrag(elData.kids)); return el; + } + + return function dom(nodeData) { + var type = typeof nodeData; + + // string -> text node + return type === 'string' || type === 'number' ? + document.createTextNode(nodeData) : + + // DOM node -> DOM node + nodeData instanceof Node ? nodeData : + + // array -> document fragment + Array.isArray(nodeData) ? createDocFrag(nodeData) : + + // object -> element + createEl(nodeData); }; -}); +}); \ No newline at end of file