Refactor to generate menu dynamically
This commit is contained in:
parent
41dca4f563
commit
b556ad66bb
@ -71,620 +71,156 @@
|
||||
</div>
|
||||
<div class="column is-hidden is-4 is-4-desktop is-5-mobile is-pulled-right is-overlay has-background-white-ter" id="menu"
|
||||
data-menu-target="menu" data-controller="layer">
|
||||
<!-- Template to build menu items dynamically -->
|
||||
<template id="menu-item-template">
|
||||
<li>
|
||||
<a class="is-block button"
|
||||
data-controller="marker"
|
||||
data-action="marker#go"
|
||||
data-marker-coords-value=""
|
||||
data-marker-group-value="">
|
||||
<span class="label"></span>
|
||||
</a>
|
||||
</li>
|
||||
</template>
|
||||
<aside class="menu ml-4 mt-3">
|
||||
<button title="Chiudi menu" class="delete is-pulled-right" data-action="menu#close"></button>
|
||||
<p class="menu-label is-size-5 mt-2 is-clickable" data-id="siti">
|
||||
<span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="siti" data-action="click->layer#toggle">
|
||||
<p class="menu-label is-size-5 mt-2 is-clickable" data-id="sites">
|
||||
<span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="sites" data-action="click->layer#toggle">
|
||||
<i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
|
||||
</span>
|
||||
<span class="icon pr-1">
|
||||
<img class="image" src="img/icons/siti_menu.png"/>
|
||||
</span>
|
||||
<span data-action="click->menu#toggle" data-id="siti">
|
||||
<span data-action="click->menu#toggle" data-id="sites">
|
||||
Beni archeologici
|
||||
<span class="icon pl-2">
|
||||
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="siti"></i>
|
||||
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="sites"></i>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
<ul class="menu-list is-hidden" id="siti-list" data-menu-target="list" data-controller="marker">
|
||||
<li>
|
||||
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="siti-anacapri-sub">
|
||||
<ul class="menu-list is-hidden" id="sites-list" data-menu-target="list" data-controller="marker">
|
||||
<li data-list-id="sites-anacapri-sub">
|
||||
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="sites-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"
|
||||
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.56094295 14.20573624"
|
||||
data-marker-group-value="sites">
|
||||
Grotta Azzurra
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" title="Vai al sito Grotta del Pisco"
|
||||
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.543768 14.202657"
|
||||
data-marker-group-value="sites">
|
||||
Grotta del Pisco
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" title="Vai al sito Lo Pozzo"
|
||||
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.556601 14.213642"
|
||||
data-marker-group-value="sites">
|
||||
Località Lo Pozzo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" title="Vai al sito Scala Fenicia"
|
||||
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5562963 14.2285935"
|
||||
data-marker-group-value="sites">
|
||||
Scala Fenicia
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" title="Vai al sito Villa di Damecuta"
|
||||
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.55906 14.20055"
|
||||
data-marker-group-value="sites">
|
||||
Villa di Damecuta
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" title="Vai al sito Villa di Gradola"
|
||||
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.560834 14.205793"
|
||||
data-marker-group-value="sites">
|
||||
Villa di Gradola
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" title="Vai al sito San Michele"
|
||||
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.55738 14.225806"
|
||||
data-marker-group-value="sites">
|
||||
Villa San Michele
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mt-3">
|
||||
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="siti-capri-sub">
|
||||
<li class="mt-3" data-list-id="sites-capri-sub">
|
||||
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="sites-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
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-controller="marker"
|
||||
data-marker-coords-value="40.54972 14.24669"
|
||||
data-marker-group-value="sites"
|
||||
data-action="marker#go">
|
||||
Camerelle
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-controller="marker"
|
||||
data-marker-group-value="sites"
|
||||
data-marker-coords-value="40.54652 14.24288" data-action="marker#go">
|
||||
Grotta dell'Arsenale
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" title="Vai al sito Grotta di Matermania" data-controller="marker"
|
||||
data-marker-group-value="sites"
|
||||
data-marker-coords-value="40.54942 14.25583" data-action="marker#go">
|
||||
Grotta di Matermania
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" title="Vai al sito Grotta delle Felci" data-controller="marker"
|
||||
data-marker-group-value="sites"
|
||||
data-marker-coords-value="40.543644 14.230008" data-action="marker#go">
|
||||
Grotta delle Felci
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" title="Vai al sito Grotta del Castiglione" data-controller="marker"
|
||||
data-marker-group-value="sites"
|
||||
data-marker-coords-value="40.54687 14.24023" data-action="marker#go">
|
||||
Grotta del Castiglione
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-controller="marker" data-marker-coords-value="40.5515 14.24327"
|
||||
data-marker-group-value="sites"
|
||||
data-action="marker#go">
|
||||
Mura greche
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-controller="marker" data-marker-coords-value="40.55325 14.24761" data-action="marker#go">
|
||||
Monte San Michele
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-controller="marker" data-marker-coords-value="40.55641 14.23503" data-action="marker#go">
|
||||
San Costanzo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-controller="marker" data-marker-coords-value="40.549 14.24801" data-action="marker#go">
|
||||
Tragara (strada)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-controller="marker" data-marker-coords-value="40.54695 14.24962" data-action="marker#go">
|
||||
Tragara (area residenziale)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-controller="marker" data-marker-coords-value="40.543719 14.252836" data-action="marker#go">
|
||||
Tragara, approdo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-controller="marker" data-marker-coords-value="40.55791 14.26253" data-action="marker#go">
|
||||
Villa Jovis
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="menu-label is-size-5 is-clickable" data-id="non-conser">
|
||||
<span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="non-conser"
|
||||
<p class="menu-label is-size-5 is-clickable" data-id="notConserved">
|
||||
<span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="notConserved"
|
||||
data-action="click->layer#toggle" style="max-height: 10px">
|
||||
<i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
|
||||
</span>
|
||||
<span class="icon pr-1">
|
||||
<img class="image" src="img/icons/non_cons_menu.png"/>
|
||||
</span>
|
||||
<span data-action="click->menu#toggle" data-id="non-conser">
|
||||
<span data-action="click->menu#toggle" data-id="notConserved">
|
||||
Beni non conservati
|
||||
<span class="icon pl-2">
|
||||
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="non-conser"></i>
|
||||
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="notConserved"></i>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
<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">
|
||||
<ul class="menu-list is-hidden" id="notConserved-list" data-menu-target="list" data-controller="marker">
|
||||
<li data-list-id="notConserved-anacapri-sub">
|
||||
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="notConserved-anacapri-sub">
|
||||
Anacapri
|
||||
<span class="icon ml-2 is-small" data-list-id="noncons-anacapri-sub">
|
||||
<span class="icon ml-2 is-small" data-list-id="notConserved-anacapri-sub">
|
||||
<i class="fa fa-chevron-right"></i>
|
||||
</span>
|
||||
</span>
|
||||
<ul id="noncons-anacapri-sub" class="is-hidden">
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5595565 14.2003896">
|
||||
Cala a mare - resti di ambienti
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.549026 14.196911">
|
||||
Punta Campetiello - scala
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5501214 14.2198544">
|
||||
Castagnaro - area funeraria
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.55129683 14.21261142">
|
||||
Ceselle - necropoli
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5533744 14.2178754">
|
||||
Località Piscina - complesso idraulico
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5546467 14.2092143">
|
||||
La Cera - ambienti voltati
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5495555 14.2108741">
|
||||
Cesa - complesso idraulico
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5575337 14.2027513">
|
||||
La Fabbrica - resti murari
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5543028 14.2129861">
|
||||
Le Boffe - Frammenti scultorei
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5530655 14.201767">
|
||||
Lupinaro - resti murari
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5399801 14.2092552">
|
||||
Migliara Belvedere - frammenti erratici
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5451791 14.2233019">
|
||||
Monte Solaro - vaso corinzio
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5523988 14.2087281">
|
||||
Monticello - “Vaso di Monticello”
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5521975 14.2107296">
|
||||
Monticello - “Villa di Monticello”
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5559514 14.2197966">
|
||||
Pastena - strutture murarie
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.546923 14.2173871">
|
||||
Petracquale - ruderi indeterminati
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.55666444 14.21446043">
|
||||
Timberino - impianto idraulico
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5590486 14.1984242">
|
||||
Vetereto - ambienti voltati
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.556597 14.214518">
|
||||
Veterino - complesso residenziale
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mt-3" data-list-id="noncons-capri-sub">
|
||||
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="noncons-capri-sub">
|
||||
<li class="mt-3" data-list-id="notConserved-capri-sub">
|
||||
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="notConserved-capri-sub">
|
||||
Capri
|
||||
<span class="icon ml-2 is-small" data-list-id="noncons-capri-sub">
|
||||
<span class="icon ml-2 is-small" data-list-id="notConserved-capri-sub">
|
||||
<i class="fa fa-chevron-right"></i>
|
||||
</span>
|
||||
</span>
|
||||
<ul id="noncons-capri-sub" class="is-hidden">
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5511089 14.2362655">
|
||||
Le Parate - necropoli
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5532513 14.2538048">
|
||||
Moneta - impianti idraulici e struttura residenziale a Moneta
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5533825 14.2385025">
|
||||
Sant'Antonio - necropoli
|
||||
</a>
|
||||
</li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5484525 14.2478183">
|
||||
Unghia Marina - complesso residenziale
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5473155 14.2405834">
|
||||
Villa Imperiale del Castiglione
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5480487 14.2420423">
|
||||
Villa imperiale del Castiglione, scavi Hadrawa
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5492126 14.2438121">
|
||||
Villa imperiale del Castiglione, Li Campi
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5493422 14.2430196">
|
||||
Villa imperiale del Castiglione, Località Valentino
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5489398 14.2408126">
|
||||
Villa imperiale del Castiglione, mura via Castello
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="menu-label is-size-5 is-clickable" data-id="rinv">
|
||||
<span class="icon pl-1 mr-2 is-small" data-layer-target="rinv" data-action="click->layer#toggle">
|
||||
<p class="menu-label is-size-5 is-clickable" data-id="findings">
|
||||
<span class="icon pl-1 mr-2 is-small" data-layer-target="findings" data-action="click->layer#toggle">
|
||||
<i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
|
||||
</span>
|
||||
<span class="icon pr-1">
|
||||
<img class="image" src="img/icons/rinv_menu.png"/>
|
||||
</span>
|
||||
<span data-action="click->menu#toggle" data-id="rinv">
|
||||
<span data-action="click->menu#toggle" data-id="findings">
|
||||
Rinvenimenti
|
||||
<span class="icon pl-2">
|
||||
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="rinv"></i>
|
||||
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="findings"></i>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
<ul class="menu-list is-hidden" id="rinv-list" data-menu-target="list" data-controller="marker">
|
||||
<ul class="menu-list is-hidden" id="findings-list" data-menu-target="list" data-controller="marker">
|
||||
<li>
|
||||
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="rinv-anacapri-sub">
|
||||
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="findings-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" data-marker-target="coords"
|
||||
data-controller="marker" data-marker-coords-value="40.55939119 14.20064002" data-action="marker#go">
|
||||
Affresco di IV stile - Villa Damecuta
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-marker-target="coords"
|
||||
data-controller="marker" data-marker-coords-value="40.5596847 14.2013025" data-action="marker#go">
|
||||
Statua di fanciullo - Villa Damecuta
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-marker-target="coords"
|
||||
data-controller="marker" data-marker-coords-value="40.5595088 14.2008549" data-action="marker#go">
|
||||
Frammento di testa di Sileno - Villa Damecuta
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-marker-target="coords"
|
||||
data-controller="marker" data-marker-coords-value="40.5565536 14.2133073" data-action="marker#go">
|
||||
Base di candelabro - Lo Pozzo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-marker-target="coords"
|
||||
data-controller="marker" data-marker-coords-value="40.56061123 14.20569607" data-action="marker#go">
|
||||
Statua di Nettuno - Grotta Azzurra
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-marker-target="coords"
|
||||
data-controller="marker" data-marker-coords-value="40.56070704 14.20588946" data-action="marker#go">
|
||||
Statua di Tritone imberbe - Grotta Azzurra
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-marker-target="coords"
|
||||
data-controller="marker" data-marker-coords-value="40.56057044 14.20603369" data-action="marker#go">
|
||||
Statua di Tritone barbato - Grotta Azzurra
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-marker-target="coords"
|
||||
data-controller="marker" data-marker-coords-value="40.56048101 14.20591339" data-action="marker#go">
|
||||
Statua di Tritone - Grotta Azzurra
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-marker-target="coords"
|
||||
data-controller="marker" data-marker-coords-value="40.5605702 14.20575881" data-action="marker#go">
|
||||
Statua di peplophoros - Grotta Azzurra
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="menu-label is-size-5 is-clickable" data-id="preist">
|
||||
<span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="preist" data-action="click->layer#toggle">
|
||||
<p class="menu-label is-size-5 is-clickable" data-id="prehistoric">
|
||||
<span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="prehistoric" data-action="click->layer#toggle">
|
||||
<i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
|
||||
</span>
|
||||
<span class="icon pr-1">
|
||||
<img class="image" src="img/icons/preistorici.png"/>
|
||||
</span>
|
||||
<span data-action="click->menu#toggle" data-id="preist">
|
||||
<span data-action="click->menu#toggle" data-id="prehistoric">
|
||||
Aree di affioramento
|
||||
<span class="icon pl-2">
|
||||
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="preist"></i>
|
||||
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="prehistoric"></i>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
<ul class="menu-list is-hidden" id="preist-list" data-menu-target="list" data-controller="marker">
|
||||
<li data-list-id="preist-anacapri-sub">
|
||||
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="preist-anacapri-sub">
|
||||
<ul class="menu-list is-hidden" id="prehistoric-list" data-menu-target="list" data-controller="marker">
|
||||
<li data-list-id="prehistoric-anacapri-sub">
|
||||
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="prehistoric-anacapri-sub">
|
||||
Anacapri
|
||||
<span class="icon ml-2 is-small" data-list-id="preist-anacapri-sub">
|
||||
<span class="icon ml-2 is-small" data-list-id="prehistoric-anacapri-sub">
|
||||
<i class="fa fa-chevron-right"></i>
|
||||
</span>
|
||||
</span>
|
||||
<ul id="preist-anacapri-sub" class="is-hidden">
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.548922 14.229593">
|
||||
Cetrella
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.554641 14.198711">
|
||||
Punta Capocchia
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.556512 14.198711">
|
||||
Punta del Miglio
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.549190 14.198606">
|
||||
Punta Campetiello
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5473633 14.1992508">
|
||||
Rio Latino - Cala di Mezzo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5469179 14.2022463">
|
||||
Località Pino
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.541755 14.197580">
|
||||
Punta del Pino
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5386677 14.1997139">
|
||||
Capo Ruglio-Limmo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5399062 14.2098143">
|
||||
Belvedere della Migliara
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5367431 14.1995263">
|
||||
Punta Carena-Limmo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.558507 14.200558">
|
||||
Punta dell'Arcera
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.542092 14.223073">
|
||||
Monte Solaro
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5425792 14.2299374">
|
||||
Punta Mulo
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="mt-3" data-list-id="preist-capri-sub">
|
||||
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="preist-capri-sub">
|
||||
<li class="mt-3" data-list-id="prehistoric-capri-sub">
|
||||
<span class="is-clickable" data-action="click->menu#openSubList" data-list-id="prehistoric-capri-sub">
|
||||
Capri
|
||||
<span class="icon ml-2 is-small" data-list-id="preist-capri-sub">
|
||||
<span class="icon ml-2 is-small" data-list-id="prehistoric-capri-sub">
|
||||
<i class="fa fa-chevron-right"></i>
|
||||
</span>
|
||||
</span>
|
||||
<ul id="preist-capri-sub" class="is-hidden">
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.558602 14.2233">
|
||||
Artimo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.552006 14.2300939">
|
||||
Calcara
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5495598 14.2442728">
|
||||
Camerelle, Hotel Quisisana
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5512194 14.2487155">
|
||||
Croce
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5516843 14.2514713">
|
||||
Fondo Mongiardino
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5489554 14.2347825">
|
||||
La Torina
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5500081 14.2377156">
|
||||
Le Parate
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.55918 14.259928">
|
||||
Lo Capo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5517999 14.2283005">
|
||||
L’Anginola
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5562267 14.2350889">
|
||||
Marina Grande, Chiesa di S. Costanzo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5474502 14.2533369">
|
||||
Tragara
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5534825 14.2329379">
|
||||
Veruotto
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5504548 14.2340138">
|
||||
Via Aiano di Sopra
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.54917684 14.23908714">
|
||||
Via Castiglione snc
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.546096 14.240045">
|
||||
Via Krupp
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="menu-label is-size-5 is-clickable" data-id="subacquei">
|
||||
<p class="menu-label is-size-5 is-clickable" data-id="underwater">
|
||||
<span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="underwater" data-action="click->layer#toggle">
|
||||
<i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
|
||||
</span>
|
||||
<span class="icon pr-1">
|
||||
<img class="image" src="img/icons/subacquei_menu.png"/>
|
||||
</span>
|
||||
<span data-action="click->menu#toggle" data-id="subacquei">
|
||||
<span data-action="click->menu#toggle" data-id="underwater">
|
||||
Giacimenti subacquei
|
||||
<span class="icon pl-2">
|
||||
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="subacquei"></i>
|
||||
<i class="fa fa-chevron-right" data-menu-target="icon" data-id="underwater"></i>
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
<ul class="menu-list is-hidden" id="subacquei-list" data-menu-target="list" data-controller="marker">
|
||||
<ul class="menu-list is-hidden" id="underwater-list" data-menu-target="list" data-controller="marker">
|
||||
<li>
|
||||
<a class="button" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5511022 14.1910274">
|
||||
Bocca Grande - relitto con carico
|
||||
|
||||
@ -12,17 +12,10 @@ export default class extends Controller {
|
||||
let map = GisState.map;
|
||||
let target = event.currentTarget;
|
||||
const id = target.parentElement.getAttribute('data-id');
|
||||
const layers = {
|
||||
'siti': GisState.layers.sites,
|
||||
'non-conser': GisState.layers.notConserved,
|
||||
'rinv': GisState.layers.findings,
|
||||
'preist': GisState.layers.prehistoric,
|
||||
'subacquei': GisState.layers.underwater,
|
||||
}
|
||||
|
||||
let group = layers[id];
|
||||
this.toggleIcon(event.currentTarget);
|
||||
|
||||
let group = GisState.layers[id];
|
||||
|
||||
if (map.hasLayer(group)) {
|
||||
map.removeLayer(group);
|
||||
target.title = "Mostra";
|
||||
|
||||
@ -5,30 +5,47 @@ 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';
|
||||
const groups = Object.keys(GisState.markers);
|
||||
const municipalities = ['Anacapri', 'Capri'];
|
||||
|
||||
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);
|
||||
// TODO refactor with Stimulus values?
|
||||
for (let group of groups) {
|
||||
for (let municipality of municipalities) {
|
||||
let ul = this.renderMenuItems(group, municipality);
|
||||
document.querySelector(`[data-list-id="${group}-${municipality.toLowerCase()}-sub"]`)
|
||||
?.appendChild(ul);
|
||||
}
|
||||
}
|
||||
|
||||
console.log(ulAnacapri);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {String} group
|
||||
* @param {String} municipality
|
||||
*/
|
||||
renderMenuItems(group, municipality) {
|
||||
const ul = document.createElement('ul');
|
||||
ul.className = 'is-hidden';
|
||||
ul.id = `${group}-${municipality.toLowerCase()}-sub`;
|
||||
|
||||
const template = document.getElementById('menu-item-template');
|
||||
|
||||
for (let key in GisState.markers[group]) {
|
||||
const marker = GisState.markers[group][key];
|
||||
if (marker.options.municipality === municipality) {
|
||||
const clone = template.content.cloneNode(true);
|
||||
const link = clone.querySelector('a');
|
||||
const labelSpan = clone.querySelector('.label');
|
||||
|
||||
link.dataset.markerCoordsValue = key;
|
||||
link.dataset.markerGroupValue = group;
|
||||
labelSpan.textContent = marker.options.label;
|
||||
|
||||
ul.appendChild(clone);
|
||||
}
|
||||
}
|
||||
|
||||
return ul;
|
||||
}
|
||||
|
||||
toggleMenu() {
|
||||
|
||||
@ -112,7 +112,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
|
||||
let layerVincoli = await this.loadGeoJSON('vincoli.geojson', optionsVincoli);
|
||||
let layerPaesistici = await this.loadGeoJSON('paesistici.geojson', optionsPaesistici);
|
||||
|
||||
this.addLayerGroups(map);
|
||||
await this.addLayerGroups(map);
|
||||
|
||||
const archeo = {
|
||||
'Vincoli archeologici' : layerVincoli,
|
||||
@ -127,22 +127,22 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
|
||||
/**
|
||||
* Add layer groups to map
|
||||
*/
|
||||
GIS.addLayerGroups = function (map) {
|
||||
GIS.addLayerGroups = async function (map) {
|
||||
// Can be included in Promise.all
|
||||
// if it returns only one group...
|
||||
this.sites().then(data => {
|
||||
data.markers.addTo(map);
|
||||
data.geom.addTo(map);
|
||||
});
|
||||
Promise.all(
|
||||
const sites = await this.sites();
|
||||
sites.markers.addTo(map);
|
||||
sites.geom.addTo(map);
|
||||
|
||||
const groups = await Promise.all(
|
||||
[
|
||||
this.notConserved(),
|
||||
this.findings(),
|
||||
this.prehistoric(),
|
||||
this.underwater(),
|
||||
]
|
||||
)
|
||||
.then(groups => groups.forEach(group => group.addTo(map)));
|
||||
);
|
||||
groups.forEach(group => group.addTo(map));
|
||||
}
|
||||
/**
|
||||
* Create markers for sites
|
||||
@ -195,13 +195,17 @@ GIS.notConserved = async function () {
|
||||
let notConserved = L.markerClusterGroup(clusterOptions);
|
||||
|
||||
for (let record of notConserData.records) {
|
||||
const marker = L.marker(record.coordinates, {icon: Icons.notConserved})
|
||||
const marker = L.marker(
|
||||
record.coordinates,
|
||||
{icon: Icons.notConserved, label: record.label}
|
||||
)
|
||||
.bindTooltip(record.denomination)
|
||||
.on('click', () => UI.openNotConserModal(record, '#not-conser-data'));
|
||||
|
||||
notConserved.addLayer(marker);
|
||||
// Populate app state for reuse and avoid window.Sites etc.
|
||||
const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
|
||||
marker.options.municipality = record.municipality;
|
||||
GisState.markers.notConserved[markerLabel] = marker;
|
||||
}
|
||||
|
||||
@ -222,7 +226,9 @@ GIS.findings = async function () {
|
||||
);
|
||||
|
||||
for (let record of findingsData) {
|
||||
const marker = L.marker(record.coordinates, {icon: Icons.finding}
|
||||
const marker = L.marker(
|
||||
record.coordinates,
|
||||
{icon: Icons.finding, label: record.label}
|
||||
).bindTooltip(record.object)
|
||||
.on(
|
||||
'click',
|
||||
@ -231,6 +237,7 @@ GIS.findings = async function () {
|
||||
|
||||
findings.addLayer(marker);
|
||||
const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
|
||||
marker.options.municipality = record.municipality;
|
||||
GisState.markers.findings[markerLabel] = marker;
|
||||
}
|
||||
|
||||
@ -253,7 +260,7 @@ GIS.prehistoric = async function () {
|
||||
for (let record of data.records) {
|
||||
const marker = L.marker(
|
||||
record.coordinates,
|
||||
{icon: Icons.prehistoric}
|
||||
{icon: Icons.prehistoric, label: record.label}
|
||||
).bindTooltip(record.denomination)
|
||||
.on(
|
||||
'click',
|
||||
@ -261,6 +268,7 @@ GIS.prehistoric = async function () {
|
||||
);
|
||||
|
||||
const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
|
||||
marker.options.municipality = record.municipality;
|
||||
GisState.markers.prehistoric[markerLabel] = marker;
|
||||
|
||||
prehistoric.addLayer(marker);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user