forked from extern/jq_offline
179 lines
6.9 KiB
HTML
Executable File
179 lines
6.9 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="description" content="Jq Play Offline is a web assembly
|
|
version of jqplay, allowing you to run the full featured
|
|
jq in your browser, without sending anything to any backend.">
|
|
<link rel="icon" type="image/png" href="favicon.png">
|
|
<title>Jq Play Offline</title>
|
|
<script>
|
|
if('serviceWorker' in navigator) {
|
|
navigator.serviceWorker.register('/jq_offline/service_worker.js', { scope: '/jq_offline' })
|
|
.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>
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="https://biowasm.com/cdn/v3/aioli.js"></script>
|
|
<script defer type="module">
|
|
async function setup() {
|
|
// Populate the form from the url parameters
|
|
let params = (new URL(document.location)).searchParams;
|
|
|
|
let query = params.get('query');
|
|
if (query) {
|
|
document.getElementById("filter").value = query;
|
|
}
|
|
['compact-output', 'sort-keys', 'raw-input', 'raw-output', 'slurp'].forEach(option => {
|
|
let p = params.get(option);
|
|
if (p === 'true') {
|
|
document.getElementById(option).checked = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
async function jq() {
|
|
let data = document.getElementById("input-json").value;
|
|
let query = document.getElementById("filter").value;
|
|
|
|
let params = (new URL(document.location)).searchParams;
|
|
let options = ["--monochrome-output"];
|
|
['compact-output', 'sort-keys', 'raw-input', 'raw-output', 'slurp'].forEach(option => {
|
|
let part = document.getElementById(option).checked;
|
|
if (part) {
|
|
params.set(option, true);
|
|
options.push('--' + option);
|
|
} else {
|
|
params.delete(option);
|
|
}
|
|
});
|
|
|
|
// Update url query params with current query
|
|
params.set('query', query);
|
|
const url = new URL(document.location);
|
|
url.search = params.toString();
|
|
window.history.replaceState({}, 'Jq Offline', url);
|
|
|
|
// 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;
|
|
}
|
|
|
|
// 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;
|
|
|
|
return function(...args) {
|
|
clearTimeout(debounceTimeoutId);
|
|
debounceTimeoutId = setTimeout(() => callback.apply(this, args), interval);
|
|
};
|
|
}
|
|
|
|
let delayedJq = debounce(jq, 400);
|
|
|
|
setup();
|
|
let CLI = await new Aioli("jq/1.7");
|
|
|
|
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);
|
|
document.getElementById("raw-input").addEventListener('input', jq);
|
|
document.getElementById("raw-output").addEventListener('input', jq);
|
|
document.getElementById("slurp").addEventListener('input', jq);
|
|
// Call jq the first time without any changes
|
|
jq();
|
|
</script>
|
|
</head>
|
|
|
|
<body>
|
|
<div id="top">
|
|
<h1>Jq Play Offline</h1>
|
|
<div id="links">
|
|
<a href="https://gitlab.com/jiehong/jq_offline" target="_blank">Code</a>
|
|
<a href="https://jqlang.github.io/jq/manual/v1.7/" target="_blank">Manual (jq 1.7)</a>
|
|
</div>
|
|
</div>
|
|
<div id="content">
|
|
<div id="query">
|
|
<label id="filter-label" for="filter">Query</label>
|
|
<input
|
|
id="filter"
|
|
type="text"
|
|
name="filter"
|
|
autocapitalize="off"
|
|
autocomplete="on"
|
|
spellcheck="false"
|
|
autocorrect="off"
|
|
autofocus
|
|
/>
|
|
<ul id="options">
|
|
<p>Options</p>
|
|
<li>
|
|
<input type="checkbox" id="compact-output" name="co">
|
|
<label for="compact-output" title="By default, jq pretty-prints JSON output. Using this option will result in more compact output by instead putting each JSON object on a single line.">--compact-output</label>
|
|
</li>
|
|
<li>
|
|
<input type="checkbox" id="sort-keys" name="sk">
|
|
<label for="sort-keys" title="Output the fields of each object with the keys in sorted order.">--sort-key</label>
|
|
</li>
|
|
<li>
|
|
<input type="checkbox" id="raw-input" name="ri">
|
|
<label for="raw-input" title="Don't parse the input as JSON. Instead, each line of text is passed to the filter as a string. If combined with --slurp, then the entire input is passed to the filter as a single long string.">--raw-input</label>
|
|
</li>
|
|
<li>
|
|
<input type="checkbox" id="raw-output" name="ro">
|
|
<label for="raw-output" title="With this option, if the filter's result is a string then it will be written directly to standard output rather than being formatted as a JSON string with quotes. This can be useful for making jq filters talk to non-JSON-based systems.">--raw-output</label>
|
|
</li>
|
|
<li>
|
|
<input type="checkbox" id="slurp" name="s">
|
|
<label for="slurp" title="Instead of running the filter for each JSON object in the input, read the entire input stream into a large array and run the filter just once.">--slurp</label>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="input">
|
|
<label id="input-label" for="input-json">Input</label>
|
|
<textarea
|
|
id="input-json"
|
|
name="input"
|
|
placeholder="Paste your input json here"
|
|
autocapitalize="off"
|
|
autocomplete="off"
|
|
spellcheck="false"
|
|
autocorrect="off"
|
|
></textarea>
|
|
</div>
|
|
|
|
<div id="output">
|
|
<label id="output-label" for="output-json">Result</label>
|
|
<textarea
|
|
id="output-json"
|
|
placeholder="Output will appear here"
|
|
readonly
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html>
|