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