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 a160090ffdbb1ea9e9dcb2546f5ae2ed7b16ebe6..f3281226abcc81388559a794719d42af922f1ced 100644 (file)
--- 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 <text> element after futzing
+         * with its contents. But when we reposition that <text>
+         * 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 <text> 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);