Pour tout problème contactez-nous par mail : support@froggit.fr | La FAQ :grey_question: | Rejoignez-nous sur le Chat :speech_balloon:

Skip to content
Snippets Groups Projects
main.js 36.3 KiB
Newer Older
peter_rabbit's avatar
peter_rabbit committed
(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){
peter_rabbit's avatar
peter_rabbit committed
function getServerUrl() {
    return `${location.origin}${
peter_rabbit's avatar
peter_rabbit committed
        location.origin.charAt(location.origin.length - 1) !== "/" ? "/" : ""
peter_rabbit's avatar
peter_rabbit committed
    }`;
}

module.exports = {
    getServerUrl,
    website_title: "Kuadrado website template",
peter_rabbit's avatar
peter_rabbit committed
    build: {
        protected_dirs: ["assets", "style", "articles"],
        default_meta_keys: ["title", "description", "image", "open_graph", "json_ld"],
peter_rabbit's avatar
peter_rabbit committed
    },
peter_rabbit's avatar
peter_rabbit committed
};
peter_rabbit's avatar
peter_rabbit committed

},{}],2:[function(require,module,exports){
peter_rabbit's avatar
peter_rabbit committed
const { getServerUrl } = require("./config");
peter_rabbit's avatar
peter_rabbit committed

module.exports = {
    images_url: `${getServerUrl()}assets/images/`,
peter_rabbit's avatar
peter_rabbit committed
    articles_url: `${getServerUrl()}articles/`,
peter_rabbit's avatar
peter_rabbit committed
};

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

peter_rabbit's avatar
peter_rabbit committed
const objectHtmlRenderer = require("../lib/object-html-renderer");

peter_rabbit's avatar
peter_rabbit committed
class ImageCarousel {
    constructor(props) {
        this.props = props;
        this.id = performance.now();
        this.state = {
            showImageIndex: 0,
        };
        this.RUN_INTERVAL = 5000;
peter_rabbit's avatar
peter_rabbit committed
        this.props.images.length > 1 && this.run();
peter_rabbit's avatar
peter_rabbit committed
    }

    run() {
        this.runningInterval = setInterval(() => {
            let { showImageIndex } = this.state;
            const { images } = this.props;
            this.state.showImageIndex = showImageIndex < images.length - 1 ? ++showImageIndex : 0;
            this.refreshImage();
        }, this.RUN_INTERVAL);
    }

    setImageIndex(i) {
        clearInterval(this.runningInterval);
        this.state.showImageIndex = i;
        this.refreshImage();
    }

    refreshImage() {
        objectHtmlRenderer.subRender(this.render(), document.getElementById(this.id), {
            mode: "replace",
        });
    }

    render() {
        const { showImageIndex } = this.state;
        const { images } = this.props;
        return {
            tag: "div",
            id: this.id,
            class: "image-carousel",
            contents: [
peter_rabbit's avatar
peter_rabbit committed
                {
                    tag: "img",
                    property: "image",
peter_rabbit's avatar
peter_rabbit committed
                    alt: `image carousel ${images[showImageIndex].replace(/\.[A-Za-z]+/, "")}`,
                    src: images[showImageIndex],
                },
peter_rabbit's avatar
peter_rabbit committed
                images.length > 1 && {
                    tag: "div",
                    class: "carousel-bullets",
                    contents: images.map((_, i) => {
                        const active = showImageIndex === i;
                        return {
                            tag: "span",
                            class: `bullet ${active ? "active" : ""}`,
                            onclick: this.setImageIndex.bind(this, i),
                        };
                    }),
                },
            ],
        };
    }
}

module.exports = ImageCarousel;

peter_rabbit's avatar
peter_rabbit committed
},{"../lib/object-html-renderer":11}],4:[function(require,module,exports){
"use strict";

class KuadradoValues {
    render() {
        return {
            tag: "section",
            class: "kuadrado-values",
            contents: [
                {
                    tag: "div",
                    class: "page-contents-center",
                    contents: [
                        {
                            tag: "h2",
                            contents: "<blue>Éthique</blue>",
                        },
                        {
                            tag: "ul",
                            class: "values-list",
                            contents: [
peter_rabbit's avatar
peter_rabbit committed
                                [
                                    "<emoji>📖</emoji> <blue>Partage des connaissances</blue>",
peter_rabbit's avatar
peter_rabbit committed
                                    `Pour sortir de l'élitisme de l'ingénierie, pour sortir de la domination par l'obscurantisme et de la consommation aveugle, 
                                    pour aller plus loin ensemble, le partage du savoir est fondamental.`,
                                ],
                                    "<emoji>💻</emoji> <blue>Logiciels libres et open source</blue>",
peter_rabbit's avatar
peter_rabbit committed
                                    `Toutes nos productions numériques, jeux vidéo, web, software, sont 
                                    <b><a href="https://fr.wikipedia.org/wiki/Logiciel_libre" target="_blank">libres et open source</a></b>.
peter_rabbit's avatar
peter_rabbit committed
                                    <br/> ainsi que les outils engagés dans leur fabrication.`,
                                    "<emoji>🌿</emoji> <blue>Écologie</blue>",
                                    `Nous vivons une époque ou l'utilisation de la technologie connaît une croissance exponentielle notament
                                    à travers internet.
peter_rabbit's avatar
peter_rabbit committed
                                    <br/>Il est primordial de construire le numérique dans une direction de légèreté et d'économie de 
                                    ressources.`,
                                ],
                            ].map(v => {
                                const [title, body] = v;
                                return {
                                    tag: "li",
                                    contents: [
                                        { tag: "h3", contents: title },
                                        { tag: "p", contents: body },
                                    ],
                                };
                            }),
                        },
                    ],
                },
            ],
        };
    }
}

module.exports = KuadradoValues;

},{}],5:[function(require,module,exports){
peter_rabbit's avatar
peter_rabbit committed
"use strict";

peter_rabbit's avatar
peter_rabbit committed
const { articles_url } = require("../../constants");
peter_rabbit's avatar
peter_rabbit committed
const objectHtmlRenderer = require("../lib/object-html-renderer");
const ImageCarousel = require("../generic-components/image-carousel");
const { loadArticles, getArticleDate, getArticleBody } = require("../lib/article-utils");

class NewsArticles {
peter_rabbit's avatar
peter_rabbit committed
    constructor() {
        this.id = performance.now().toString();
        this.state = {
            loading: true,
            articles: [],
            showArticleIndex: -1,
        };
        this.loadArticles();
    }

    loadArticles() {
peter_rabbit's avatar
peter_rabbit committed
        loadArticles(`${articles_url}news`).then(articles => {
peter_rabbit's avatar
peter_rabbit committed
            this.state.articles = articles;
            this.state.showArticleIndex = this.state.articles.length - 1;
            this.refresh();
        });
peter_rabbit's avatar
peter_rabbit committed
    }

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

    renderArticle(articleData) {
        return {
            tag: "article",
            typeof: "Article",
peter_rabbit's avatar
peter_rabbit committed
            contents: [
                {
                    tag: "div",
                    class: "date",
                    contents: [
                        {
                            tag: "time",
                            property: "datePublished",
                            contents: getArticleDate(articleData.date),
                        },
                    ],
peter_rabbit's avatar
peter_rabbit committed
                },
                {
                    tag: "div",
                    class: "title",
                    contents: [
                        {
                            tag: "h3",
                            contents: articleData.title,
                            property: "headline",
peter_rabbit's avatar
peter_rabbit committed
                        },
                    ],
                },
                {
                    tag: "div",
                    class: "subtitle",
                    contents: [
                        {
                            tag: "strong",
                            contents: articleData.subtitle,
                            property: "alternativeHeadline",
peter_rabbit's avatar
peter_rabbit committed
                        },
                    ],
                },
                {
                    tag: "div",
                    class: "body",
                    contents: [
                        {
                            tag: "p",
peter_rabbit's avatar
peter_rabbit committed
                            contents: getArticleBody(articleData.body),
                            property: "articleBody",
peter_rabbit's avatar
peter_rabbit committed
                        },
                    ],
                },
                new ImageCarousel({
                    images: articleData.images.map(img => `${articleData.path}/images/${img}`),
                }).render(),
            ],
        };
    }

    renderArticlePlaceholder() {
        return {
            tag: "article",
            class: "article-placeholder",
peter_rabbit's avatar
peter_rabbit committed
            contents: [
                { tag: "div", class: "date" },
                { tag: "div", class: "title" },
                { tag: "div", class: "subtitle" },
                { tag: "div", class: "body" },
                { tag: "div", class: "image-carousel" },
peter_rabbit's avatar
peter_rabbit committed
            ],
        };
    }

    handleChangeArticle(dir) {
        let { showArticleIndex, articles } = this.state;
        showArticleIndex =
            dir === "prev"
                ? showArticleIndex - 1 >= 0
                    ? showArticleIndex - 1
                    : 0
                : showArticleIndex + 1 <= articles.length - 1
                ? showArticleIndex + 1
                : articles.length - 1;
        this.state.showArticleIndex = showArticleIndex;
        this.refresh();
    }

    render() {
        const { articles, showArticleIndex } = this.state,
            showNext = showArticleIndex < articles.length - 1,
            showPrev = showArticleIndex > 0;
        return {
            tag: "div",
            id: this.id,
            class: "articles-displayer page-contents-center",
            contents:
                articles.length > 0
                    ? [
                          this.renderArticle(articles[showArticleIndex]),
                          {
peter_rabbit's avatar
peter_rabbit committed
                              tag: "div",
                              class: "prev-next-buttons",
                              contents: [
                                  {
                                      tag: "button",
                                      class: `prev-btn ${!showPrev ? "disabled" : "active"}`,
                                      contents: "Précédent",
                                      onclick: this.handleChangeArticle.bind(this, "prev"),
                                  },
                                  {
                                      tag: "button",
                                      class: `next-btn ${!showNext ? "disabled" : "active"}`,
                                      contents: "Suivant",
                                      onclick: this.handleChangeArticle.bind(this, "next"),
                                  },
                              ],
peter_rabbit's avatar
peter_rabbit committed
                          },
                      ]
peter_rabbit's avatar
peter_rabbit committed
                    : [this.renderArticlePlaceholder()],
peter_rabbit's avatar
peter_rabbit committed
module.exports = NewsArticles;
peter_rabbit's avatar
peter_rabbit committed

peter_rabbit's avatar
peter_rabbit committed
},{"../../constants":2,"../generic-components/image-carousel":3,"../lib/article-utils":9,"../lib/object-html-renderer":11}],6:[function(require,module,exports){
peter_rabbit's avatar
peter_rabbit committed
"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}` }],
peter_rabbit's avatar
peter_rabbit committed
                },
                {
                    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}],7:[function(require,module,exports){
peter_rabbit's avatar
peter_rabbit committed
"use strict";

peter_rabbit's avatar
peter_rabbit committed
class WhoAmI {
    render() {
        return {
            tag: "section",
            class: "whoami",
            contents: [
                {
                    tag: "div",
                    class: "page-contents-center",
                    contents: [
                        {
                            tag: "h2",
                            contents: "Qui sommes-nous-je ?",
peter_rabbit's avatar
peter_rabbit committed
                        },
                        {
                            tag: "div",
                            class: "presentation-card",
                            contents: [
                                {
                                    tag: "div",
                                    class: "header",
                                    contents: [
                                        {
                                            tag: "div",
                                            class: "pic",
                                            contents: [
                                                {
                                                    tag: "img",
                                                    alt:
                                                        "portrait Pierre Jarriges pixel art by Lucie Ventadour",
                                                    src: "assets/images/pijar_profile_lt_square.png",
                                                },
                                            ],
                                        },
                                        {
                                            tag: "div",
                                            class: "header-text",
                                            contents: [
                                                {
                                                    tag: "h3",
                                                    contents: "Pierre Jarriges",
                                                },
                                                {
                                                    tag: "h4",
                                                    contents:
                                                        "Artiste, auteur BD, compositeur, développeur informatique",
                                                },
                                                {
                                                    tag: "strong",
                                                    contents:
                                                        "Créateur de <blue>Kuadrado Software</blue> en Février 2021.",
                                                },
                                            ],
                                        },
                                    ],
                                },
                                {
                                    tag: "div",
                                    class: "body",
                                    contents: [
                                        {
                                            tag: "p",
                                            contents: `
                                            “ La création de <b><blue>Kuadrado Software</blue></b> vient de la volonté de développer différents axes ensembles :
peter_rabbit's avatar
peter_rabbit committed
                                            <br /><br />
                                            <emoji>🎮</emoji> D'une part exprimer une passion en créant des <b>jeux vidéo indépendants</b> sur un modèle léger et artisanal dans 
peter_rabbit's avatar
peter_rabbit committed
                                            une identité artistique forte, et de les distribuer sans compromission par une logique du marché ; 
                                            en effet, partir à la conquête du marché à dos de startup n'est pas l'objectif de Kuadrado Software. Il s'agit 
                                            avant tout de se donner les moyens de partager avec le monde une idée de liberté, de partage et de plaisir de 
                                            créer des choses simples.
                                            <br /><br />
                                            <emoji>💡</emoji> D'autre part il s'agit aussi de porter un <b>projet pédagogique</b> autour de la création de jeu vidéo, et 
peter_rabbit's avatar
peter_rabbit committed
                                            plus largement de la vulgarisation numérique. Le partage de connaissances et l'apprentissage collectif étant pour 
                                            moi l'instrument le plus efficace de lutte contre l'élitisme, contre le cloisonnement face à la technologie 
                                            (et donc à sa surconsommation), et tout simplement un moyen d'ouverture vers les autres.
                                            <br /><br />
                                            À l'heure d'aujourd'hui Kuadrado Software est construit sur un modèle d'auto-entreprise. 
                                            <br />
                                            Mais le but n'est naturellement pas de rester tout seul à développer des projets et de parler de moi au 
                                            pluriel ! Il s'agit bien de développer une identité qui pourra rassembler plusieurs énergies 
                                            dans le même état d'esprit, former des équipes de travail et de création, et s'inscrire dans un tissu 
                                            local de savoir-faire, tout en gardant un modèle d'entreprise aussi léger, libéral, modulaire et indépendant 
                                            que possible .”
                                            `,
                                        },
                                    ],
                                },
                            ],
                        },
                    ],
                },
            ],
        };
    }
}

module.exports = WhoAmI;

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

peter_rabbit's avatar
peter_rabbit committed
const { images_url } = require("../constants");
const KuadradoValues = require("./home-page-components/kuadrado-values");
peter_rabbit's avatar
peter_rabbit committed
const NewsArticles = require("./home-page-components/news-articles");
peter_rabbit's avatar
peter_rabbit committed
const ThemeCard = require("./home-page-components/theme-card");
peter_rabbit's avatar
peter_rabbit committed
const WhoAmI = require("./home-page-components/whoami");
const WebPage = require("./lib/web-page");
peter_rabbit's avatar
peter_rabbit committed

class HomePage extends WebPage {
peter_rabbit's avatar
peter_rabbit committed
    render() {
        return {
peter_rabbit's avatar
peter_rabbit committed
            tag: "div",
peter_rabbit's avatar
peter_rabbit committed
            id: "home-page",
peter_rabbit's avatar
peter_rabbit committed
            contents: [
                {
peter_rabbit's avatar
peter_rabbit committed
                    tag: "div",
                    class: "page-header",
                    contents: [
peter_rabbit's avatar
peter_rabbit committed
                        {
                            tag: "div",
                            class: "big-logo page-contents-center",
                            contents: [
peter_rabbit's avatar
peter_rabbit committed
                                {
                                    tag: "img",
                                    alt: "logo Kuadrado",
                                    src: `${images_url}logo_kuadrado.svg`,
peter_rabbit's avatar
peter_rabbit committed
                                },
peter_rabbit's avatar
peter_rabbit committed
                                {
                                    tag: "img",
                                    class: "logo-text",
peter_rabbit's avatar
peter_rabbit committed
                                    alt: "Kuadrado",
                                    src: `${images_url}logo_kuadrado_txt.svg`,
peter_rabbit's avatar
peter_rabbit committed
                                },
                            ],
                        },
peter_rabbit's avatar
peter_rabbit committed
                        { tag: "h1", contents: "Kuadrado Software", class: "page-contents-center" },
                        {
                            tag: "p",
                            class: "page-contents-center",
peter_rabbit's avatar
peter_rabbit committed
                            contents: `Créations numériques, jeux vidéos, web, software et pédagogie.`,
peter_rabbit's avatar
peter_rabbit committed
                        },
                        {
                            tag: "ul",
                            class: "philo-bubbles",
peter_rabbit's avatar
peter_rabbit committed
                            contents: ["Simplicité", "Légèreté", "Écologie"].map(word => {
                                return {
                                    tag: "li",
                                    contents: [{ tag: "span", contents: word }],
                                };
                            }),
                        },
peter_rabbit's avatar
peter_rabbit committed
                    ],
                },
                {
                    tag: "section",
                    class: "page-contents-center poles",
peter_rabbit's avatar
peter_rabbit committed
                    contents: [
                        {
                            title: "Jeux",
peter_rabbit's avatar
peter_rabbit committed
                            img: "game_controller.svg",
peter_rabbit's avatar
peter_rabbit committed
                            href: "/games/",
                            description:
peter_rabbit's avatar
peter_rabbit committed
                                "Créations vidéoludiques, jeux web et jeux PC, projets en cours.",
peter_rabbit's avatar
peter_rabbit committed
                        },
                        {
                            title: "Pédagogie",
peter_rabbit's avatar
peter_rabbit committed
                            img: "brain.svg",
peter_rabbit's avatar
peter_rabbit committed
                            href: "/education/",
peter_rabbit's avatar
peter_rabbit committed
                            description: `S'approprier la technologie par le partage de connaissances.`,
peter_rabbit's avatar
peter_rabbit committed
                        },
                        {
                            title: "Software",
                            img: "meca_proc.svg",
                            href: "/software-development/",
                            description: `R&D, projets expérimentaux, web et outillage logiciel`,
                        },
peter_rabbit's avatar
peter_rabbit committed
                    ].map(cardProps => new ThemeCard(cardProps).render()),
peter_rabbit's avatar
peter_rabbit committed
                },
peter_rabbit's avatar
peter_rabbit committed
                {
                    tag: "section",
peter_rabbit's avatar
peter_rabbit committed
                    class: "page-philo",
                    contents: [
                        {
                            tag: "p",
                            class: "page-contents-center",
peter_rabbit's avatar
peter_rabbit committed
                            contents: `Travailler pour le plaisir de créer, de maîtriser et de comprendre.`,
peter_rabbit's avatar
peter_rabbit committed
                        },
                    ],
                },
                {
                    tag: "section",
                    class: "page-contents-center",
                    id:"news",
peter_rabbit's avatar
peter_rabbit committed
                    contents: [
                        { tag: "h2", contents: "Actu", class: "section-title" },
peter_rabbit's avatar
peter_rabbit committed
                        new NewsArticles().render(),
                    ],
                },
                new KuadradoValues().render(),
peter_rabbit's avatar
peter_rabbit committed
                new WhoAmI().render(),
peter_rabbit's avatar
peter_rabbit committed
            ],
        };
    }
}

module.exports = HomePage;

peter_rabbit's avatar
peter_rabbit committed
},{"../constants":2,"./home-page-components/kuadrado-values":4,"./home-page-components/news-articles":5,"./home-page-components/theme-card":6,"./home-page-components/whoami":7,"./lib/web-page":12}],9:[function(require,module,exports){
peter_rabbit's avatar
peter_rabbit committed
"use strict";

const { fetchjson, fetchtext } = require("./fetch");

function getArticleBody(text) {
    return text.replaceAll("\n", "<br/>");
peter_rabbit's avatar
peter_rabbit committed
}

function getArticleDate(date) {
    return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`;
}

function loadArticles(dir_url) {
    return new Promise((resolve, reject) => {
        fetchjson(`${dir_url}/index.json`)
            .then(json => {
                Promise.all(
peter_rabbit's avatar
peter_rabbit committed
                    json.articles.map(async artDir => {
                        const artPath = `${artDir}/${artDir}.json`;
                        const art = await fetchjson(`${dir_url}/${artPath}`);
                        const tmpSplit = artPath.split("/");
peter_rabbit's avatar
peter_rabbit committed
                        tmpSplit.pop();
                        const absArtPath = `${dir_url}/${tmpSplit.join("/")}`;
                        return Object.assign(art, { path: absArtPath });
                    })
                )
                    .then(articles => {
                        populateArticles(articles)
                            .then(completeArticles => resolve(completeArticles))
                            .catch(e => reject(e));
                    })
                    .catch(e => reject(e));
            })
            .catch(e => console.log(e));
    });
}

function populateArticles(articles) {
    return new Promise((resolve, reject) => {
        Promise.all(
            articles.map(async article => {
                if (article.body.indexOf("<file>") !== -1) {
                    const txtPath = article.body.replace("<file>", "");
                    const textValue = await fetchtext(`${article.path}/${txtPath}`);
                    article.body = textValue;
                    article.date = article.date ? new Date(article.date) : undefined;
                }
                return article;
            })
        )
            .then(completeArticles => resolve(completeArticles.sort((a, b) => a.date - b.date)))
            .catch(e => reject(e));
    });
}

module.exports = {
    loadArticles,
    getArticleBody,
    getArticleDate,
    populateArticles,
};

peter_rabbit's avatar
peter_rabbit committed
},{"./fetch":10}],10:[function(require,module,exports){
peter_rabbit's avatar
peter_rabbit committed
"use strict";

function fetchjson(url) {
    return new Promise((resolve, reject) => {
        fetch(url)
peter_rabbit's avatar
peter_rabbit committed
            .then(r => r.json())
            .then(r => resolve(r))
            .catch(e => reject(e));
    });
peter_rabbit's avatar
peter_rabbit committed
}
peter_rabbit's avatar
peter_rabbit committed

function fetchtext(url) {
    return new Promise((resolve, reject) => {
        fetch(url)
peter_rabbit's avatar
peter_rabbit committed
            .then(r => r.text())
            .then(r => resolve(r))
            .catch(e => reject(e));
    });
peter_rabbit's avatar
peter_rabbit committed
}
peter_rabbit's avatar
peter_rabbit committed

module.exports = {
peter_rabbit's avatar
peter_rabbit committed
    fetchjson,
    fetchtext,
};
peter_rabbit's avatar
peter_rabbit committed

peter_rabbit's avatar
peter_rabbit committed
},{}],11:[function(require,module,exports){
peter_rabbit's avatar
peter_rabbit committed
"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;
        }
    },
};

peter_rabbit's avatar
peter_rabbit committed
},{}],12:[function(require,module,exports){
peter_rabbit's avatar
peter_rabbit committed
"use strict";

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

module.exports = WebPage;
peter_rabbit's avatar
peter_rabbit committed
},{}],13:[function(require,module,exports){
"use strict";

peter_rabbit's avatar
peter_rabbit committed
const HomePage = require("./homepage");
const runPage = require("./run-page");

runPage(HomePage);

peter_rabbit's avatar
peter_rabbit committed
},{"./homepage":8,"./run-page":14}],14:[function(require,module,exports){
peter_rabbit's avatar
peter_rabbit committed
"use strict";

const objectHtmlRenderer = require("./lib/object-html-renderer");
peter_rabbit's avatar
peter_rabbit committed
const Template = require("./template/template");
peter_rabbit's avatar
peter_rabbit committed

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

peter_rabbit's avatar
peter_rabbit committed
},{"./lib/object-html-renderer":11,"./template/template":16}],15:[function(require,module,exports){
peter_rabbit's avatar
peter_rabbit committed
"use strict";

const { images_url } = require("../../../constants");
peter_rabbit's avatar
peter_rabbit committed

peter_rabbit's avatar
peter_rabbit committed
const NAV_MENU_ITEMS = [
    ["/games/", "Jeux"],
peter_rabbit's avatar
peter_rabbit committed
    [
        "/education/",
peter_rabbit's avatar
peter_rabbit committed
        "Pédagogie",
        [
            // submenu
            ["/education/#game-studio-club", "Game Studio Club"],
            ["/education/#popularization", "Vulgarisation numérique"],
peter_rabbit's avatar
peter_rabbit committed
        ],
    ],
    ["/software-development/", "Software"],
peter_rabbit's avatar
peter_rabbit committed
];

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");
            }
        });
    }

    renderHome() {
        return {
            tag: "div",
            class: "home",
            contents: [
                {
                    tag: "a",
peter_rabbit's avatar
peter_rabbit committed
                        {
                            tag: "img",
peter_rabbit's avatar
peter_rabbit committed
                            alt: "Logo Kuadrado",
                            src: `${images_url}logo_kuadrado.svg`,
peter_rabbit's avatar
peter_rabbit committed
                        },
                        {
                            tag: "img",
                            alt: "Kuadrado Software",
peter_rabbit's avatar
peter_rabbit committed
                            class: "logo-text",
                            src: `${images_url}logo_kuadrado_txt.svg`,
peter_rabbit's avatar
peter_rabbit committed
                        },
peter_rabbit's avatar
peter_rabbit committed
    renderMenu(menuItemsArray, isSubmenu = false) {
peter_rabbit's avatar
peter_rabbit committed
            tag: "ul",
            id: "nav-menu-list",
peter_rabbit's avatar
peter_rabbit committed
            class: isSubmenu ? "submenu" : "",
            contents: menuItemsArray.map(link => {
                const [href, text, submenu] = link;
peter_rabbit's avatar
peter_rabbit committed
                return {
                    tag: "li",
                    class: !isSubmenu && window.location.pathname === href ? "active" : "",
peter_rabbit's avatar
peter_rabbit committed
                    contents: [
                        {
                            tag: "a",
                            href,
peter_rabbit's avatar
peter_rabbit committed
                        },
                    ].concat(submenu ? [this.renderMenu(submenu, true)] : []),
peter_rabbit's avatar
peter_rabbit committed
                };
            }),
        };
    }

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

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

module.exports = NavBar;

peter_rabbit's avatar
peter_rabbit committed
},{"../../../constants":2}],16:[function(require,module,exports){
peter_rabbit's avatar
peter_rabbit committed
const { in_construction } = require("../../config");
peter_rabbit's avatar
peter_rabbit committed
const { images_url } = require("../../constants");
const NavBar = require("./components/navbar");

class Template {
    constructor(props) {
        this.props = props;
    }
peter_rabbit's avatar
peter_rabbit committed
    render() {
        return {
            tag: "main",
            contents: [
                {
                    tag: "header",
                    contents: [new NavBar().render()],
peter_rabbit's avatar
peter_rabbit committed
                },
peter_rabbit's avatar
peter_rabbit committed
                in_construction && {
                    tag: "section",
                    class: "warning-banner",
                    contents: [
                        {
                            tag: "strong",
                            class: "page-contents-center",
                            contents: "Site en construction ...",
                        },
                    ],
                },
peter_rabbit's avatar
peter_rabbit committed
                    tag: "section",
peter_rabbit's avatar
peter_rabbit committed
                    id: "page-container",
                    contents: [this.props.page.render()],
                },
                {
                    tag: "footer",
                    contents: [
peter_rabbit's avatar
peter_rabbit committed
                        {
                            tag: "div",
                            class: "logo",
                            contents: [
                                {
                                    tag: "img",
peter_rabbit's avatar
peter_rabbit committed
                                    alt: `logo Kuadrado`,
                                    src: `${images_url}logo_kuadrado.svg`,
peter_rabbit's avatar
peter_rabbit committed
                                },
                                {
                                    tag: "img",
peter_rabbit's avatar
peter_rabbit committed
                                    class: "text-logo",
peter_rabbit's avatar
peter_rabbit committed
                                    alt: "Kuadrado Software",
                                    src: `${images_url}logo_kuadrado_txt.svg`,
peter_rabbit's avatar
peter_rabbit committed
                                },
                            ],
                        },
peter_rabbit's avatar
peter_rabbit committed
                            tag: "span",
                            contents:
                                "<b><blue>Où sommes-nous ? </blue></b>32 rue Simon Vialet, 07240 Vernoux en Vivarais. Ardèche, France",
                        },
                        {
                            tag: "div",
                            contents: [
peter_rabbit's avatar
peter_rabbit committed
                                { tag: "strong", contents: "<blue>Nous contacter : </blue>" },
peter_rabbit's avatar
peter_rabbit committed
                                {
                                    tag: "a",
                                    href: "mailto:contact@kuadrado-software.fr",
                                    contents: "contact@kuadrado-software.fr",
                                },
                            ],
peter_rabbit's avatar
peter_rabbit committed
                        },
peter_rabbit's avatar
peter_rabbit committed
                        {
                            tag: "div",
                            class: "social",
                            contents: [
                                {
                                    tag: "strong",
                                    contents: "<blue>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://twitter.com/KuadradoSoft",
                                    target: "_blank",
                                    contents: "t",
                                    title: "Twitter",
                                    style_rules: { fontFamily: "serif" },
                                },
                            ],
                        },
                        {
                            tag: "span",
                            contents: `Copyright © ${new Date()
                                .getFullYear()} Kuadrado Software | 
                                Toutes les images du site ont été réalisées par nos soins et peuvent être réutilisées pour un usage personnel.`,
                        },
peter_rabbit's avatar
peter_rabbit committed
                    ],
                },
            ],
        };
    }
}

module.exports = Template;

peter_rabbit's avatar
peter_rabbit committed
},{"../../config":1,"../../constants":2,"./components/navbar":15}]},{},[13]);