nicolo/caprigis
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Update menu

Browse Source 
TODO: coords for sites
This commit is contained in:
Nicolò P 2024-11-27 13:50:48 +01:00
parent 211379b986
commit 7f4bd571f0
5 changed files with 165 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

144
webgis/index.html
View File

@ -46,27 +46,13 @@
<span class="icon mr-2">
<i class="fa fa-list"></i>
</span>
Apri menu
Elenco beni
</button>
<button class="button is-outlined is-rounded is-link mr-4 mt-1" id="howto" title="Istruzioni">
<span class="icon is-large has-text-link">
<i class="fas fa-question fa-lg"></i>
</span>
</button>
<!--
<button class="navbar-item button is-size-5 is-white" role="button"
data-action="click->menu#toggleMenu" data-id="siti">
Beni archeologici
</button>
<button class="navbar-item button is-size-5 is-white" role="button"
data-action="click->menu#toggleMenu" data-id="non-conser">
Beni non conservati
</button>
<button class="navbar-item button is-size-5 is-white mr-3" role="button"
data-action="click->menu#toggleMenu" data-id="rinv">
Rinvenimenti
</button>
-->
</div>
</nav>
<div class="wait-lg text-center is-hidden" style="clear: both;">
@ -89,8 +75,13 @@
</p>
<ul class="menu-list is-hidden" id="siti-list" data-menu-target="list">
<li>
Anacapri
<ul id="siti-anacapri-sub">
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="siti-anacapri-sub">
Anacapri
<span class="icon ml-2">
<i class="fa fa-chevron-right" data-menu-target="icon"></i>
</span>
</span>
<ul id="siti-anacapri-sub" class="is-hidden">
<li>
<a class="is-block button" title="Vai al sito Villa di Gradola" id="grotta_azzurra">
Grotta Azzurra
@ -123,9 +114,14 @@
</li>
</ul>
</li>
<li>
Capri
<ul id="siti-capri-sub">
<li class="mt-3">
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="siti-capri-sub">
Capri
<span class="icon ml-2">
<i class="fa fa-chevron-right" data-menu-target="icon"></i>
</span>
</span>
<ul id="siti-capri-sub" class="is-hidden">
<li>
<a class="button" id="tiberio">
Bagni di Tiberio
@ -158,30 +154,105 @@
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="non-conser"></i>
</span>
</p>
<ul class="menu-list is-hidden" id="non-conser-list" data-menu-target="list">
<li>
Anacapri
<ul id="noncons-anacapri-sub">
<ul class="menu-list is-hidden" id="non-conser-list" data-menu-target="list" data-controller="marker">
<li data-list-id="noncons-anacapri-sub">
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="noncons-anacapri-sub">
Anacapri
<span class="icon ml-2 is-small" data-list-id="noncons-anacapri-sub">
<i class="fa fa-chevron-right"></i>
</span>
</span>
<ul id="noncons-anacapri-sub" class="is-hidden">
<li>
<a class="button" id="cala">
<a class="button" data-action="click->marker#go" data-coords="40.5595565 14.2003896">
Cala a mare - resti di ambienti
</a>
</li>
<li>
<a class="button" id="campetiello">
<a class="button" data-action="click->marker#go" data-coords="40.549026 14.196911">
Punta Campetiello - scala
</a>
</li>
<li>
<a class="button" id="castagnaro">
<a class="button" data-action="click->marker#go" data-coords="40.5501214 14.2198544">
Castagnaro - area funeraria
</a>
</li>
<li>
<a class="button" id="ceselle">
<a class="button" data-action="click->marker#go" data-coords="40.55129683 14.21261142">
Ceselle - necropoli
</a>
</li>
<li>
<a class="button" data-action="click->marker#go" data-coords="40.5533744 14.2178754">
Località Piscina - complesso idraulico
</a>
</li>
<li>
<a class="button" data-action="click->marker#go" data-coords="40.5546467 14.2092143">
La Cera - ambienti voltati
</a>
</li>
<li>
<a class="button" data-action="click->marker#go" data-coords="40.5495555 14.2108741">
Cesa - complesso idraulico
</a>
</li>
<li>
<a class="button" data-action="click->marker#go" data-coords="40.5575337 14.2027513">
La Fabbrica - resti murari
</a>
</li>
<li>
<a class="button" data-action="click->marker#go" data-coords="40.5530655 14.201767">
Lupinaro - resti murari
</a>
</li>
<li>
<a class="button" data-action="click->marker#go" data-coords="40.5399801 14.2092552">
Migliara Belvedere - frammenti erratici
</a>
</li>
<li>
<a class="button" data-action="click->marker#go" data-coords="40.5451791 14.2233019">
Monte Solaro - vaso corinzio
</a>
</li>
<li>
<a class="button" data-action="click->marker#go" data-coords="40.5523988 14.2087281">
Monticello - “Vaso di Monticello”
</a>
</li>
<li>
<a class="button" data-action="click->marker#go" data-coords="40.5521975 14.2107296">
Monticello - “Villa di Monticello”
</a>
</li>
<li>
<a class="button" data-action="click->marker#go" data-coords="40.5559514 14.2197966">
Pastena - strutture murarie
</a>
</li>
<li>
<a class="button" data-action="click->marker#go" data-coords="40.546923 14.2173871">
Petracquale - ruderi indeterminati
</a>
</li>
<li>
<a class="button" data-action="click->marker#go" data-coords="40.55666444 14.21446043">
Timberino - impianto idraulico
</a>
</li>
<li>
<a class="button" data-action="click->marker#go" data-coords="40.5590486 14.1984242">
Vetereto - ambienti voltati
</a>
</li>
<li>
<a class="button" data-action="click->marker#go" data-coords="40.556597 14.214518">
Veterino - complesso residenziale
</a>
</li>
</ul>
</li>
</ul>
@ -194,17 +265,24 @@
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="rinv"></i>
</span>
</p>
<ul class="menu-list is-hidden" id="rinv-list" data-menu-target="list">
<ul class="menu-list is-hidden" id="rinv-list" data-menu-target="list" data-controller="marker">
<li>
Anacapri
<ul id="rinv-anacapri-sub">
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="rinv-anacapri-sub">
Anacapri
<span class="icon ml-2">
<i class="fa fa-chevron-right" data-menu-target="icon"></i>
</span>
</span>
<ul id="rinv-anacapri-sub" class="is-hidden">
<li>
<a class="button" id="affresco_dame">
<a class="button" id="affresco_dame" data-marker-target="coords"
data-coords="40.55939119 14.20064002" data-action="click->marker#go">
Affresco Villa di Damecuta
</a>
</li>
<li>
<a class="button" id="candelabro">
<a class="button" id="candelabro" data-marker-target="coords"
data-coords="40.5565536 14.2133073" data-action="click->marker#go">
Base di candelabro
</a>
</li>

