/
dom.js
116 lines (109 loc) · 3.88 KB
/
dom.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import {_FEATURE} from './feature';
let shadowPoly = window.ShadowDOMPolyfill || null;
/**
* Represents the core APIs of the DOM.
*/
export const _DOM = {
Element: Element,
SVGElement: SVGElement,
boundary: 'aurelia-dom-boundary',
addEventListener(eventName: string, callback: Function, capture?: boolean): void {
document.addEventListener(eventName, callback, capture);
},
removeEventListener(eventName: string, callback: Function, capture?: boolean): void {
document.removeEventListener(eventName, callback, capture);
},
adoptNode(node: Node) {
return document.adoptNode(node, true);//TODO: what is does the true mean? typo?
},
createAttribute(name: string): Attr {
return document.createAttribute(name);
},
createElement(tagName: string): Element {
return document.createElement(tagName);
},
createTextNode(text) {
return document.createTextNode(text);
},
createComment(text) {
return document.createComment(text);
},
createDocumentFragment(): DocumentFragment {
return document.createDocumentFragment();
},
createTemplateElement(): HTMLTemplateElement {
let template = document.createElement('template');
return _FEATURE.ensureHTMLTemplateElement(template);
},
createMutationObserver(callback: Function): MutationObserver {
return new (window.MutationObserver || window.WebKitMutationObserver)(callback);
},
createCustomEvent(eventType: string, options: Object): CustomEvent {
return new window.CustomEvent(eventType, options);
},
dispatchEvent(evt): void {
document.dispatchEvent(evt);
},
getComputedStyle(element: Element) {
return window.getComputedStyle(element);
},
getElementById(id: string): Element {
return document.getElementById(id);
},
querySelectorAll(query: string) {
return document.querySelectorAll(query);
},
nextElementSibling(element: Node): Element {
if (element.nextElementSibling) { return element.nextElementSibling; }
do { element = element.nextSibling; }
while (element && element.nodeType !== 1);
return element;
},
createTemplateFromMarkup(markup: string): Element {
let parser = document.createElement('div');
parser.innerHTML = markup;
let temp = parser.firstElementChild;
if (!temp || temp.nodeName !== 'TEMPLATE') {
throw new Error('Template markup must be wrapped in a <template> element e.g. <template> <!-- markup here --> </template>');
}
return _FEATURE.ensureHTMLTemplateElement(temp);
},
appendNode(newNode: Node, parentNode?: Node): void {
(parentNode || document.body).appendChild(newNode);
},
replaceNode(newNode: Node, node: Node, parentNode?: Node): void {
if (node.parentNode) {
node.parentNode.replaceChild(newNode, node);
} else if (shadowPoly !== null) { //HACK: IE template element and shadow dom polyfills not quite right...
shadowPoly.unwrap(parentNode).replaceChild(
shadowPoly.unwrap(newNode),
shadowPoly.unwrap(node)
);
} else { //HACK: same as above
parentNode.replaceChild(newNode, node);
}
},
removeNode(node: Node, parentNode?: Node): void {
if (node.parentNode) {
node.parentNode.removeChild(node);
} else if (parentNode) {
if (shadowPoly !== null) { //HACK: IE template element and shadow dom polyfills not quite right...
shadowPoly.unwrap(parentNode).removeChild(shadowPoly.unwrap(node));
} else { //HACK: same as above
parentNode.removeChild(node);
}
}
},
injectStyles(styles: string, destination?: Element, prepend?: boolean): Node {
let node = document.createElement('style');
node.innerHTML = styles;
node.type = 'text/css';
destination = destination || document.head;
if (prepend && destination.childNodes.length > 0) {
destination.insertBefore(node, destination.childNodes[0]);
} else {
destination.appendChild(node);
}
return node;
}
};