stopplidelsen/innhold
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Increase petition map animation duration to 30 seconds

Browse source 
Add lazy initialization for petition map
Update documentation with new positioning guidance
Note full-width section rendering behavior
This commit is contained in:
Ruben 2026-02-26 21:40:56 +01:00
parent a7829982d0
commit bd993ea6ca
2 changed files with 6 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

2
custom/assets/petition-map.js
View file

@ -292,7 +292,7 @@
[allDots[i], allDots[j]] = [allDots[j], allDots[i]]; [allDots[i], allDots[j]] = [allDots[j], allDots[i]];
} }
const duration = 6000; // ms total animation window const duration = 30000; // ms total animation window
const msPerDot = Math.max(1, duration / Math.max(1, allDots.length)); const msPerDot = Math.max(1, duration / Math.max(1, allDots.length));
allDots.forEach((dot, i) => { allDots.forEach((dot, i) => {

7
custom/plugins/page/petiton-map.docs.md
View file

@ -10,12 +10,14 @@ In a page's `metadata.ini` (must also have petition-form loaded first):
plugins = "petition-form, petition-map" plugins = "petition-form, petition-map"
``` ```
Embed in a content file (e.g. `85-kart.php`): Embed in a content file (e.g. `90-form.php`, between the form and the signatures list):
```php ```php
<?= $petition_map ?? '' ?> <?= $petition_map ?? '' ?>
``` ```
The plugin renders a `<section class="petition-map-section escape">` which breaks out of the content grid to fill the full page width.
## Architecture ## Architecture
``` ```
@ -87,7 +89,8 @@ petition-map.js (client-side)
- **Point placement**: rejection sampling within fylke polygon bounding box, ray-casting point-in-polygon test, 4% edge inset - **Point placement**: rejection sampling within fylke polygon bounding box, ray-casting point-in-polygon test, 4% edge inset
- **Label rendering**: `L.tooltip({ permanent: true })` bound to invisible zero-size `L.marker` in a custom `dots` pane (z-index 450) - **Label rendering**: `L.tooltip({ permanent: true })` bound to invisible zero-size `L.marker` in a custom `dots` pane (z-index 450)
- **Initial animation**: all labels shuffled (Fisher-Yates) and staggered over 4.5s - **Lazy init**: map initialises only when `#petition-map` enters the viewport (IntersectionObserver, 10% threshold); falls back to immediate init on older browsers
- **Initial animation**: all labels shuffled (Fisher-Yates) and staggered over 6s
- **Polling**: fetches data JSON every 60s with cache-bust timestamp; new signers added immediately - **Polling**: fetches data JSON every 60s with cache-bust timestamp; new signers added immediately
- **Fylke interaction**: hover highlights polygon, click shows popup with fylke name + count - **Fylke interaction**: hover highlights polygon, click shows popup with fylke name + count