diff --git a/xray.js b/xray.js index 923273b..72b9964 100644 --- a/xray.js +++ b/xray.js @@ -321,6 +321,55 @@ document.addEventListener("DOMContentLoaded", e => { firstTime = false; + if (url.searchParams.has("radius")) { + try { + radius = parseInt(url.searchParams.get("radius")); + document.querySelector("#radius-slider").value = radius; + document.querySelector("#radius-input").value = radius; + } catch { + console.warn("That was a bogus radius..."); + } + } + if (url.searchParams.has("softness")) { + try { + softness = parseInt(url.searchParams.get("softness")); + document.querySelector("#softness-slider").value = softness; + document.querySelector("#softness-input").value = softness; + } catch { + console.warn("That was a bogus softness..."); + } + } + if (url.searchParams.has("darkness")) { + try { + darkness = parseInt(url.searchParams.get("darkness")); + document.querySelector("#darkness-slider").value = darkness; + document.querySelector("#darkness-input").value = darkness; + document.querySelector("#shadow").style.setProperty("--opacity", darkness / 100); + } catch { + console.warn("That was a bogus darkness..."); + } + } + if (url.searchParams.has("opacity")) { + try { + opacity = parseInt(url.searchParams.get("opacity")); + document.querySelector("#opacity-slider").value = opacity; + document.querySelector("#opacity-input").value = opacity; + document.querySelector("#overlay").style.setProperty("--opacity", opacity / 100); + } catch { + console.warn("That was a bogus opacity..."); + } + } + + if (url.searchParams.has("border")) { + try { + border = 1 == parseInt(url.searchParams.get("border")); + } catch { + + } + } else { + border = false; + } + load(); @@ -334,55 +383,7 @@ document.addEventListener("DOMContentLoaded", e => { } } - if (url.searchParams.has("radius")) { - try { - radius = parseInt(url.searchParams.get("radius")); - document.querySelector("#radius-slider").value = radius; - document.querySelector("#radius-input").value = radius; - } catch { - console.warn("That was a bogus radius..."); - } - } - if (url.searchParams.has("softness")) { - try { - softness = parseInt(url.searchParams.get("softness")); - document.querySelector("#softness-slider").value = softness; - document.querySelector("#softness-input").value = softness; - } catch { - console.warn("That was a bogus softness..."); - } - } - if (url.searchParams.has("darkness")) { - try { - darkness = parseInt(url.searchParams.get("darkness")); - document.querySelector("#darkness-slider").value = darkness; - document.querySelector("#darkness-input").value = darkness; - document.querySelector("#shadow").style.setProperty("--opacity", darkness / 100); - } catch { - console.warn("That was a bogus darkness..."); - } - } - if (url.searchParams.has("opacity")) { - try { - opacity = parseInt(url.searchParams.get("opacity")); - document.querySelector("#opacity-slider").value = opacity; - document.querySelector("#opacity-input").value = opacity; - document.querySelector("#overlay").style.setProperty("--opacity", opacity / 100); - } catch { - console.warn("That was a bogus opacity..."); - } - } - - if (url.searchParams.has("border")) { - try { - border = 1 == parseInt(url.searchParams.get("border")); - console.log(border); - } catch { - - } - } else { - border = false; - } + document.querySelector("#show-border").checked = border; window.addEventListener("resize", e => { @@ -532,6 +533,8 @@ function setup() { document.querySelector("#radius-input").max = Math.max(baseImg.width, baseImg.height); document.querySelector("#radius-slider").max = Math.max(baseImg.width, baseImg.height); + setURL(); + console.log("Done"); } @@ -541,6 +544,10 @@ function ease(t, k) { function updateOverlay(points, clicked) { + if (!running) { + return; + } + const overlay = document.querySelector("#overlay"); const overlayResized = document.querySelector("#overlay-resized");