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
|
<!doctype html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<title>Cataclysm DDA JSON formatter</title>
<style>
@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--bg: #333;
--text: #eee;
--textarea: #222;
--bad-json-alert: #c30;
}
}
@media (prefers-color-scheme: light) {
:root {
color-scheme: light;
--bg: #888;
--text: #111;
--textarea: #aaa;
--bad-json-alert: #c30;
}
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
color: var(--text);
background-color: var(--bg);
font-family: sans-serif;
}
body {
display: flex;
flex-flow: column;
}
.row {
flex: 1;
display: flex;
flex-flow: row;
}
.col {
flex: 1;
display: flex;
flex-flow: column;
margin: 4px;
}
label {
font-weight: bold;
padding: 1em 2em;
}
textarea {
flex: 1;
display: block;
margin: 0;
padding: 4px;
border: 1px solid;
resize: none;
font-family: monospace;
background-color: var(--textarea);
white-space: pre;
overflow-wrap: normal;
overflow-x: scroll;
}
#json_error_alert {
font-size: larger;
font-weight: bold;
text-align: center;
background-color: var(--bad-json-alert);
padding: 16px;
display: none;
}
</style>
</head>
<body>
<div class="row">
<div class="col">
<label for="json_input">Paste unformatted JSON on left side</label>
<textarea id="json_input" placeholder="Paste unformatted JSON on left side"></textarea>
<span id="json_error_alert">JSON has errors, can't format!</span>
</div>
<div class="col">
<label for="json_output">Copy formatted JSON from right side</label>
<textarea id="json_output" readonly onClick="this.select()"></textarea>
</div>
</div>
{{{ SCRIPT }}}
<script>
let json_input = document.getElementById("json_input");
let json_output = document.getElementById("json_output");
let json_error_alert = document.getElementById("json_error_alert");
json_input.placeholder =
"\n Paste your unformatted json into this area, and" +
"\n it will be formatted on the right side." +
"\n" +
"\n If there is an error you need to fix it first.";
json_output.placeholder = "\n Formatter is loading." +
"\n This tool needs javascript enabled, " +
"\n and a modern browser.";
json_formatter().then(function (module) {
// parameters are the unformatted input string and an int representing json_error_output_colors_t
// for possible values see the enum definition in json.h, return value is the formatted string or
// error message
let json_format = module.cwrap("json_format", "string", ["string", "int"]);
const json_error_output_colors_t_no_colors = 1;
json_output.placeholder =
"\n\n Formatter ready."
+ "\n Paste into panel on the left to format.";
json_input.oninput = function () {
if (json_input.value.length < 1) {
json_error_alert.style.display = "none";
json_output.value = "";
return;
}
// not all invalid json is rejected by the cata formatter,
// filter early using the browser's parser instead
try {
// https://stackoverflow.com/a/20392392
let o = JSON.parse(json_input.value);
if (o && typeof o === "object") {
let formatted = json_format(json_input.value, json_error_output_colors_t_no_colors);
json_error_alert.style.display =
(formatted.startsWith("Json error")
? "block" : "none");
json_output.value = formatted;
return;
}
} catch (e) {
json_error_alert.style.display = "block";
json_output.value = e.message;
return;
}
json_error_alert.style.display = "block";
json_output.value =
"Cataclysm JSON must start with array or object";
};
});
</script>
</body>
</html>
|
