index.html.in: refactor resize_ticket() to use CSS transforms

While it would have been nice being able to revert to the initial
ticket size by erasing the CSS "transform", doing so makes the
transitions wonky: with Commuter Bus and MARC Train tickets, it first
transitions down to the BaltimoreLink ticket size, and then back up to
the initial attribute-based size.

diff --git a/index.html.in b/index.html.in
index a56adea2fc8c6edc069bac7b5ce42caabd573202..a9e7c9b7a8ec60335458bcd74188749918c2d3f2 100644 (file)
--- a/index.html.in
+++ b/index.html.in
@@ -619,28 +619,44 @@
         const t = document.getElementById("ticket");
         const sn = document.getElementById("servicename");
 
+        let tbbg_yscale = 1;
+        let t_yoffset = 0;
+        let sn_yoffset = 0;
+
         if (params.get("servicename") === "Commuter Bus") {
           /* Scale the bottom part of the ticket (the white background
            * only) downwards. There's no real motivation for this scale
            * factor except that, visually, it gives the right result. */
-          tbbg.setAttribute("transform", "scale(1 1.16)");
+          tbbg_yscale = 1.16;
 
           /* Now translate the entire ticket up by the magic amount.
            * This number was found by measuring pixels in side-by-side
            * screenshots of BaltimoreLink and Commuter Bus tickets. */
-          t.setAttribute("transform", "translate(0 -9.33)");
+          t_yoffset = -9.33;
 
           /* More magic numbers discovered by comparing the two
-           * tickets overlayed in inkscape */
-          sn.setAttribute("transform", "translate(0 64.28)");
+           * tickets overlayed in inkscape. */
+          sn_yoffset = 64.28;
         }
         else if (params.get("servicename") === "MARC Train") {
-          /* insane tricks are explained above */
-          tbbg.setAttribute("transform", "scale(1 1.395)");
-          t.setAttribute("transform", "translate(0 -67.17)");
-          sn.setAttribute("transform", "translate(0 131.0)");
+          /* Insane tricks explained above. */
+          tbbg_yscale = 1.395;
+          t_yoffset = -67.17;
+          sn_yoffset = 131.0;
         }
 
+        /* Scale up the background */
+        tbbg.style.transform = `scale(1, ${tbbg_yscale})`;
+
+        /* The scale is unit-agnostic, but the translations need
+         * to be in px (not SVG units) for CSS. */
+        const svg2c = svg_to_client();
+        t_yoffset *= svg2c;
+        sn_yoffset *= svg2c;
+
+        t.style.transform = `translate(0, ${t_yoffset}px)`;
+        sn.style.transform = `translate(0, ${sn_yoffset}px)`;
+
         /* Enable CSS transitions for future scalings, namely
          * for the QR focus animation. The focus() thing here
          * is a hack to force the browser to stop and think about