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 6.44 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");
    
    const { loadArticles, getArticleBody, getArticleDate } = require("../../../lib/article-utils");
    
    const objectHtmlRenderer = require("object-to-html-renderer")
    
    peter_rabbit's avatar
    peter_rabbit committed
    
    class SoftwareArticle {
        constructor(props) {
            this.props = props;
        }
    
        render() {
    
            const { title, body, subtitle, images, path, details = [], releases } = 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: "div", class: "software-image",
                        contents: [
                            {
                                tag: "img", src: `${path}/images/${images[0]}`
                            }
                        ]
    
    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
                    },
                    {
                        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",
    
                                contents: details.map(detail => {
                                    return {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                        tag: "li",
                                        class: "detail",
    
    peter_rabbit's avatar
    peter_rabbit committed
                                        contents: [
    
                                            { tag: "label", contents: detail.label },
    
    peter_rabbit's avatar
    peter_rabbit committed
                                            {
    
    peter_rabbit's avatar
    peter_rabbit committed
                                                tag: "div",
    
                                                contents: detail.value
    
    peter_rabbit's avatar
    peter_rabbit committed
                                            },
    
    peter_rabbit's avatar
    peter_rabbit committed
                                        ],
    
    peter_rabbit's avatar
    peter_rabbit committed
                            },
    
                            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",
                                                },
                                            ],
                                        };
                                    })
                                ),
                            },
    
    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;