(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 = { images_url: "/assets/images" } },{}],2:[function(require,module,exports){ module.exports = { build: { protected_dirs: ["assets", "style", "views", "standard"], default_meta_keys: ["title", "description", "image", "open_graph", "json_ld"], }, }; },{}],3:[function(require,module,exports){ module.exports = { images_url: `/assets/images`, data_url: `/assets/data`, }; },{}],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 { fetch_json_or_error_text } = require("./fetch"); function getArticleBody(text) { return text.replaceAll("\n", "<br/>"); } function getArticleDate(date) { return `${date.getDate()}-${date.getMonth() + 1}-${date.getFullYear()}`; } function loadArticles(category) { return fetch_json_or_error_text(`/articles/${category}`) } module.exports = { loadArticles, getArticleBody, getArticleDate, }; },{"./fetch":6}],6:[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)); }); } async function fetch_json_or_error_text(url, options = {}) { return new Promise((resolve, reject) => { fetch(url, options).then(async res => { if (res.status >= 400 && res.status < 600) { reject(await res.text()); } else { resolve(await res.json()); } }) }) } module.exports = { fetchjson, fetchtext, fetch_json_or_error_text, }; },{}],7:[function(require,module,exports){ "use strict"; class WebPage { constructor(args) { Object.assign(this, args); } } module.exports = WebPage; },{}],8:[function(require,module,exports){ "use strict"; const { images_url } = require("../../../../../admin-frontend/src/constants"); const { getArticleBody } = require("../../../lib/article-utils"); class SoftwareArticle { constructor(props) { this.props = props; } render() { const { title, body, subtitle, images, details = [] } = this.props; return { tag: "article", class: "software-article", typeof: "SoftwareApplication", additionalType: "Article", contents: [ { tag: "h2", class: "software-title", contents: title, property: "name", }, { tag: "div", class: "software-image", contents: [ { tag: "img", src: `${images_url}/${images[0]}` } ] }, { tag: "h3", class: "software-subtitle", contents: subtitle, property: "alternativeHeadline", }, { tag: "div", class: "software-description", contents: getArticleBody(body), property: "description", }, details.length > 0 && { tag: "div", class: "article-details", contents: [ { tag: "h2", contents: "Details", }, { tag: "ul", class: "details-list", contents: details.map(detail => { return { tag: "li", class: "detail", contents: [ { tag: "label", contents: detail.label }, { tag: "div", contents: detail.value }, ], }; }), }, ], }, ], }; } } module.exports = SoftwareArticle; },{"../../../../../admin-frontend/src/constants":1,"../../../lib/article-utils":5}],9:[function(require,module,exports){ "use strict"; const { loadArticles } = require("../../../lib/article-utils"); const SoftwareArticle = require("./software-article"); class SoftwareArticles { constructor(props) { this.props = props; this.state = { articles: [], }; this.id = performance.now(); this.loadArticles(); } loadArticles() { loadArticles("software").then(articles => { this.state.articles = articles; this.refresh(); this.fixScroll(); }).catch(e => console.log(e)) } renderPlaceholder() { return { tag: "article", class: "placeholder", contents: [ { tag: "div", class: "title" }, { tag: "div", class: "body" }, { tag: "div", class: "details" }, ], }; } refresh() { obj2htm.subRender(this.render(), document.getElementById(this.id), { mode: "replace", }); } fixScroll() { if (window.location.href.includes("#")) { window.scrollTo( 0, document.getElementById(window.location.href.match(/#.+/)[0].replace("#", "")) .offsetTop ); } } 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; },{"../../../lib/article-utils":5,"./software-article":8}],10:[function(require,module,exports){ "use strict"; const { images_url } = require("../../../constants"); const WebPage = require("../../lib/web-page"); const SoftwareArticles = require("./components/software-articles"); class SoftwareDevelopment extends WebPage { 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: `R&D, projets expérimentaux, outillage logiciel pour le développement de jeu ou pour le web.`, }, ], }, ], }, new SoftwareArticles().render(), ], }; } } module.exports = SoftwareDevelopment; },{"../../../constants":3,"../../lib/web-page":7,"./components/software-articles":9}],11:[function(require,module,exports){ "use strict"; "use strict"; const runPage = require("../../run-page"); const SoftwareDevelopment = require("./software-development"); runPage(SoftwareDevelopment); },{"../../run-page":12,"./software-development":10}],12:[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":14,"object-to-html-renderer":4}],13:[function(require,module,exports){ "use strict"; const { images_url } = require("../../../constants"); const NAV_MENU_ITEMS = [ { url: "/games/", text: "Jeux" }, { url: "/education/", text: "Pédagogie", // submenu: [ // { url: "/gamedev", text: "Création de jeux vidéo" }, // ] }, { 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"); } }); } 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: text, }, ].concat(submenu ? [this.renderMenu(submenu, true, url)] : []), }; }), }; } 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":3}],14:[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: "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>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 | Toutes les images du site ont été réalisées par mes soins et peuvent être réutilisées pour un usage personnel.`, }, { tag: "div", contents: [ { tag: "span", contents: "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":2,"../../constants":3,"./components/navbar":13}]},{},[11]);