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){
module.exports = {
    build: {
        protected_dirs: ["assets", "style", "views", "standard"],
        default_meta_keys: ["title", "description", "image", "open_graph", "json_ld"],
    },
};

},{}],2:[function(require,module,exports){
module.exports = {
    images_url: `/assets/images`,
    data_url: `/assets/data`,
    translations_url: "/assets/translations"
};

},{}],3:[function(require,module,exports){
"use strict";
/**
 * A tiny library to handle text translation.
 */

/**
 * init parameter object type
 * @typedef TranslatorParam
 * @property {String[]} supported_languages - DEFAULT: ["en"] - An array of ISO 639 lowercase language codes
 * @property {String} locale ISO 639 lowercase language code - DEFAULT: "en"
 *
 * @property {Boolean} use_url_locale_fragment - DEFAULT: true -
 * If true, the 1st fragment of the window.location url will be parsed as a language code
 * Example:
 * window.location
 * > https://example.com/en/some-page...
 * then the /en/ part of the url will be taken in priority and locale will be set to "en".
 * window.location
 * > https://example.com/some-page...
 * No locale fragment will be found so locale will not be set from url fragment.
 * window.location
 * > https://example.com/some-page/en
 * Doesn't work, locale fragment must be the first framgment
 *
 * @property {String} local_storage_key  - DEFAULT: "translator-prefered-language"
 *  The key used to saved the current locale into local storage
 *
 * @property {String} translations_url - REQUIRED - the url of the directory containing the static json files for translations
 * Translations files are expected to be named with their corresponding locale code.
 * Example:
 * if supported_languages is set to ["en", "fr", "it"]
 * and translations_url is set to "https://example.com/translations/""
 * Then the expected translations files are
 * https://example.com/translations/en.json
 * https://example.com/translations/fr.json
 * https://example.com/translations/it.json
 * The json resources must simple key value maps, value being the translated text.
 */

module.exports = {
    locale: "en", // ISO 639 lowercase language code
    supported_languages: ["en"],
    translations: {},
    translations_url: "",
    use_url_locale_fragment: true,
    local_storage_key: "translator-prefered-language",

    /**
     * Initialize the lib with params
     * @param {TranslatorParam} params 
     * @returns {Promise}
     */
    init(params) {
        Object.entries(params).forEach(k_v => {
            const [key, value] = k_v;
            if ([
                "supported_languages",
                "use_url_locale_fragment",
                "local_storage_key",
                "translations_url"
            ].includes(key)) {
                this[key] = value;
            }
        });

        this.translations_url = this.format_translations_url(this.translations_url);
        this.supported_languages = this.format_supported_languages(this.supported_languages);

        return new Promise((resolve, reject) => {
            const loc =
                (() => {// Locale from url priority 1
                    if (this.use_url_locale_fragment) {
                        const first_url_fragment = window.location.pathname.substring(1).split("/")[0];
                        const fragment_is_locale = this.supported_languages.includes(first_url_fragment);
                        return fragment_is_locale ? first_url_fragment : "";
                    } else {
                        return "";
                    }
                })()
                || localStorage.getItem(this.local_storage_key) // Locale from storage priority 2
                || (() => { // locale from navigator priority 3
                    const navigator_locale = navigator.language.split("-")[0].toLocaleLowerCase();
                    return this.supported_languages.includes(navigator_locale)
                        ? navigator_locale
                        : this.supported_languages[0] // Default if navigator locale is not supported
                })();

            fetch(`${this.translations_url}${loc}.json`)
                .then(response => response.json())
                .then(response => {
                    this.locale = loc;
                    this.translations = response;
                    resolve();
                })
                .catch(err => {
                    this.locale = "en";
                    reject(err);
                });
        });
    },

    /**
     * Return a lowercase string without dash.
     * If given locale is en-EN, then "en" will be returned.
     * @param {String} locale 
     * @returns A lowercase string
     */
    format_locale(locale) {
        return locale.split("-")[0].toLowerCase();
    },

    /**
     * Appends a slash at the end of the given string if missing, and returns the url.
     * @param {String} url 
     * @returns {String}
     */
    format_translations_url(url) {
        if (url.charAt(url.length - 1) !== "/") {
            url += "/"
        }
        return url;
    },

    /**
     * Return the array of language codes formatted as lowsercase language code.
     * if ["en-EN", "it-IT"]is given, ["en", "it"] will b returned.
     * @param {String[]} languages_codes 
     * @returns {String[]}
     */
    format_supported_languages(languages_codes) {
        return languages_codes.map(lc => this.format_locale(lc));
    },

    /**
     * Fetches a new set of translations in case the wanted language changes
     * @param {String} locale A lowercase language code
     * @returns {Promise}
     */
    update_translations(locale) {
        locale = this.format_locale(locale);
        return new Promise((resolve, reject) => {
            fetch(`${this.translations_url}${locale}.json`)
                .then(response => response.json())
                .then(response => {
                    this.translations = response;
                    this.locale = locale;

                    localStorage.setItem(this.local_storage_key, locale);

                    const split_path = window.location.pathname.substring(1).split("/");
                    const first_url_fragment = split_path[0];
                    const fragment_is_locale = this.supported_languages.includes(first_url_fragment);

                    if (fragment_is_locale) {
                        split_path.splice(0, 1, locale);
                        const updated_path = split_path.join("/");
                        window.history.replaceState(null, "", "/" + updated_path);
                    }
                    resolve();
                })
                .catch(err => {
                    reject(err);
                });
        });
    },

    /**
     * Tries to get the translation of the source string, or return the string as it.
     * @param {String} text The source text to translate
     * @param {Object} params Some dynamic element to insert in the text
     * Params can be used if the translated text provide placeholder like {%some_word%}
     * Example:
     * translator.trad("Some trad key", {some_word: "a dynamic parameter"})
     * -> translation for "Some trad key": "A translated text with {%some_word%}"
     * -> will be return as : "A translated text with a dynamic parameter"
     * @returns {String}
     */
    trad: function (text, params = {}) {
        text = this.translations[text] || text;

        Object.keys(params).forEach(k => {
            text = text.replace(`{%${k}%}`, params[k]);
        });

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

module.exports = {
    register_key: "objectToHtmlRender",

    /**
     * Register "this" as a window scope accessible variable named by the given key, or default.
     * @param {String} key 
     */
    register(key) {
        const register_key = key || this.register_key;
        window[register_key] = this;
    },

    /**
     * This must be called before any other method in order to initialize the lib.
     * It provides the root of the rendering cycle as a Javascript object.
     * @param {Object} renderCycleRoot A JS component with a render method.
     */
    setRenderCycleRoot(renderCycleRoot) {
        this.renderCycleRoot = renderCycleRoot;
    },

    event_name: "objtohtml-render-cycle",

    /**
     * Set a custom event name for the event that is trigger on render cycle.
     * Default is "objtohtml-render-cycle".
     * @param {String} evt_name 
     */
    setEventName(evt_name) {
        this.event_name = evt_name;
    },

    /**
     * This is the core agorithm that read an javascript Object and convert it into an HTML element.
     * @param {Object} obj The object representing the html element must be formatted like:
     * {
     *      tag: String // The name of the html tag, Any valid html tag should work. div, section, br, ul, li...
     *      xmlns: String // This can replace the tag key if the element is an element with a namespace URI, for example an <svg> tag.
     *                      See https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS for more information
     *      style_rules: Object // a object providing css attributes. The attributes names must be in JS syntax,
     *                              like maxHeight: "500px", backgrouncColor: "#ff2d56",  margin: 0,  etc.
     *      contents: Array or String // This reprensents the contents that will be nested in the created html element.
     *                                   <div>{contents}</div>
     *                                   The contents can be an array of other objects reprenting elements (with tag, contents, etc)
     *                                   or it can be a simple string.
     *      // All other attributes will be parsed as html attributes. They can be anything like onclick, href, onchange, title...
     *      // or they can also define custom html5 attributes, like data, my_custom_attr or anything.
     * }
     * @returns {HTMLElement} The output html node.
     */
    objectToHtml(obj) {
        if (!obj) return document.createElement("span"); // in case of invalid input, don't block the whole process.
        const objectToHtml = this.objectToHtml.bind(this);
        const { tag, xmlns } = obj;
        const node = xmlns !== undefined ? document.createElementNS(xmlns, tag) : document.createElement(tag);
        const excludeKeys = ["tag", "contents", "style_rules", "state", "xmlns"];

        Object.keys(obj)
            .filter(attr => !excludeKeys.includes(attr))
            .forEach(attr => {
                switch (attr) {
                    case "class":
                        node.classList.add(...obj[attr].split(" ").filter(s => s !== ""));
                        break;
                    case "on_render":
                        if (!obj.id) {
                            node.id = `${btoa(JSON.stringify(obj).slice(0, 127)).replace(/\=/g, '')}${window.performance.now()}`;
                        }
                        if (typeof obj.on_render !== "function") {
                            console.error("The on_render attribute must be a function")
                        } else {
                            this.attach_on_render_callback(node, obj.on_render);
                        }
                        break;
                    default:
                        if (xmlns !== undefined) {
                            node.setAttributeNS(null, attr, obj[attr])
                        } 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":
                            if (xmlns !== undefined) {
                                el = Object.assign(el, { xmlns })
                            }
                            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;
    },

    on_render_callbacks: [],

    /**
     * This is called if the on_render attribute of a component is set.
     * @param {HTMLElement} node The created html element
     * @param {Function} callback The callback defined in the js component to render
     */
    attach_on_render_callback(node, callback) {
        const callback_handler = {
            callback: e => {
                if (e.detail.outputNode === node || e.detail.outputNode.querySelector(`#${node.id}`)) {
                    callback(node);
                    const handler_index = this.on_render_callbacks.indexOf((this.on_render_callbacks.find(cb => cb.node === node)));
                    if (handler_index === -1) {
                        console.warn("A callback was registered for node with id " + node.id + " but callbacck handler is undefined.")
                    } else {
                        window.removeEventListener(this.event_name, this.on_render_callbacks[handler_index].callback)
                        this.on_render_callbacks.splice(handler_index, 1);
                    }
                }
            },
            node,
        };

        const len = this.on_render_callbacks.push(callback_handler);
        window.addEventListener(this.event_name, this.on_render_callbacks[len - 1].callback);
    },

    /**
     * If a main element exists in the html document, it will be used as rendering root.
     * If not, it will be created and inserted.
     */
    renderCycle: function () {
        const main_elmt = document.getElementsByTagName("main")[0] || (function () {
            const created_main = document.createElement("main");
            document.body.appendChild(created_main);
            return created_main;
        })();

        this.subRender(this.renderCycleRoot.render(), main_elmt, { mode: "replace" });
    },

    /**
     * This method behaves like the renderCycle() method, but rather that starting the rendering cycle from the root component,
    * it can start from any component of the tree. The root component must be given as the first argument, the second argument be
    * be a valid html element in the dom and will be used as the insertion target.
     * @param {Object} object An object providing a render method returning an object representation of the html to insert
     * @param {HTMLElement} htmlNode The htlm element to update
     * @param {Object} options can be used the define the insertion mode, default is set to "append" and can be set to "override",
         * "insert-before" (must be defined along with an insertIndex key (integer)),
         * "adjacent" (must be defined along with an insertLocation key (String)), "replace" or "remove".
         * In case of "remove", the first argument "object" is not used and can be set to null, undefined or {}...
     */
    subRender(object, htmlNode, options = { mode: "append" }) {
        let outputNode = null;

        const get_insert = () => {
            outputNode = this.objectToHtml(object);
            return outputNode;
        };

        switch (options.mode) {
            case "append":
                htmlNode.appendChild(get_insert());
                break;
            case "override":
                htmlNode.innerHTML = "";
                htmlNode.appendChild(get_insert());
                break;
            case "insert-before":
                htmlNode.insertBefore(get_insert(), htmlNode.childNodes[options.insertIndex]);
                break;
            case "adjacent":
                /**
                 * options.insertLocation must be one of:
                 *
                 * afterbegin
                 * afterend
                 * beforebegin
                 * beforeend
                 */
                htmlNode.insertAdjacentHTML(options.insertLocation, get_insert());
                break;
            case "replace":
                htmlNode.parentNode.replaceChild(get_insert(), htmlNode);
                break;
            case "remove":
                htmlNode.remove();
                break;
        }
        const evt_name = this.event_name;
        const event = new CustomEvent(evt_name, {
            detail: {
                inputObject: object,
                outputNode,
                insertOptions: options,
                targetNode: htmlNode,
            }
        });

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

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

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

    render() {
        return {
            tag: "a",
            class: "theme-card",
            href: this.props.href,
            contents: [
                {
                    tag: "div",
                    class: "card-img",
                    contents: [{ tag: "img", alt: `thematic image ${this.props.img.replace(/\.[A-Za-z]+/, "")}`, src: `${images_url}/${this.props.img}` }],
                },
                {
                    tag: "div",
                    class: "card-title",
                    contents: [{ tag: "h2", class: "section-title", contents: this.props.title }],
                },
                {
                    tag: "div",
                    class: "card-description",
                    contents: [{ tag: "p", contents: this.props.description }],
                },
            ],
        };
    }
}

module.exports = ThemeCard;

},{"../../constants":2}],6:[function(require,module,exports){
"use strict";

const { images_url } = require("../constants");
const ThemeCard = require("./home-page-components/theme-card");
const WebPage = require("./lib/web-page");
const translator = require("ks-cheap-translator");
const t = translator.trad.bind(translator);

class HomePage extends WebPage {
    constructor() {
        super({ id: "home-page" });
    }

    render() {
        return {
            tag: "div",
            id: this.id,
            contents: [
                {
                    tag: "div",
                    class: "page-header",
                    contents: [
                        {
                            tag: "div",
                            class: "big-logo page-contents-center",
                            contents: [
                                {
                                    tag: "img",
                                    alt: "logo Kuadrado",
                                    src: `${images_url}/logo_kuadrado.svg`,
                                },
                                {
                                    tag: "img",
                                    class: "logo-text",
                                    alt: "Kuadrado",
                                    src: `${images_url}/logo_kuadrado_txt.svg`,
                                },
                            ],
                        },
                        { tag: "h1", contents: "Kuadrado Software", class: "page-contents-center" },
                        {
                            tag: "p",
                            class: "page-contents-center",
                            contents: t("kuadrado-home-description"),
                        },
                        {
                            tag: "ul",
                            class: "philo-bubbles",
                            contents: [t("Simplicité"), t("Légèreté"), t("Écologie")].map(word => {
                                return {
                                    tag: "li",
                                    contents: [{ tag: "span", contents: word }],
                                };
                            }),
                        },
                    ],
                },
                {
                    tag: "section",
                    class: "page-contents-center poles",
                    contents: [
                        {
                            title: t("Jeux"),
                            img: "game_controller.svg",
                            href: "/games/",
                            description:
                                t("games-description"),
                        },
                        {
                            title: t("Pédagogie"),
                            img: "brain.svg",
                            href: "/education/",
                            description: t("education-description"),
                        },
                        {
                            title: "Software",
                            img: "meca_proc.svg",
                            href: "/software-development/",
                            description: t("software-description"),
                        },
                    ].map(cardProps => new ThemeCard(cardProps).render()),
                },
            ],
        };
    }
}

module.exports = HomePage;

},{"../constants":2,"./home-page-components/theme-card":5,"./lib/web-page":7,"ks-cheap-translator":3}],7:[function(require,module,exports){
"use strict";
const translator = require("ks-cheap-translator");
const { translations_url } = require("../../constants");

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

        if (!this.id) {
            this.id = "webpage-" + performance.now();
        }

        translator.init({
            translations_url,
            supported_languages: ["fr", "en"],
        }).then(this.refresh_all.bind(this));
    }

    refresh() {
        obj2htm.subRender(this.render(), document.getElementById(this.id), { mode: "replace" })
    }

    refresh_all() {
        obj2htm.renderCycle()
    }
}

module.exports = WebPage;
},{"../../constants":2,"ks-cheap-translator":3}],8:[function(require,module,exports){
"use strict";

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

runPage(HomePage);

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

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

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

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

const { images_url } = require("../../../constants");
const translator = require("ks-cheap-translator");
const t = translator.trad.bind(translator);

const NAV_MENU_ITEMS = [
    { url: "/games/", text: "Jeux" },
    {
        url: "/education/",
        text: "Pédagogie",
    },
    { url: "/software-development/", text: "Software" }
];

class NavBar {
    constructor() {
        this.initEventHandlers();
    }

    handleBurgerClick() {
        document.getElementById("nav-menu-list").classList.toggle("responsive-show");
    }

    initEventHandlers() {
        window.addEventListener("click", event => {
            if (
                event.target.id !== "nav-menu-list" &&
                !event.target.classList.contains("burger") &&
                !event.target.parentNode.classList.contains("burger")
            ) {
                document.getElementById("nav-menu-list").classList.remove("responsive-show");
            }
        });
    }

    handle_chang_lang(lang) {
        translator.update_translations(lang).then(() => {
            obj2htm.renderCycle();
        }).catch(err => console.log(err));
    }

    renderHome() {
        return {
            tag: "div",
            class: "home",
            contents: [
                {
                    tag: "a",
                    href: "/",
                    contents: [
                        {
                            tag: "img",
                            alt: "Logo Kuadrado",
                            src: `${images_url}/logo_kuadrado.svg`,
                        },
                        {
                            tag: "img",
                            alt: "Kuadrado Software",
                            class: "logo-text",
                            src: `${images_url}/logo_kuadrado_txt.svg`,
                        },
                    ],
                },
            ],
        };
    }

    renderMenu(menuItemsArray, isSubmenu = false, parentUrl = "") {
        return {
            tag: "ul",
            id: "nav-menu-list",
            class: isSubmenu ? "submenu" : "",
            contents: menuItemsArray.map(item => {
                const { url, text, submenu } = item;
                const href = `${parentUrl}${url}`;
                return {
                    tag: "li",
                    class: !isSubmenu && window.location.pathname === href ? "active" : "",
                    contents: [
                        {
                            tag: "a",
                            href,
                            contents: t(text),
                        },
                    ].concat(submenu ? [this.renderMenu(submenu, true, url)] : []),
                };
            }).concat({
                tag: "li",
                class: "lang-flags",
                contents: ["fr", "en"].map(lang => {
                    return {
                        tag: "img", src: `${images_url}/flag-${lang}.svg`,
                        class: translator.locale === lang ? "selected" : "",
                        onclick: this.handle_chang_lang.bind(this, lang)
                    }
                })
            }),
        };
    }

    renderResponsiveBurger() {
        return {
            tag: "div",
            class: "burger",
            onclick: this.handleBurgerClick.bind(this),
            contents: [{ tag: "span", contents: "···" }],
        };
    }

    render() {
        return {
            tag: "nav",
            contents: [
                this.renderHome(),
                this.renderResponsiveBurger(),
                this.renderMenu(NAV_MENU_ITEMS),
            ],
        };
    }
}

module.exports = NavBar;

},{"../../../constants":2,"ks-cheap-translator":3}],11:[function(require,module,exports){
"use strict";

const { in_construction } = require("../../config");
const { images_url } = require("../../constants");
const NavBar = require("./components/navbar");
const translator = require("ks-cheap-translator");
const t = translator.trad.bind(translator)

class Template {
    constructor(props) {
        this.props = props;
    }
    render() {
        return {
            tag: "main",
            contents: [
                {
                    tag: "header",
                    contents: [new NavBar().render()],
                },
                in_construction && {
                    tag: "section",
                    class: "warning-banner",
                    contents: [
                        {
                            tag: "strong",
                            class: "page-contents-center",
                            contents: t("Site en construction ..."),
                        },
                    ],
                },
                {
                    tag: "section",
                    id: "page-container",
                    contents: [this.props.page.render()],
                },
                {
                    tag: "footer",
                    contents: [
                        {
                            tag: "div",
                            class: "logo",
                            contents: [
                                {
                                    tag: "img",
                                    alt: `logo Kuadrado`,
                                    src: `${images_url}/logo_kuadrado.svg`,
                                },
                                {
                                    tag: "img",
                                    class: "text-logo",
                                    alt: "Kuadrado Software",
                                    src: `${images_url}/logo_kuadrado_txt.svg`,
                                },
                            ],
                        },
                        {
                            tag: "span",
                            contents: "32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
                        },
                        {
                            tag: "div",
                            contents: [
                                { tag: "strong", contents: "<blue>Contact : </blue>" },
                                {
                                    tag: "a",
                                    href: "mailto:contact@kuadrado-software.fr",
                                    contents: "contact@kuadrado-software.fr",
                                },
                            ],
                        },
                        {
                            tag: "div",
                            class: "social",
                            contents: [
                                {
                                    tag: "strong",
                                    contents: `<blue>${t("Sur les réseaux")} : </blue>`,
                                },
                                {
                                    tag: "a",
                                    href: "https://www.linkedin.com/company/kuadrado-software",
                                    target: "_blank",
                                    contents: "in",
                                    title: "Linkedin",
                                },
                                {
                                    tag: "a",
                                    href: "https://mastodon.gamedev.place/@kuadrado_software",
                                    target: "_blank",
                                    contents: "m",
                                    title: "Mastodon",
                                }
                            ],
                        },
                        {
                            tag: "span",
                            contents: `Copyleft 🄯 ${new Date()
                                .getFullYear()} Kuadrado Software | 
                                ${t("kuadrado-footer-copyleft")}`,
                        },
                        {
                            tag: "div", contents: [
                                { tag: "span", contents: t("Ce site web est") + " " },
                                {
                                    tag: "a", target: "_blank",
                                    style_rules: { fontWeight: "bold" },
                                    href: "https://gitlab.com/kuadrado-software/kuadrado-website/-/blob/master/README.md",
                                    contents: "OPEN SOURCE"
                                }
                            ]
                        }
                    ],
                },
            ],
        };
    }
}

module.exports = Template;

},{"../../config":1,"../../constants":2,"./components/navbar":10,"ks-cheap-translator":3}]},{},[8]);