2019-03-06 09:55:04 +01:00
|
|
|
<!DOCTYPE html>
|
2021-09-22 21:55:33 +02:00
|
|
|
<html lang="en">
|
|
|
|
|
|
|
|
|
|
<head>
|
2019-03-06 09:55:04 +01:00
|
|
|
<meta charset="utf-8">
|
2021-09-22 21:55:33 +02:00
|
|
|
<title>Jq Play Offline</title>
|
2021-10-03 17:44:07 +02:00
|
|
|
<script>
|
|
|
|
|
if('serviceWorker' in navigator) {
|
2021-10-03 17:50:22 +02:00
|
|
|
navigator.serviceWorker.register('/jq_offline/service_worker.js', { scope: '/jq_offline' })
|
2021-10-03 17:44:07 +02:00
|
|
|
.then(function(registration) {
|
|
|
|
|
console.log('Service Worker Registered');
|
|
|
|
|
})
|
|
|
|
|
.catch(e => {
|
|
|
|
|
console.log('Unable to register service worker', e);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
navigator.serviceWorker.ready.then(function(registration) {
|
|
|
|
|
console.log('Service Worker Ready');
|
|
|
|
|
})
|
|
|
|
|
.catch(e => {
|
|
|
|
|
console.log('Service worker unable to get ready', e);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
</script>
|
2019-03-06 09:55:04 +01:00
|
|
|
<link rel="stylesheet" href="style.css">
|
2021-09-22 22:13:09 +02:00
|
|
|
<script src="https://cdn.biowasm.com/v2/aioli/latest/aioli.js"></script>
|
2021-09-22 21:55:33 +02:00
|
|
|
<script defer type="module">
|
2021-09-22 22:13:09 +02:00
|
|
|
let CLI = await new Aioli("jq/1.6");
|
2021-09-22 21:55:33 +02:00
|
|
|
|
|
|
|
|
async function jq() {
|
|
|
|
|
let data = document.getElementById("input-json").value;
|
|
|
|
|
let query = document.getElementById("filter").value;
|
|
|
|
|
let compactOutput = document.getElementById("compact-output").checked;
|
|
|
|
|
let sortKeys = document.getElementById("sort-keys").checked;
|
|
|
|
|
|
|
|
|
|
let options = ["--monochrome-output"];
|
|
|
|
|
if (compactOutput) {
|
|
|
|
|
options.push("--compact-output");
|
|
|
|
|
}
|
|
|
|
|
if (sortKeys) {
|
|
|
|
|
options.push("--sort-keys");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Create mock JSON file
|
|
|
|
|
await CLI.fs.writeFile("test.json", data);
|
|
|
|
|
|
|
|
|
|
options.push(query);
|
|
|
|
|
options.push("test.json");
|
|
|
|
|
|
|
|
|
|
let output = await CLI.exec("jq", options);
|
|
|
|
|
document.getElementById("output-json").value = output;
|
|
|
|
|
}
|
2019-03-06 09:55:04 +01:00
|
|
|
|
2021-09-22 21:55:33 +02:00
|
|
|
// buffer and call the callback only after no activity for "interval": aka debounce
|
|
|
|
|
// This reduces load on the browser by avoiding jq evaluation while the user is typing
|
|
|
|
|
function debounce(callback, interval) {
|
|
|
|
|
let debounceTimeoutId;
|
2019-03-06 09:55:04 +01:00
|
|
|
|
2021-09-22 21:55:33 +02:00
|
|
|
return function(...args) {
|
|
|
|
|
clearTimeout(debounceTimeoutId);
|
|
|
|
|
debounceTimeoutId = setTimeout(() => callback.apply(this, args), interval);
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let delayedJq = debounce(jq, 400);
|
|
|
|
|
|
|
|
|
|
document.getElementById("filter").addEventListener('input', delayedJq);
|
|
|
|
|
document.getElementById("input-json").addEventListener('input', delayedJq);
|
|
|
|
|
document.getElementById("compact-output").addEventListener('input', jq);
|
|
|
|
|
document.getElementById("sort-keys").addEventListener('input', jq);
|
|
|
|
|
|
|
|
|
|
// Call jq the first time without any changes
|
|
|
|
|
jq()
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div id="top">
|
|
|
|
|
<h1>Jq Play Offline</h1>
|
|
|
|
|
<a href="https://stedolan.github.io/jq/manual/v1.6/">1.6 - Web Assembly Version</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div id="content">
|
|
|
|
|
<div id="query">
|
|
|
|
|
<label id="filter-label" for="filter">Query</label>
|
2021-10-03 10:43:02 +02:00
|
|
|
<input
|
|
|
|
|
id="filter"
|
|
|
|
|
type="text"
|
|
|
|
|
name="filter"
|
2021-10-02 23:48:22 +02:00
|
|
|
autocapitalize="off"
|
2021-10-03 10:43:02 +02:00
|
|
|
autocomplete="on"
|
2021-10-02 23:48:22 +02:00
|
|
|
spellcheck="false"
|
|
|
|
|
autocorrect="off"
|
|
|
|
|
/>
|
2021-09-22 21:55:33 +02:00
|
|
|
<ul id="options">
|
|
|
|
|
<p>Options</p>
|
|
|
|
|
<li>
|
|
|
|
|
<input type="checkbox" id="compact-output" name="co">
|
|
|
|
|
<label for="co">Compact Output</label>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<input type="checkbox" id="sort-keys" name="sk">
|
|
|
|
|
<label for="sk">Sort Keys</label>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
2021-10-03 10:43:02 +02:00
|
|
|
|
2021-09-22 21:55:33 +02:00
|
|
|
<div id="input">
|
|
|
|
|
<label id="input-label" for="input-json">Input</label>
|
2021-10-03 10:43:02 +02:00
|
|
|
<textarea
|
|
|
|
|
id="input-json"
|
|
|
|
|
name="input"
|
|
|
|
|
placeholder="Paste your input json here"
|
|
|
|
|
autocapitalize="off"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
spellcheck="false"
|
|
|
|
|
autocorrect="off"
|
|
|
|
|
></textarea>
|
2021-09-22 21:55:33 +02:00
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div id="output">
|
|
|
|
|
<label id="output-label" for="output-json">Result</label>
|
2021-10-03 10:43:02 +02:00
|
|
|
<textarea
|
|
|
|
|
id="output-json"
|
|
|
|
|
placeholder="Output will appear here"
|
|
|
|
|
readonly
|
|
|
|
|
></textarea>
|
2021-09-22 21:55:33 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</body>
|
2019-03-06 09:55:04 +01:00
|
|
|
|
2021-09-22 21:55:33 +02:00
|
|
|
</html>
|
