(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 = { server_url: `${location.origin}${ location.origin.charAt(location.origin.length - 1) !== "/" ? "/" : "" }`, in_construction: false, }; },{}],2:[function(require,module,exports){ const { server_url } = require("./config"); module.exports = { images_url: `${server_url}assets/images`, articles_url: `${server_url}articles/`, }; },{"./config":1}],3:[function(require,module,exports){ "use strict"; const objectHtmlRenderer = require("../lib/object-html-renderer"); class ImageCarousel { constructor(props) { this.props = props; this.id = performance.now(); this.state = { showImageIndex: 0, }; this.RUN_INTERVAL = 5000; this.props.images.length > 1 && this.run(); } 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: [ { tag: "img", alt: `image carousel ${images[showImageIndex].replace(/\.[A-Za-z]+/, "")}`, src: images[showImageIndex], }, 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; },{"../lib/object-html-renderer":6}],4:[function(require,module,exports){ "use strict"; const { fetchjson, fetchtext } = require("./fetch"); function getArticleBody(text) { return text.replaceAll("\n", "<br/>").replaceAll(" ", " "); } function getArticleDate(date) { return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`; } function getArticleStatus(status) { switch (status) { case "wip": return "En développement"; case "released": return "En production"; } } function loadArticles(dir_url) { return new Promise((resolve, reject) => { fetchjson(`${dir_url}/index.json`) .then(json => { Promise.all( json.articles.map(async artDir => { const artPath = `${artDir}/${artDir}.json`; const art = await fetchjson(`${dir_url}/${artPath}`); const tmpSplit = artPath.split("/"); 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, getArticleStatus, }; },{"./fetch":5}],5:[function(require,module,exports){ "use strict"; function fetchjson(url) { return new Promise((resolve, reject) => { fetch(url) .then(r => r.json()) .then(r => resolve(r)) .catch(e => reject(e)); }); } function fetchtext(url) { return new Promise((resolve, reject) => { fetch(url) .then(r => r.text()) .then(r => resolve(r)) .catch(e => reject(e)); }); } module.exports = { fetchjson, fetchtext, }; },{}],6:[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; } }, }; },{}],7:[function(require,module,exports){ "use strict"; const { articles_url } = require("../../../../constants"); const ImageCarousel = require("../../../generic-components/image-carousel"); const { loadArticles, getArticleBody, getArticleDate, getArticleStatus } = require("../../../lib/article-utils"); const objectHtmlRenderer = require("../../../lib/object-html-renderer"); class SoftwareArticle { constructor(props) { this.props = props; } render() { const { title, date, status, body, subtitle, images, path, technical } = this.props; return { tag: "article", class: "software-article", contents: [ { tag: "h2", class: "software-title", contents: title, }, { tag: "h3", class: "software-subtitle", contents: subtitle, }, { tag: "div", class: "software-infos", contents: [ { tag: "span", class: "software-date", contents: getArticleDate(date), }, { tag: "span", class: `project-status ${status}`, contents: getArticleStatus(status), }, ], }, { tag: "div", class: "software-description", contents: getArticleBody(body), }, new ImageCarousel({ images: images.map(img => `${path}/images/${img}`) }).render(), { tag: "div", class: "software-technical", contents: [ { tag: "h2", contents: "Details", }, { tag: "table", contents: [ { tag: "tr", contents: [ { tag: "td", contents: "Stack" }, { tag: "td", contents: [ { tag: "ul", contents: technical.stack.map(tech => { return { tag: "li", contents: tech }; }), }, ], }, ], }, { tag: "tr", contents: [ { tag: "td", contents: "Version actuelle" }, { tag: "td", contents: technical.version, }, ], }, { tag: "tr", contents: [ { tag: "td", contents: "License" }, { tag: "td", contents: technical.license }, ], }, { tag: "tr", contents: [ { tag: "td", contents: "Dépôt code source" }, { tag: "td", contents: [ { tag: "a", href: technical.repository, contents: technical.repository, }, ], }, ], }, ], }, ], }, ], }; } } class SoftwareArticles { constructor(props) { this.props = props; this.state = { articles: [], }; this.id = performance.now(); this.loadArticles(); } loadArticles() { loadArticles(`${articles_url}software`) .then(articles => { this.state.articles = articles; this.refresh(); }) .catch(e => console.log(e)); } renderPlaceholder() { return { tag: "article", class: "placeholder", contents: [{ tag: "div" }, { tag: "div" }], }; } refresh() { objectHtmlRenderer.subRender(this.render(), document.getElementById(this.id), { mode: "replace", }); } render() { const { articles } = this.state; return { tag: "section", class: "software-articles page-contents-center", id: this.id, contents: articles.length > 0 ? articles.map(article => new SoftwareArticle({ ...article }).render()) : [this.renderPlaceholder()], }; } } module.exports = SoftwareArticles; },{"../../../../constants":2,"../../../generic-components/image-carousel":3,"../../../lib/article-utils":4,"../../../lib/object-html-renderer":6}],8:[function(require,module,exports){ "use strict"; const { images_url } = require("../../../constants"); const SoftwareArticles = require("./components/software-articles"); class SoftwareDevelopment { constructor(args) { Object.assign(this, args); } render() { return { tag: "div", id: "software-page", contents: [ { tag: "div", class: "page-header logo-left", contents: [ { tag: "div", class: "page-contents-center grid-wrapper", contents: [ { tag: "div", class: "logo", contents: [ { tag: "img", alt: `image mechanic electronic`, src: `${images_url}/meca_proc.svg`, }, ], }, { tag: "h1", contents: "Software" }, { tag: "p", contents: `Développement web, moteurs de jeux et outillage logiciel.`, }, ], }, ], }, new SoftwareArticles().render(), ], }; } } module.exports = SoftwareDevelopment; },{"../../../constants":2,"./components/software-articles":7}],9:[function(require,module,exports){ "use strict"; "use strict"; const runPage = require("../../run-page"); const SoftwareDevelopment = require("./software-development"); runPage(SoftwareDevelopment); },{"../../run-page":10,"./software-development":8}],10:[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":6,"./template/template":12}],11:[function(require,module,exports){ "use strict"; const { images_url } = require("../../../constants"); const NAV_MENU_ITEMS = [ ["/games/", "Jeux"], ["/software-development/", "Software"], [ "/education/", "Pédagogie", [ // submenu ["/education/#game-studio-club", "Game Studio Club"], ["/education/#popularization", "Vulgarisation numérique"], ], ], ]; 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", 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) { return { tag: "ul", id: "nav-menu-list", class: isSubmenu ? "submenu" : "", contents: menuItemsArray.map(link => { const [href, text, submenu] = link; return { tag: "li", class: !isSubmenu && window.location.pathname === href ? "active" : "", contents: [ { tag: "a", href, contents: text, }, ].concat(submenu ? [this.renderMenu(submenu, true)] : []), }; }), }; } 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}],12:[function(require,module,exports){ "use strict"; const { in_construction } = require("../../config"); const { images_url } = require("../../constants"); const NavBar = require("./components/navbar"); 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: "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: "Toutes les images du site ont été réalisées par nos soins et peuvent être réutilisées pour un usage personnel.", }, { tag: "a", href: "mailto:contact@kuadrado-software.fr", contents: "contact@kuadrado-software.fr", }, ], }, ], }; } } module.exports = Template; },{"../../config":1,"../../constants":2,"./components/navbar":11}]},{},[9]);