feature: add more options and add query as part of the url to ease sharing

This commit is contained in:
Jiehong Ma 2023-07-16 13:43:46 +02:00
parent 7dd7017d4b
commit 8f53d26219
2 changed files with 61 additions and 8 deletions

View File

@ -25,13 +25,24 @@
<link rel="stylesheet" href="style.css">
<script src="https://cdn.biowasm.com/v2/aioli/latest/aioli.js"></script>
<script defer type="module">
let CLI = await new Aioli("jq/1.6");
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;
}
}
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 rawInput = document.getElementById("raw-input").checked;
let rawOutput = document.getElementById("raw-output").checked;
let slurp = document.getElementById("slurp").checked;
let options = ["--monochrome-output"];
if (compactOutput) {
@ -40,6 +51,22 @@
if (sortKeys) {
options.push("--sort-keys");
}
if (rawInput) {
options.push("--raw-input");
}
if (rawOutput) {
options.push("--raw-output");
}
if (slurp) {
options.push("--slurp");
}
// Update url query params with current query
let params = (new URL(document.location)).searchParams;
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);
@ -64,13 +91,18 @@
let delayedJq = debounce(jq, 400);
setup();
let CLI = await new Aioli("jq/1.6");
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()
jq();
</script>
</head>
@ -90,16 +122,29 @@
autocomplete="on"
spellcheck="false"
autocorrect="off"
autofocus
/>
<ul id="options">
<p>Options</p>
<li>
<input type="checkbox" id="compact-output" name="co">
<label for="co">Compact Output</label>
<label for="co" 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="sk">Sort Keys</label>
<label for="sk" 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="ri" 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="ro" 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="s" 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>

View File

@ -1,5 +1,6 @@
:root {
font-size: 2.5rem;
--font-family: "Berkeley Mono", "Fira Code", monospace;
}
body {
@ -61,13 +62,13 @@ h1 {
}
#top a {
position: fixed;
position: absolute;
right: 2em;
}
}
textarea {
font-family: "Fira Code", monospace;
font-family: var(--font-family);
font-size: inherit;
border: none;
border-radius: .3em;
@ -78,6 +79,7 @@ textarea {
}
#content label {
font-family: var(--font-family);
font-size: 1.3em;
font-weight: bold;
height: 1.5em;
@ -102,6 +104,7 @@ textarea {
grid-area: filter;
height: 2em;
font-size: 1.1em;
font-family: var(--font-family);
background: #e8e8e8;
border: none;
@ -118,6 +121,7 @@ textarea {
margin: 0;
padding: 0;
padding-left: .5em;
flex-direction: column;
}
#options li {
@ -139,7 +143,11 @@ input[type=checkbox] {
input[type=checkbox] {
transform: scale(1.3);
height: 1em;
margin-right: .5em;
margin-right: .1em;
}
#options {
flex-direction: row;
}
}