|
|
|
;(function() { |
|
|
|
var global = this |
|
|
|
var tags = { |
|
create: function(tagName, overrideRender) { |
|
var F = function(args) { |
|
this._args = slice(args) |
|
this._tag = tagName |
|
if (overrideRender) { this._render = overrideRender } |
|
} |
|
F.prototype = tags.base |
|
return function tagCreator() { return new F(arguments) } |
|
}, |
|
el: function(tag) { |
|
return (tag._el ? tag._el : tag) |
|
}, |
|
doc: function(tag) { |
|
return tags.el(tag).ownerDocument |
|
}, |
|
expose: function() { |
|
var tagNames = 'div,span,img,a,p,h1,h2,h3,h4,h5,h6,ol,ul,li,iframe,buttom,input,textarea,label,br'.split(',') |
|
for (var i=0, tagName; tagName=tagNames[i]; i++) { |
|
global[tagName] = tags.create(tagName) |
|
} |
|
|
|
global.raw = tags.create('span', function() { |
|
var container = doc.createElement('span') |
|
container.innerHTML = slice(this._args).join(' ') |
|
return container |
|
}) |
|
} |
|
} |
|
|
|
tags.base = { |
|
appendTo:function appendTo(tag) { |
|
tags.el(tag).appendChild(this._render()) |
|
return this |
|
}, |
|
append:function append() { |
|
if (this._el) { |
|
this._processArgs(arguments, 0) |
|
} else { |
|
this._args = this._args.concat(slice(arguments)) |
|
} |
|
return this |
|
}, |
|
_render:function _render() { |
|
this._el = document.createElement(this._tag) |
|
var args = this._args |
|
if (typeof args[0] == 'string') { |
|
this._el.className = args[0] |
|
this._processArgs(this._args, 1) |
|
} else { |
|
this._processArgs(this._args, 0) |
|
} |
|
return this._el |
|
}, |
|
_processArgs:function _processArgs(args, index) { |
|
while (index < args.length) { |
|
this._processArg(args[index++]) |
|
} |
|
}, |
|
_processArg:function _processArg(arg) { |
|
if (arg == null) { return } // null & undefined |
|
var el = this._el, |
|
type = typeof arg |
|
if (el._render) { |
|
el.appendChild(el._render()) |
|
} else if (type == 'string' || type == 'number') { |
|
el.appendChild(document.createTextNode(arg)) |
|
} else if (arg.nodeType && arg.nodeType == 1) { // http://stackoverflow.com/questions/120262/whats-the-best-way-to-detect-if-a-given-javascript-object-is-a-dom-element |
|
el.appendChild(arg) |
|
} else if (isArray(arg)) { |
|
this._processArgs(arg) |
|
} else { |
|
for (var key in arg) { |
|
if (!arg.hasOwnProperty(key)) { continue } |
|
var val = arg[key] |
|
if (requiresSetAttribute[key]) { |
|
el.setAttribute(key, val) |
|
} else { |
|
el[key] = val |
|
} |
|
} |
|
} |
|
} |
|
} |
|
|
|
var requiresSetAttribute = { 'for':true } |
|
|
|
// From https://gist.github.com/1034882 |
|
var isArray = Array.isArray || function isArray(arr) { |
|
return |
|
// is not the string '[object Array]' and |
|
'' + a !== a && |
|
// test with Object.prototype.toString |
|
{}.toString.call(a) == '[object Array]' |
|
} |
|
|
|
var slice = function(args) { |
|
return Array.prototype.slice.call(args) |
|
} |
|
|
|
if (typeof module != 'undefined' && typeof module != 'function') { module.exports = tags } |
|
else if (typeof define === 'function' && define.amd) { define(tags) } |
|
else { this.tags = tags } |
|
|
|
})() |
