From e8919e5842b6a7445a649780708e43632a7827eb Mon Sep 17 00:00:00 2001
From: Ruben <post@rubensolvang.no>
Date: Thu, 26 Feb 2026 22:21:41 +0100
Subject: [PATCH] Add animated counter to petition map

Update petition map counter to show animated count of signatures
with matching timing to dot animation and improved text formatting

Remove redundant header styles from CSS
Move counter styling to dedicated CSS section

Update counter text to be more concise and present tense
---
 custom/assets/petition-map.css       | 26 ++++++++------------------
 custom/assets/petition-map.js        | 25 ++++++++++++++++++++++---
 custom/plugins/page/petition-map.php |  1 +
 3 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/custom/assets/petition-map.css b/custom/assets/petition-map.css
index f8239e3..be99ec4 100644
--- a/custom/assets/petition-map.css
+++ b/custom/assets/petition-map.css
@@ -1,24 +1,6 @@
 /* Petition map page styles */
 
 .petition-map-section {
-  margin-top: 2rem;
-
-  .petition-map-header {
-    background: var(--color-green-light);
-    padding-block: 1.5rem 1rem;
-    margin-bottom: 0;
-
-    h1 {
-      margin-top: 0;
-      font-size: clamp(1.4rem, 4vw, 2rem);
-    }
-
-    .petition-map-subtitle {
-      color: oklch(0.45 0.05 173.93);
-      font-size: 0.95rem;
-      margin-top: 0.4rem;
-    }
-  }
 
   #petition-map {
     position: relative;
@@ -113,3 +95,11 @@
   }
 }
 
+/* Petition map counter */
+#petition-map-count {
+  background: var(--color-green-light);
+  padding: 0 1.5rem 1rem;
+  margin-bottom: 0;
+  text-align: center;
+  color: var(--color-green);
+}
diff --git a/custom/assets/petition-map.js b/custom/assets/petition-map.js
index db79afa..73d2afd 100644
--- a/custom/assets/petition-map.js
+++ b/custom/assets/petition-map.js
@@ -264,9 +264,28 @@
   function updateCountLabel(total) {
     const el = document.getElementById('petition-map-count');
     if (!el) return;
-    el.textContent = total === 1
-      ? '1 person har signert fra hele Norge'
-      : `${total.toLocaleString('nb-NO')} personer har signert fra hele Norge`;
+
+    // Count up animation to match dot animation
+    let current = 0;
+    const target = total;
+    const duration = 30000; // Same as dot animation
+    const startTime = performance.now();
+
+    function updateCounter(timestamp) {
+      const elapsed = timestamp - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+      current = Math.floor(progress * target);
+
+      el.textContent = current === 1
+        ? '1 person har signert så langt'
+        : `${current} personer har signert så langt`;
+
+      if (progress < 1) {
+        requestAnimationFrame(updateCounter);
+      }
+    }
+
+    requestAnimationFrame(updateCounter);
   }
 
   /** Initial render: place all dots with one smooth staggered animation */
diff --git a/custom/plugins/page/petition-map.php b/custom/plugins/page/petition-map.php
index c3a5a19..e2ddce6 100644
--- a/custom/plugins/page/petition-map.php
+++ b/custom/plugins/page/petition-map.php
@@ -139,6 +139,7 @@ function petitionMapRenderWidget(Context $ctx): string {
 
     // Map container
     $html .= '<section class="petition-map-section escape">';
+    $html .= '<h1 id="petition-map-count" class="petition-map-count" aria-live="polite"></h1>';
     $html .= '<div id="petition-map" aria-label="Kart over underskrifter i Norge">';
     $html .= '<div class="map-loading" id="map-loading" aria-live="polite">Laster kart…</div>';
     $html .= '</div>';