Tabs to Stimulus
This commit is contained in:
parent
2129fab101
commit
d71420634b
@ -42,7 +42,7 @@
|
|||||||
<hr class="navbar-divider">
|
<hr class="navbar-divider">
|
||||||
<div class="navbar-end pb-1 pt-1" id="nav-menu">
|
<div class="navbar-end pb-1 pt-1" id="nav-menu">
|
||||||
<button class="navbar-item button is-size-5 is-white mr-3" role="button"
|
<button class="navbar-item button is-size-5 is-white mr-3" role="button"
|
||||||
data-action="click->menu#toggleMenu">
|
data-action="menu#toggleMenu">
|
||||||
<span class="icon mr-2">
|
<span class="icon mr-2">
|
||||||
<i class="fa fa-list"></i>
|
<i class="fa fa-list"></i>
|
||||||
</span>
|
</span>
|
||||||
@ -63,7 +63,7 @@
|
|||||||
<div class="column is-hidden is-4 is-4-desktop is-5-mobile is-overlay has-background-white-ter" id="menu"
|
<div class="column is-hidden is-4 is-4-desktop is-5-mobile is-overlay has-background-white-ter" id="menu"
|
||||||
data-menu-target="menu">
|
data-menu-target="menu">
|
||||||
<aside class="menu ml-4 mt-3">
|
<aside class="menu ml-4 mt-3">
|
||||||
<button title="Chiudi menu" class="delete is-pulled-right" data-action="click->menu#close"></button>
|
<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-action="click->menu#toggle" data-id="siti">
|
<p class="menu-label is-size-5 mt-2 is-clickable" data-action="click->menu#toggle" data-id="siti">
|
||||||
<span class="icon pr-2">
|
<span class="icon pr-2">
|
||||||
<img class="image" src="img/icons/siti_menu.png"/>
|
<img class="image" src="img/icons/siti_menu.png"/>
|
||||||
@ -83,32 +83,32 @@
|
|||||||
</span>
|
</span>
|
||||||
<ul id="siti-anacapri-sub" class="is-hidden">
|
<ul id="siti-anacapri-sub" class="is-hidden">
|
||||||
<li>
|
<li>
|
||||||
<a class="is-block button" title="Vai al sito Villa di Gradola" data-action="click->marker#go" data-coords="40.56094295 14.20573624">
|
<a class="is-block button" title="Vai al sito Villa di Gradola" data-action="marker#go" data-coords="40.56094295 14.20573624">
|
||||||
Grotta Azzurra
|
Grotta Azzurra
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" title="Vai al sito Lo Pozzo" data-action="click->marker#go" data-coords="40.556601 14.213642">
|
<a class="button" title="Vai al sito Lo Pozzo" data-action="marker#go" data-coords="40.556601 14.213642">
|
||||||
Località Lo Pozzo
|
Località Lo Pozzo
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" title="Vai al sito Scala Fenicia" data-action="click->marker#go" data-coords="40.5562963 14.2285935">
|
<a class="button" title="Vai al sito Scala Fenicia" data-action="marker#go" data-coords="40.5562963 14.2285935">
|
||||||
Scala Fenicia
|
Scala Fenicia
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" title="Vai al sito Villa di Damecuta" data-action="click->marker#go" data-coords="40.55906 14.20055">
|
<a class="button" title="Vai al sito Villa di Damecuta" data-action="marker#go" data-coords="40.55906 14.20055">
|
||||||
Villa di Damecuta
|
Villa di Damecuta
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="is-block button" title="Vai al sito Villa di Gradola" data-action="click->marker#go" data-coords="40.560834 14.205793">
|
<a class="is-block button" title="Vai al sito Villa di Gradola" data-action="marker#go" data-coords="40.560834 14.205793">
|
||||||
Villa di Gradola
|
Villa di Gradola
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" title="Vai al sito San Michele" data-action="click->marker#go" data-coords="">
|
<a class="button" title="Vai al sito San Michele" data-action="marker#go" data-coords="">
|
||||||
Villa San Michele
|
Villa San Michele
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
@ -164,92 +164,92 @@
|
|||||||
</span>
|
</span>
|
||||||
<ul id="noncons-anacapri-sub" class="is-hidden">
|
<ul id="noncons-anacapri-sub" class="is-hidden">
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-action="click->marker#go" data-coords="40.5595565 14.2003896">
|
<a class="button" data-action="marker#go" data-coords="40.5595565 14.2003896">
|
||||||
Cala a mare - resti di ambienti
|
Cala a mare - resti di ambienti
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-action="click->marker#go" data-coords="40.549026 14.196911">
|
<a class="button" data-action="marker#go" data-coords="40.549026 14.196911">
|
||||||
Punta Campetiello - scala
|
Punta Campetiello - scala
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-action="click->marker#go" data-coords="40.5501214 14.2198544">
|
<a class="button" data-action="marker#go" data-coords="40.5501214 14.2198544">
|
||||||
Castagnaro - area funeraria
|
Castagnaro - area funeraria
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-action="click->marker#go" data-coords="40.55129683 14.21261142">
|
<a class="button" data-action="marker#go" data-coords="40.55129683 14.21261142">
|
||||||
Ceselle - necropoli
|
Ceselle - necropoli
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-action="click->marker#go" data-coords="40.5533744 14.2178754">
|
<a class="button" data-action="marker#go" data-coords="40.5533744 14.2178754">
|
||||||
Località Piscina - complesso idraulico
|
Località Piscina - complesso idraulico
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-action="click->marker#go" data-coords="40.5546467 14.2092143">
|
<a class="button" data-action="marker#go" data-coords="40.5546467 14.2092143">
|
||||||
La Cera - ambienti voltati
|
La Cera - ambienti voltati
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-action="click->marker#go" data-coords="40.5495555 14.2108741">
|
<a class="button" data-action="marker#go" data-coords="40.5495555 14.2108741">
|
||||||
Cesa - complesso idraulico
|
Cesa - complesso idraulico
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-action="click->marker#go" data-coords="40.5575337 14.2027513">
|
<a class="button" data-action="marker#go" data-coords="40.5575337 14.2027513">
|
||||||
La Fabbrica - resti murari
|
La Fabbrica - resti murari
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-action="click->marker#go" data-coords="40.5530655 14.201767">
|
<a class="button" data-action="marker#go" data-coords="40.5530655 14.201767">
|
||||||
Lupinaro - resti murari
|
Lupinaro - resti murari
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-action="click->marker#go" data-coords="40.5399801 14.2092552">
|
<a class="button" data-action="marker#go" data-coords="40.5399801 14.2092552">
|
||||||
Migliara Belvedere - frammenti erratici
|
Migliara Belvedere - frammenti erratici
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-action="click->marker#go" data-coords="40.5451791 14.2233019">
|
<a class="button" data-action="marker#go" data-coords="40.5451791 14.2233019">
|
||||||
Monte Solaro - vaso corinzio
|
Monte Solaro - vaso corinzio
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-action="click->marker#go" data-coords="40.5523988 14.2087281">
|
<a class="button" data-action="marker#go" data-coords="40.5523988 14.2087281">
|
||||||
Monticello - “Vaso di Monticello”
|
Monticello - “Vaso di Monticello”
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-action="click->marker#go" data-coords="40.5521975 14.2107296">
|
<a class="button" data-action="marker#go" data-coords="40.5521975 14.2107296">
|
||||||
Monticello - “Villa di Monticello”
|
Monticello - “Villa di Monticello”
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-action="click->marker#go" data-coords="40.5559514 14.2197966">
|
<a class="button" data-action="marker#go" data-coords="40.5559514 14.2197966">
|
||||||
Pastena - strutture murarie
|
Pastena - strutture murarie
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-action="click->marker#go" data-coords="40.546923 14.2173871">
|
<a class="button" data-action="marker#go" data-coords="40.546923 14.2173871">
|
||||||
Petracquale - ruderi indeterminati
|
Petracquale - ruderi indeterminati
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-action="click->marker#go" data-coords="40.55666444 14.21446043">
|
<a class="button" data-action="marker#go" data-coords="40.55666444 14.21446043">
|
||||||
Timberino - impianto idraulico
|
Timberino - impianto idraulico
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-action="click->marker#go" data-coords="40.5590486 14.1984242">
|
<a class="button" data-action="marker#go" data-coords="40.5590486 14.1984242">
|
||||||
Vetereto - ambienti voltati
|
Vetereto - ambienti voltati
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-action="click->marker#go" data-coords="40.556597 14.214518">
|
<a class="button" data-action="marker#go" data-coords="40.556597 14.214518">
|
||||||
Veterino - complesso residenziale
|
Veterino - complesso residenziale
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
@ -276,55 +276,55 @@
|
|||||||
<ul id="rinv-anacapri-sub" class="is-hidden">
|
<ul id="rinv-anacapri-sub" class="is-hidden">
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-marker-target="coords"
|
<a class="button" data-marker-target="coords"
|
||||||
data-coords="40.55939119 14.20064002" data-action="click->marker#go">
|
data-coords="40.55939119 14.20064002" data-action="marker#go">
|
||||||
Affresco Villa di Damecuta
|
Affresco Villa di Damecuta
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-marker-target="coords"
|
<a class="button" data-marker-target="coords"
|
||||||
data-coords="40.5565536 14.2133073" data-action="click->marker#go">
|
data-coords="40.5565536 14.2133073" data-action="marker#go">
|
||||||
Base di candelabro - Lo Pozzo
|
Base di candelabro - Lo Pozzo
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-marker-target="coords"
|
<a class="button" data-marker-target="coords"
|
||||||
data-coords="40.56061123 14.20569607" data-action="click->marker#go">
|
data-coords="40.56061123 14.20569607" data-action="marker#go">
|
||||||
Statua di Nettuno - Grotta Azzurra
|
Statua di Nettuno - Grotta Azzurra
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-marker-target="coords"
|
<a class="button" data-marker-target="coords"
|
||||||
data-coords="40.56070704 14.20588946" data-action="click->marker#go">
|
data-coords="40.56070704 14.20588946" data-action="marker#go">
|
||||||
Statua di Tritone imberbe - Grotta Azzurra
|
Statua di Tritone imberbe - Grotta Azzurra
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-marker-target="coords"
|
<a class="button" data-marker-target="coords"
|
||||||
data-coords="40.56057044 14.20603369" data-action="click->marker#go">
|
data-coords="40.56057044 14.20603369" data-action="marker#go">
|
||||||
Statua di Tritone barbato - Grotta Azzurra
|
Statua di Tritone barbato - Grotta Azzurra
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-marker-target="coords"
|
<a class="button" data-marker-target="coords"
|
||||||
data-coords="40.56048101 14.20591339" data-action="click->marker#go">
|
data-coords="40.56048101 14.20591339" data-action="marker#go">
|
||||||
Statua di Tritone - Grotta Azzurra
|
Statua di Tritone - Grotta Azzurra
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-marker-target="coords"
|
<a class="button" data-marker-target="coords"
|
||||||
data-coords="40.5605702 14.20575881" data-action="click->marker#go">
|
data-coords="40.5605702 14.20575881" data-action="marker#go">
|
||||||
Statua di peplophoros - Grotta Azzurra
|
Statua di peplophoros - Grotta Azzurra
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-marker-target="coords"
|
<a class="button" data-marker-target="coords"
|
||||||
data-coords="40.5596847 14.2013025" data-action="click->marker#go">
|
data-coords="40.5596847 14.2013025" data-action="marker#go">
|
||||||
Statua di fanciullo - Damecuta
|
Statua di fanciullo - Damecuta
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a class="button" data-marker-target="coords"
|
<a class="button" data-marker-target="coords"
|
||||||
data-coords="40.5595088 14.2008549" data-action="click->marker#go">
|
data-coords="40.5595088 14.2008549" data-action="marker#go">
|
||||||
Frammento di testa di Sileno - Damecuta
|
Frammento di testa di Sileno - Damecuta
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
@ -340,12 +340,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Sites data modal -->
|
<!-- Sites data modal -->
|
||||||
<div class="modal" id="site-data" data-controller="modal biblio" data-modal-target="modal">
|
<div class="modal" id="site-data" data-controller="modal biblio tabs" data-modal-target="modal">
|
||||||
<div class="modal-background" data-action="click->modal#close"></div>
|
<div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
|
||||||
<div class="modal-content has-background-white" style="min-height: 95vh;">
|
<div class="modal-content has-background-white" style="min-height: 95vh;">
|
||||||
<div class="tabs is-centered">
|
<div class="tabs is-centered">
|
||||||
<ul>
|
<ul>
|
||||||
<li class="is-active" id="for-short-sheet">
|
<li class="is-active" id="for-short-sheet"
|
||||||
|
data-tabs-target="tab active" data-action="click->tabs#activate">
|
||||||
<a>
|
<a>
|
||||||
<span class="icon is-small"
|
<span class="icon is-small"
|
||||||
><i class="fas fa-info-circle" aria-hidden="true"></i
|
><i class="fas fa-info-circle" aria-hidden="true"></i
|
||||||
@ -353,7 +354,7 @@
|
|||||||
<span>Scheda sintetica</span>
|
<span>Scheda sintetica</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li id="for-site-sheet">
|
<li id="for-site-sheet" data-tabs-target="tab" data-action="click->tabs#activate">
|
||||||
<a>
|
<a>
|
||||||
<span class="icon is-small"
|
<span class="icon is-small"
|
||||||
><i class="fas fa-info-circle" aria-hidden="true"></i
|
><i class="fas fa-info-circle" aria-hidden="true"></i
|
||||||
@ -361,7 +362,7 @@
|
|||||||
<span>Scheda dettagliata</span>
|
<span>Scheda dettagliata</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li id="for-photos">
|
<li id="for-photos" data-tabs-target="tab" data-action="click->tabs#activate">
|
||||||
<a>
|
<a>
|
||||||
<span class="icon is-small"
|
<span class="icon is-small"
|
||||||
><i class="fas fa-image" aria-hidden="true"></i
|
><i class="fas fa-image" aria-hidden="true"></i
|
||||||
@ -369,7 +370,7 @@
|
|||||||
<span>Disegni e fotografie</span>
|
<span>Disegni e fotografie</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li id="for-documents">
|
<li id="for-documents" data-tabs-target="tab" data-action="click->tabs#activate">
|
||||||
<a>
|
<a>
|
||||||
<span class="icon is-small"
|
<span class="icon is-small"
|
||||||
><i class="far fa-file-alt" aria-hidden="true"></i
|
><i class="far fa-file-alt" aria-hidden="true"></i
|
||||||
@ -379,12 +380,12 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-tabs" id="short-sheet"></div>
|
<div class="data-tabs" id="short-sheet" data-tabs-target="content"></div>
|
||||||
<div class="data-tabs is-hidden" id="site-sheet"></div>
|
<div class="data-tabs is-hidden" id="site-sheet" data-tabs-target="content"></div>
|
||||||
<div class="data-tabs is-hidden" id="photos"></div>
|
<div class="data-tabs is-hidden" id="photos" data-tabs-target="content"></div>
|
||||||
<div class="data-tabs is-hidden" id="documents"></div>
|
<div class="data-tabs is-hidden" id="documents" data-tabs-target="content"></div>
|
||||||
</div>
|
</div>
|
||||||
<button class="modal-close is-large" aria-label="close" data-action="click->modal#close"></button>
|
<button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
|
||||||
</div>
|
</div>
|
||||||
<!-- Not conserved modal -->
|
<!-- Not conserved modal -->
|
||||||
<div class="modal" id="not-conser-data" data-controller="modal biblio" data-modal-target="modal">
|
<div class="modal" id="not-conser-data" data-controller="modal biblio" data-modal-target="modal">
|
||||||
@ -392,15 +393,15 @@
|
|||||||
<div class="modal-content has-background-white" style="min-height: 95vh;">
|
<div class="modal-content has-background-white" style="min-height: 95vh;">
|
||||||
<div id="not-conser-sheet"></div>
|
<div id="not-conser-sheet"></div>
|
||||||
</div>
|
</div>
|
||||||
<button class="modal-close is-large" aria-label="close" data-action="click->modal#close"></button>
|
<button class="modal-close is-large" aria-label="close" data-action="modal#close"></button>
|
||||||
</div>
|
</div>
|
||||||
<!-- Finding modal -->
|
<!-- Finding modal -->
|
||||||
<div class="modal" id="finding-data" data-controller="modal biblio" data-modal-target="modal">
|
<div class="modal" id="finding-data" data-controller="modal biblio tabs" data-modal-target="modal">
|
||||||
<div class="modal-background" data-action="click->modal#close"></div>
|
<div class="modal-background" data-action="click->modal#close click->tabs#reset"></div>
|
||||||
<div class="modal-content has-background-white" style="min-height: 95vh;">
|
<div class="modal-content has-background-white" style="min-height: 95vh;">
|
||||||
<div class="tabs is-centered">
|
<div class="tabs is-centered">
|
||||||
<ul>
|
<ul>
|
||||||
<li class="is-active" id="for-finding-sheet">
|
<li class="is-active" id="for-finding-sheet" data-tabs-target="tab active" data-action="click->tabs#activate">
|
||||||
<a>
|
<a>
|
||||||
<span class="icon is-small"
|
<span class="icon is-small"
|
||||||
><i class="fas fa-info-circle" aria-hidden="true"></i
|
><i class="fas fa-info-circle" aria-hidden="true"></i
|
||||||
@ -408,7 +409,7 @@
|
|||||||
<span>Scheda</span>
|
<span>Scheda</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
<li id="for-photos">
|
<li id="for-photos" data-tabs-target="tab" data-action="click->tabs#activate">
|
||||||
<a>
|
<a>
|
||||||
<span class="icon is-small"
|
<span class="icon is-small"
|
||||||
><i class="fas fa-image" aria-hidden="true"></i
|
><i class="fas fa-image" aria-hidden="true"></i
|
||||||
@ -418,10 +419,10 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="data-tabs" id="finding-sheet"></div>
|
<div class="data-tabs" id="finding-sheet" data-tabs-target="content"></div>
|
||||||
<div class="data-tabs is-hidden" id="photos"></div>
|
<div class="data-tabs is-hidden" id="photos" data-tabs-target="content"></div>
|
||||||
</div>
|
</div>
|
||||||
<button class="modal-close is-large" aria-label="close" data-action="click->modal#close"></button>
|
<button class="modal-close is-large" aria-label="close" data-action="modal#close tabs#reset"></button>
|
||||||
</div>
|
</div>
|
||||||
<!-- Spherical photo modal -->
|
<!-- Spherical photo modal -->
|
||||||
<div class="modal" id="spherical-modal">
|
<div class="modal" id="spherical-modal">
|
||||||
|
|||||||
34
webgis/js/controllers/tabs_controller.js
Normal file
34
webgis/js/controllers/tabs_controller.js
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import { Controller } from "@hotwired/stimulus"
|
||||||
|
|
||||||
|
export default class extends Controller {
|
||||||
|
static targets = ['active', 'tab', 'content'];
|
||||||
|
|
||||||
|
activate(event) {
|
||||||
|
this.deactivate();
|
||||||
|
const activeId = event.currentTarget.id;
|
||||||
|
|
||||||
|
event.currentTarget.classList.add('is-active');
|
||||||
|
this.contentTargets.find(c => c.id === activeId.replace('for-', ''))
|
||||||
|
.classList.remove('is-hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
reset() {
|
||||||
|
this.deactivate();
|
||||||
|
const activeId = this.activeTarget.id;
|
||||||
|
|
||||||
|
this.activeTarget.classList.add('is-active');
|
||||||
|
this.contentTargets.find(c => c.id === activeId.replace('for-', ''))
|
||||||
|
.classList.remove('is-hidden');
|
||||||
|
}
|
||||||
|
|
||||||
|
deactivate() {
|
||||||
|
this.tabTargets.forEach(tab => {
|
||||||
|
tab.classList.remove('is-active');
|
||||||
|
});
|
||||||
|
|
||||||
|
this.contentTargets.forEach(content => {
|
||||||
|
content.classList.add('is-hidden');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -5,6 +5,7 @@ import MenuController from './controllers/menu_controller.js';
|
|||||||
import ModalController from './controllers/modal_controller.js';
|
import ModalController from './controllers/modal_controller.js';
|
||||||
import MarkerController from './controllers/marker_controller.js';
|
import MarkerController from './controllers/marker_controller.js';
|
||||||
import BiblioController from './controllers/biblio_controller.js';
|
import BiblioController from './controllers/biblio_controller.js';
|
||||||
|
import TabsController from './controllers/tabs_controller.js';
|
||||||
|
|
||||||
document.addEventListener('DOMContentLoaded', async () => {
|
document.addEventListener('DOMContentLoaded', async () => {
|
||||||
// Register Stimulus controllers
|
// Register Stimulus controllers
|
||||||
@ -31,4 +32,5 @@ function initStimulus() {
|
|||||||
Stimulus.register("modal", ModalController);
|
Stimulus.register("modal", ModalController);
|
||||||
Stimulus.register("marker", MarkerController);
|
Stimulus.register("marker", MarkerController);
|
||||||
Stimulus.register("biblio", BiblioController);
|
Stimulus.register("biblio", BiblioController);
|
||||||
|
Stimulus.register("tabs", TabsController);
|
||||||
}
|
}
|
||||||
@ -93,21 +93,21 @@ UI.toggleMenu = function (triggerId, listId = null) {
|
|||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* Open a modal with DB site data
|
* Open a modal with DB site data
|
||||||
* @todo Refactor!!! Web components??
|
|
||||||
* @param {object} data The data retrieved from the DB to display as modal content
|
* @param {object} data The data retrieved from the DB to display as modal content
|
||||||
* @param {string} selector The modal selector
|
* @param {string} selector The modal selector
|
||||||
*/
|
*/
|
||||||
UI.openSiteModal = async function (data, selector) {
|
UI.openSiteModal = async function (data, selector) {
|
||||||
const modal = document.querySelector(selector);
|
const modal = document.querySelector(selector);
|
||||||
const tabs = modal.querySelector('.tabs > ul');
|
|
||||||
let dataTabs = modal.querySelectorAll('.data-tabs');
|
let dataTabs = modal.querySelectorAll('.data-tabs');
|
||||||
|
|
||||||
// Reset data tabs content
|
// Reset data tabs content
|
||||||
for (let tab of dataTabs) {
|
for (let tab of dataTabs) {
|
||||||
tab.innerHTML = '';
|
tab.innerHTML = '';
|
||||||
}
|
}
|
||||||
|
|
||||||
let siteSheet = new SiteSheet();
|
let siteSheet = new SiteSheet();
|
||||||
siteSheet.siteData = data;
|
siteSheet.siteData = data;
|
||||||
|
|
||||||
window.Biblio = siteSheet;
|
window.Biblio = siteSheet;
|
||||||
|
|
||||||
modal.querySelector('#short-sheet').innerHTML = siteSheet.renderShort();
|
modal.querySelector('#short-sheet').innerHTML = siteSheet.renderShort();
|
||||||
@ -136,29 +136,6 @@ UI.openSiteModal = async function (data, selector) {
|
|||||||
images.innerHTML += photos[0] ? sitePhotos.render() : '';
|
images.innerHTML += photos[0] ? sitePhotos.render() : '';
|
||||||
}
|
}
|
||||||
|
|
||||||
// Move to Stimulus?
|
|
||||||
// TODO Awful!!!
|
|
||||||
tabs.childNodes.forEach(node => {
|
|
||||||
if (node.nodeName === 'LI') {
|
|
||||||
node.addEventListener('click', () => {
|
|
||||||
node.classList.add('is-active');
|
|
||||||
|
|
||||||
for (let el of tabs.childNodes) {
|
|
||||||
if (el.nodeName === 'LI' && el !== node) {
|
|
||||||
el.classList.remove('is-active');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
for (let tab of dataTabs) {
|
|
||||||
tab.classList.add('is-hidden');
|
|
||||||
if (tab.id == node.id.replace('for-','')) {
|
|
||||||
tab.classList.remove('is-hidden');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
modal.classList.add('is-active');
|
modal.classList.add('is-active');
|
||||||
|
|
||||||
this.imageGallery('gallery-1', surveys);
|
this.imageGallery('gallery-1', surveys);
|
||||||
@ -175,6 +152,7 @@ UI.openNotConserModal = async function (data, selector) {
|
|||||||
sheet.siteData = data;
|
sheet.siteData = data;
|
||||||
// For Stimulus biblio_controller
|
// For Stimulus biblio_controller
|
||||||
window.Biblio = sheet;
|
window.Biblio = sheet;
|
||||||
|
|
||||||
modal.querySelector('#not-conser-sheet').innerHTML = await sheet.render();
|
modal.querySelector('#not-conser-sheet').innerHTML = await sheet.render();
|
||||||
modal.classList.add('is-active');
|
modal.classList.add('is-active');
|
||||||
}
|
}
|
||||||
@ -184,7 +162,6 @@ UI.openNotConserModal = async function (data, selector) {
|
|||||||
*/
|
*/
|
||||||
UI.openFindingModal = async function (data, selector) {
|
UI.openFindingModal = async function (data, selector) {
|
||||||
const modal = document.querySelector(selector);
|
const modal = document.querySelector(selector);
|
||||||
const tabs = modal.querySelector('.tabs > ul');
|
|
||||||
let dataTabs = modal.querySelectorAll('.data-tabs');
|
let dataTabs = modal.querySelectorAll('.data-tabs');
|
||||||
|
|
||||||
// Reset data tabs content
|
// Reset data tabs content
|
||||||
@ -194,37 +171,50 @@ UI.openFindingModal = async function (data, selector) {
|
|||||||
|
|
||||||
let finding = new Finding();
|
let finding = new Finding();
|
||||||
finding.data = data;
|
finding.data = data;
|
||||||
finding.setImages();
|
|
||||||
modal.querySelector('#finding-sheet').innerHTML = await finding.render();
|
|
||||||
// For Stimulus biblio_controller
|
// For Stimulus biblio_controller
|
||||||
window.Biblio = finding;
|
window.Biblio = finding;
|
||||||
|
|
||||||
|
finding.setImages();
|
||||||
|
modal.querySelector('#finding-sheet').innerHTML = await finding.render();
|
||||||
if (finding.images) {
|
if (finding.images) {
|
||||||
modal.querySelector('#photos').innerHTML = finding.renderImages();
|
modal.querySelector('#photos').innerHTML = finding.renderImages();
|
||||||
this.imageGallery('finding-gallery', finding.images);
|
this.imageGallery('finding-gallery', finding.images);
|
||||||
}
|
}
|
||||||
// Move to Stimulus?
|
modal.classList.add('is-active');
|
||||||
// TODO Awful!!!
|
}
|
||||||
tabs.childNodes.forEach(node => {
|
/**
|
||||||
if (node.nodeName === 'LI') {
|
* @param {string} menuListSel Menu list selector
|
||||||
node.addEventListener('click', () => {
|
* @param {L.Map} map
|
||||||
node.classList.add('is-active');
|
* @param {L.LayerGroup} sites
|
||||||
|
*/
|
||||||
|
UI.sitesMenu = function (menuListSel, map, sites) {
|
||||||
|
// Close menu if arrow button is clicked...
|
||||||
|
let markers = [];
|
||||||
|
|
||||||
for (let el of tabs.childNodes) {
|
map.eachLayer(layer => {
|
||||||
if (el.nodeName === 'LI' && el !== node) {
|
if (layer instanceof L.Marker) {
|
||||||
el.classList.remove('is-active');
|
markers.push(layer);
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
|
|
||||||
for (let tab of dataTabs) {
|
const menu = document.querySelector(menuListSel);
|
||||||
tab.classList.add('is-hidden');
|
menu.addEventListener('click', async event => {
|
||||||
if (tab.id == node.id.replace('for-','')) {
|
if (event.target.nodeName === 'A') {
|
||||||
tab.classList.remove('is-hidden');
|
const layerId = event.target.id;
|
||||||
}
|
const marker = markers.filter(m => m.id === layerId)[0];
|
||||||
}
|
|
||||||
});
|
// zoom to layer...
|
||||||
|
const layer = sites.customGetLayer(layerId);
|
||||||
|
map.setView(
|
||||||
|
layer.getBounds().getCenter(),
|
||||||
|
19,
|
||||||
|
{animate: true, duration: 1, easeLinearity: 0.25}
|
||||||
|
);
|
||||||
|
|
||||||
|
marker.openTooltip();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
modal.classList.add('is-active');
|
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
* Open Spotlight gallery
|
* Open Spotlight gallery
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user