page-helper/dynamic-loader.html

<script>
    window.DynamicLoader = class extends HTMLElement {
        constructor()
        {
            super();
            if(document.querySelector("#dynamic-helper"))
            {
                this.loadScript("//unpkg.com/navigo@6",()=>
                {
                    let root = location.href;
                    let useHash = false; // Defaults to: false
                    let hash = '#!'; // Defaults to: '#'

                    this.router = new Navigo(root, useHash, hash);

                    const routes = JSON.parse(document.querySelector("#dynamic-helper").innerHTML);
                    for (let i = 0; i < routes.length; i++) {
                        let single = routes[i];
                        this.router.on("/" + single.path, ((single) => {
                            return (params) => {
                                if (customElements.get(single.component)) {
                                    this.setContent(single, single.component, params, customElements.get(single.component));
                                } else {
                                    this.loadScript(single.component + ".component.js", () => {
                                            this.setContent(single, single.component, params, customElements.get(single.component))
                                        }
                                    );
                                }
                            }
                        })(single));
                    }
                })
            }
        }

        QueryString(URL) {
            // This function is anonymous, is executed immediately and
            // the return value is assigned to QueryString!
            let query_string = {};
            let usefulParam = URL.split("?")[1] || "";
            let query = usefulParam || "";
            let vars = query.split("&");

            for (let i = 0; i < vars.length; i++) {
                let pair = vars[i].split("=");

                // If first entry with this name
                if (typeof query_string[pair[0]] === "undefined") {
                    query_string[pair[0]] = decodeURIComponent(pair[1]);
                    // If second entry with this name
                } else if (typeof query_string[pair[0]] === "string") {
                    let arr = [query_string[pair[0]], decodeURIComponent(pair[1])];
                    query_string[pair[0]] = arr;
                    // If third or later entry with this name
                } else {
                    query_string[pair[0]].push(decodeURIComponent(pair[1]));
                }
            }
            return query_string;
        }

        setContent(r, name, params) {
            let context = {};
            let req = this.QueryString(location.search);

            if (params) {
                context.query = params
            }
            context.query = Object.assign(context.query || {}, req);
            if (req.hasOwnProperty('lang')) {
                this.locale = req.lang || this.defaultLocale
            } else {
                this.locale = this.defaultLocale
            }
            if (r.hasOwnProperty('redirect')) {
                window.location.href = r.redirect;
                return;
            }
            let regex = /\$(\w+)/g; // api url variable replacement
            let resolvedApiUri = '';
            if (r.hasOwnProperty('api')) {
                resolvedApiUri = r.api;
                resolvedApiUri = resolvedApiUri.replace(regex, function (match, param) {
                    return match.replace('$' + param, params[param]);
                });

                let split = resolvedApiUri.split('?');
                resolvedApiUri = split[0];
                let resolvedQuery = '';
                if (split.length > 1) {
                    resolvedQuery = split[1]
                }
                for (let k in req) {
                    if (req.hasOwnProperty(k)) {
                        if (resolvedQuery.length > 0) {
                            resolvedQuery += '&'
                        }
                        resolvedQuery += k + '=' + req[k]
                    }
                }
                resolvedApiUri += '?' + resolvedQuery
            }
            // get api data
            if (resolvedApiUri.length > 0) {
                console.log('resolving ' + resolvedApiUri);
                fetch(resolvedApiUri).then((res) => {
                    return res.json()
                }).then(json => {
                    context.data = json;
                    context.json = JSON.stringify(context);

                    this.innerHTML = "<" + name + ">" + Handlebars.partials[name](context) + "</" + name + ">";
                    this.router.updatePageLinks();
                });

            } else {
                context.json = JSON.stringify(context);
                this.innerHTML = "<" + name + ">" + Handlebars.partials[name](context) + "</" + name + ">";
                this.router.updatePageLinks();
            }
        }

        loadScript(url, cb) {
            let script = document.createElement("script");
            script.type = 'text/javascript';
            script.async = true;
            script.src = url;
            if (cb) {
                if (script.readyState) {
                    script.onreadystatechange = function () {
                        if (script.readyState === "loaded" || script.readyState === "complete") {
                            script.onreadystatechange = null;
                            cb();
                        }
                    };
                } else {
                    script.onload = function () {
                        cb();
                    };
                }
            }
            document.body.appendChild(script);
        }
    };
    module.exports = window.DynamicLoader
</script>