-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathdemo.html
182 lines (180 loc) · 7.3 KB
/
demo.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jqjs demo page</title>
<style type="text/css">
html, body {
height: 100vh;
margin: 0;
padding: 0;
}
textarea {
flex: 1;
}
div {
display: flex;
}
textarea.error {
background: pink;
}
#credits-line {
display: block;
text-align: right;
padding: 0 1ex;
}
#corsError {
display: block;
position: absolute;
top: 20%;
left: 20%;
right: 20%;
bottom: 20%;
background: #eee;
border: 3px solid black;
overflow-y: auto;
}
</style>
</head>
<body>
<div style="flex-direction: column; height: 100%">
<div>
<span>JQ Program:</span>
<input type="text" id="jq-program" style="flex:1" value="." />
</div>
<div id="error-line">
</div>
<div style="flex: 1">
<div style="flex-direction: column; flex: 1">
<label for="jq-input">Input JSON value</label>
<textarea id="jq-input">{
"x": {"y": 8},
"posts": [
{
"comments": ["One comment"],
"title": "A post"
}, {
"comments": [],
"title": "Another post"
}
]
}</textarea>
</div>
<div style="flex-direction: column; flex: 1">
<label for="jq-output">Output JSON values</label>
<textarea id="jq-output" readonly></textarea>
</div>
</div>
<div id="credits-line">
<a href="https://github.com/mwh/jqjs">jqjs</a> demo page | <a id="flink" href="#">permalink</a>
</div>
</div>
<!-- Chrome does not allow anything requiring CORS validation
to work on a local file, which includes module imports.
The following module will consequently fail when this
page is loaded from file:// and a diagnostic message is
displayed with some suggestions to fix it (below). -->
<script type="module" onerror="document.getElementById('corsError').style.display = ''">
if (window.location.hash) {
let parts = window.location.hash.split('#')
document.getElementById('jq-program').value = decodeURI(parts[1])
document.getElementById('jq-input').value = jq.prettyPrint(JSON.parse(atob(parts[2])))
}
import jq from './jq.js'
window.jq = jq
function refresh() {
let prog = document.getElementById('jq-program').value
if (prog === '') prog = '.'
let filter
try {
// This line compiles the jq program into a
// JavaScript generator function that can be
// iterated over below.
filter = jq.compile(prog)
document.getElementById('jq-program').
classList.remove('error')
} catch (e) {
document.getElementById('jq-program').
classList.add('error')
document.getElementById('error-line').textContent = e
return
}
document.getElementById('error-line').innerHTML = ' '
if (document.getElementById('jq-input').value === '')
return;
let jsonOBJ
try {
jsonOBJ = JSON.parse(
document.getElementById('jq-input').value)
document.getElementById('jq-input').
classList.remove('error')
} catch {
document.getElementById('jq-input').classList.add(
'error')
return
}
let op = document.getElementById('jq-output')
op.value = ''
try {
// The function returned from compile (filter) is a
// generator that produces the zero or more outputs
// from the jq program for a given single input value,
// which must be of one of the JSON data model types:
// object, array, string, number, boolean, or null.
for (let i of filter(jsonOBJ)) {
if (typeof i == 'undefined')
op.value += 'undefined (runtime error)\n'
else
op.value += jq.prettyPrint(i) + '\n'
}
document.getElementById('error-line').innerHTML = ' '
document.getElementById('flink').href = window.location.href.replace(/#.*/, '') + '#' + encodeURI(prog) + '#' + btoa(JSON.stringify(JSON.parse(document.getElementById('jq-input').value)))
} catch (e) {
document.getElementById('error-line').textContent = e
}
}
document.getElementById('jq-program').addEventListener('input',
function(e) {
refresh()
}
);
document.getElementById('jq-input').addEventListener('input',
function(e) {
refresh()
}
);
refresh()
</script>
<div id="corsError" style="display: none;">
<h1>JavaScript Module & CORS error</h1>
<p>Because of the way your browser implements JavaScript
modules this demo page needs to be loaded from a web server
over HTTP to work. You could upload the files somewhere, or
perhaps use a local web server like <kbd>python3 -m
http.server</kbd> or <kbd>python -m SimpleHTTPServer</kbd> or
<kbd>ruby -run -e httpd .</kbd> or <a
href="https://www.npmjs.com/package/http-server">http-server
from npm</a>, or
<a href="https://github.com/mwh/osws"><kbd>osws -m -d .</kbd></a>
— or any of the others from
<a href="https://gist.github.com/willurd/5720255">this big
list of HTTP static server one-liners</a>.</p>
<p>You could also load this page in Firefox, which permits local files to see their neighbours, or start Chrome with the <kbd>--allow-file-access-from-files</kbd> command-line option.</p>
<p>
In practical use, if local-file access is important, you can
remove the last two lines from <kbd>jq.js</kbd> (the ones
starting <code>export</code>) and then use
</p>
<pre><script src="jq.js"></script>
<script>
let func = jq.compile(".x[].y")
for (let x of func(obj)) {
...
</script></pre>
<p>
as usual.
</p>
</div>
</body>
</html>