diff --git a/xray.html b/xray.html
index 76693af..61e58b7 100644
--- a/xray.html
+++ b/xray.html
@@ -33,7 +33,6 @@
-
diff --git a/xray.js b/xray.js
index 4bdd55c..53a8fc1 100644
--- a/xray.js
+++ b/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);
}
\ No newline at end of file