Update the url automatically

xray.html

@@ -33,7 +33,6 @@
             <input type="number" id="softness-input" placeholder="25" value="25">
             <input type="range" id="softness-slider" min="0" max="100" value="25">
         </label>
-        <button id="share-button" class="nostart">Share</button>
     </div>
     
     <canvas class="hidden" id="overlay"></canvas>

xray.js

@@ -39,6 +39,7 @@ document.addEventListener("DOMContentLoaded", e => {
 
         overlayImg.src = overlayInput;
         baseImg.src = baseInput;
+        setURL();
         
         load();
 
@@ -84,6 +85,16 @@ document.addEventListener("DOMContentLoaded", e => {
         }
     });
     
+    document.querySelector("#radius-slider").addEventListener("change", e => {
+        try {
+            radius = parseInt(e.target.value);
+            document.querySelector("#radius-input").value = radius;
+        } catch {
+            console.warn("That wasn't a valid radius: " + e.target.value);
+        }
+        setURL();
+    });
+    
     document.querySelector("#radius-input").addEventListener("input", e => {
         try {
             radius = parseInt(e.target.value);
@@ -93,6 +104,16 @@ document.addEventListener("DOMContentLoaded", e => {
         }
     });
     
+    document.querySelector("#radius-input").addEventListener("change", e => {
+        try {
+            radius = parseInt(e.target.value);
+            document.querySelector("#radius-slider").value = radius;
+        } catch {
+            console.warn("That wasn't a valid radius: " + e.target.value);
+        }
+        setURL();
+    });
+    
     document.querySelector("#softness-slider").addEventListener("input", e => {
         try {
             softness = parseInt(e.target.value);
@@ -102,6 +123,16 @@ document.addEventListener("DOMContentLoaded", e => {
         }
     });
     
+    document.querySelector("#softness-slider").addEventListener("change", e => {
+        try {
+            softness = parseInt(e.target.value);
+            document.querySelector("#softness-input").value = softness;
+        } catch {
+            console.warn("That wasn't a valid softness: " + e.target.value);
+        }
+        setURL();
+    });
+    
     document.querySelector("#softness-input").addEventListener("input", e => {
         try {
             softness = parseInt(e.target.value);
@@ -110,6 +141,16 @@ document.addEventListener("DOMContentLoaded", e => {
             console.warn("That wasn't a valid softness: " + e.target.value);
         }
     });
+    
+    document.querySelector("#softness-input").addEventListener("change", e => {
+        try {
+            softness = parseInt(e.target.value);
+            document.querySelector("#softness-slider").value = softness;
+        } catch {
+            console.warn("That wasn't a valid softness: " + e.target.value);
+        }
+        setURL();
+    });
 
     // see if we have params already; if so, use them!
 
@@ -159,30 +200,6 @@ document.addEventListener("DOMContentLoaded", e => {
         }
     }
     
-    document.querySelector("#share-button").addEventListener("click", e => {
-       let shareURL = new URL(window.location);
-
-       // for some reason, the parser gets confused by urlencoded urls...
-       // so, to get rid of all parameters, we do this
-
-       let keys = Array.from(shareURL.searchParams.keys());
-       do {
-           keys = Array.from(shareURL.searchParams.keys());
-           keys.forEach(key => {
-               shareURL.searchParams.delete(key);
-           });
-       } while (keys.length > 0)
-
-       shareURL.searchParams.append("base", baseImg.src);
-       shareURL.searchParams.append("overlay", overlayImg.src);
-       shareURL.searchParams.append("radius", radius);
-       shareURL.searchParams.append("softness", softness);
-
-       console.log(shareURL);
-
-       window.location = shareURL;
-    });
-    
 });
 
 function load() {
@@ -272,4 +289,28 @@ function updateOverlay(points) {
     overlayCtx.drawImage(overlayImg, 0, 0);
 
     overlayCtx.restore();
+}
+
+function setURL() {
+        let shareURL = new URL(window.location);
+ 
+        // for some reason, the parser gets confused by urlencoded urls...
+        // so, to get rid of all parameters, we do this
+ 
+        let keys = Array.from(shareURL.searchParams.keys());
+        do {
+            keys = Array.from(shareURL.searchParams.keys());
+            keys.forEach(key => {
+                shareURL.searchParams.delete(key);
+            });
+        } while (keys.length > 0)
+        const overlayImg = document.querySelector("#overlay-img");
+        const baseImg = document.querySelector("#base-img");
+ 
+        shareURL.searchParams.append("base", baseImg.src);
+        shareURL.searchParams.append("overlay", overlayImg.src);
+        shareURL.searchParams.append("radius", radius);
+        shareURL.searchParams.append("softness", softness);
+
+        window.history.replaceState(null, "X-Ray Viewer", shareURL);
 }