Biblio controller + update findings

webgis/index.html

@@ -73,7 +73,7 @@
                         <i class="fa fa-chevron-right" data-menu-target="icon" data-id="siti"></i>
                     </span>
                 </p>
-                <ul class="menu-list is-hidden" id="siti-list" data-menu-target="list">
+                <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">
                             Anacapri
@@ -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" id="grotta_azzurra">
+                                <a class="is-block button" title="Vai al sito Villa di Gradola" data-action="click->marker#go" data-coords="40.56094295 14.20573624">
                                     Grotta Azzurra
                                 </a>
                             </li>
                             <li>
-                                <a class="button" id="lopozzo">
+                                <a class="button" title="Vai al sito Lo Pozzo" data-action="click->marker#go" data-coords="40.556601 14.213642">
                                     Località Lo Pozzo
                                 </a>
                             </li>
                             <li>
-                                <a class="button" id="scala_fenicia">
+                                <a class="button" title="Vai al sito Scala Fenicia" data-action="click->marker#go" data-coords="40.5562963 14.2285935">
                                     Scala Fenicia
                                 </a>
                             </li>
                             <li>
-                                <a class="button" title="Vai al sito Villa di Damecuta" id="damecuta">
+                                <a class="button" title="Vai al sito Villa di Damecuta" data-action="click->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" id="gradola">
+                                <a class="is-block button" title="Vai al sito Villa di Gradola" data-action="click->marker#go" data-coords="40.560834 14.205793">
                                     Villa di Gradola
                                 </a>
                             </li>
                             <li>
-                                <a class="button" id="san_michele">
+                                <a class="button" title="Vai al sito San Michele" data-action="click->marker#go" data-coords="">
                                     Villa San Michele
                                 </a>
                             </li>
@@ -275,15 +275,45 @@
                         </span>
                         <ul id="rinv-anacapri-sub" class="is-hidden">
                             <li>
-                                <a class="button" id="affresco_dame" data-marker-target="coords"
+                                <a class="button" data-marker-target="coords"
                                     data-coords="40.55939119 14.20064002" data-action="click->marker#go">
                                     Affresco Villa di Damecuta
                                 </a>
                             </li>
                             <li>
-                                <a class="button" id="candelabro" data-marker-target="coords"
+                                <a class="button" data-marker-target="coords"
                                     data-coords="40.5565536 14.2133073" data-action="click->marker#go">
-                                    Base di candelabro
+                                    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">
+                                    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">
+                                    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">
+                                    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">
+                                    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">
+                                    Statua di peplophoros - Grotta Azzurra
                                 </a>
                             </li>
                         </ul>
@@ -345,15 +375,15 @@
         <button class="modal-close is-large" aria-label="close" data-action="click->modal#close"></button>
     </div>
     <!-- Not conserved modal -->
-    <div class="modal" id="not-conser-data" data-controller="modal" data-modal-target="modal">
+    <div class="modal" id="not-conser-data" data-controller="modal biblio" data-modal-target="modal">
         <div class="modal-background" data-action="click->modal#close"></div>
         <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>
     </div>
-    <!-- Not conserved modal -->
+    <!-- Finding modal -->
-    <div class="modal" id="finding-data" data-controller="modal" data-modal-target="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-content has-background-white" style="min-height: 95vh;">
             <div class="tabs is-centered">

webgis/js/components/Finding.js

