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.

diff --git a/index.html.in b/index.html.in
index f600950306a38c7ca893d6bb186c23a282cfbbbc..633c0e4017edd0c070f9c1de13e9d2d627938b6d 100644 (file)
--- 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 <text> elements produced by inkscape contain a single <tspan>
+         * 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 <text> elements produced by inkscape contain a single <tspan>
-       * 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 <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);
+        /* 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 */
       /*****************************************/
 
-      /* 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 <text> elements produced by inkscape contain a single <tspan>
-       * 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 <text> elements produced by inkscape contain a single <tspan>
+         * 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);
 
     </script>