ui_draft/index.html at master · programatex/ui_draft · 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
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
<!DOCTYPE html>
<html>

<head>
    <meta property="og:title" content="数学が苦手なプログラマのための教科書" id='ogtitle'>
    <meta property="og:description" content="数学の計算(n次方程式、累乗など)をJavaSriptやC#などの言語で実装する方法を紹介します" id="ogdescription">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="">
    <title></title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.7/MathJax.js?config=TeX-MML-AM_CHTML"></script>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="./library/svggraph.js"></script>
    <link href="style.css" rel="stylesheet">
</head>

<body>
    <div id="page">
    </div>
    <div id="panel">
        <a id="logo" href="#home">数学が苦手な<br>プログラマのための<br>教科書</a>

        <div class="panellist">
            <p class="panelindex">ツール</p>
            <ul id="tool" class="panellist">
                <li class="panellist"><a class="panellist" href="./lib/">ライブラリ</a></li>
            </ul>
        </div>
        <div class="panellist">
            <p class="panelindex">記事</p>
            <ul id="articles" class="panellist"></ul>
        </div>
        <div class="panellist">
            <p class="panelindex">目次</p>
            <ul id="index" class="panellist"></ul>
        </div>
    </div>
    <div class="overlay">
        <button class="overlay" onclick="share();openshare()">共有</button>
    </div>

    <div id="popuparea" style="visibility: hidden;">
        <div class="popup">
            <button class="popup close" onclick="closeshare()">×</button>
            <p class="popup" id="titlepopup">共有</p>
            <p class="popup" style="display: inline">URL:</p>
            <input value="https://example" id="shareurl">
            <a href="twitter.com" id="twitter" target="_blank" rel="noopener noreferrer">ついった</a>
        </div>
    </div>

</body>

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
      tex2jax: {
          skipTags: ["script","noscript","style","textarea","pre","code","kbd"]
      }
    });
</script>

</html>
<script src="./make.js"></script>
<script src="./rep.js"></script>

<link href="./highlight/js.css" rel="stylesheet">
<link href="./highlight/txt.css" rel="stylesheet">
<script src="./highlight/js.js"></script>
<script src="./highlight/txt.js"></script>

<script>

    // page and article list
    const updatePage = async () => {
        let article = location.hash.substring(1);
        if (article.length < 1) {
            location.hash = "home";
            return;
        }
        const articledata = await make.getdatas();
        let tpage = document.createElement("div");
        tpage.id = "page"; // ページ作成
        tpage.innerHTML = marked.parse(articledata.data.replace(/\\/g, "\\\\")); // パースして入れる
        tpage.addEventListener("click", closePanel);
        document.getElementById("page").replaceWith(tpage); // ページ置き換え
        rep(articledata.info);
        MathJax.Hub.Typeset(); // 数式ライブラリ
        SVGGraph.Update(); // グラフライブラリ
        document.getElementById("index").replaceWith(articledata.index);
        document.title = `${articledata.title}数学が苦手なプログラマのための教科書`;
    };

    function closeshare() {
        document.getElementById("popuparea").style.visibility = "hidden";
    }
    function openshare() {
        document.getElementById("popuparea").style.visibility = "visible";
    }

    function share() {
        let shareurl = location.origin + location.pathname + "?article=" + location.hash.substring(1);
        document.getElementById("shareurl").value = shareurl;
        document.getElementById("twitter").href =  `https://twitter.com/intent/tweet?text=`+encodeURIComponent(`${document.title} - ${shareurl}\n#programatex`);
    }

    // panel
    const panelElement = document.getElementById("panel");

    const openPanel = () => {
        panelElement.classList.add("panelopen");
    };

    const closePanel = () => {
        panelElement.classList.remove("panelopen");
    };

    const togglePanel = () => {
        panelElement.classList.toggle("panelopen");
    };

    panelElement.addEventListener("click", openPanel);

    const updateArticleList = async () => {
        const res = await fetch("/article/articles.txt", {
            method: "GET",
            headers: {'Catch-Control': "max-age=3600" }
        });

        const artcs = (await res.text()).replace(/\r/g, "").split("\n");
        const ulelm = document.createElement("ul");
        ulelm.id = "articles";
        ulelm.className = "panellist";

        for (i = 0; i < artcs.length; i++) {
            if (!artcs[i].startsWith("//") && artcs[i].length > 0) {
                const lielm = document.createElement("li");
                lielm.className = "panellist";
                const aelm = document.createElement("a");
                aelm.className = "panellist";
                aelm.innerHTML = artcs[i].split(",")[1];
                aelm.href = "#" + artcs[i].split(",")[0];
                lielm.appendChild(aelm);
                ulelm.appendChild(lielm);
            }
        }

        document.getElementById("articles").replaceWith(ulelm);
    };

    let make = new MAKE();
    updatePage();
    updateArticleList();

    window.addEventListener("hashchange", () => {
        window.scrollTo({ top: 0, behavior: "smooth" });
        updatePage();
    }, false);

    const jump = (id) => {
        const targ = document.getElementById(id).getBoundingClientRect();
        document.getElementById("page").scrollTo({ top: targ.top - 10, behavior: "smooth" });
    };

    window.onload = function() {
        let search = location.search.substring(1);
        params = {};
        let param = search.split("&")
        for (let i=0;i<param.length;i++) {
            let ap = param[i].split("=");
            params[ap[0]] = ap[1];
        }
        if (params["article"]!=null) {
            location.hash = params["article"];
            location.search = "";
        }
    }
</script>
<style>

</style>