Skip to content

refactor(map-engine): Mustache popup templates, CSS classes, feed name in multi-feed popups#46

Merged
techtimo merged 5 commits intomainfrom
feat/popup-html-styling
Apr 15, 2026
Merged

refactor(map-engine): Mustache popup templates, CSS classes, feed name in multi-feed popups#46
techtimo merged 5 commits intomainfrom
feat/popup-html-styling

Conversation

@techtimo
Copy link
Copy Markdown
Owner

Summary

  • Bundle vendor deps — Leaflet, all plugins, Font Awesome, and custom CSS are
    now imported directly in src/map-engine/index.ts and packed into the single
    build/spotmap-map.js + build/spotmap-map.css output. Eliminates scripts/copy-deps.js
    and the public/ vendor subdirectories. Fixes a class of issues where WordPress
    caching/optimisation plugins reorder or concatenate the previously separate Leaflet
    script tags and break the dependency chain.

  • Mustache popup templates — replaces string concatenation in MarkerManager.getPopupHtml()
    with a single data-presence-driven Mustache template (popup-templates.ts). A buildView()
    function shapes the SpotPoint into a flat view object; the template renders only
    the fields that are present, with no type-branching inside the template itself.

  • CSS classes for popup styles — inline style="" attributes on popup elements are
    replaced with .spotmap-popup-image, .spotmap-popup-excerpt, and .spotmap-popup-date
    classes in a new popup.css, making popup appearance overridable via CSS.

  • Feed name in multi-feed popups — when a map has more than one feed configured,
    the feed name is shown inline with the point type header (e.g. OK — Tracker A).
    Single-feed maps are unaffected.

Import Leaflet, all plugins, Font Awesome, and custom CSS directly in
src/map-engine/index.ts so webpack packs everything into the single
build/spotmap-map.js + build/spotmap-map.css output. This eliminates
the copy-deps.js script and the public/ vendor subdirectories entirely.

window.L is explicitly assigned after import so future Leaflet plugins
loaded as separate <script> tags still find the global, matching the
behaviour of the old enqueue-based approach.

Fixes a class of issues where WordPress caching/optimisation plugins
reorder or concatenate the previously separate Leaflet script tags and
break the dependency chain.

https://claude.ai/code/session_01AAsqtsybGk9VPJ4FmggxBC
@codecov
Copy link
Copy Markdown

codecov bot commented Apr 15, 2026

Codecov Report

❌ Patch coverage is 91.30435% with 2 lines in your changes missing coverage. Please review.

Files with missing lines Patch % Lines
src/map-engine/MarkerManager.ts 66.66% 2 Missing ⚠️

📢 Thoughts on this report? Let us know!

@techtimo techtimo merged commit 2cc46f6 into main Apr 15, 2026
3 checks passed
techtimo added a commit that referenced this pull request Apr 15, 2026
…e in multi-feed popups (#46)

* refactor: bundle all vendor deps into spotmap-map.js, drop copy-deps

Import Leaflet, all plugins, Font Awesome, and custom CSS directly in
src/map-engine/index.ts so webpack packs everything into the single
build/spotmap-map.js + build/spotmap-map.css output. This eliminates
the copy-deps.js script and the public/ vendor subdirectories entirely.

window.L is explicitly assigned after import so future Leaflet plugins
loaded as separate <script> tags still find the global, matching the
behaviour of the old enqueue-based approach.

Fixes a class of issues where WordPress caching/optimisation plugins
reorder or concatenate the previously separate Leaflet script tags and
break the dependency chain.

https://claude.ai/code/session_01AAsqtsybGk9VPJ4FmggxBC

* fix global var

* complete change

* test(map-engine): cover POST branch in buildView and MarkerManager feedCount instance path
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant