+ /* 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 hdelta = 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 + hdelta) + "px";
+ }
+
+
+ /**
+ * Set the service identifier from the querystring if it's there.
+ * Otherwise, leave it at the default of "F".
+ */
+ function set_service_id() {
+ const sid = document.getElementById("serviceid");
+
+ /* Get the "serviceid" from the querystring if it's there */
+ const params = new URLSearchParams(document.location.search);
+ if (params.get("serviceid")) {
+ sid.textContent = params.get("serviceid");
+ }
+ }
+
+
+ /**
+ * Set the service name from the querystring if it's there.
+ * Otherwise, leave it at the default of "BaltimoreLink".
+ */
+ function set_service_name() {
+ const sid = document.getElementById("servicename");
+
+ /* Get the "servicename" from the querystring if it's there */
+ const params = new URLSearchParams(document.location.search);
+ if (params.get("servicename")) {
+ sid.textContent = params.get("servicename");
+ }
+ }
+
+
+ /**
+ * Set the zone from the given "zone" parameter and then unhide it.
+ */
+ function set_zone(zone) {
+ const z = document.getElementById("zone");
+
+ z.textContent = zone;
+ z.style.display = "block"; /* hidden by default */
+ }
+
+
+ /**
+ * Resize the ticket background based on the service name.
+ * The BaltimoreLink, Commuter Bus, and MARC Train tickets
+ * are all different heights and are arranged vertically a
+ * bit different.
+ *
+ * Rather than design three completelty separate tickets and
+ * then have to keep track of which one we're using, I have
+ * instead decided to use one ticket and to reposition it
+ * on-the-fly based on the service name. This is necessarily
+ * a bit ugly because it involves a lot of magic numbers that
+ * can only be explained if you open up inkscape with a CharmPass
+ * screenshot to see where things belong and how to get them there.
+ *
+ * The SVG was designed with BaltimoreLink in mind, so this
+ * is a no-op if the service is BaltimoreLink.
+ */
+ function resize_ticket() {
+ /* Get the "servicename" from the querystring if it's there */
+ const params = new URLSearchParams(document.location.search);
+ const tbg = document.getElementById("ticketbg");
+ const t = document.getElementById("ticket");
+ const sn = document.getElementById("servicename");
+
+ if (params.get("servicename") === "Commuter Bus") {
+ /* The top of the background is initially at y=246.859, and
+ * we scale it by a factor of 1.12 to y=276.482 for a change
+ * of 29.623. So after we scale it, we translate it upwards
+ * by that amount to put it back where it started. */
+ tbg.setAttribute("transform", "translate(0 -29.623) scale(1 1.12)");
+
+ /* Now translate the entire ticket up by the magic amount, 1/5
+ * of the size change we made to the background. This ratio
+ * was found by measuring pixels in side-by-side screenshots
+ * of BaltimoreLink and Commuter Bus tickets. */
+ t.setAttribute("transform", "translate(0 -9.33)");
+
+ /* More magic numbers discovered by comparing the two
+ * tickets overlayed in inkscape */
+ sn.setAttribute("transform", "translate(0 64.28)");
+ }
+ else if (params.get("servicename") === "MARC Train") {
+ /* insane tricks are explained above */
+ tbg.setAttribute("transform",
+ "translate(0 -72.378) scale(1 1.2932)");
+ t.setAttribute("transform", "translate(0 -67.17)");
+ sn.setAttribute("transform", "translate(0 131.0)");
+ }
+ }
+