@@ -39,7 +39,7 @@ export class Finding {
                 </span>
                 <strong>Bibliografia:</strong> ${await this.biblio(this._data.id)}
             </p>
-            <div class="notification is-light mx-3 mt-4 mb-0 p-2 is-hidden" id="biblio"></div>
+            <div class="notification is-light mx-3 mt-4 mb-0 p-2 is-hidden" data-biblio-target="biblio"></div>
             <p class="mt-4 pl-2 pr-5">
                 <strong class="pb-3">Descrizione</strong></br>
                 ${this._data.description}
@@ -88,6 +88,7 @@ export class Finding {
             record.bibliography.forEach(biblio => {
                 citations += `
                     <span class="is-clickable is-capitalized has-text-link"
+                        data-action="click->biblio#open"
                         id="cit-${biblio.id}">
                         ${biblio.citation.toLowerCase()},
                     </span> ${biblio.pages};
@@ -97,8 +98,7 @@ export class Finding {
                     <div class="p-2 mt-2" id="ref-${biblio.id}">
                         <p>${biblio.reference}</p>
                     </div>
-                    `
+                `);
-                );
             });
         }
 

webgis/js/components/NotConservedSheet.js

@@ -42,7 +42,7 @@ export class NotConservedSheet {
                 </span>
                 <strong>Bibliografia:</strong> ${await this.biblio(this._data.id)}
             </p>
-            <div class="notification is-light mx-3 mt-4 mb-0 p-2 is-hidden" id="biblio"></div>
+            <div class="notification is-light mx-3 mt-4 mb-0 p-2 is-hidden" data-biblio-target="biblio"></div>
             <p class="p-2 mb-4">
                 <strong>Autore scheda:</strong> ${this._data.author}
             </p>
@@ -58,6 +58,7 @@ export class NotConservedSheet {
             record.bibliography.forEach(record => {
                 citations += `
                     <span class="is-clickable is-capitalized has-text-link"
+                        data-action="click->biblio#open"
                         id="cit-${record.id}">
                         ${record.citation.toLowerCase()},
                     </span> ${record.pages};

webgis/js/controllers/biblio_controller.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ['biblio', 'cit', 'ref', 'close'];
+
+    open(event) {
+        const biblio = window.Biblio;
+        const target = event.currentTarget;
+        const id = target.id.replace('cit-', '');
+        
+		this.biblioTarget.innerHTML = '<button class="delete" data-action="click->biblio#hideBiblio"></button>';
+        this.biblioTarget.innerHTML += biblio.getReference(id);
+
+        this.showBiblio();
+    }
+
+    close() {
+        this.modalTarget.classList.remove('is-active');
+    }
+
+    showBiblio() {
+        this.biblioTarget.classList.remove('is-hidden');
+		this.biblioTarget.scrollIntoView({behavior: 'smooth'});
+    }
+
+    hideBiblio() {
+		this.biblioTarget.classList.add('is-hidden');
+    }
+}

webgis/js/index.js

@@ -4,6 +4,7 @@ import { Application } from '@hotwired/stimulus';
 import MenuController from './controllers/menu_controller.js';
 import ModalController from './controllers/modal_controller.js';
 import MarkerController from './controllers/marker_controller.js';
+import BiblioController from './controllers/biblio_controller.js';
 
 document.addEventListener('DOMContentLoaded', async () => {
     // Register Stimulus controllers
@@ -20,7 +21,6 @@ document.addEventListener('DOMContentLoaded', async () => {
 
     UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
     UI.toggleBurger('navbar-burger');
-    UI.sitesMenu('.menu-list', map, sites);
 
     window.LMap = map;
 });
@@ -30,4 +30,5 @@ function initStimulus() {
     Stimulus.register("menu", MenuController);
     Stimulus.register("modal", ModalController);
     Stimulus.register("marker", MarkerController);
+    Stimulus.register("biblio", BiblioController);
 }

webgis/js/ui.js

@@ -172,24 +172,9 @@ UI.openNotConserModal = async function (data, selector) {
 
 	let sheet = new NotConservedSheet();
 	sheet.siteData = data;
+	// For Stimulus biblio_controller
+	window.Biblio = sheet;
 	modal.querySelector('#not-conser-sheet').innerHTML = await sheet.render();
-	modal.addEventListener('click', event => {
-		const biblio = modal.querySelector('#biblio');
-		if (event.target.id.includes('cit')) {
-
-			const id = event.target.id.replace('cit-','');
-
-			biblio.innerHTML = '<button class="delete"></button>';
-			biblio.innerHTML += sheet.getReference(id);
-			biblio.classList.remove('is-hidden');
-			biblio.scrollIntoView({behavior: 'smooth'});
-		}
-
-		if (event.target.className == 'delete') {
-			biblio.classList.add('is-hidden');
-		}
-	});
-
 	modal.classList.add('is-active');
 }
 /**
@@ -210,22 +195,8 @@ UI.openFindingModal = async function (data, selector) {
 	finding.data = data;
 	finding.setImages();
 	modal.querySelector('#finding-sheet').innerHTML = await finding.render();
-	modal.addEventListener('click', event => {
+	// For Stimulus biblio_controller
-		const biblio = modal.querySelector('#biblio');
+	window.Biblio = finding;
-
-		if (event.target.id.includes('cit')) {
-			const id = event.target.id.replace('cit-','');
-
-			biblio.innerHTML = '<button class="delete"></button>';
-			biblio.innerHTML += finding.getReference(id);
-			biblio.classList.remove('is-hidden');
-			biblio.scrollIntoView({behavior: 'smooth'});
-		}
-
-		if (event.target.className == 'delete') {
-			biblio.classList.add('is-hidden');
-		}
-	});
 	if (finding.images) {
 		modal.querySelector('#photos').innerHTML = finding.renderImages();
 		this.imageGallery('finding-gallery', finding.images);
@@ -254,38 +225,6 @@ UI.openFindingModal = async function (data, selector) {
 	});
 	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) {
-	let markers = [];
-
-	map.eachLayer(layer => {
-		if (layer instanceof L.Marker) {
-			markers.push(layer);
-		}
-	})
-
-	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();
-		}
-	});
-}
 /**
  * Open Spotlight gallery
  * @param {string} galleryId The id of the trigger element