1 | <script>
|
2 | window.DynamicLoader = class extends HTMLElement {
|
3 | constructor()
|
4 | {
|
5 | super();
|
6 | if(document.querySelector("#dynamic-helper"))
|
7 | {
|
8 | this.loadScript("//unpkg.com/navigo@6",()=>
|
9 | {
|
10 | let root = location.href;
|
11 | let useHash = false;
|
12 | let hash = '#!';
|
13 |
|
14 | this.router = new Navigo(root, useHash, hash);
|
15 |
|
16 | const routes = JSON.parse(document.querySelector("#dynamic-helper").innerHTML);
|
17 | for (let i = 0; i < routes.length; i++) {
|
18 | let single = routes[i];
|
19 | this.router.on("/" + single.path, ((single) => {
|
20 | return (params) => {
|
21 | if (customElements.get(single.component)) {
|
22 | this.setContent(single, single.component, params, customElements.get(single.component));
|
23 | } else {
|
24 | this.loadScript(single.component + ".component.js", () => {
|
25 | this.setContent(single, single.component, params, customElements.get(single.component))
|
26 | }
|
27 | );
|
28 | }
|
29 | }
|
30 | })(single));
|
31 | }
|
32 | })
|
33 | }
|
34 | }
|
35 |
|
36 | QueryString(URL) {
|
37 |
|
38 |
|
39 | let query_string = {};
|
40 | let usefulParam = URL.split("?")[1] || "";
|
41 | let query = usefulParam || "";
|
42 | let vars = query.split("&");
|
43 |
|
44 | for (let i = 0; i < vars.length; i++) {
|
45 | let pair = vars[i].split("=");
|
46 |
|
47 |
|
48 | if (typeof query_string[pair[0]] === "undefined") {
|
49 | query_string[pair[0]] = decodeURIComponent(pair[1]);
|
50 |
|
51 | } else if (typeof query_string[pair[0]] === "string") {
|
52 | let arr = [query_string[pair[0]], decodeURIComponent(pair[1])];
|
53 | query_string[pair[0]] = arr;
|
54 |
|
55 | } else {
|
56 | query_string[pair[0]].push(decodeURIComponent(pair[1]));
|
57 | }
|
58 | }
|
59 | return query_string;
|
60 | }
|
61 |
|
62 | setContent(r, name, params) {
|
63 | let context = {};
|
64 | let req = this.QueryString(location.search);
|
65 |
|
66 | if (params) {
|
67 | context.query = params
|
68 | }
|
69 | context.query = Object.assign(context.query || {}, req);
|
70 | if (req.hasOwnProperty('lang')) {
|
71 | this.locale = req.lang || this.defaultLocale
|
72 | } else {
|
73 | this.locale = this.defaultLocale
|
74 | }
|
75 | if (r.hasOwnProperty('redirect')) {
|
76 | window.location.href = r.redirect;
|
77 | return;
|
78 | }
|
79 | let regex = /\$(\w+)/g;
|
80 | let resolvedApiUri = '';
|
81 | if (r.hasOwnProperty('api')) {
|
82 | resolvedApiUri = r.api;
|
83 | resolvedApiUri = resolvedApiUri.replace(regex, function (match, param) {
|
84 | return match.replace('$' + param, params[param]);
|
85 | });
|
86 |
|
87 | let split = resolvedApiUri.split('?');
|
88 | resolvedApiUri = split[0];
|
89 | let resolvedQuery = '';
|
90 | if (split.length > 1) {
|
91 | resolvedQuery = split[1]
|
92 | }
|
93 | for (let k in req) {
|
94 | if (req.hasOwnProperty(k)) {
|
95 | if (resolvedQuery.length > 0) {
|
96 | resolvedQuery += '&'
|
97 | }
|
98 | resolvedQuery += k + '=' + req[k]
|
99 | }
|
100 | }
|
101 | resolvedApiUri += '?' + resolvedQuery
|
102 | }
|
103 |
|
104 | if (resolvedApiUri.length > 0) {
|
105 | console.log('resolving ' + resolvedApiUri);
|
106 | fetch(resolvedApiUri).then((res) => {
|
107 | return res.json()
|
108 | }).then(json => {
|
109 | context.data = json;
|
110 | context.json = JSON.stringify(context);
|
111 |
|
112 | this.innerHTML = "<" + name + ">" + Handlebars.partials[name](context) + "</" + name + ">";
|
113 | this.router.updatePageLinks();
|
114 | });
|
115 |
|
116 | } else {
|
117 | context.json = JSON.stringify(context);
|
118 | this.innerHTML = "<" + name + ">" + Handlebars.partials[name](context) + "</" + name + ">";
|
119 | this.router.updatePageLinks();
|
120 | }
|
121 | }
|
122 |
|
123 | loadScript(url, cb) {
|
124 | let script = document.createElement("script");
|
125 | script.type = 'text/javascript';
|
126 | script.async = true;
|
127 | script.src = url;
|
128 | if (cb) {
|
129 | if (script.readyState) {
|
130 | script.onreadystatechange = function () {
|
131 | if (script.readyState === "loaded" || script.readyState === "complete") {
|
132 | script.onreadystatechange = null;
|
133 | cb();
|
134 | }
|
135 | };
|
136 | } else {
|
137 | script.onload = function () {
|
138 | cb();
|
139 | };
|
140 | }
|
141 | }
|
142 | document.body.appendChild(script);
|
143 | }
|
144 | };
|
145 | module.exports = window.DynamicLoader
|
146 | </script> |
\ | No newline at end of file |