Stub for dynamic menu (WIP)

This commit is contained in:
Nicolò P. 2025-06-03 11:42:06 +02:00
parent 5b5d0aeb3d
commit 41dca4f563
4 changed files with 34 additions and 2 deletions

View File

@ -25,7 +25,7 @@
<script src="js/index.js" type="module"></script>
<title>WebGIS Isola di Capri</title>
</head>
<body data-controller="menu">
<body data-controller="menu" data-action="menu-ready@document->menu#buildMenu">
<nav class="navbar mb-0" role="navigation">
<div class="navbar-brand">
<a href="/" class="navbar-item is-size-5 has-text-dark ml-4" title="Torna alla home page">

View File

@ -1,8 +1,36 @@
import { Controller } from "@hotwired/stimulus"
import { GisState } from '../state.js';
export default class extends Controller {
static targets = ['list', 'menu', 'icon'];
buildMenu() {
let ulAnacapri = document.createElement('ul');
ulAnacapri.id = 'siti-anacapri-sub';
ulAnacapri.className = 'is-hidden';
console.log(GisState.markers.sites);
for (let key in GisState.markers.sites) {
if (GisState.markers.sites[key].options.municipality === 'Anacapri') {
const li = document.createElement('li');
li.innerHTML = `
<a class="is-block button"
data-action="marker#go"
data-controller="marker"
data-marker-coords-value="${key}"
data-marker-group-value="sites">
${GisState.markers.sites[key].options.label}
</a>
`;
ulAnacapri.appendChild(li);
}
}
console.log(ulAnacapri);
}
toggleMenu() {
this.menuTarget.classList.toggle('is-hidden');
}

View File

@ -175,7 +175,7 @@ GIS.sites = async function () {
sites.addLayer(marker);
// Populate app state for reuse and avoid window.Sites etc.
// Municipality (Capri, Anacapri) added for reuse in dynamic menu
marker.options.municipalilty = record.municipalilty;
marker.options.municipality = record.municipality;
const markerIndex = `${record.coordinates[0]} ${record.coordinates[1]}`;
GisState.markers.sites[markerIndex] = marker;
}

View File

@ -18,6 +18,10 @@ document.addEventListener('DOMContentLoaded', async () => {
map._container.setAttribute('aria-busy', false);
// Trigger Stimulus buildMenu method...
const menuEvent = new Event('menu-ready');
document.dispatchEvent(menuEvent);
GIS.toggleSpherical(map);
UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);