feat: add application toast messages

2026-07-24 09:54:19 +01:00
parent 8d4f003b43
commit a478f8972f
3 changed files with 182 additions and 8 deletions
@@ -11,6 +11,11 @@ const DEVICE_ORIENTATION_EVENTS = ["deviceorientationabsolute", "deviceorientati
 const COMPASS_HEADING_DEADBAND = 2;
 const SMALL_SCREEN_MEDIA_QUERY = "(max-width: 920px)";
 const MODAL_VIEWPORT_PADDING = 24;
+const MESSAGE_DURATIONS = {
+  info: 5000,
+  warning: 6500,
+  error: 9000,
+};
 const MAP_URL_PARAMS = {
  latitude: "map-lat",
  longitude: "map-lon",
@@ -25,6 +30,7 @@ const BACKGROUND_VALUES = new Set(["soft", "openstreetmap", "satellite"]);

 const els = {
  appShell: document.querySelector(".app-shell"),
+  messageRegion: document.getElementById("message-region"),
  sidebar: document.getElementById("sidebar"),
  sidebarOpen: document.getElementById("sidebar-open"),
  sidebarClose: document.getElementById("sidebar-close"),
@@ -491,6 +497,56 @@ function updateDeviceCompassButton(message) {
  }
 }

+/**
+ * Display a short, non-blocking application message. Callers can override
+ * `duration` in milliseconds; errors have the longest default reading time.
+ */
+function showMessage(message, { type = "info", duration = MESSAGE_DURATIONS[type] } = {}) {
+  if (!els.messageRegion || !message) {
+    return;
+  }
+
+  const supportedTypes = new Set(Object.keys(MESSAGE_DURATIONS));
+  const messageType = supportedTypes.has(type) ? type : "info";
+  const displayDuration = Number.isFinite(duration) && duration > 0
+    ? duration
+    : MESSAGE_DURATIONS[messageType];
+  const toast = document.createElement("div");
+  toast.className = `message message--${messageType}`;
+  toast.setAttribute("role", messageType === "error" ? "alert" : "status");
+  toast.style.setProperty("--message-duration", `${displayDuration}ms`);
+
+  const text = document.createElement("p");
+  text.className = "message-text";
+  text.textContent = message;
+
+  const dismiss = document.createElement("button");
+  dismiss.className = "message-dismiss";
+  dismiss.type = "button";
+  dismiss.setAttribute("aria-label", "Dismiss message");
+  dismiss.textContent = "×";
+
+  const progress = document.createElement("span");
+  progress.className = "message-progress";
+  progress.setAttribute("aria-hidden", "true");
+
+  let timer = window.setTimeout(removeMessage, displayDuration);
+  function removeMessage() {
+    if (timer === undefined) {
+      return;
+    }
+
+    window.clearTimeout(timer);
+    timer = undefined;
+    toast.classList.add("is-leaving");
+    window.setTimeout(() => toast.remove(), 180);
+  }
+
+  dismiss.addEventListener("click", removeMessage, { once: true });
+  toast.append(text, dismiss, progress);
+  els.messageRegion.append(toast);
+}
+
 function setAreaZoomMode(active) {
  areaZoomInteraction.setActive(active);
  map.getViewport().classList.toggle("area-zoom-is-active", active);
@@ -526,6 +582,7 @@ async function searchParcela(event) {
  const parcelNumber = els.parcelSearchInput.value.trim();
  if (!parcelNumber) {
    updateParcelSearchStatus("Enter a parcel number to search.", "error");
+    showMessage("Enter a parcel number to search.", { type: "warning" });
    return;
  }

@@ -555,6 +612,7 @@ async function searchParcela(event) {

    if (!features.length) {
      updateParcelSearchStatus(`No parcel found with number “${parcelNumber}”.`, "error");
+      showMessage(`No parcel found with number “${parcelNumber}”.`, { type: "warning" });
      return;
    }

@@ -565,15 +623,16 @@ async function searchParcela(event) {
      maxZoom: features.length === 1 ? 19 : 16,
    });

-    updateParcelSearchStatus(
-      features.length === 1
-        ? `Found parcel ${parcelNumber}.`
-        : `Found ${features.length} parcels matching ${parcelNumber}.`,
-      "success",
-    );
+    const searchMessage = features.length === 1
+      ? `Found parcel ${parcelNumber}.`
+      : `Found ${features.length} parcels matching ${parcelNumber}.`;
+    updateParcelSearchStatus(searchMessage, "success");
+    showMessage(searchMessage);
  } catch (error) {
    console.error(error);
-    updateParcelSearchStatus(error.message || "Unable to search for that parcel.", "error");
+    const searchMessage = error.message || "Unable to search for that parcel.";
+    updateParcelSearchStatus(searchMessage, "error");
+    showMessage(searchMessage, { type: "error" });
  }
 }

@@ -610,7 +669,9 @@ async function loadLayers() {
    updateStatus(`Showing ${availableLayers.length} layer(s) from GeoServer.`, "success");
  } catch (error) {
    console.error(error);
-    updateStatus(error.message || "Unable to load the WMS service.", "error");
+    const loadMessage = error.message || "Unable to load the WMS service.";
+    updateStatus(loadMessage, "error");
+    showMessage(loadMessage, { type: "error" });
    availableLayers = [];
    selectedLayers = [];
    dwellingParcelSource.clear();
@@ -1141,6 +1202,7 @@ function fitToVisibleLayers() {

  if (!projectedExtents.length) {
    updateStatus("Select a layer with a published extent to zoom to it.", "error");
+    showMessage("Select a layer with a published extent to zoom to it.", { type: "warning" });
    return;
  }

@@ -9,6 +9,14 @@
  </head>
  <body>
    <div class="app-shell">
+      <div
+        id="message-region"
+        class="message-region"
+        aria-label="Application messages"
+        aria-live="polite"
+        aria-relevant="additions"
+      ></div>
+
      <button
        id="sidebar-open"
        class="sidebar-toggle sidebar-open"
@@ -29,6 +29,110 @@ body {
  min-height: 100vh;
 }

+.message-region {
+  position: fixed;
+  z-index: 30;
+  top: 24px;
+  left: 50%;
+  display: grid;
+  width: min(420px, calc(100vw - 32px));
+  gap: 10px;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+.message {
+  --message-background: #1f7a62;
+  --message-progress: #125441;
+  position: relative;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 12px;
+  overflow: hidden;
+  padding: 14px 12px 16px 16px;
+  border: 1px solid rgba(255, 255, 255, 0.4);
+  border-radius: 16px;
+  background: var(--message-background);
+  color: #fff;
+  box-shadow: 0 16px 36px rgba(31, 42, 46, 0.26);
+  pointer-events: auto;
+  animation: message-enter 180ms ease-out;
+}
+
+.message--warning {
+  --message-background: #c76a13;
+  --message-progress: #914605;
+}
+
+.message--error {
+  --message-background: #b9382e;
+  --message-progress: #7f201a;
+}
+
+.message.is-leaving {
+  animation: message-leave 180ms ease-in forwards;
+}
+
+.message-text {
+  margin: 0;
+  font-weight: 650;
+  line-height: 1.35;
+}
+
+.message-dismiss {
+  width: 28px;
+  height: 28px;
+  min-width: 28px;
+  padding: 0;
+  border: 1px solid rgba(255, 255, 255, 0.45);
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  box-shadow: none;
+  font-size: 1.35rem;
+  line-height: 1;
+}
+
+.message-dismiss:hover,
+.message-dismiss:focus-visible {
+  background: rgba(255, 255, 255, 0.18);
+  outline: 2px solid #fff;
+  outline-offset: 2px;
+}
+
+.message-progress {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 4px;
+  background: var(--message-progress);
+  transform-origin: right;
+  animation: message-countdown var(--message-duration) linear forwards;
+}
+
+@keyframes message-enter {
+  from { opacity: 0; transform: translateY(-10px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes message-leave {
+  to { opacity: 0; transform: translateY(-8px); }
+}
+
+@keyframes message-countdown {
+  to { transform: scaleX(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .message,
+  .message.is-leaving,
+  .message-progress {
+    animation-duration: 1ms;
+  }
+}
+
 .app-shell {
  position: relative;
  min-height: 100vh;