From: Michael Orlitzky Date: Fri, 27 Oct 2023 13:41:39 +0000 (-0400) Subject: index.html.in: finally get the code-centering right X-Git-Url: https://gitweb.michael.orlitzky.com/?a=commitdiff_plain;h=2d95c5549b43017647e4a74fc4d35392ee61e6a5;p=charm-bypass.git index.html.in: finally get the code-centering right There's a conversion between SVG and client coordinates that needs to happen. With that done, it goes to the center in one try. --- diff --git a/index.html.in b/index.html.in index a160090..f328122 100644 --- a/index.html.in +++ b/index.html.in @@ -289,9 +289,10 @@ function center_code() { /* Center the security code inside its red box */ const ct = document.getElementById("codetext"); + const bg = document.getElementById("codebg"); /* First, find the center of the red box */ - const r1 = document.getElementById("codebg").getBoundingClientRect(); + const r1 = bg.getBoundingClientRect(); const c1 = r1.left + (r1.width / 2); /* Now the center of the code text */ @@ -301,20 +302,28 @@ /* What do we add to c2 to make it equal to c1? */ const hdelta = c1 - c2; + /* We've measured everything so far in "client rect" + * coordinates, because that's the only available measurement + * we have for the width of the element after futzing + * with its contents. But when we reposition that + * element, it will be by adjusting its "x" attribute, and + * that attribute uses a different coordinate system than the + * client rect does. Specifically, "x" refers to an offset + * within the SVG's coordinate system, and the client rect + * coordinates are pixels on-screen. To convert between the + * two, we can take the "width" attribute of the background + * element and compare it to the width of the background + * element's client rect. Since the size of the background is + * fixed, this should give us a multiplier that turns client recr + * distances (what we have) into SVG distances (what we want) */ + const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width; + + /* Convert hdelta from client rect to SVG coordinates */ + const svg_hdelta = hdelta * client_to_svg; + /* Since this element has an "x" attribute it's easier for * us to shift that than it is to mess with the "left" style. */ - ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + hdelta); - } - - function center_code_repeatedly() { - /* Lets us call center_code five times on page load. Why we - * need to do this is an interesting (i.e. stupid) topic for - * conversation. */ - center_code(); - center_code(); - center_code(); - center_code(); - center_code(); + ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta); } /*****************************************/ @@ -388,13 +397,8 @@ window.addEventListener("load", set_code); /* Center the security code text when the page has loaded; in - * particular, after we set it. And then center it again. And - * again and again and again. Why? I'm glad you asked. Because - * it doesn't actually get centered the first time; it's off by - * a few pixels. But then if we center it _again_, it moves a - * little closer to the true center. Do that enough times and - * any errors become unnoticeable. */ - window.addEventListener("load", center_code_repeatedly); + * particular, after we set the code. */ + window.addEventListener("load", center_code); /* Set the ticket expiration date/time upon page load */ window.addEventListener("load", set_ticket_expiry);