From 5986a05b37f3559ca7a548c99774fbab6bdcf24e Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Tue, 24 Oct 2023 11:36:40 -0400 Subject: [PATCH] index.html.in: javascript cleanup Encapsulate everything into functions and kick them off with event listeners. This _mostly_ fixes the centering of the security code. There is however a slight centering glitch visible upon page load when the code is (for example) "WW". Resizing the page correctly re-centers it; leaving only the mystery of why it was not centered to begin with; we supposedly center it once when the page loads. --- index.html.in | 174 +++++++++++++++++++++++++++++--------------------- 1 file changed, 101 insertions(+), 73 deletions(-) diff --git a/index.html.in b/index.html.in index f600950..633c0e4 100644 --- a/index.html.in +++ b/index.html.in @@ -255,95 +255,97 @@ svg.style.left = (svg.getBoundingClientRect().left + delta) + "px"; } - /* Re-center it when the window is resized */ - window.addEventListener("resize", center_ticket); - - /* Center it once when the page has loaded, too */ - window.addEventListener("load", center_ticket); + /****************************************/ + /* Set and reposition the security code */ + /****************************************/ - /*************************/ - /* Set the security code */ - /*************************/ + function set_code() { + /* All elements produced by inkscape contain a single + * 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"); - /* All elements produced by inkscape contain a single - * 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.textContent = params.get("code"); + } + else { + /* Otherwise, use a random code */ + const bucket = ["0","1","2","3","4","5","6","7","8","9", + "A","B","C","D","E","F","G","H","I","J", + "K","L","M","N","O","P","Q","R","S","T", + "U","V","W","X","Y","Z"]; - /* Get the "code" from the querystring if it's there */ - let params = new URLSearchParams(document.location.search); - if (params.get("code")) { - ct.textContent = params.get("code"); + /* Two random ints between 0 and 35 */ + const i1 = Math.floor(Math.random() * 36); + const i2 = Math.floor(Math.random() * 36); + const d1 = bucket[i1]; + const d2 = bucket[i2]; + ct.textContent = d1 + d2; + } } - else { - /* Otherwise, use a random code */ - const bucket = ["0","1","2","3","4","5","6","7","8","9", - "A","B","C","D","E","F","G","H","I","J", - "K","L","M","N","O","P","Q","R","S","T", - "U","V","W","X","Y","Z"]; - /* Two random ints between 0 and 35 */ - const i1 = Math.floor(Math.random() * 36); - const i2 = Math.floor(Math.random() * 36); - const d1 = bucket[i1]; - const d2 = bucket[i2]; - 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); + function center_code() { + const ct = document.getElementById("codetext"); + + /* 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); + /* 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; + /* 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); + /* 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 */ /*****************************************/ - /* There are two parameters, time and date, that we store in one - * underlying "date" variable. Default both to an hour and a - * half from now. This is what the CharmPass app does for - * one-way tickets. - */ - const date = new Date(); - - /* Add an hour and a half. We use the low-level get/setTime to - * change the number of milliseconds since the epoch that this - * date represents. Obviously correct, and avoids all suspicious - * corner cases (well, for a few more decades). */ - date.setTime(date.getTime() + (90*60*1000)); - - /* All elements produced by inkscape contain a single - * that itself contains the actual text. */ - tt = document.getElementById("tickettime"); - tt.firstChild.textContent = date.toLocaleTimeString(); - - const td = document.getElementById("ticketdate"); - const dateopts = { - day: "2-digit", - month: "2-digit", - year: "2-digit" - }; - td.firstChild.textContent = date.toLocaleDateString("en-US", dateopts); - - - /*************************************************************/ - /* Finally, add the onclick handler for the night/day switch */ - /*************************************************************/ + function set_ticket_expiry() { + /* There are two parameters, time and date, that we store in one + * underlying "date" variable. Default both to an hour and a + * half from now. This is what the CharmPass app does for + * one-way tickets. */ + const date = new Date(); + + /* Add an hour and a half. We use the low-level get/setTime to + * change the number of milliseconds since the epoch that this + * date represents. Obviously correct, and avoids all suspicious + * corner cases (well, for a few more decades). */ + date.setTime(date.getTime() + (90*60*1000)); + + /* All elements produced by inkscape contain a single + * that itself contains the actual text. */ + tt = document.getElementById("tickettime").firstChild; + tt.textContent = date.toLocaleTimeString(); + + const td = document.getElementById("ticketdate"); + const dateopts = { + day: "2-digit", + month: "2-digit", + year: "2-digit" + }; + td.textContent = date.toLocaleDateString("en-US", dateopts); + } + + + /*********************************************************/ + /* Finally, the onclick handler for the night/day switch */ + /*********************************************************/ /* We always start in "day" mode */ is_day = true; @@ -367,6 +369,32 @@ } } + + /*****************************************************/ + /* Add event handlers for all of the functions above */ + /*****************************************************/ + + /* Center the ticket once when the page has loaded */ + window.addEventListener("load", center_ticket); + + /* Re-center the ticket when the window is resized */ + window.addEventListener("resize", center_ticket); + + /* Set the security code text when the page has loaded */ + window.addEventListener("load", set_code); + + /* Center the security code text when the page has loaded; + in particular, after we set it */ + window.addEventListener("load", center_code); + + /* Re-center the security code when the window is resized, + and in particular after the ticket is re-centered */ + window.addEventListener("resize", center_code); + + /* Set the ticket expiration date/time upon page load */ + window.addEventListener("load", set_ticket_expiry); + + /* Swap colors when the screen is tapped */ document.body.addEventListener("click", swap_colors); -- 2.44.2