Articlebuilder-Renderer/news.js at main · WebXIO/Articlebuilder-Renderer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
import CheckList from "../createArticle/js 1/Article/Module/CheckList.js";
import Divider from "../createArticle/js 1/Article/Module/Divider.js";
import Downloadable from "../createArticle/js 1/Article/Module/Downloadable.js";
import { PDFExtract } from "../createArticle/js 1/Article/Module/extractPdf.js";
import { Header } from "../createArticle/js 1/Article/Module/Header.js";
import { ImageArticle } from "../createArticle/js 1/Article/Module/image.js";
import List from "../createArticle/js 1/Article/Module/List.js";
import { Paragraph } from "../createArticle/js 1/Article/Module/Paragraph.js";
import { Spacing } from "../createArticle/js 1/Article/Module/Spacing.js";
import ArticleBuilder from "../createArticle/js 1/ArticleBuilder/ArticleBuilder.js";
import ArticleAPI from "./utils/ArticleAPI.js";

async function App () {
    document.querySelector("#addBtn").addEventListener("click", () => {
        window.location.href = "/createArticle/createArticle.html";
    })
    const app = document.querySelector("#articleRender");
    const articles = ArticleAPI.getArticles("articles") || [];

    articles.map(article => {
        let newArticle = new ArticleBuilder(
            {
                readOnly: true,
                descriptionMode: true,
                holder: document.querySelector("#articleRender"),
                tools: {
                    paragraph: {
                        class: Paragraph,
                        allowToolbox: true
                    },
                    header: {
                        class: Header,
                        allowToolbox: true
                    },
                    list: {
                        class: List,
                        allowToolbox: true
                    },
                    divider: {
                        class: Divider,
                        allowToolbox: true
                    },
                    image: {
                        class: ImageArticle,
                        allowToolbox: true
                    },
                    pdf: {
                        class: PDFExtract,
                        allowToolbox: true
                    },
                    checklist: {
                        class: CheckList,
                        allowToolbox: true
                    },
                    spacing : {
                        class: Spacing,
                        allowToolbox: true
                    },
                    downloadable: {
                        class: Downloadable,
                        allowToolbox: true
                    }
                },
                data: article,
                callback: function() {
                    document.querySelector('#articleRender').innerHTML = "";
                    renderFullPage(article);
                },
                editorMode: false,
                sidenavMode: true
            },
        );
        if (app.childNodes.length > 1) {
            app.insertBefore(newArticle.render(), app.childNodes[2]);
        }else {
            app.appendChild(newArticle.render());
        }
    })
}

function renderFullPage(article) {
    let newArticle = new ArticleBuilder(
        {
            readOnly: true,
            descriptionMode: false,
            holder: document.querySelector("#articleRender"),
            tools: {
                paragraph: {
                    class: Paragraph,
                    allowToolbox: true
                },
                header: {
                    class: Header,
                    allowToolbox: true
                },
                list: {
                    class: List,
                    allowToolbox: true
                },
                divider: {
                    class: Divider,
                    allowToolbox: true
                },
                image: {
                    class: ImageArticle,
                    allowToolbox: true
                },
                pdf: {
                    class: PDFExtract,
                    allowToolbox: true
                },
                checklist: {
                    class: CheckList,
                    allowToolbox: true
                },
                spacing : {
                    class: Spacing,
                    allowToolbox: true
                },
                downloadable: {
                    class: Downloadable,
                    allowToolbox: true
                }
            },
            data: article,
            callback: function() {
                location.reload();
            },
            editorMode: false
        },
    );
    document.querySelector('#articleRender').innerHTML = "";
    document.querySelector('#articleRender').appendChild(newArticle.render());
    window.scrollTo(0, 0)
}

App();