Fix post-overhaul audit findings

docs/assets/javascripts/i18n-runtime.js

@@ -37,6 +37,7 @@
     "2. Choose an area": "2. Choisir une zone",
     "Province or territory": "Province ou territoire",
     "Loading editor…": "Chargement de l’éditeur…",
+    "Choose a proposal type to load the editor.": "Choisissez un type de proposition pour charger l’éditeur.",
     "Choose a proposal type to begin.": "Choisissez un type de proposition pour commencer.",
     "Discard saved draft": "Supprimer le brouillon enregistré",
     "3. Build the proposal": "3. Préparer la proposition",
@@ -107,6 +108,7 @@
     "Website": "Site Web",
     "Anti-spam check": "Vérification antipourriel",
     "Loading check…": "Chargement de la vérification…",
+    "The anti-spam check loads when you reach this step.": "La vérification antipourriel se charge lorsque vous arrivez à cette étape.",
     "Retry check": "Réessayer la vérification",
     "Submit for review": "Soumettre aux fins d’examen",
     "Download proposal": "Télécharger la proposition",

docs/config/editor/app.js

@@ -164,6 +164,7 @@ import {
     after: document.getElementById("after-view"),
     changeCount: document.getElementById("change-count"),
     textSummary: document.getElementById("text-summary"),
+    reviewPanel: document.getElementById("review-panel"),
     changesTableBody: document.getElementById("changes-table-body"),
     changesTableNote: document.getElementById("changes-table-note"),
     readinessList: document.getElementById("readiness-list"),
@@ -187,7 +188,6 @@ import {
 
   var state = {
     catalog: null,
-    partition: null,
     membership: new Map(),
     baseMembershipSha256: "",
     features: [],
@@ -235,12 +235,6 @@ import {
     attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
   }).addTo(map);
 
-  var partitionLayer = L.geoJSON(null, {
-    interactive: false,
-    style: function () {
-      return { color: "#8d93ae", weight: 1, opacity: 0.4, fillOpacity: 0.025 };
-    }
-  }).addTo(map);
   var cellLayer = L.geoJSON(null, {
     style: styleFeature,
     onEachFeature: wireCell
@@ -1271,7 +1265,7 @@ import {
 
   async function loadProvince(pruid) {
     if (!pruid) {
-      return;
+      return false;
     }
     if (state.loadController) {
       state.loadController.abort();
@@ -1318,15 +1312,15 @@ import {
       if (cellLayer.getBounds().isValid()) {
         map.fitBounds(cellLayer.getBounds(), { padding: [18, 18] });
       }
-      partitionLayer.bringToBack();
       setStatus(
         state.features.length.toLocaleString() + " census cells loaded.",
         "success"
       );
+      return true;
     } catch (error) {
       if (error.name === "AbortError") {
         state.restoringDraft = false;
-        return;
+        return false;
       }
       state.membership.clear();
       state.features = [];
@@ -1335,6 +1329,7 @@ import {
       cellLayer.clearLayers();
       state.restoringDraft = false;
       setStatus(error.message, "error");
+      return false;
     }
   }
 
@@ -1519,7 +1514,7 @@ import {
   }
 
   async function initialiseSubmission() {
-    if (state.submissionInitialising) return;
+    if (state.submissionInitialising || state.turnstileWidgetId !== null) return;
     state.submissionInitialising = true;
     elements.antiSpamRetry.hidden = true;
     setAntiSpamStatus("Loading check…", "");
@@ -1703,28 +1698,67 @@ import {
     await loadProvince(nextProvince);
   }
 
-  async function initialise() {
+  var editorInitialisePromise = null;
+
+  async function loadEditor() {
+    document.documentElement.dataset.editorState = "loading";
     setStatus("Loading editor…", "");
+    elements.proposalTypes.forEach(function (input) { input.disabled = true; });
     try {
       state.catalog = await (await fetchOk("canada-regions.json")).json();
       await loadMembershipCsv();
       var manifest = null;
       try { manifest = await (await fetchOk("cells/manifest.json")).json(); } catch (_e) {}
       populateProvinceOptions(manifest);
-      try {
-        var partition = await (await fetchOk("canada-region-partition.geojson")).json();
-        partitionLayer.clearLayers();
-        partitionLayer.addData(partition);
-      } catch (_e) {}
-      await loadProvince(elements.province.value);
+      if (!await loadProvince(elements.province.value)) {
+        document.documentElement.dataset.editorState = "error";
+        editorInitialisePromise = null;
+        return false;
+      }
+      document.documentElement.dataset.editorState = "ready";
+      return true;
     } catch (error) {
       setStatus(error.message, "error");
+      document.documentElement.dataset.editorState = "error";
+      editorInitialisePromise = null;
+      return false;
+    } finally {
+      elements.proposalTypes.forEach(function (input) { input.disabled = false; });
+    }
+  }
+
+  function initialise() {
+    if (!editorInitialisePromise) editorInitialisePromise = loadEditor();
+    return editorInitialisePromise;
+  }
+
+  var submissionTriggersReady = false;
+
+  function prepareSubmissionWhenNeeded() {
+    if (submissionTriggersReady) return;
+    submissionTriggersReady = true;
+    var start = function () { void initialiseSubmission(); };
+    elements.reviewPanel.addEventListener("focusin", start, { once: true });
+    elements.reviewPanel.addEventListener("pointerdown", start, { once: true });
+    if ("IntersectionObserver" in window) {
+      var observer = new IntersectionObserver(function (entries) {
+        if (!entries.some(function (entry) { return entry.isIntersecting; })) return;
+        observer.disconnect();
+        start();
+      }, { rootMargin: "200px" });
+      observer.observe(elements.reviewPanel);
     }
   }
 
   elements.proposalTypes.forEach(function (input) {
-    input.addEventListener("change", function () {
-      if (input.checked) changeProposalType(input.value);
+    input.addEventListener("change", async function () {
+      if (!input.checked) return;
+      if (!await initialise()) {
+        input.checked = false;
+        return;
+      }
+      await changeProposalType(input.value);
+      prepareSubmissionWhenNeeded();
     });
   });
   elements.province.addEventListener("change", function () {
@@ -1863,6 +1897,4 @@ import {
   });
   window.addEventListener("beforeunload", flushDraftSave);
 
-  initialise();
-  initialiseSubmission();
 }());

docs/config/editor/index.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" data-editor-state="waiting">
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -11,8 +11,8 @@
   <link rel="stylesheet" href="../../assets/regions/vendor/leaflet/leaflet.css">
   <link rel="stylesheet" href="./editor.css?v=20260722-2">
   <script defer src="../../assets/regions/vendor/leaflet/leaflet.js"></script>
-  <script defer src="../../assets/javascripts/i18n-runtime.js?v=20260723-1"></script>
-  <script type="module" src="./app.js?v=20260722-2"></script>
+  <script defer src="../../assets/javascripts/i18n-runtime.js?v=20260829-1"></script>
+  <script type="module" src="./app.js?v=20260829-1"></script>
 </head>
 <body class="editor-page">
   <a class="skip-link" href="#geography-list">Skip the map and choose a municipality</a>
@@ -64,7 +64,7 @@ <h2>1. Choose proposal type</h2>
         <h2>2. Choose an area</h2>
         <label for="province-select">Province or territory</label>
         <select id="province-select" disabled></select>
-        <p id="load-status" class="status-line" role="status" aria-live="polite">Loading editor…</p>
+        <p id="load-status" class="status-line" role="status" aria-live="polite">Choose a proposal type to load the editor.</p>
         <p id="draft-status" class="draft-status" role="status" aria-live="polite">Choose a proposal type to begin.</p>
         <button id="discard-draft-button" class="inline-retry" type="button" hidden>Discard saved draft</button>
       </section>
@@ -134,7 +134,7 @@ <h2>Map inspection</h2>
         </div>
       </section>
 
-      <section class="panel">
+      <section class="panel" id="review-panel">
         <div class="panel-title-row">
           <h2>4. Review</h2>
           <span id="change-count" class="count-badge">0 changes</span>
@@ -179,7 +179,7 @@ <h3>Ready to submit?</h3>
           <input id="website" name="website" tabindex="-1" autocomplete="off">
         </div>
         <div id="turnstile-container" class="turnstile-container" role="group" aria-label="Anti-spam check"></div>
-        <p id="anti-spam-status" class="anti-spam-status" role="status" aria-live="polite">Loading check…</p>
+        <p id="anti-spam-status" class="anti-spam-status" role="status" aria-live="polite">The anti-spam check loads when you reach this step.</p>
         <button id="anti-spam-retry" class="inline-retry" type="button" hidden>Retry check</button>
         <div id="validation-message" class="validation-message" role="status" aria-live="polite"></div>
         <div id="submission-result" class="submission-result" role="status" aria-live="polite"></div>