index.html.in: do javascript tricks in order of importance

For example, centering the ticket is probably most important. Being
able to tap the screen to switch it to night mode the least.

diff --git a/index.html.in b/index.html.in
index 9d666dedb0c5d6b9ea27df5bfcce6176db61dd9a..13a10e350010e8622ba9885abff4f83fbda8bb81 100644 (file)
--- a/index.html.in
+++ b/index.html.in
@@ -229,9 +229,42 @@
     @SVGDATA@
 
     <script>
-      /******************************************/
-      /* First, set up the ticket date and time */
-      /******************************************/
+
+      /***********************************************/
+      /* First, center the ticket within the browser */
+      /***********************************************/
+
+      function center_ticket() {
+       /* We're relying on the SVG being the full height of the
+        * viewport already, and on the aspect ratio being
+        * preserved. First, find the center of the ticket. */
+       const r = document.getElementById("ticket").getBoundingClientRect();
+       const c = r.left + (r.width / 2);
+
+       /* That's the center-line of the ticket. We want to move it to
+        * the center-line of the viewport. */
+       const vc = document.documentElement.clientWidth / 2;
+
+       /* This is how much we need to translate the SVG */
+       const delta = vc - c;
+
+       /* But before we can set the absolute left-coordinate of the
+        * SVG, we need to know where it is now. Note: without the
+        * "px" this doesn't default to pixels like CSS does. */
+       const svg = document.querySelector("svg");
+       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);
+
+
+      /*****************************************/
+      /* 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
@@ -260,9 +293,9 @@
       td.firstChild.textContent = date.toLocaleDateString("en-US", dateopts);
 
 
-      /************************************************************/
-      /* Second, add the onclick handler for the night/day switch */
-      /************************************************************/
+      /*************************************************************/
+      /* Finally, add the onclick handler for the night/day switch */
+      /*************************************************************/
 
       /* We always start in "day" mode */
       is_day = true;
@@ -288,36 +321,6 @@
 
       document.body.addEventListener("click", swap_colors);
 
-
-      /*************************************************/
-      /* Finally, center the ticket within the browser */
-      /*************************************************/
-      function center_ticket() {
-       /* We're relying on the SVG being the full height of the
-        * viewport already, and on the aspect ratio being
-        * preserved. First, find the center of the ticket. */
-       const r = document.getElementById("ticket").getBoundingClientRect();
-       const c = r.left + (r.width / 2);
-
-       /* That's the center-line of the ticket. We want to move it to
-        * the center-line of the viewport. */
-       const vc = document.documentElement.clientWidth / 2;
-
-       /* This is how much we need to translate the SVG */
-       const delta = vc - c;
-
-       /* But before we can set the absolute left-coordinate of the
-        * SVG, we need to know where it is now. Note: without the
-        * "px" this doesn't default to pixels like CSS does. */
-       const svg = document.querySelector("svg");
-       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);
     </script>
   </body>
 </html>