From 7d7bc2b602001340f22b4d0e400b82b232f9b4fb Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Tue, 24 Oct 2023 11:16:15 -0400 Subject: [PATCH] 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. --- index.html.in | 26 +++++++++++++++++++++++--- 1 file changed, 23 insertions(+), 3 deletions(-) diff --git a/index.html.in b/index.html.in index 0bec5e7..f600950 100644 --- a/index.html.in +++ b/index.html.in @@ -267,13 +267,16 @@ /*************************/ /* All elements produced by inkscape contain a single - * 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 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 */ /*****************************************/ -- 2.44.2