feat: allow pre-set options via query-params

generator.html

@@ -33,6 +33,9 @@
 
 input[type=number] { width: 3em; }
 label { display: inline-block; margin-right: 1em; }
+
+.hidden { display: none; }
+
 </style>
 <script>
 var bar_styles = [
@@ -52,6 +55,18 @@
     '◯⬤',
     '⚪⚫',
 ];
+var allOptions = [
+    'percentage',
+    'min-size',
+    'max-size'
+]
+function makeURLToCurrentSettings() {
+    const url = new URL(window.location.href)
+    allOptions.forEach(opt => {
+        url.searchParams.set(opt, document.querySelector(`#${opt}`).value)
+    })
+    return url
+}
 function repeat(s, i) {
     var r = '';
     for(var j=0; j<i; j++) r += s;
@@ -102,6 +117,14 @@
         r1.innerHTML += row;
         r2.innerHTML += row;
     }
+
+    const bookmarkLink = makeURLToCurrentSettings()
+    const bookmarkInput = document.querySelector('#bookmark-link')
+    bookmarkInput.value = bookmarkLink.toString()
+    bookmarkInput.classList.remove('hidden')
+    if (window.location.href !== bookmarkLink.toString()) {
+        window.location.replace(bookmarkLink)
+    }
 }
 </script>
 </head>
@@ -122,6 +145,8 @@
 
 <noscript>This application requires JavaScript.</noscript>
 
+<label>Bookmark Link: <input type="text" id="bookmark-link" class="hidden" size="100"/></label>
+
 <table id="sans-serif" style="display: none">
 <thead><tr><th>Helvetica Neue<th>Arial<th>sans-serif<th>Delta</thead>
 <tbody id="sans-serif-body"></tbody>
@@ -134,4 +159,19 @@
 
 </div>
 </body>
+<script>
+    (() => {
+        const params = (new URL(window.location.href)).searchParams
+
+        const preSets = allOptions
+            .filter(opt => params.has(opt))
+
+        if (preSets.length) {
+            preSets.forEach(opt => {
+                document.querySelector(`#${opt}`).value = params.get(opt)
+            })
+            generate()
+        }
+    })()
+</script>
 </html>