1
|
|
|
jsonToDOM.namespaces = { |
2
|
|
|
html: "http://www.w3.org/1999/xhtml", |
3
|
|
|
xul: "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" |
4
|
|
|
}; |
5
|
|
|
|
6
|
|
|
jsonToDOM.defaultNamespace = jsonToDOM.namespaces.html; |
7
|
|
|
|
8
|
|
|
function jsonToDOM(jsonTemplate, doc, nodes) { |
9
|
|
|
function namespace(name) { |
10
|
|
|
var reElemNameParts = /^(?:(.*):)?(.*)$/.exec(name); |
11
|
|
|
return { namespace: jsonToDOM.namespaces[reElemNameParts[1]], shortName: reElemNameParts[2] }; |
12
|
|
|
} |
13
|
|
|
|
14
|
|
|
// Note that 'elemNameOrArray' is: either the full element name (eg. [html:]div) or an array of elements in JSON notation |
15
|
|
|
function tag(elemNameOrArray, elemAttr) { |
16
|
|
|
// Array of elements? Parse each one... |
17
|
|
|
if (Array.isArray(elemNameOrArray)) { |
18
|
|
|
var frag = doc.createDocumentFragment(); |
19
|
|
|
Array.prototype.forEach.call(arguments, function(thisElem) { |
20
|
|
|
frag.appendChild(tag.apply(null, thisElem)); |
21
|
|
|
}); |
22
|
|
|
return frag; |
23
|
|
|
} |
24
|
|
|
|
25
|
|
|
// Single element? Parse element namespace prefix (if none exists, default to defaultNamespace), and create element |
26
|
|
|
var elemNs = namespace(elemNameOrArray); |
27
|
|
|
var elem = doc.createElementNS(elemNs.namespace || jsonToDOM.defaultNamespace, elemNs.shortName); |
28
|
|
|
|
29
|
|
|
// Set element's attributes and/or callback functions (eg. onclick) |
30
|
|
|
for (var key in elemAttr) { |
|
|
|
|
31
|
|
|
var val = elemAttr[key]; |
32
|
|
|
if (nodes && key == "key") { |
33
|
|
|
nodes[val] = elem; |
34
|
|
|
continue; |
35
|
|
|
} |
36
|
|
|
|
37
|
|
|
var attrNs = namespace(key); |
38
|
|
|
if (typeof val == "function") { |
39
|
|
|
// Special case for function attributes; don't just add them as 'on...' attributes, but as events, using addEventListener |
40
|
|
|
elem.addEventListener(key.replace(/^on/, ""), val, false); |
41
|
|
|
} |
42
|
|
|
else { |
43
|
|
|
// Note that the default namespace for XML attributes is, and should be, blank (ie. they're not in any namespace) |
44
|
|
|
elem.setAttributeNS(attrNs.namespace || "", attrNs.shortName, val); |
45
|
|
|
} |
46
|
|
|
} |
47
|
|
|
|
48
|
|
|
// Create and append this element's children |
49
|
|
|
var childElems = Array.prototype.slice.call(arguments, 2); |
50
|
|
|
childElems.forEach(function(childElem) { |
51
|
|
|
if (childElem != null) { |
52
|
|
|
elem.appendChild( |
53
|
|
|
childElem instanceof doc.defaultView.Node ? childElem : |
54
|
|
|
Array.isArray(childElem) ? tag.apply(null, childElem) : |
55
|
|
|
doc.createTextNode(childElem)); |
56
|
|
|
} |
57
|
|
|
}); |
58
|
|
|
|
59
|
|
|
return elem; |
60
|
|
|
} |
61
|
|
|
|
62
|
|
|
return tag.apply(null, jsonTemplate); |
63
|
|
|
} |
64
|
|
|
|
When iterating over the keys of an object, this includes not only the keys of the object, but also keys contained in the prototype of that object. It is generally a best practice to check for these keys specifically: