From e56e6e7f4786655a26089d0fbd125862ed0e7d54 Mon Sep 17 00:00:00 2001 From: Michael Orlitzky Date: Mon, 16 Oct 2023 10:02:31 -0400 Subject: [PATCH] src/index.html.in: auto-center the ticket in the viewport --- src/index.html.in | 50 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) 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); -- 2.44.2