index.html.in: begin writing a function to resize the ticket

The BaltimoreLink, Commuter Bus, and MARC Train tickets are all
different sizes and have their service/zone names laid out a little
bit differently.

This commit adds a function, resize_ticket(), that will eventually
handle that.

diff --git a/index.html.in b/index.html.in
index 561821592b04b1eb0da99dc8e9aa49a0a508385a..4e6c5f274ffe049c9267593a9335129948617f6e 100644 (file)
--- a/index.html.in
+++ b/index.html.in
@@ -435,6 +435,40 @@
         /* Otherwise, leave it at "BaltimoreLink" */
       }
 
+      /***********************************************************/
+      /* Resize the  ticket background based on the service name */
+      /***********************************************************/
+
+      function resize_ticket() {
+        /* Get the "servicename" from the querystring if it's there */
+        const params = new URLSearchParams(document.location.search);
+        if (params.get("servicename") == "Commuter Bus") {
+          const tbg = document.getElementById("ticketbg");
+          const t = document.getElementById("ticket");
+          const sn = document.getElementById("servicename");
+
+          /* 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. */
+          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") {
+          /* hi */
+        }
+
+        /* Otherwise, leave it alone. The SVG was designed with the
+         * BaltimoreLink ticket in mind */
+      }
+
       /****************************************/
       /* Set and reposition the security code */
       /****************************************/
@@ -677,6 +711,9 @@
         /* Set the service name when the page has loaded */
         window.addEventListener("load", set_service_name);
 
+        /* Resize the ticket background if necessary */
+        window.addEventListener("load", resize_ticket);
+
         /* Set the security code text when the page has loaded */
         window.addEventListener("load", set_code);