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 .= '
'; + $html .= '

'; $html .= '
'; $html .= '
Laster kart…
'; $html .= '
';