ansxor.ca
this repo has no description
1<!doctype html><html lang=en-QS class='fixed'><meta id=ݽ charset=utf-8>
2<meta name=viewport content="width=device-width, height=device-height, initial-scale=1">
3
4<title>Markup2 Demo</title>
5
6<script src=langs.js></script>
7<script src=parse.js></script>
8<script src=legacy.js></script>
9<script src=render.js></script>
10<script src=runtime.js></script>
11<script src=helpers.js></script>
12<link rel=stylesheet href=markup.css>
13
14<script src=testing/textarea.js></script>
15<link rel=stylesheet href=testing/common.css>
16<script src=testing/tree.js></script>
17<link rel=stylesheet href=testing/tree.css>
18
19<style>
20 #\$output {
21 border: 3px solid orange;
22 padding: 4px;
23 overflow-y: auto;
24 user-select: contain;
25 }
26 #\$inputs {
27 flex-wrap: wrap;
28 gap: .25em;
29 background: #222;
30 color: #FFF;
31 padding: 2px;
32 }
33
34 label {
35 align-self: center;
36 font-weight: bold;
37 }
38
39 #\$output > textarea.plaintext {
40 resize: none;
41 display: block;
42 width: -webkit-fill-available;
43 width: -moz-available;
44 width: stretch;
45 }
46
47 textarea-container.textarea-nowrap {
48 padding-bottom: calc(15px + 2px);
49 }
50
51 textarea-container.textarea-nowrap > textarea {
52 white-space: pre;
53 overflow-y: auto;
54 overflow-x: scroll;
55 height: calc(100% + 15px);
56 }
57</style>
58
59<body class='Col'>
60<script src=testing/nav.js></script>
61
62<main class='fill Split'>
63 <input-pane class='Col'>
64 <div class='Row' id=$inputs>
65 <select id=$lang value=12y2>
66 <option> 12y2
67 <option> 12y
68 <option> bbcode
69 <option> plaintext
70 <option> json
71 </select>
72 <label>Wrap:<input type=checkbox id=$wrap checked></label>
73 <span class='fill'></span>
74 <select id=$display value=render>
75 <option> render
76 <option> nodes
77 <option> json
78 <option> testcase
79 </select>
80 </div>
81
82 <textarea-container class='limit'>
83 <textarea id=$input></textarea>
84 </textarea-container>
85 </input-pane>
86
87 <output-pane class='Col'>
88 <table-overflow><table class='data'>
89 <tr>
90 <th> <th> parse <th> render <th> layout <th> total
91 <tr>
92 <th> ms
93 <td> <time id=$time1 datetime=Z></time>
94 <td> <time id=$time2 datetime=Z></time>
95 <td> <time id=$time3 datetime=Z></time>
96 <td> <time id=$time4 datetime=Z></time>
97 </table></table-overflow>
98 <span id=$count></span>
99 <span id=$output class='Markup limit'></span>
100 </output-pane>
101</main>
102
103<script>
104 Markup.langs.include({
105 langs: {
106 json: text=>JSON.parse(text)
107 }
108 })
109
110 function show_time(elem, ms) {
111 elem.dateTime = (ms/1000).toFixed(4)+' s'
112 elem.textContent = ms.toFixed(1)
113 }
114
115 window.onerror = (...x)=>alert(x)
116
117 function update() {
118 //Markup.convert_lang($input.value, $lang.value, $output)
119 let t0, t1, t2, t3
120 t0 = performance.now()
121 let tree = Markup.langs.parse($input.value, $lang.value)
122 t1 = performance.now()
123 function output_text(text) {
124 let x = document.createElement('textarea')
125 let b = document.createElement('button')
126 b.textContent = 'Copy'
127 b.onclick = e=>{
128 navigator.clipboard.writeText(x.value)
129 }
130 x.value = text
131 x.className = 'plaintext'
132 $output.replaceChildren(b, x)
133 }
134 if ('render'==$display.value) {
135 $output.replaceChildren(Markup.renderer.render(tree))
136 } else if ('nodes'==$display.value) {
137 let e = draw_tree(tree)
138 $output.replaceChildren(e)
139 } else if ('json'==$display.value) {
140 output_text(JSON.stringify(tree))
141 } else if ('testcase'==$display.value) {
142 output_text("🟩 title here\n"+$input.value.replace(/🟩/g, "🟨")+"\n"+"🟩 "+JSON.stringify(tree))
143 }
144 //console.log(textarea, $output.contentEditable)
145 //if (textarea != ($output.contentEditable=='true'))
146 // $output.contentEditable = textarea ? 'true' : 'false'
147 t2 = performance.now()
148 $output.scrollHeight
149 t3 = performance.now()
150 show_time($time1, t1-t0)
151 show_time($time2, t2-t1)
152 show_time($time3, t3-t2)
153 show_time($time4, t3-t0)
154 }
155
156 $lang.onchange = update
157 $display.onchange = update
158 $wrap.onchange = ev=>{
159 $input.parentNode.classList.toggle('textarea-nowrap', !$wrap.checked)
160 textarea_resize($input)
161 }
162 $wrap.onchange()
163
164 setup_textarea($input, update)
165 update()
166</script>