script.ftl 9.25 KB
Newer Older
0xJMR's avatar
0xJMR committed
1
<#assign helper = glex.getGlobalVar("helper")>
0xJMR's avatar
0xJMR committed
2
3
4
<!DOCTYPE HTML>
<html>
    <head>
0xJMR's avatar
0xJMR committed
5
        <title>${helper.printScript(ast)}</title>
0xJMR's avatar
0xJMR committed
6
7
        <style type="text/css">
        <!--
8
9
            @import url("https://fonts.googleapis.com/css?family=Roboto");

10
            html, body {
0xJMR's avatar
0xJMR committed
11
12
                margin:0;
                padding:0;
13
14
            }

15
            body {
0xJMR's avatar
0xJMR committed
16
                background-color:#252525;
17
18
19
                color:#cecece;
            }

0xJMR's avatar
0xJMR committed
20
            div {
21
                font-family:"Roboto", sans-serif;
0xJMR's avatar
0xJMR committed
22
23
24
            }

            @media screen {
0xJMR's avatar
0xJMR committed
25
                div {
0xJMR's avatar
0xJMR committed
26
27
28
29
30
                    font-size:14px;
                }
            }

            @media handheld {
0xJMR's avatar
0xJMR committed
31
                div {
0xJMR's avatar
0xJMR committed
32
33
                    font-size:1.8vw;
                }
34
35
36
            }

            .keyword {
0xJMR's avatar
0xJMR committed
37
38
39
40
41
                color:#569cd6;
            }

            .comment {
                color:#608b4e !important;
0xJMR's avatar
0xJMR committed
42
            }
43

0xJMR's avatar
0xJMR committed
44
45
            pre {
                margin:0;
0xJMR's avatar
0xJMR committed
46
                white-space:pre-wrap;
0xJMR's avatar
0xJMR committed
47
48
49
50
            }

            td.line-number {
                user-select:none;
51
                text-align:right;
0xJMR's avatar
0xJMR committed
52
53
54
                padding-right:10px;
                -moz-user-select:none;
                -webkit-user-select:none;
0xJMR's avatar
0xJMR committed
55
                color:#5a5a5a;
56
            }
57
58

            img {
0xJMR's avatar
0xJMR committed
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
                vertical-align: middle;
            }

            .scene {
                width:100%;
            }

            .card {
                width:100%;
                height:100%;
                position:relative;
                transition:transform 1s;
                transform-style:preserve-3d;
            }

            .card-face {
                position:absolute;
                height:100%;
                width:100%;
                backface-visibility:hidden;
0xJMR's avatar
0xJMR committed
79
                -webkit-backface-visibility:hidden;
0xJMR's avatar
0xJMR committed
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
                margin-top:35px;
            }

            .card-face-front {
                transform:rotateY(0deg);
            }

            .card-face-back {
                transform:rotateY(180deg);
            }

            .card.flipped {
                transform:rotateY(180deg);
            }

            .buttons {
                position:fixed;
                top:0;
                right:0;
Jean-Marc Ronck's avatar
Jean-Marc Ronck committed
99
                z-index:2;
0xJMR's avatar
0xJMR committed
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
            }

            input {
                -webkit-appearance:none;
                -moz-appearance:none;
                appearance:none;
                width:35px;
                height:35px;
                background-color:#cecece;
                background-size:contain;
                background-repeat:no-repeat;
                background-position:center;
                cursor:pointer;
            }

            input:checked {
0xJMR's avatar
0xJMR committed
116
                background-color:#569cd6 !important;
0xJMR's avatar
0xJMR committed
117
118
119
120
121
122
123
124
            }

            input.code {
                background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' standalone='no'?%3e%3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 20010904//EN' 'http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd'%3e%3csvg version='1.0' xmlns='http://www.w3.org/2000/svg' width='1280.000000pt' height='791.000000pt' viewBox='0 0 1280.000000 791.000000' preserveAspectRatio='xMidYMid meet'%3e%3cmetadata%3e Created by potrace 1.15, written by Peter Selinger 2001-2017 %3c/metadata%3e%3cg transform='translate(0.000000,791.000000) scale(0.100000,-0.100000)' fill='%23000000' stroke='none'%3e%3cpath d='M6881 7884 c-83 -22 -150 -62 -222 -134 -105 -104 -113 -127 -218 -635 -49 -242 -155 -757 -235 -1145 -80 -388 -210 -1022 -290 -1410 -80 -388 -179 -869 -220 -1070 -69 -336 -190 -924 -476 -2315 -60 -291 -114 -560 -120 -597 -25 -160 46 -347 172 -450 227 -186 554 -150 729 82 77 101 57 23 279 1103 60 295 160 778 220 1072 61 294 160 776 220 1070 61 294 160 776 220 1070 61 294 160 776 220 1070 148 717 327 1593 345 1682 39 189 -6 345 -134 474 -71 72 -138 111 -228 134 -71 19 -191 18 -262 -1z'/%3e%3cpath d='M3050 7100 c-64 -11 -139 -42 -191 -77 -24 -17 -657 -642 -1405 -1389 -1482 -1479 -1403 -1394 -1439 -1545 -19 -82 -19 -159 0 -234 38 -146 -41 -61 1429 -1534 894 -896 1381 -1377 1421 -1402 92 -61 176 -83 298 -76 118 6 184 29 276 95 161 118 240 345 185 533 -42 142 6 90 -1241 1339 l-1163 1165 1155 1155 c636 635 1169 1175 1185 1199 67 100 97 260 71 380 -56 261 -317 436 -581 391z'/%3e%3cpath d='M9554 7096 c-189 -43 -345 -200 -385 -387 -26 -120 4 -280 71 -380 16 -24 549 -564 1185 -1199 l1155 -1155 -1163 -1165 c-1247 -1249 -1199 -1197 -1241 -1339 -55 -188 24 -415 185 -533 92 -66 158 -89 276 -95 122 -7 206 15 298 76 40 25 527 506 1421 1402 1470 1473 1391 1388 1429 1534 19 75 19 152 0 234 -36 151 43 66 -1439 1545 -748 747 -1383 1374 -1411 1392 -104 69 -259 98 -381 70z'/%3e%3c/g%3e%3c/svg%3e ");
            }

            input.latex {
                background-image: url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='UTF-8' standalone='no'?%3e%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='568.88px' width='588.42px'%3e%3cpath style='fill:black; stroke:none' d='M 10.499686,177.03840 L 31.174931,178.56990 C 52.615925,154.32116 61.039171,82.595924 187.38789,96.634671 C 182.79339,403.95560 48.021426,436.37234 56.444675,499.41907 C 59.507674,535.15406 87.840417,557.10556 118.47041,558.38181 C 215.21014,555.06356 210.87089,424.63084 240.99038,95.868921 L 365.80760,95.868921 C 359.17110,211.75239 341.04836,327.63586 339.00636,441.22208 C 340.53786,516.77606 386.48285,557.10556 446.97708,557.61606 C 546.52456,560.93431 577.92030,444.79558 577.92030,395.27709 L 556.47931,395.27710 C 554.43731,436.11709 534.78306,465.47083 492.92207,467.25758 C 378.82535,468.78908 441.61683,266.63113 442.38258,97.400421 L 577.92030,98.166171 L 577.15455,11.636437 C 13.807491,8.9075799 85.312284,-2.1366151 10.499686,177.03840 z' /%3e%3c/svg%3e ");
125
            }
