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
software-articles.js 7.13 KiB
Newer Older
  • Learn to ignore specific revisions
  • 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 ImageCarousel = require("../../../generic-components/image-carousel");
    
    const { loadArticles, getArticleBody, getArticleDate } = require("../../../lib/article-utils");
    
    peter_rabbit's avatar
    peter_rabbit committed
    const objectHtmlRenderer = require("../../../lib/object-html-renderer");
    
    class SoftwareArticle {
        constructor(props) {
            this.props = props;
        }
    
        render() {
    
    peter_rabbit's avatar
    peter_rabbit committed
            const { title, date, body, subtitle, images, path, technical } = this.props;
    
    peter_rabbit's avatar
    peter_rabbit committed
            return {
                tag: "article",
                class: "software-article",
    
                typeof: "SoftwareApplication",
                additionalType: "Article",
    
    peter_rabbit's avatar
    peter_rabbit committed
                contents: [
                    {
                        tag: "h2",
                        class: "software-title",
                        contents: title,
    
                        property: "name",
    
    peter_rabbit's avatar
    peter_rabbit committed
                    },
    
                    {
                        tag: "time",
                        class: "software-date",
                        contents: getArticleDate(date),
    
                        property: "datePublished",
    
    peter_rabbit's avatar
    peter_rabbit committed
                    {
                        tag: "h3",
                        class: "software-subtitle",
                        contents: subtitle,
    
                        property: "alternativeHeadline",
    
    peter_rabbit's avatar
    peter_rabbit committed
                    },
                    {
                        tag: "div",
                        class: "software-description",
                        contents: getArticleBody(body),
    
                        property: "description",
    
    peter_rabbit's avatar
    peter_rabbit committed
                    },
                    new ImageCarousel({ images: images.map(img => `${path}/images/${img}`) }).render(),
                    {
                        tag: "div",
                        class: "software-technical",
                        contents: [
                            {
                                tag: "h2",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                contents: "Details",
    
    peter_rabbit's avatar
    peter_rabbit committed
                            },
                            {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                tag: "ul",
                                class: "technical-details",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                contents: [
                                    {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                        tag: "li",
                                        class: "detail",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                        contents: [
    
    peter_rabbit's avatar
    peter_rabbit committed
                                            { tag: "label", contents: "Stack" },
    
    peter_rabbit's avatar
    peter_rabbit committed
                                            {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                tag: "div",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                contents: [
                                                    {
                                                        tag: "ul",
                                                        contents: technical.stack.map(tech => {
    
                                                            return {
                                                                tag: "li",
                                                                contents: tech,
                                                                property: "about",
                                                            };
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                        }),
                                                    },
                                                ],
                                            },
                                        ],
                                    },
    
    peter_rabbit's avatar
    peter_rabbit committed
                                    {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                        tag: "li",
                                        class: "detail",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                        contents: [
    
    peter_rabbit's avatar
    peter_rabbit committed
                                            { tag: "label", contents: "Version actuelle" },
    
    peter_rabbit's avatar
    peter_rabbit committed
                                            {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                tag: "div",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                contents: technical.version,
    
                                                property: "version",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                            },
                                        ],
                                    },
    
    peter_rabbit's avatar
    peter_rabbit committed
                                    {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                        tag: "li",
                                        class: "detail",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                        contents: [
    
    peter_rabbit's avatar
    peter_rabbit committed
                                            { tag: "label", contents: "License" },
    
                                            {
                                                tag: "div",
                                                contents: technical.license,
                                                property: "license",
                                            },
    
    peter_rabbit's avatar
    peter_rabbit committed
                                        ],
                                    },
                                    {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                        tag: "li",
                                        class: "detail",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                        contents: [
    
    peter_rabbit's avatar
    peter_rabbit committed
                                            {
                                                tag: "label",
                                                contents: [
                                                    {
                                                        tag: "a",
                                                        href: technical.repository,
    
                                                        target: "_blank",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                        contents: "Dépôt code source",
    
                                                        property: "url",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                        ],
                                    },
                                ],
                            },
                        ],
                    },
                ],
            };
        }
    }
    
    class SoftwareArticles {
        constructor(props) {
            this.props = props;
            this.state = {
                articles: [],
            };
            this.id = performance.now();
            this.loadArticles();
        }
    
        loadArticles() {
    
    peter_rabbit's avatar
    peter_rabbit committed
            loadArticles(`${articles_url}software`)
    
    peter_rabbit's avatar
    peter_rabbit committed
                .then(articles => {
                    this.state.articles = articles;
                    this.refresh();
    
                    this.fixScroll();
    
    peter_rabbit's avatar
    peter_rabbit committed
                })
                .catch(e => console.log(e));
        }
    
        renderPlaceholder() {
            return {
                tag: "article",
                class: "placeholder",
    
                contents: [
                    { tag: "div", class: "title" },
                    { tag: "div", class: "body" },
                    { tag: "div", class: "details" },
                ],
    
    peter_rabbit's avatar
    peter_rabbit committed
            };
        }
    
        refresh() {
            objectHtmlRenderer.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
                );
            }
        }
    
    
    peter_rabbit's avatar
    peter_rabbit committed
        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;