42
webgis/js/controllers/marker_controller.js Normal file
View File

@ -0,0 +1,42 @@
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static targets = ['coords'];
mapAnimate = {
animate: true,
duration: 1,
easeLinearity: 0.25
};
go(event) {
let map = window.LMap;
const coords = event.currentTarget.getAttribute('data-coords').split(' ');
map.setView(
coords,
19,
this.mapAnimate
);
let marker = this.getMarker(map, coords);
marker.openTooltip();
}
getMarker(map, coords) {
let marker;
map.eachLayer(l => {
if (l instanceof L.Marker) {
const latLng = l.getLatLng();
const lat = latLng['lat'];
const lng = latLng['lng'];
if (lat === Number(coords[0]) && lng === Number(coords[1])) {
marker = l;
return;
}
}
});
return marker;
}
}

12
webgis/js/controllers/menu_controller.js
View File

@ -19,8 +19,16 @@ export default class extends Controller {
this.menuTarget.classList.add('is-hidden');
}
openList(id) {
document.querySelector(id).classList.remove('is-hidden');
toggleList(id) {
document.querySelector(`#${id}`).classList.toggle('is-hidden');
}
openSubList(event) {
const target = event.currentTarget;
const targetIcon = target.querySelector('.fa');
const id = target.getAttribute('data-list-id');
this.toggleList(id);
this.toggleIcon(targetIcon);
}
toggle(event) {

1
webgis/js/controllers/modal_controller.js
View File

@ -11,4 +11,3 @@ export default class extends Controller {
this.modalTarget.classList.remove('is-active');
}
}

2
webgis/js/index.js
View File

@ -3,6 +3,7 @@ import UI from './ui.js';
import { Application } from '@hotwired/stimulus';
import MenuController from './controllers/menu_controller.js';
import ModalController from './controllers/modal_controller.js';
import MarkerController from './controllers/marker_controller.js';
document.addEventListener('DOMContentLoaded', async () => {
// Register Stimulus controllers
@ -28,4 +29,5 @@ function initStimulus() {
window.Stimulus = Application.start();
Stimulus.register("menu", MenuController);
Stimulus.register("modal", ModalController);
Stimulus.register("marker", MarkerController);
}