-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
361 lines (335 loc) · 22 KB
/
Copy pathindex.html
File metadata and controls
361 lines (335 loc) · 22 KB
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
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSON</title>
<link rel="icon" href="icons/favicon.svg" type="image/svg+xml" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="design/Main.css" />
<script type="module" src="source/Main.js"></script>
</head>
<body class="light-mode">
<script>
// The mode is taken before anything is drawn, so a page that opens
// dark does not open with a flash of light
(() => {
const mode = localStorage.getItem("mode") || "system";
const isDark = mode === "dark" || (mode === "system" && window.matchMedia("(prefers-color-scheme: dark)").matches);
document.body.classList.toggle("dark-mode", isDark);
document.body.classList.toggle("light-mode", !isDark);
})();
</script>
<header class="header">
<div class="header-logo" data-tip="Go to another tool" data-tip-bottom aria-label="Go to another tool">
<i class="svg-icon"></i>
</div>
<h1 data-action="open-history" data-tip="Open the history" data-tip-bottom aria-label="Open the history">
<span>JSON</span>
<i class="arrow header-caret"></i>
</h1>
<div class="header-status"></div>
</header>
<main class="main">
<article class="panel" data-side="left"></article>
<aside class="between">
<button class="between-btn between-right" data-action="copy-right" data-tip="Copy the left document to the right" aria-label="Copy the left document to the right">
<i class="arrow"></i>
</button>
<button class="between-btn between-left" data-action="copy-left" data-tip="Copy the right document to the left" aria-label="Copy the right document to the left">
<i class="arrow"></i>
</button>
<i class="between-line"></i>
<button class="between-btn between-compare" data-action="toggle-compare" data-tip="Compare the two documents" aria-label="Compare the two documents">
<i class="svg-icon"></i>
</button>
<div class="between-steps">
<button class="between-btn between-prev" data-action="prev-difference" data-tip="The difference before" aria-label="The difference before">
<i class="arrow"></i>
</button>
<span class="between-count">–/0</span>
<button class="between-btn between-next" data-action="next-difference" data-tip="The next difference" aria-label="The next difference">
<i class="arrow"></i>
</button>
</div>
<div class="between-grip" aria-label="Drag to change the size of the panels">
<i class="svg-icon"></i>
</div>
</aside>
<article class="panel" data-side="right"></article>
</main>
<div class="top">
<ol class="icons">
<li class="icon-settings" data-action="open-settings" data-tip="Settings" data-tip-bottom aria-label="Settings">
<i class="svg-icon"></i>
</li>
</ol>
<ol class="mode">
<li class="mode-light selected" data-action="mode-light" data-tip="Light mode" data-tip-bottom aria-label="Light mode">
<i class="svg-icon"></i>
</li>
<li class="mode-system" data-action="mode-system" data-tip="Follow the system" data-tip-bottom aria-label="Follow the system">
<i class="svg-icon"></i>
</li>
<li class="mode-dark" data-action="mode-dark" data-tip="Dark mode" data-tip-bottom aria-label="Dark mode">
<i class="svg-icon"></i>
</li>
</ol>
</div>
<div class="toast"></div>
<div class="popup"></div>
<div class="tooltip" popover="manual"></div>
<template id="panel-template">
<header class="panel-head">
<nav class="tabs">
<span class="tabs-mark"></span>
<a href="#" class="selected" data-action="set-mode" data-mode="text">Text</a>
<a href="#" data-action="set-mode" data-mode="tree">Tree</a>
<a href="#" data-action="set-mode" data-mode="table">Table</a>
</nav>
<input type="text" class="panel-name" placeholder="Untitled" spellcheck="false" aria-label="The name of the document" />
<span class="panel-saved">Saved</span>
<div class="panel-file">
<button class="tool" data-action="new-document" data-icon="new" data-tip="New document" data-tip-bottom aria-label="New document"><i class="svg-icon"></i></button>
<button class="tool" data-action="open-menu" data-icon="open" data-menu="open" data-tip="Open a document" data-tip-bottom aria-label="Open a document"><i class="svg-icon"></i></button>
<button class="tool" data-action="open-menu" data-icon="save" data-menu="save" data-tip="Save the document" data-tip-bottom aria-label="Save the document"><i class="svg-icon"></i></button>
<button class="tool" data-action="open-menu" data-icon="copy" data-menu="copy" data-tip="Copy the document" data-tip-bottom aria-label="Copy the document"><i class="svg-icon"></i></button>
<i class="tool-line"></i>
<button class="tool tool-grow" data-action="toggle-expand" data-icon="grow" data-tip="Show this panel alone, or the two of them" data-tip-bottom aria-label="Show this panel alone, or the two of them"><i class="svg-icon"></i></button>
</div>
</header>
<div class="panel-tools">
<button class="tool tool-fold" data-action="expand-all" data-icon="expand" data-tip="Expand all" data-tip-bottom aria-label="Expand all"><i class="svg-icon"></i></button>
<button class="tool tool-fold" data-action="collapse-all" data-icon="collapse" data-tip="Collapse all" data-tip-bottom aria-label="Collapse all"><i class="svg-icon"></i></button>
<i class="tool-line tool-fold"></i>
<button class="tool tool-text" data-action="format" data-icon="format" data-tip="Format: a line for each thing" data-tip-bottom aria-label="Format: a line for each thing"><i class="svg-icon"></i></button>
<button class="tool tool-text" data-action="smart-format" data-icon="smart" data-tip="Smart format: what fits in a line stays in one" data-tip-bottom aria-label="Smart format: what fits in a line stays in one"><i class="svg-icon"></i></button>
<button class="tool tool-text" data-action="compact" data-icon="compact" data-tip="Compact: all in the one line" data-tip-bottom aria-label="Compact: all in the one line"><i class="svg-icon"></i></button>
<button class="tool tool-repair" data-action="repair" data-icon="repair" data-tip="Repair a text that is almost JSON" data-tip-bottom aria-label="Repair a text that is almost JSON"><i class="svg-icon"></i></button>
<i class="tool-line tool-text"></i>
<button class="tool" data-action="open-sort" data-icon="sort" data-tip="Sort" data-tip-bottom aria-label="Sort"><i class="svg-icon"></i></button>
<button class="tool" data-action="open-transform" data-icon="filter" data-tip="Transform: filter, sort and pick with a query" data-tip-bottom aria-label="Transform: filter, sort and pick with a query"><i class="svg-icon"></i></button>
<button class="tool" data-action="toggle-search" data-icon="search" data-tip="Search and replace" data-tip-bottom aria-label="Search and replace"><i class="svg-icon"></i></button>
<button class="tool tool-tree" data-action="selected-menu" data-icon="dots" data-tip="What can be done with the selected row" data-tip-bottom aria-label="What can be done with the selected row"><i class="svg-icon"></i></button>
<i class="tool-line"></i>
<button class="tool tool-undo" data-action="undo" data-icon="undo" data-tip="Undo" data-tip-bottom aria-label="Undo"><i class="svg-icon"></i></button>
<button class="tool tool-redo" data-action="redo" data-icon="redo" data-tip="Redo" data-tip-bottom aria-label="Redo"><i class="svg-icon"></i></button>
<span class="tool-space"></span>
<button class="tool tool-text tool-wrap" data-action="toggle-wrap" data-icon="wrap" data-tip="Wrap the long lines" data-tip-bottom aria-label="Wrap the long lines"><i class="svg-icon"></i></button>
<button class="tool tool-schema" data-action="open-schema" data-icon="schema" data-tip="Check with a JSON Schema" data-tip-bottom aria-label="Check with a JSON Schema"><i class="svg-icon"></i></button>
</div>
<div class="panel-search">
<input type="text" class="search-find" placeholder="Find" spellcheck="false" aria-label="Find" />
<span class="search-count"></span>
<button class="tool search-prev" data-action="search-prev" aria-label="The one before"><i class="arrow"></i></button>
<button class="tool search-next" data-action="search-next" aria-label="The next one"><i class="arrow"></i></button>
<i class="tool-line"></i>
<input type="text" class="search-replace" placeholder="Replace with" spellcheck="false" aria-label="Replace with" />
<button class="tool" data-action="replace-one">Replace</button>
<button class="tool" data-action="replace-all">All</button>
<a href="#" class="close" data-action="close-search" aria-label="Close the search"></a>
</div>
<div class="panel-path"></div>
<div class="panel-body">
<div class="view text-view">
<div class="text-scroll">
<pre class="text-lines"></pre>
<div class="text-code">
<div class="text-paint"></div>
<textarea placeholder="Paste the JSON here, or drop a file" spellcheck="false" autocomplete="off" autocapitalize="off" wrap="off" aria-label="The text of the document"></textarea>
</div>
</div>
</div>
<div class="view tree-view" tabindex="0"></div>
<div class="view table-view" tabindex="0"></div>
<div class="panel-start">
<h3>Empty document</h3>
<p>Paste the JSON here, or drop a file</p>
<div>
<button class="btn" data-action="upload-file">Open a file</button>
<button class="btn" data-action="load-example">Example</button>
<button class="btn start-new" data-action="new-value" data-value="object">Empty object</button>
<button class="btn start-new" data-action="new-value" data-value="array">Empty list</button>
</div>
</div>
<div class="panel-drop">
<div class="panel-drop-box"></div>
<p>Drop the file here</p>
</div>
</div>
<div class="panel-problems"></div>
<footer class="panel-foot">
<span class="foot-place"></span>
<span class="foot-info"></span>
<span class="foot-state"></span>
</footer>
</template>
<section>
<div class="backdrop history-dialog" data-dialog="history">
<dialog open>
<h2>History</h2>
<p class="history-empty">Nothing has been worked on yet. Every document lands here, and the ones you save stay for good.</p>
<p class="history-where">A document opens in the <b class="history-side">left</b> panel, which is the one you last touched.</p>
<div class="history-scroll">
<section class="history-section" data-section="pinned">
<h3>Saved</h3>
<ol class="history-list"></ol>
</section>
<section class="history-section" data-section="recent">
<h3>Recent</h3>
<ol class="history-list"></ol>
</section>
</div>
<footer>
<button class="btn" data-action="clear-recent">Clear the recent</button>
<button class="btn" data-action="close-history">Close</button>
</footer>
<a href="#" class="close" data-action="close-history"></a>
</dialog>
</div>
<div class="backdrop" data-dialog="save">
<dialog open>
<h2>Save the document</h2>
<p>A saved document stays in the history for good, under its name.</p>
<form>
<div class="field" data-field="name">
<label>Name</label>
<input type="text" name="name" placeholder="What the document is" />
<div class="error" data-error="name">You must name the document.</div>
</div>
<footer>
<button class="btn btn-fill dialog-btn" data-action="save-entry">Save</button>
<button class="btn save-forget" data-action="forget-entry">Forget</button>
<button class="btn" data-action="close-save">Cancel</button>
</footer>
</form>
<a href="#" class="close" data-action="close-save"></a>
</dialog>
</div>
<div class="backdrop" data-dialog="open">
<dialog open>
<h2>Open an address</h2>
<p>The document is fetched by the browser, so the site it is on has to allow it.</p>
<form>
<div class="field" data-field="name">
<label>Address</label>
<input type="text" name="url" placeholder="https://" spellcheck="false" />
<div class="error" data-error="text"></div>
</div>
<footer>
<button class="btn btn-fill" data-action="load-url">Open</button>
<button class="btn" data-action="close-open">Cancel</button>
</footer>
</form>
<a href="#" class="close" data-action="close-open"></a>
</dialog>
</div>
<div class="backdrop wide-dialog" data-dialog="schema">
<dialog open>
<h2>JSON Schema</h2>
<p>The document is checked against the schema as it changes, and what does not answer it is listed under it. An empty schema checks nothing.</p>
<div class="area-field">
<textarea class="code-area" placeholder='{ "type": "object", "required": [ "name" ] }' spellcheck="false"></textarea>
<div class="error" data-error="text"></div>
</div>
<footer>
<button class="btn btn-fill" data-action="save-schema">Save the schema</button>
<button class="btn" data-action="close-schema">Cancel</button>
</footer>
<a href="#" class="close" data-action="close-schema"></a>
</dialog>
</div>
<div class="backdrop wide-dialog transform-dialog" data-dialog="transform">
<dialog open>
<h2>Transform</h2>
<p class="transform-where"></p>
<nav class="tabs">
<span class="tabs-mark"></span>
<a href="#" class="selected" data-action="transform-language" data-language="query">Query</a>
<a href="#" data-action="transform-language" data-language="jsonpath">JSONPath</a>
<a href="#" data-action="transform-language" data-language="javascript">JavaScript</a>
</nav>
<div class="wizard">
<div class="wizard-row">
<span>Filter</span>
<select name="filterField" aria-label="The value to filter by"></select>
<select name="filterSign" aria-label="How to compare it"></select>
<input type="text" name="filterValue" placeholder="value" spellcheck="false" aria-label="What to compare it with" />
</div>
<div class="wizard-row">
<span>Sort</span>
<select name="sortField" aria-label="The value to sort by"></select>
<select name="sortWay" aria-label="Which way to sort">
<option value="asc">ascending</option>
<option value="desc">descending</option>
</select>
</div>
<div class="wizard-row">
<span>Pick</span>
<div class="wizard-picks"></div>
</div>
</div>
<div class="area-field">
<textarea class="code-area transform-query" placeholder='.items | filter(.price > 10) | sort(.name) | pick(.name, .price)' spellcheck="false"></textarea>
<div class="error" data-error="query"></div>
</div>
<pre class="transform-preview"></pre>
<label class="toggle-input" data-field="toOther">
<input type="checkbox" role="switch" name="toOther" value="1" />
<div>Put the result in the other panel, and leave this document as it is</div>
</label>
<footer>
<button class="btn btn-fill" data-action="apply-transform">Transform</button>
<button class="btn" data-action="close-transform">Cancel</button>
</footer>
<a href="#" class="close" data-action="close-transform"></a>
</dialog>
</div>
<div class="backdrop settings-dialog" data-dialog="settings">
<dialog open>
<h2>Settings</h2>
<nav class="tabs">
<span class="tabs-mark"></span>
<a href="#" class="selected" data-action="settings-tab" data-tab="options">Options</a>
<a href="#" data-action="settings-tab" data-tab="keys">Shortcuts</a>
</nav>
<div class="settings-scroll">
<ol class="keys-list"></ol>
<form>
<h3>Text</h3>
<div class="choice">
<span>Set each level in with</span>
<label><input type="radio" name="indent" value="2" /><span>2 spaces</span></label>
<label><input type="radio" name="indent" value="4" /><span>4 spaces</span></label>
<label><input type="radio" name="indent" value="tab" /><span>A tab</span></label>
</div>
<label class="toggle-input" data-field="paintCode">
<input type="checkbox" role="switch" name="paintCode" value="1" />
<div>Color the text, each part as what it is</div>
</label>
<label class="toggle-input" data-field="wrapText">
<input type="checkbox" role="switch" name="wrapText" value="1" />
<div>Wrap the long lines</div>
</label>
<h3>Tree and table</h3>
<label class="toggle-input" data-field="showTags">
<input type="checkbox" role="switch" name="showTags" value="1" />
<div>Show the colors, the dates and the links for the values that are one</div>
</label>
<label class="toggle-input" data-field="spreadColumns">
<input type="checkbox" role="switch" name="spreadColumns" value="1" />
<div>Give each value of an object inside a row its own column</div>
</label>
</form>
</div>
<footer>
<button class="btn btn-fill" data-action="save-settings">Save settings</button>
<button class="btn" data-action="close-settings">Cancel</button>
</footer>
<a href="#" class="close" data-action="close-settings"></a>
</dialog>
</div>
</section>
</body>
</html>