index.html.in: add stub QR focus toggle

Begin implementing the QR code focus toggle. For the moment, we only
hide or un-hide the remaining ticket elements when the QR code is
tapped.

diff --git a/index.html.in b/index.html.in
index 482fa1480cf51c6c646e1563996d1ac3b01b7b1d..9316fb991cc0ae72eb6c4ffae1d91cffc60db4c1 100644 (file)
--- a/index.html.in
+++ b/index.html.in
@@ -197,6 +197,18 @@
          * than the trees */
         animation: citycopyscroll 20s linear infinite;
       }
+
+      /*****************/
+      /* QR code focus */
+      /*****************/
+
+      #serviceid, #servicename, #codebg, #codetext {
+        transition-property: opacity;
+        transition-duration: 0.5s;
+      }
+      .transparent {
+        opacity: 0;
+      }
     </style>
   </head>
 
@@ -730,6 +742,47 @@
         }
       }
 
+      /**
+       * Focus or un-focus the QR code.
+       *
+       * The QR code grows to (almost) the full size of the ticket
+       * when it is tapped. In the process, the other ticket elements
+       * on the bottom portion quickly fade away, and the QR code
+       * slides over near the center of the ticket. The height of the
+       * ticket itself also grows somewhat, at least on BaltimoreLink
+       * tickets. When the QR code is tapped again, this process
+       * reverses.
+       */
+      function toggle_qr_focus(event) {
+        /* Don't swap night/day if the tap was on the QR code. */
+        event.stopPropagation();
+
+        const qr = document.getElementById("qr");
+        const serviceid = document.getElementById("serviceid");
+        const servicename = document.getElementById("servicename");
+        const codetext = document.getElementById("codetext");
+        const codebg = document.getElementById("codebg");
+
+        let ticket_class;  /* transparent, or none (opaque) */
+        let qr_class;      /* big, or none (normal sized) */
+
+        if (qr.getAttribute("class") == "big") {
+          ticket_class = "";
+          qr_class = "";
+        }
+        else {
+          ticket_class = "transparent";
+          qr_class = "big";
+        }
+
+        serviceid.setAttribute("class", ticket_class);
+        servicename.setAttribute("class", ticket_class);
+        codetext.setAttribute("class", ticket_class);
+        codebg.setAttribute("class", ticket_class);
+
+        qr.setAttribute("class", qr_class);
+      }
+
 
       /**
        * Compute the zone (string) for the given origin/destination pair.
@@ -1003,6 +1056,10 @@
 
         /* Swap colors when the screen is tapped */
         document.body.addEventListener("click", swap_day_night);
+
+        /* Focus (grow) or unfocus (ungrow) the QR code */
+        document.getElementById("qr").addEventListener("click",
+                                                       toggle_qr_focus);
       }
       else {
         /* If we haven't submitted the form yet, set up change handlers