index.html.in: center the security code in its container

This is mostly working and just needs some code cleanup. And to be
called when the window resizes. I found an easy solution completely
by accident, so that's nice.

diff --git a/index.html.in b/index.html.in
index 0bec5e720a4efcf39df02f38e87054e7866d37c1..f600950306a38c7ca893d6bb186c23a282cfbbbc 100644 (file)
--- a/index.html.in
+++ b/index.html.in
@@ -267,13 +267,16 @@
       /*************************/
 
       /* All <text> elements produced by inkscape contain a single <tspan>
-       * that itself contains the actual text. */
+       * that itself contains the actual text. This does something real
+       * sneaky, and actually OVERWRITES that tspan with our own text
+       * content. This turns out to be what we need anyway because trying
+       * to center a (display: inline) tspan is a pain in the butt. */
       const ct = document.getElementById("codetext");
 
       /* Get the "code" from the querystring if it's there */
       let params = new URLSearchParams(document.location.search);
       if (params.get("code")) {
-        ct.firstChild.textContent = params.get("code");
+        ct.textContent = params.get("code");
       }
       else {
         /* Otherwise, use a random code */
@@ -287,9 +290,26 @@
         const i2 = Math.floor(Math.random() * 36);
         const d1 = bucket[i1];
         const d2 = bucket[i2];
-        ct.firstChild.textContent = d1 + d2;
+        ct.textContent = d1 + d2;
       }
 
+      /* Now center the security code inside its red box */
+      /* First, find the center of the red box */
+      const r1 = document.getElementById("codebg").getBoundingClientRect();
+      const c1 = r1.left + (r1.width / 2);
+
+      /* Now the center of the code text */
+      const r2 = ct.getBoundingClientRect();
+      const c2 = r2.left + (r2.width / 2);
+
+      /* What do we add to c2 to make it equal to c1? */
+      const code_delta = c1 - c2;
+
+      /* 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")) + code_delta);
+
+
       /*****************************************/
       /* Next, set up the ticket date and time */
       /*****************************************/