From: Michael Orlitzky <michael@orlitzky.com>
Date: Mon, 16 Oct 2023 14:02:31 +0000 (-0400)
Subject: src/index.html.in: auto-center the ticket in the viewport
X-Git-Url: https://gitweb.michael.orlitzky.com/?a=commitdiff_plain;h=e56e6e7f4786655a26089d0fbd125862ed0e7d54;p=charm-bypass.git

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

diff --git a/src/index.html.in b/src/index.html.in
index b3407fc..9486fb7 100644
--- 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>