+ /**
+ * 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);
+
+ /* 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);
+
+ /* 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";
+ }
+ });
+ }