From d71420634bf338767755c15fb72e2fc7201fbf74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P?= <nicolo.paraciani@cnr.it>
Date: Thu, 28 Nov 2024 14:24:22 +0100
Subject: [PATCH] Tabs to Stimulus

---
 webgis/index.html                        | 109 ++++++++++++-----------
 webgis/js/controllers/tabs_controller.js |  34 +++++++
 webgis/js/index.js                       |   2 +
 webgis/js/ui.js                          |  84 ++++++++---------
 4 files changed, 128 insertions(+), 101 deletions(-)
 create mode 100644 webgis/js/controllers/tabs_controller.js

diff --git a/webgis/index.html b/webgis/index.html
index d419ea0..8eb2c23 100644
--- a/webgis/index.html
+++ b/webgis/index.html
@@ -42,7 +42,7 @@
         <hr class="navbar-divider">
         <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"
-                data-action="click->menu#toggleMenu">
+                data-action="menu#toggleMenu">
                 <span class="icon mr-2">
                     <i class="fa fa-list"></i>
                 </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"
             data-menu-target="menu">
             <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">
                     <span class="icon pr-2">
                         <img class="image" src="img/icons/siti_menu.png"/>
@@ -83,32 +83,32 @@
                         </span>
                         <ul id="siti-anacapri-sub" class="is-hidden">
                             <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
                                 </a>
                             </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
                                 </a>
                             </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
                                 </a>
                             </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
                                 </a>
                             </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
                                 </a>
                             </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
                                 </a>
                             </li>
@@ -164,92 +164,92 @@
                         </span>
                         <ul id="noncons-anacapri-sub" class="is-hidden">
                             <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
                                 </a>
                             </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
                                 </a>
                             </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
                                 </a>
                             </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
                                 </a>
                             </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
                                 </a>
                             </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
                                 </a>
                             </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
                                 </a>
                             </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
                                 </a>
                             </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
                                 </a>
                             </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
                                 </a>
                             </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
                                 </a>
                             </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”
                                 </a>
                             </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”
                                 </a>
                             </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
                                 </a>
                             </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
                                 </a>
                             </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
                                 </a>
                             </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
                                 </a>
                             </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
                                 </a>
                             </li>
@@ -276,55 +276,55 @@
                         <ul id="rinv-anacapri-sub" class="is-hidden">
                             <li>
                                 <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
                                 </a>
                             </li>
                             <li>
                                 <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
                                 </a>
                             </li>
                             <li>
                                 <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
                                 </a>
                             </li>
                             <li>
                                 <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
                                 </a>
                             </li>
                             <li>
                                 <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
                                 </a>
                             </li>
                             <li>
                                 <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
                                 </a>
                             </li>
                             <li>
                                 <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
                                 </a>
                             </li>
                             <li>
                                 <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
                                 </a>
                             </li>
                             <li>
                                 <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
                                 </a>
                             </li>
@@ -340,12 +340,13 @@
         </div>
     </div>
     <!-- Sites data modal -->
-    <div class="modal" id="site-data" data-controller="modal biblio" data-modal-target="modal">
-        <div class="modal-background" data-action="click->modal#close"></div>
+    <div class="modal" id="site-data" data-controller="modal biblio tabs" data-modal-target="modal">
+        <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="tabs is-centered">
                 <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>
                           <span class="icon is-small"
                             ><i class="fas fa-info-circle" aria-hidden="true"></i
@@ -353,7 +354,7 @@
                           <span>Scheda sintetica</span>
                         </a>
                     </li>
-                    <li id="for-site-sheet">
+                    <li id="for-site-sheet" data-tabs-target="tab" data-action="click->tabs#activate">
                         <a>
                           <span class="icon is-small"
                             ><i class="fas fa-info-circle" aria-hidden="true"></i
@@ -361,7 +362,7 @@
                           <span>Scheda dettagliata</span>
                         </a>
                     </li>
-                    <li id="for-photos">
+                    <li id="for-photos" data-tabs-target="tab" data-action="click->tabs#activate">
                       <a>
                         <span class="icon is-small"
                           ><i class="fas fa-image" aria-hidden="true"></i
@@ -369,7 +370,7 @@
                         <span>Disegni e fotografie</span>
                       </a>
                     </li>
-                    <li id="for-documents">
+                    <li id="for-documents" data-tabs-target="tab" data-action="click->tabs#activate">
                       <a>
                         <span class="icon is-small"
                           ><i class="far fa-file-alt" aria-hidden="true"></i
@@ -379,12 +380,12 @@
                     </li>
                 </ul>
             </div>
-            <div class="data-tabs" id="short-sheet"></div>
-            <div class="data-tabs is-hidden" id="site-sheet"></div>
-            <div class="data-tabs is-hidden" id="photos"></div>
-            <div class="data-tabs is-hidden" id="documents"></div>
+            <div class="data-tabs" id="short-sheet" data-tabs-target="content"></div>
+            <div class="data-tabs is-hidden" id="site-sheet" data-tabs-target="content"></div>
+            <div class="data-tabs is-hidden" id="photos" data-tabs-target="content"></div>
+            <div class="data-tabs is-hidden" id="documents" data-tabs-target="content"></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>
     <!-- Not conserved 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 id="not-conser-sheet"></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>
     <!-- Finding modal -->
-    <div class="modal" id="finding-data" data-controller="modal biblio" data-modal-target="modal">
-        <div class="modal-background" data-action="click->modal#close"></div>
+    <div class="modal" id="finding-data" data-controller="modal biblio tabs" data-modal-target="modal">
+        <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="tabs is-centered">
                 <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>
                           <span class="icon is-small"
                             ><i class="fas fa-info-circle" aria-hidden="true"></i