Jean-Marc Ronck's avatar
Jean-Marc Ronck committed
126
127
128
129
130
131
132
133
134
135

            tr.marked {
                transition-duration:2s;
                background-color:#FFA500;
                color:#000;
            }

            tr.marked img {
                filter:invert(100%);
            }
0xJMR's avatar
0xJMR committed
136
137
        -->
        </style>
0xJMR's avatar
0xJMR committed
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
        <noscript>
            <style>
            <!--
                .card-face {
                    backface-visibility:initial;
                    position:initial;
                    margin-top:30px;
                }

                .card-face-back {
                    transform:initial;
                }

                .buttons {
                    display:none;
                }
            -->
            </style>
        </noscript>
0xJMR's avatar
0xJMR committed
157
158
    </head>
    <body>
0xJMR's avatar
0xJMR committed
159
        <div class="buttons">
0xJMR's avatar
0xJMR committed
160
            <form autocomplete="off">
0xJMR's avatar
0xJMR committed
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
                <input type="radio" name="View" class="code" title="Code" checked/>
                <input type="radio" name="View" class="latex" title="LaTeX"/>
            </form>
        </div>
        <div class="scene">
            <div class="card">
                <div class="card-face card-face-front">
                    <table>
                    <#list helper.getHTMLLines(ast) as line>
                        <tr>
                            <td class="line-number">${1 + line?index}</td>
                            <td><pre><#if line?length == 0>&nbsp;<#else>${line}</#if></pre></td>
                        </tr>
                    </#list>
                    </table>
                </div>
                <div class="card-face card-face-back">
                    <table>
                    <#list helper.getTeXHTMLLines(ast) as line>
                        <tr>
                            <td class="line-number">${1 + line?index}</td>
                            <td><pre><#if line?length == 0>&nbsp;<#else>${line}</#if></pre></td>
                        </tr>
                    </#list>
                    </table>
                </div>
            </div>
        </div>
0xJMR's avatar
0xJMR committed
189
    </body>
0xJMR's avatar
0xJMR committed
190
191
192
    <script>
        var radios = document.querySelectorAll("input[name='View']");
        var card = document.querySelector(".card");
Jean-Marc Ronck's avatar
Jean-Marc Ronck committed
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
        var front = document.querySelectorAll(".card-face-front tr");
        var back = document.querySelectorAll(".card-face-back tr");

        function clickButton(index) {
            radios[index].click();
        }

        function selectRange(start, end) {
            for(var i = start - 1; i < (end || start); i++) {
                front[i].classList.add("marked");
                back[i].classList.add("marked");
            }
        }

        function scroll(index, start) {
            start = start - 1;

            window.scrollTo(0, index === 0 ? front[start].offsetTop : back[start].offsetTop);
        }
0xJMR's avatar
0xJMR committed
212
213
214
215
216

        function onChange(event) {
            card.classList.toggle("flipped");
        }

Jean-Marc Ronck's avatar
Jean-Marc Ronck committed
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
        function onHashChange() {
            window.setTimeout(function() {
                var hash = window.location.hash;
                var parts = hash.substring(1).split(':');

                var index = parts[0];
                var start = parts[1];
                var end = parts[2];

                if(index) {
                    clickButton(index);

                    if(start) {
                        scroll(index, start);
                        selectRange(start, end);
                    }
                }
            }, 0);
        }

0xJMR's avatar
0xJMR committed
237
        radios.forEach(function(element) { element.addEventListener("change", onChange) });
Jean-Marc Ronck's avatar
Jean-Marc Ronck committed
238
239
        onHashChange();
        window.addEventListener("hashchange", onHashChange);
0xJMR's avatar
0xJMR committed
240
    </script>
0xJMR's avatar
0xJMR committed
241
</html>