main.js

(function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
const ENV = "dev";

let server_url;

switch (ENV) {
    case "dev":
        server_url = "http://localhost:9000";
        break;
    case "prod":
        server_url = "http://your_production_server_url:port";
}

module.exports = { server_url };

},{}],2:[function(require,module,exports){
const { server_url } = require("./config");

module.exports = {
    images_url: `${server_url}/assets/images`,
};

},{"./config":1}],3:[function(require,module,exports){
"use strict";

class HomePage {
    constructor(args) {
        Object.assign(this, args);
    }

    render() {
        return {
            tag: "div",
            contents: [
                {
                    tag: "h1",
                    contents: "Kuadrado Software",
                },
            ],
        };
    }
}

module.exports = HomePage;

},{}],4:[function(require,module,exports){
"use strict";

module.exports = {
    setRenderCycleRoot(renderCycleRoot) {
        this.renderCycleRoot = renderCycleRoot;
    },
    objectToHtml: function objectToHtml(obj) {
        const { tag } = obj;

        const node = document.createElement(tag);
        const excludeKeys = ["tag", "contents", "style_rules", "state"];

        Object.keys(obj)
            .filter(attr => !excludeKeys.includes(attr))
            .forEach(attr => {
                if (attr === "class") {
                    node.classList.add(...obj[attr].split(" ").filter(s => s !== ""));
                } else {
                    node[attr] = obj[attr];
                }
            });
        if (obj.contents && typeof obj.contents === "string") {
            node.innerHTML = obj.contents;
        } else {
            obj.contents &&
                obj.contents.length > 0 &&
                obj.contents.forEach(el => {
                    switch (typeof el) {
                        case "string":
                            node.innerHTML = el;
                            break;
                        case "object":
                            node.appendChild(objectToHtml(el));
                            break;
                    }
                });
        }

        if (obj.style_rules) {
            Object.keys(obj.style_rules).forEach(rule => {
                node.style[rule] = obj.style_rules[rule];
            });
        }

        return node;
    },
    renderCycle: function () {
        this.subRender(this.renderCycleRoot.render(), document.getElementsByTagName("main")[0], {
            mode: "replace",
        });
    },
    subRender(object, htmlNode, options = { mode: "append" }) {
        const insert = this.objectToHtml(object);
        switch (options.mode) {
            case "append":
                htmlNode.appendChild(insert);
                break;
            case "override":
                htmlNode.innerHTML = "";
                htmlNode.appendChild(insert);
                break;
            case "insert-before":
                htmlNode.insertBefore(insert, htmlNode.childNodes[options.insertIndex]);
                break;
            case "adjacent":
                /**
                 * options.insertLocation must be one of:
                 *
                 * afterbegin
                 * afterend
                 * beforebegin
                 * beforeend
                 */
                htmlNode.insertAdjacentHTML(options.insertLocation, insert);
                break;
            case "replace":
                htmlNode.parentNode.replaceChild(insert, htmlNode);
                break;
            case "remove":
                htmlNode.remove();
                break;
        }
    },
};

},{}],5:[function(require,module,exports){
"use strict";

const HomePage = require("./homepage");
const runPage = require("./run-page");

runPage(HomePage);

},{"./homepage":3,"./run-page":6}],6:[function(require,module,exports){
"use strict";

const objectHtmlRenderer = require("./lib/object-html-renderer");
const Template = require("./template/template");

module.exports = function runPage(PageComponent) {
    const template = new Template({ page: new PageComponent() });
    objectHtmlRenderer.setRenderCycleRoot(template);
    objectHtmlRenderer.renderCycle();
};

},{"./lib/object-html-renderer":4,"./template/template":7}],7:[function(require,module,exports){
"use strict";

const { images_url } = require("../../constants");

const NAV_MENU_ITEMS = [
    ["/public/", "logo_kuadrado_s32.png; "],
    ["/public/games/", "Jeux"],
    ["/public/software-development/", "Software"],
    [
        "/public/education/",
        "Pédagogie",
        [
            // submenu
            ["/public/education/#game-studio-club", "Game Studio Club"],
            ["/public/education/#popularization", "Animations vulgarisation"],
        ],
    ],
];

class Template {
    constructor(props) {
        this.props = props;
    }

    renderMenu(menuItemsArray, isSubmenu = false) {
        const r = {
            tag: "ul",
            class: isSubmenu ? "submenu" : "",
            contents: menuItemsArray.map(link => {
                let [href, text, submenu] = link;
                const spltTxt = text.split(";");
                text = spltTxt.length > 1 ? spltTxt[1] : text;
                const img = spltTxt.length > 1 ? spltTxt[0] : undefined;
                return {
                    tag: "li",
                    class: !isSubmenu && window.location.pathname === href ? "active" : "",
                    contents: [
                        {
                            tag: "a",
                            href,
                            contents: img
                                ? [
                                      { tag: "img", src: `${images_url}/${img}` },
                                      { tag: "span", contents: text },
                                  ]
                                : text,
                        },
                    ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
                };
            }),
        };
        return r;
    }

    render() {
        return {
            tag: "main",
            contents: [
                {
                    tag: "header",
                    contents: [
                        {
                            tag: "nav",
                            contents: [this.renderMenu(NAV_MENU_ITEMS)],
                        },
                    ],
                },
                {
                    tag: "div",
                    id: "page-container",
                    contents: [this.props.page.render()],
                },
                {
                    tag: "footer",
                    contents: [
                        {
                            tag: "a",
                            href: "mailto:kuadrado-software@tutanota.com",
                            contents: "kuadrado-software@tutanota.com",
                        },
                    ],
                },
            ],
        };
    }
}

module.exports = Template;

},{"../../constants":2}]},{},[5]);