Update menu
TODO: coords for sites
This commit is contained in:
parent
211379b986
commit
7f4bd571f0
@ -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
42
webgis/js/controllers/marker_controller.js
Normal 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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -11,4 +11,3 @@ export default class extends Controller {
|
||||
this.modalTarget.classList.remove('is-active');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user