<!doctype html>
<html lang="en-US">
<head>
+ <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
+ <link rel="icon"
+ type="image/svg+xml"
+ href="data:image/svg+xml;base64,@FAVICON@" />
<title>
- CharmBypass.
+ CharmBypass: got that transit equity
</title>
<style>
- /*
- * Reset styles for the html and body elements, the only two HTML
- * elements we use. */
- html, body {
- margin: 0;
- padding: 0;
- border: 0;
- font-weight: normal;
- font-style: inherit;
- font-size: 100%;
- line-height: 1.5;
- font-family: inherit;
- text-align: inherit;
- text-decoration: none;
- vertical-align: baseline;
- 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;
+ body {
+ /* For consistency with the SVG */
+ font-family: sans-serif;
+ }
+
+ fieldset {
+ margin-top: 1em;
+ padding-top: 1em;
+ }
+
+ input[type=submit] {
+ margin-top: 1em;
+ margin-bottom: 1em;
+ }
+
+ legend {
+ font-weight: bold;
+ }
+
+ /* Display form errors for the one browser that doesn't support
+ * them natively, mobile Firefox. We use "visibility" to toggle
+ * it on and off, but "display" to hide it completely in non-
+ * stupid web browsers. */
+ #marc-form-errors {
+ color: #a00;
+ visibility: hidden;
+ display: none;
}
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%;
+ /* 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%;
+
+ /* Hide everything by default. We only show it once the user has
+ * submitted the menu form */
+ display: none;
}
/* The blinking fade in/out animation for the ticket date and time */
@keyframes blink {
- 25% {
- opacity: 0.5;
- }
- 50% {
- opacity: 0;
- }
- 75% {
- opacity: 0.5;
- }
+ 25% { opacity: 0.5; }
+ 50% { opacity: 0; }
+ 75% { opacity: 0.5; }
}
#tickettime, #ticketdate {
- /* 300 two-second blinks is ten minutes */
- animation: blink 2s linear 300;
+ /* 300 two-second blinks is ten minutes */
+ animation: blink 2s linear 300;
}
/* Define, load, and specify the custom font we use for the ticket
* date, time, and service name. */
@font-face {
- font-family: "CharmBypass Regular";
- src:
- url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
+ font-family: "CharmBypass Regular";
+ src:
+ url("data:font/woff2;base64,@CBPREGULAR@") format("woff2")
}
- #servicename, #tickettime, #ticketdate {
- font-family: "CharmBypass Regular";
+ #origindest, #servicename, #tickettime, #ticketdate, #codetext, #zone {
+ font-family: "CharmBypass Regular", sans-serif;
}
@font-face {
- font-family: "CharmBypass Bold";
- src:
- url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
+ font-family: "CharmBypass Bold";
+ src:
+ url("data:font/woff2;base64,@CBPBOLD@") format("woff2")
}
- #serviceletter {
- font-family: "CharmBypass Bold";
+ #serviceid {
+ font-family: "CharmBypass Bold", sans-serif;
}
/************************/
/* Bus */
@keyframes busroll {
- from {
- transform: translateX(0%);
- }
- to {
- transform: translateX(100%);
- }
+ from { transform: translateX(0%); }
+ to { transform: translateX(-100%); }
}
#bus {
- animation: busroll 23s linear infinite;
+ animation: busroll 15s linear infinite;
}
/* Tram */
@keyframes tramroll {
- from {
- transform: translateX(0%);
- }
- to {
- transform: translateX(100%);
- }
+ from { transform: translateX(0%); }
+ to { transform: translateX(100%); }
}
#tram {
- animation: tramroll 17s linear infinite;
+ animation: tramroll 15s linear infinite;
}
- /* Tram */
+ /* Train */
@keyframes trainroll {
- from {
- transform: translateX(0%);
- }
- to {
- transform: translateX(100%);
- }
+ from { transform: translateX(0%); }
+ to { transform: translateX(100%); }
}
#train {
- animation: trainroll 11s linear infinite;
+ animation: trainroll 10s linear infinite;
}
/* Clouds */
@keyframes cloudsfloat {
- from {
- transform: translateX(0%);
- }
- to {
- transform: translateX(-50%);
- }
+ from { transform: translateX(0%); }
+ to { transform: translateX(-50%); }
}
#clouds {
- animation: cloudsfloat 40s linear infinite;
+ animation: cloudsfloat 25s linear infinite;
}
@keyframes cloudscopyfloat {
- from {
- transform: translateX(0%);
- }
- to {
- transform: translateX(-50%);
- }
+ from { transform: translateX(0%); }
+ to { transform: translateX(-50%); }
}
#cloudscopy {
- animation: cloudscopyfloat 40s linear infinite;
+ animation: cloudscopyfloat 25s linear infinite;
}
/* Trees */
@keyframes treespass {
- from {
- transform: translateX(0%);
- }
- to {
- transform: translateX(-50%);
- }
+ from { transform: translateX(0%); }
+ to { transform: translateX(-50%); }
}
#trees {
/* The trees move a little faster than the clouds */
- animation: treespass 30s linear infinite;
+ animation: treespass 16s linear infinite;
}
@keyframes treescopypass {
- from {
- transform: translateX(0%);
- }
- to {
- transform: translateX(-50%);
- }
+ from { transform: translateX(0%); }
+ to { transform: translateX(-50%); }
}
#treescopy {
/* The trees move a little faster than the clouds */
- animation: treescopypass 30s linear infinite;
+ animation: treescopypass 16s linear infinite;
}
/* City skyline */
@keyframes cityscroll {
- from {
- transform: translateX(0%);
- }
- to {
- transform: translateX(-50%);
- }
+ from { transform: translateX(0%); }
+ to { transform: translateX(-50%); }
}
#city {
/* The city moves faster than the clouds but slower
* than the trees */
- animation: cityscroll 35s linear infinite;
+ animation: cityscroll 20s linear infinite;
}
@keyframes citycopyscroll {
- from {
- transform: translateX(0%);
- }
- to {
- transform: translateX(-50%);
- }
+ from { transform: translateX(0%); }
+ to { transform: translateX(-50%); }
}
#citycopy {
/* The city moves faster than the clouds but slower
* than the trees */
- animation: citycopyscroll 35s linear infinite;
+ animation: citycopyscroll 20s linear infinite;
}
</style>
</head>
<body>
+ <div id="menu">
+ <h1>CharmBypass</h1>
+ <p><strong>got that <em>transit equity</em></strong></p>
+
+ <form>
+ <fieldset>
+ <legend>Local Bus, Light Rail, or Metro</legend>
+ <div>
+ <label for="code1">
+ Daily security code (optional):
+ </label>
+ <input id="code1"
+ name="code" value=""
+ type="text"
+ size="2"
+ minlength="2"
+ maxlength="2"
+ pattern="[a-zA-Z0-9]*" />
+ </div>
+ <input type="hidden" name="servicename" value="BaltimoreLink" />
+ <input type="submit" name="go" value="Generate Ticket" />
+ </fieldset>
+ </form>
+ <form>
+ <fieldset>
+ <legend>Commuter Bus</legend>
+ <input type="hidden" name="serviceid" value="R" />
+ <input type="hidden" name="servicename" value="Commuter Bus" />
+
+ <div>
+ <label for="code2">
+ Daily security code (optional):
+ </label>
+ <input id="code2"
+ name="code" value=""
+ type="text"
+ size="2"
+ minlength="2"
+ maxlength="2"
+ pattern="[a-zA-Z0-9]*" />
+ </div>
+
+ <p>
+ Zone<sup>†</sup>:
+ </p>
+ <div>
+ <input type="radio" required
+ name="zone"
+ id="zone1"
+ value="Zone 1" />
+ <label for="zone1">Zone 1</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="zone"
+ id="zone2"
+ value="Zone 2" />
+ <label for="zone2">Zone 2</label>
+ </div>
+ <div>
+ <input type="radio" required checked
+ name="zone"
+ id="zone3"
+ value="Zone 3" />
+ <label for="zone3">Zone 3</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="zone"
+ id="zone4"
+ value="Zone 4" />
+ <label for="zone4">Zone 4</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="zone"
+ id="zone5"
+ value="Zone 5" />
+ <label for="zone5">Zone 5</label>
+ </div>
+
+ <input type="submit" name="go" value="Generate Ticket" />
+
+ <p>
+ <sup>†</sup>
+ On the MTA's PDF schedule for your route
+ </p>
+ </fieldset>
+ </form>
+ <form>
+ <fieldset>
+ <legend>MARC Train</legend>
+
+ <div>
+ <label for="code3">
+ Daily security code (optional):
+ </label>
+ <input id="code3"
+ name="code" value=""
+ type="text"
+ size="2"
+ minlength="2"
+ maxlength="2"
+ pattern="[a-zA-Z0-9]*" />
+ </div>
+
+ <p>Origin:</p>
+ <div>
+ <input type="radio" required checked
+ name="origin"
+ id="origin_BAL"
+ value="BAL" />
+ <label for="origin_BAL">Baltimore/Penn (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="origin"
+ id="origin_BCA"
+ value="BCA" />
+ <label for="origin_BCA">Baltimore/Camden (Camden Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="origin"
+ id="origin_BWE"
+ value="BWE" />
+ <label for="origin_BWE">Bowie State (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="origin"
+ id="origin_BWI"
+ value="BWI" />
+ <label for="origin_BWI">BWI Airport (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="origin"
+ id="origin_CPK"
+ value="CPK" />
+ <label for="origin_CPK">College Park (Camden Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="origin"
+ id="origin_FRC"
+ value="FRC" />
+ <label for="origin_FRC">Frederick (Brunswick Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="origin"
+ id="origin_HAE"
+ value="HAE" />
+ <label for="origin_HAE">Halethorpe (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="origin"
+ id="origin_NCR"
+ value="NCR" />
+ <label for="origin_NCR">New Carrollton (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="origin"
+ id="origin_SEB"
+ value="SEB" />
+ <label for="origin_SEB">Seabrook (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="origin"
+ id="origin_WAS"
+ value="WAS" />
+ <label for="origin_WAS">Washington D.C.</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="origin"
+ id="origin_WBL"
+ value="WBL" />
+ <label for="origin_WBL">West Baltimore (Penn Line)</label>
+ </div>
+
+ <p>Destination:</p>
+ <div>
+ <input type="radio" required
+ name="destination"
+ id="destination_BAL"
+ value="BAL" />
+ <label for="destination_BAL">Baltimore/Penn (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="destination"
+ id="destination_BCA"
+ value="BCA" />
+ <label for="destination_BCA">Baltimore/Camden (Camden Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="destination"
+ id="destination_BWE"
+ value="BWE" />
+ <label for="destination_BWE">Bowie State (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="destination"
+ id="destination_BWI"
+ value="BWI" />
+ <label for="destination_BWI">BWI Airport (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="destination"
+ id="destination_CPK"
+ value="CPK" />
+ <label for="destination_CPK">College Park (Camden Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="destination"
+ id="destination_FRC"
+ value="FRC" />
+ <label for="destination_FRC">Frederick (Brunswick Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="destination"
+ id="destination_HAE"
+ value="HAE" />
+ <label for="destination_HAE">Halethorpe (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="destination"
+ id="destination_NCR"
+ value="NCR" />
+ <label for="destination_NCR">New Carrollton (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="destination"
+ id="destination_SEB"
+ value="SEB" />
+ <label for="destination_SEB">Seabrook (Penn Line)</label>
+ </div>
+ <div>
+ <input type="radio" required checked
+ name="destination"
+ id="destination_WAS"
+ value="WAS" />
+ <label for="destination_WAS">Washington D.C.</label>
+ </div>
+ <div>
+ <input type="radio" required
+ name="destination"
+ id="destination_WBL"
+ value="WBL" />
+ <label for="destination_WBL">West Baltimore (Penn Line)</label>
+ </div>
+
+ <p id="marc-form-errors">OK</p>
+
+ <input type="hidden" name="serviceid" value="R" />
+ <input type="hidden" name="servicename" value="MARC Train" />
+ <input type="submit"
+ name="go"
+ id="marc-submit"
+ value="Generate Ticket" />
+ </fieldset>
+ </form>
+ </div>
+
@SVGDATA@
<script>
- /******************************************/
- /* First, set up the ticket date and time */
- /******************************************/
-
- /* There are two parameters, time and date, that we store in one
- * underlying "date" variable. Default both to an hour and a
- * half from now. This is what the CharmPass app does for
- * one-way tickets.
+
+ /**
+ * Center the ticket within the browser by translating the SVG
+ * until the ticket and the viewport centerlines coincide.
+ */
+ 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 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".
*/
- const date = new Date();
+ function set_service_id() {
+ const sid = document.getElementById("serviceid");
- /* Add an hour and a half. We use the low-level get/setTime to
- * change the number of milliseconds since the epoch that this
- * date represents. Obviously correct, and avoids all suspicious
- * corner cases (well, for a few more decades). */
- date.setTime(date.getTime() + (90*60*1000));
+ /* 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");
+ }
+ }
- /* All <text> elements produced by inkscape contain a single <tspan>
- * that itself contains the actual text. */
- tt = document.getElementById("tickettime");
- tt.firstChild.textContent = date.toLocaleTimeString();
- const td = document.getElementById("ticketdate");
- const dateopts = {
- day: "2-digit",
- month: "2-digit",
- year: "2-digit"
- };
- td.firstChild.textContent = date.toLocaleDateString("en-US", dateopts);
+ /**
+ * 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");
+ }
+ }
- /************************************************************/
- /* Second, add the onclick handler for the night/day switch */
- /************************************************************/
- /* We always start in "day" mode */
- is_day = true;
+ /**
+ * Set the zone from the given "zone" parameter and then unhide it.
+ */
+ function set_zone(zone) {
+ const z = document.getElementById("zone");
- function set_day() {
- sky.style.fill = "#efb02f";
+ z.textContent = zone;
+ z.style.display = "block"; /* hidden by default */
}
- function set_night() {
- sky.style.fill = "#143b66";
+
+ /**
+ * 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)");
+ }
+ }
+
+
+ /**
+ * Set the security code from the querystring if it was given;
+ * otherwise generate a random code.
+ */
+ function set_code() {
+ const ct = document.getElementById("codetext");
+
+ /* Get the "code" from the querystring if it's there */
+ const params = new URLSearchParams(document.location.search);
+ if (params.get("code")) {
+ ct.textContent = params.get("code").toUpperCase();
+ }
+ else {
+ /* Otherwise, use a random code */
+ const bucket = ["0","1","2","3","4","5","6","7","8","9",
+ "A","B","C","D","E","F","G","H","I","J",
+ "K","L","M","N","O","P","Q","R","S","T",
+ "U","V","W","X","Y","Z"];
+
+ /* Two random ints between 0 and 35 */
+ const i1 = Math.floor(Math.random() * 36);
+ const i2 = Math.floor(Math.random() * 36);
+ const d1 = bucket[i1];
+ const d2 = bucket[i2];
+ ct.textContent = d1 + d2;
+ }
}
- function swap_colors() {
- if (is_day) {
- set_night();
- is_day = false;
- }
- else {
- set_day();
- is_day = true;
- }
+
+ /**
+ * Center the security code within its container.
+ *
+ * Some codes like "II" and "WW" can take up wildly different
+ * amounts of horizonetal space, but they should always be
+ * centered inside their little red box. This turns out to be
+ * harder than it sounds because we can only find the width of
+ * the code in browser coordinates, whereas its "x" coordinate
+ * is in SVG coordinates. Anyway, we do it.
+ */
+ function center_code() {
+ /* Center the security code inside its red box */
+ const ct = document.getElementById("codetext");
+ const bg = document.getElementById("codebg");
+
+ /* First, find the center of the red box */
+ const r1 = bg.getBoundingClientRect();
+ const c1 = r1.left + (r1.width / 2);
+
+ /* Now the center of the code text */
+ const r2 = ct.getBoundingClientRect();
+ const c2 = r2.left + (r2.width / 2);
+
+ /* What do we add to c2 to make it equal to c1? */
+ const hdelta = c1 - c2;
+
+ /* We've measured everything so far in "client rect"
+ * coordinates, because that's the only available measurement
+ * we have for the width of the <text> element. But when we
+ * reposition that <text> element, it will be by adjusting its
+ * "x" attribute, and that attribute uses a different coordinate
+ * system than the client rect does. Specifically, "x" refers to
+ * an offset within the SVG's coordinate system, and the client
+ * rect coordinates are pixels on-screen. To convert between the
+ * two, we can take the "width" attribute of the background
+ * element and compare it to the width of the background
+ * element's client rect. Since the size of the background is
+ * fixed, this should give us a multiplier that turns client rect
+ * distances (what we have) into SVG distances (what we want) */
+ const client_to_svg = parseFloat(bg.getAttribute("width"))/r1.width;
+
+ /* Convert hdelta from client rect to SVG coordinates */
+ const svg_hdelta = hdelta * client_to_svg;
+
+ /* Since this <text> element has an "x" attribute it's easier for
+ * us to shift that than it is to mess with the "left" style. */
+ ct.setAttribute("x", parseFloat(ct.getAttribute("x")) + svg_hdelta);
}
- document.body.addEventListener("click", swap_colors);
+ /**
+ * Set the ticket's expiration date and time.
+ *
+ * BaltimoreLink and MARC Train tickets expire after 90 minutes;
+ * while Commuter Bus tickets expire after 10 minutes.
+ */
+ function set_ticket_expiry() {
+ /* There are two parameters, time and date, that we store in one
+ * underlying "date" variable. */
+ const date = new Date();
+ /* BaltimoreLink and MARC Train */
+ let minutes = 90;
+ const params = new URLSearchParams(document.location.search);
+ if (params.get("servicename") === "Commuter Bus") {
+ /* Commuter bus tickets are only valid for ten minutes */
+ minutes = 10;
+ }
- /*************************************************/
- /* 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);
+ /* We use the low-level get/setTime to change the number of
+ * milliseconds since the epoch that this date represents
+ * Obviously correct, and avoids all suspicious corner cases
+ * for a few more decades. */
+ date.setTime(date.getTime() + (minutes*60*1000));
+
+ tt = document.getElementById("tickettime");
+ tt.textContent = date.toLocaleTimeString();
+
+ const td = document.getElementById("ticketdate");
+ const dateopts = {
+ day: "2-digit",
+ month: "2-digit",
+ year: "2-digit"
+ };
+ td.textContent = date.toLocaleDateString("en-US", dateopts);
+ }
+
+
+ /**
+ * Swap the day/night sky colors.
+ *
+ * We use CSS classes to keep track of the current state because
+ * it's a tiny bit cleaner than a global variable, but for some
+ * reason we can't use those same classes to actually change the
+ * color. (The classes, change, but the color doesn't.) Rather
+ * than waste time trying to explain this, we just set the "fill"
+ * attribute ourselves whenever we swap classes.
+ */
+ function swap_day_night() {
+ const sky = document.getElementById("sky");
+
+ if (sky.getAttribute("class") === "night") {
+ sky.setAttribute("fill", "#efb02f");
+ sky.setAttribute("class", "day");
+ }
+ else {
+ /* Put this case second so that the first time the
+ * screen is tapped (when there are no classes on
+ * the sky element) the color still changes. */
+ sky.setAttribute("fill", "#143b66");
+ sky.setAttribute("class", "night");
+ }
+ }
+
+
+ /**
+ * Compute the zone (string) for the given origin/destination pair.
+ *
+ * If we don't know it or if you chose in invalid pair (destination
+ * not on the same line as your origin?) then null is returned.
+ */
+ function compute_marc_zone(src, dest) {
+
+ /* Sorted on the first component, then the second.
+ *
+ * Key:
+ *
+ * $6.00 => 1
+ * $7.00 => 2
+ * $8.00 => 3
+ * $9.00 => 4
+ */
+ const zone_map = {
+ BAL_BWE: 2,
+ BAL_BWI: 1,
+ BAL_HAE: 1,
+ BAL_NCR: 3,
+ BAL_SEB: 3,
+ BAL_WAS: 4,
+ BAL_WBL: 1,
+ BCA_CPK: 3,
+ BCA_WAS: 4,
+ BWE_BWI: 1,
+ BWE_HAE: 1,
+ BWE_NCR: 1,
+ BWE_SEB: 1,
+ BWE_WAS: 2,
+ BWE_WBL: 2,
+ BWI_HAE: 1,
+ BWI_NCR: 2,
+ BWI_SEB: 2,
+ BWI_WAS: 3,
+ BWI_WBL: 1,
+ FRC_WAS: 4,
+ HAE_NCR: 2,
+ HAE_SEB: 2,
+ HAE_WAS: 3,
+ HAE_WBL: 1,
+ NCR_SEB: 1,
+ NCR_WAS: 1,
+ NCR_WBL: 3,
+ SEB_WAS: 1,
+ SEB_WBL: 3,
+ WAS_WBL: 4
+ };
+
+ /* Forward direction key for zone_map */
+ const fwd = src + "_" + dest;
+
+ /* Reverse direction key for zone_map. The zone_map only
+ * has them listed in one direction, so we check both
+ * directions here. */
+ const rev = dest + "_" + src;
+
+ /* The default. Obviously wrong for when we don't
+ * have the necessary data. */
+ let zone = -1;
+
+ if (zone_map[fwd]) {
+ zone = zone_map[fwd];
+ }
+ else if (zone_map[rev]) {
+ zone = zone_map[rev];
+ }
+
+ /* Convert the number to a string */
+ switch (zone) {
+ case 1:
+ return "One Zone";
+ case 2:
+ return "Two Zone";
+ case 3:
+ return "Three Zone";
+ case 4:
+ return "Four Zone";
+ default:
+ return null;
+ }
+ }
+
+
+ /**
+ * Compute and set the zone.
+ *
+ * We can be given a zone in two ways. First, on Commuter Bus
+ * tickets, it is given explicitly via the querystring. But
+ * It can also be specified implicitly via the origin and
+ * destination on a MARC Train ticket. Here we try both and
+ * then call set_zone() with the result if something worked.
+ */
+ function compute_and_set_zone() {
+ const params = new URLSearchParams(document.location.search);
+ const src = params.get("origin");
+ const dest = params.get("destination");
+
+ if (src && dest) {
+ /* MARC Train. We can assume that compute_marc_zone() doesn't
+ * return null because that's part of our form validation. */
+ const zone = compute_marc_zone(src, dest);
+ set_zone(zone);
+ }
+ else if (params.get("zone")) {
+ /* Commuter Bus */
+ set_zone(params.get("zone"));
+ }
+ }
+
+
+ /**
+ * Set the origin and destination for the MARC Train if they
+ * were provided, and unhide them if so.
+ */
+ function set_marc_origin_destination() {
+ const params = new URLSearchParams(document.location.search);
+ if (!params.get("origin") || !params.get("destination")) {
+ return;
+ }
+
+ const src = params.get("origin");
+ const dest = params.get("destination");
+
+ /* origindest contains both the origin and destination */
+ const origindest = document.getElementById("origindest");
+
+ const origin = document.getElementById("origin");
+ const destination = document.getElementById("destination");
+
+ origin.textContent = params.get("origin");
+ destination.textContent = params.get("destination");
+
+ origindest.style.display = "block"; /* hidden by default */
+ }
- /* 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;
+ /**
+ * Hide the menu and display the ticket. This is what happens
+ * when you submit the form.
+ */
+ function go() {
+ /* 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. */
+ document.body.style.overflow = "hidden";
+ document.body.style.margin = "0";
+ document.body.style.padding = "0";
+
+ const svg = document.querySelector("svg");
+ const menu = document.getElementById("menu");
+ svg.style.display = "initial";
+ menu.style.display = "none";
+ }
+
+ /**
+ * Determine if the user agent is mobile Firefox.
+ */
+ function ua_is_mobile_ff() {
+ const ua = navigator.userAgent.toLowerCase();
+ return (ua.includes("firefox") && ua.includes("mobile"));
+ }
+
+ /**
+ * Validate the MARC form's origin/destination.
+ *
+ * We don't want the user to be able to choose a pair of stops that
+ * aren't actually connected by the same MARC line. If we don't have
+ * zone information for the (origin,destination) pair, that indicates
+ * that it's probably not a valid choice; otherwise I would have
+ * filled in the information from the CharmPass app already.
+ *
+ * All browsers except mobile Firefox let us call setCustomValidity()
+ * to provide an error message that is displayed if the user tries
+ * to submit invalid choices. But amazingly, mobile Firefox does not:
+ *
+ * https://bugzilla.mozilla.org/show_bug.cgi?id=1510450
+ *
+ * Instead we have to work around it (in that one browser) by
+ * showing/hiding a paragraph that we fill with the errors.
+ */
+ function validate_origin_destination(event) {
+ const origins = document.getElementsByName("origin");
+ const destinations = document.getElementsByName("destination");
+ const mfe = document.getElementById("marc-form-errors");
+ const marcsubmit = document.getElementById("marc-submit");
+
+ if (ua_is_mobile_ff()) {
+ /* Even though this is only for one browser, empty paragraphs
+ * are handled inconsistently and should be avoided as a rule.
+ * So, we make it say "OK" before we hide it. */
+ mfe.textContent = "OK";
+ mfe.style.visibility = "hidden";
+ marcsubmit.disabled = false;
+ }
+
+ let src = null;
+ let dest = null;
+ origins.forEach((x) => { if (x.checked) src = x; })
+ destinations.forEach((x) => {
+ if (x.checked) dest = x;
+
+ /* clear all errors before possibly setting one */
+ x.setCustomValidity('');
+ })
+
+ if (src.value === dest.value) {
+ let err = "Origin and destination are the same";
+ dest.setCustomValidity(err);
+
+ if (ua_is_mobile_ff()) {
+ mfe.textContent = err;
+ mfe.style.visibility = "visible";
+ marcsubmit.disabled = true;
+ }
+ }
+ else if (compute_marc_zone(src.value, dest.value) === null) {
+ let err = "Origin and destination are on different lines";
+ dest.setCustomValidity(err);
+
+ if (ua_is_mobile_ff()) {
+ mfe.textContent = err;
+ mfe.style.visibility = "visible";
+ marcsubmit.disabled = true;
+ }
+ }
+ }
+
+ /*****************************************************/
+ /* Add event handlers for all of the functions above */
+ /*****************************************************/
+
+ const params = new URLSearchParams(document.location.search);
+ if (params.get("go")) {
+ /* First unhide the SVG (swap it with the form) */
+ window.addEventListener("load", go);
+
+ /* Center the ticket once when the page has loaded */
+ window.addEventListener("load", center_ticket);
+
+ /* Re-center the ticket when the window is resized */
+ window.addEventListener("resize", center_ticket);
+
+ /* Set the service identifier when the page has loaded */
+ window.addEventListener("load", set_service_id);
+
+ /* 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);
- /* 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";
+ /* Set the security code text when the page has loaded */
+ window.addEventListener("load", set_code);
+
+ /* Center the security code text when the page has loaded; in
+ * particular, after we set the code. */
+ window.addEventListener("load", center_code);
+
+ /* Set the ticket expiration date/time upon page load */
+ window.addEventListener("load", set_ticket_expiry);
+
+ /* Set the MARC Train origin and destination, if applicable */
+ window.addEventListener("load", set_marc_origin_destination);
+
+ /* Compute and set the zone, if applicable */
+ window.addEventListener("load", compute_and_set_zone);
+
+ /* Swap colors when the screen is tapped */
+ document.body.addEventListener("click", swap_day_night);
}
+ else {
+ /* If we haven't submitted the form yet, set up change handlers
+ * for the origin/destination radio buttons that validate that
+ * the origin and destination are on the same line. */
+ document.getElementsByName("origin").forEach(
+ (x) => x.addEventListener("change", validate_origin_destination)
+ );
+ document.getElementsByName("destination").forEach(
+ (x) => x.addEventListener("change", validate_origin_destination)
+ );
+
+ /* Also do it when the page loads, because firefox likes to
+ * remember your selection even after the page reloads. */
+ window.addEventListener("load", validate_origin_destination);
- /* Re-center it when the window is resized */
- window.addEventListener("resize", center_ticket);
+ /* Finally, we have to babysit mobile Firefox, who doesn't
+ * support HTML5 form validation going into 2024. Turn on
+ * the little form errors paragraph so we can toggle its
+ * visibility (and make it display the error) when the user
+ * makes an invalid selection. */
+ window.addEventListener("load", () => {
+ if (ua_is_mobile_ff()) {
+ const mfe = document.getElementById("marc-form-errors");
+ mfe.style.display = "block";
+ }
+ });
+ }
- /* Center it once when the page has loaded, too */
- window.addEventListener("load", center_ticket);
</script>
</body>
</html>
projects / charm-bypass.git / blobdiff