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

public/index.html

@@ -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>

public/style.css

@@ -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;
   }
 }