src/index.html.in: auto-center the ticket in the viewport

diff --git a/src/index.html.in b/src/index.html.in
index b3407fc214e70b9c9607d767b01dfe1b5451d2d5..9486fb7b3e6be6d802f6bb89908305a020be908e 100644 (file)
--- a/src/index.html.in
+++ b/src/index.html.in
@@ -26,6 +26,25 @@
        background: transparent;
       }
 
+      html, body {
+       /* To create our "window" onto the scene, we're going to slide the
+         * SVG off the left-hand side of the screen, and we don't want
+        * scroll bars to appear. */
+       overflow: hidden;
+      }
+
+      svg {
+       /* Set the height to 100% of the screen, which we'll keep; and the
+        *  initial position to (0,0), which we're going to change
+        * every time the window is resized, because the exact amount
+        * that we have to slide the SVG to the left to get the ticket
+        * into the center will change. */
+       position: fixed;
+       top: 0;
+       left: 0;
+       height: 100%;
+      }
+
       /* The blinking fade in/out animation for the ticket date and time */
       @keyframes blink {
        25% {
@@ -270,6 +289,37 @@
       }
 
       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>