@@ -408,7 +409,7 @@
                           <span>Scheda</span>
                         </a>
                     </li>
-                    <li id="for-photos">
+                    <li id="for-photos" data-tabs-target="tab" data-action="click->tabs#activate">
                       <a>
                         <span class="icon is-small"
                           ><i class="fas fa-image" aria-hidden="true"></i
@@ -418,10 +419,10 @@
                     </li>
                 </ul>
             </div>
-            <div class="data-tabs" id="finding-sheet"></div>
-            <div class="data-tabs is-hidden" id="photos"></div>
+            <div class="data-tabs" id="finding-sheet" data-tabs-target="content"></div>
+            <div class="data-tabs is-hidden" id="photos" data-tabs-target="content"></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>
     <!-- Spherical photo modal -->
     <div class="modal" id="spherical-modal">
diff --git a/webgis/js/controllers/tabs_controller.js b/webgis/js/controllers/tabs_controller.js
new file mode 100644
index 0000000..277c752
--- /dev/null
+++ b/webgis/js/controllers/tabs_controller.js
@@ -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');
+        });
+    }
+}
+
diff --git a/webgis/js/index.js b/webgis/js/index.js
index 5ce3aa3..34bea4c 100644
--- a/webgis/js/index.js
+++ b/webgis/js/index.js
@@ -5,6 +5,7 @@ import MenuController from './controllers/menu_controller.js';
 import ModalController from './controllers/modal_controller.js';
 import MarkerController from './controllers/marker_controller.js';
 import BiblioController from './controllers/biblio_controller.js';
+import TabsController from './controllers/tabs_controller.js';
 
 document.addEventListener('DOMContentLoaded', async () => {
     // Register Stimulus controllers
@@ -31,4 +32,5 @@ function initStimulus() {
     Stimulus.register("modal", ModalController);
     Stimulus.register("marker", MarkerController);
     Stimulus.register("biblio", BiblioController);
+    Stimulus.register("tabs", TabsController);
 }
\ No newline at end of file
diff --git a/webgis/js/ui.js b/webgis/js/ui.js
index 9415541..aaa23e3 100644
--- a/webgis/js/ui.js
+++ b/webgis/js/ui.js
@@ -93,21 +93,21 @@ UI.toggleMenu = function (triggerId, listId = null) {
 }
 /**
  * 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 {string} selector The modal selector
  */
 UI.openSiteModal = async function (data, selector) {
 	const modal = document.querySelector(selector);
-	const tabs = modal.querySelector('.tabs > ul');
 	let dataTabs = modal.querySelectorAll('.data-tabs');
 	
 	// Reset data tabs content
 	for (let tab of dataTabs) {
 		tab.innerHTML = '';
 	}
+
 	let siteSheet = new SiteSheet();
 	siteSheet.siteData = data;
+
 	window.Biblio = siteSheet;
 
 	modal.querySelector('#short-sheet').innerHTML = siteSheet.renderShort();
@@ -136,29 +136,6 @@ UI.openSiteModal = async function (data, selector) {
 		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');
 
 	this.imageGallery('gallery-1', surveys);
@@ -175,6 +152,7 @@ UI.openNotConserModal = async function (data, selector) {
 	sheet.siteData = data;
 	// For Stimulus biblio_controller
 	window.Biblio = sheet;
+
 	modal.querySelector('#not-conser-sheet').innerHTML = await sheet.render();
 	modal.classList.add('is-active');
 }
@@ -184,7 +162,6 @@ UI.openNotConserModal = async function (data, selector) {
  */
 UI.openFindingModal = async function (data, selector) {
 	const modal = document.querySelector(selector);
-	const tabs = modal.querySelector('.tabs > ul');
 	let dataTabs = modal.querySelectorAll('.data-tabs');
 	
 	// Reset data tabs content
@@ -194,37 +171,50 @@ UI.openFindingModal = async function (data, selector) {
 
 	let finding = new Finding();
 	finding.data = data;
-	finding.setImages();
-	modal.querySelector('#finding-sheet').innerHTML = await finding.render();
+
 	// For Stimulus biblio_controller
 	window.Biblio = finding;
+
+	finding.setImages();
+	modal.querySelector('#finding-sheet').innerHTML = await finding.render();
 	if (finding.images) {
 		modal.querySelector('#photos').innerHTML = finding.renderImages();
 		this.imageGallery('finding-gallery', finding.images);
 	}
-	// Move to Stimulus?
-	// TODO Awful!!!
-	tabs.childNodes.forEach(node => {
-		if (node.nodeName === 'LI') {
-			node.addEventListener('click', () => {
-				node.classList.add('is-active');
+	modal.classList.add('is-active');
+}
+/**
+ * @param {string} menuListSel Menu list selector
+ * @param {L.Map} map
+ * @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) {
-					if (el.nodeName === 'LI' && el !== node) {
-						el.classList.remove('is-active');
-					}
-				}
+	map.eachLayer(layer => {
+		if (layer instanceof L.Marker) {
+			markers.push(layer);
+		}
+	})
 
-				for (let tab of dataTabs) {
-					tab.classList.add('is-hidden');
-					if (tab.id == node.id.replace('for-','')) {
-						tab.classList.remove('is-hidden');
-					}
-				}
-			});
+	const menu = document.querySelector(menuListSel);
+	menu.addEventListener('click', async event => {
+		if (event.target.nodeName === 'A') {
+			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