1 |
|
2 | export * from './DOM/ready';
|
3 | export * from './DOM/events';
|
4 |
|
5 | export function htmlToNode(html) {
|
6 | const e = document.createElement('div');
|
7 | e.innerHTML = html;
|
8 | return e.firstElementChild;
|
9 | }
|
10 |
|
11 | export function appendHtml(parent, html) {
|
12 | parent.appendChild(htmlToNode(html));
|
13 | }
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 |
|
21 |
|
22 |
|
23 |
|
24 |
|
25 | export function parseTemplate(id, data) {
|
26 | let node = null;
|
27 | let template = document.getElementById(id);
|
28 | let tpl = template.content.firstElementChild.outerHTML;
|
29 |
|
30 | const getDataByPath = (obj, path) => {
|
31 | const parts = path.split('.');
|
32 | let cur = obj;
|
33 | for (let k = 0; k < parts.length; k++) {
|
34 | let part = parts[k];
|
35 | if (cur[part] === undefined) {
|
36 | return null;
|
37 | } else if (cur[part] === null || cur[part].length === 0) {
|
38 | return '';
|
39 | } else {
|
40 | cur = cur[part];
|
41 | }
|
42 | }
|
43 | return cur;
|
44 | };
|
45 |
|
46 | const parseRow = (originalTpl, rowData) => {
|
47 | let newTpl = originalTpl;
|
48 | newTpl = newTpl.replace(/{{ ([a-zA-Z0-9\-._]*) }}/g, (match, capture) => {
|
49 | const res = getDataByPath(rowData, capture);
|
50 | return res === null ? match : res;
|
51 | });
|
52 |
|
53 | let node = htmlToNode(newTpl);
|
54 | if (node.tagName === 'TABLE') {
|
55 | node = node.rows[0];
|
56 | }
|
57 |
|
58 | if (template._handlers !== undefined) {
|
59 | for (let handlerName in template._handlers) {
|
60 | const el = node.querySelector('[handler="' + handlerName + '"]');
|
61 | template._handlers[handlerName](el);
|
62 | }
|
63 | }
|
64 |
|
65 | return node;
|
66 | };
|
67 |
|
68 | if (Array.isArray(data)) {
|
69 | node = document.createDocumentFragment();
|
70 | data.forEach(row => {
|
71 | node.appendChild(parseRow(tpl, row));
|
72 | });
|
73 | } else {
|
74 | node = parseRow(tpl, data);
|
75 | }
|
76 |
|
77 | return node;
|
78 | }
|
79 |
|
80 | export function registerTemplateHandlers(id, handlers) {
|
81 | const tpl = document.getElementById(id);
|
82 | if (tpl._handlers === undefined) {
|
83 | tpl._handlers = {};
|
84 | }
|
85 | Object.assign(tpl._handlers, handlers);
|
86 | }
|
87 |
|
88 | export function makeAccessible(element, tabIndex = 0, role = 'button') {
|
89 | element.setAttribute('tabindex', tabIndex);
|
90 | element.setAttribute('role', role);
|
91 | element.addEventListener('keydown', e => {
|
92 | if (e.keyCode === KEY_ENTER || e.keyCode === KEY_SPACE) {
|
93 | element.click();
|
94 | }
|
95 | });
|
96 | }
|
97 |
|
98 | export function isElementInside(parentElement, childElement) {
|
99 | let x = childElement;
|
100 | while (x = x.parentElement) {
|
101 | if (x === parentElement) return true;
|
102 | }
|
103 | return false;
|
104 | }
|