software-articles.js

"use strict";

const { articles_url } = require("../../../../constants");
const { loadArticles, getArticleBody, getArticleDate } = require("../../../lib/article-utils");
const objectHtmlRenderer = require("object-to-html-renderer")

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

    render() {
        const { title, body, subtitle, images, path, details = [], releases } = 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: `${path}/images/${images[0]}`
                        }
                    ]
                },
                {
                    tag: "h3",
                    class: "software-subtitle",
                    contents: subtitle,
                    property: "alternativeHeadline",
                },
                {
                    tag: "div",
                    class: "software-description",
                    contents: getArticleBody(body),
                    property: "description",
                },
                {
                    tag: "div",
                    class: "software-technical",
                    contents: [
                        {
                            tag: "h2",
                            contents: "Details",
                        },
                        {
                            tag: "ul",
                            class: "technical-details",
                            contents: details.map(detail => {
                                return {
                                    tag: "li",
                                    class: "detail",
                                    contents: [
                                        { tag: "label", contents: detail.label },
                                        {
                                            tag: "div",
                                            contents: detail.value
                                        },
                                    ],
                                };
                            }),
                        },
                        releases && {
                            tag: "h2",
                            contents: "Releases",
                        },
                        releases && {
                            tag: "ul",
                            class: "releases",
                            contents: [
                                {
                                    tag: "li",
                                    class: "detail",
                                    contents: [
                                        {
                                            tag: "label",
                                            class: "label",
                                            contents: "Plateforme",
                                        },
                                        {
                                            tag: "label",
                                            class: "label",
                                            contents: "Téléchargement",
                                        },
                                    ],
                                },
                            ].concat(
                                releases.map(rel => {
                                    return {
                                        tag: "li",
                                        class: "release detail",
                                        contents: [
                                            {
                                                tag: "label",
                                                contents: rel.platform,
                                            },
                                            {
                                                tag: "a",
                                                download: rel.download,
                                                href: `${path}/release/${rel.download}`,
                                                contents: rel.download,
                                                property: "url",
                                            },
                                        ],
                                    };
                                })
                            ),
                        },
                    ],
                },
            ],
        };
    }
}

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();
                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() {
        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
            );
        }
    }

    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;