Stub for dynamic menu (WIP)
This commit is contained in:
parent
5b5d0aeb3d
commit
41dca4f563
@ -25,7 +25,7 @@
|
|||||||
<script src="js/index.js" type="module"></script>
|
<script src="js/index.js" type="module"></script>
|
||||||
<title>WebGIS Isola di Capri</title>
|
<title>WebGIS Isola di Capri</title>
|
||||||
</head>
|
</head>
|
||||||
<body data-controller="menu">
|
<body data-controller="menu" data-action="menu-ready@document->menu#buildMenu">
|
||||||
<nav class="navbar mb-0" role="navigation">
|
<nav class="navbar mb-0" role="navigation">
|
||||||
<div class="navbar-brand">
|
<div class="navbar-brand">
|
||||||
<a href="/" class="navbar-item is-size-5 has-text-dark ml-4" title="Torna alla home page">
|
<a href="/" class="navbar-item is-size-5 has-text-dark ml-4" title="Torna alla home page">
|
||||||
|
@ -1,8 +1,36 @@
|
|||||||
import { Controller } from "@hotwired/stimulus"
|
import { Controller } from "@hotwired/stimulus"
|
||||||
|
import { GisState } from '../state.js';
|
||||||
|
|
||||||
export default class extends Controller {
|
export default class extends Controller {
|
||||||
static targets = ['list', 'menu', 'icon'];
|
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() {
|
toggleMenu() {
|
||||||
this.menuTarget.classList.toggle('is-hidden');
|
this.menuTarget.classList.toggle('is-hidden');
|
||||||
}
|
}
|
||||||
|
@ -175,7 +175,7 @@ GIS.sites = async function () {
|
|||||||
sites.addLayer(marker);
|
sites.addLayer(marker);
|
||||||
// Populate app state for reuse and avoid window.Sites etc.
|
// Populate app state for reuse and avoid window.Sites etc.
|
||||||
// Municipality (Capri, Anacapri) added for reuse in dynamic menu
|
// 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]}`;
|
const markerIndex = `${record.coordinates[0]} ${record.coordinates[1]}`;
|
||||||
GisState.markers.sites[markerIndex] = marker;
|
GisState.markers.sites[markerIndex] = marker;
|
||||||
}
|
}
|
||||||
|
@ -18,6 +18,10 @@ document.addEventListener('DOMContentLoaded', async () => {
|
|||||||
|
|
||||||
map._container.setAttribute('aria-busy', false);
|
map._container.setAttribute('aria-busy', false);
|
||||||
|
|
||||||
|
// Trigger Stimulus buildMenu method...
|
||||||
|
const menuEvent = new Event('menu-ready');
|
||||||
|
document.dispatchEvent(menuEvent);
|
||||||
|
|
||||||
GIS.toggleSpherical(map);
|
GIS.toggleSpherical(map);
|
||||||
|
|
||||||
UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
|
UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
|
||||||
|
Loading…
Reference in New Issue
Block a user