Update findings + menu layout (WIP)

webgis/index.html

@@ -63,49 +63,103 @@
     <div class="main columns">
         <div class="column is-hidden is-overlay has-background-white" id="menu">
             <aside class="menu ml-4">
-                <p class="menu-label">
-                    Beni archeologici
                     <button title="Chiudi menu" class="button is-small is-pulled-right" id="close-menu">
                         <span class="icon is-small">
                         <i class="fa fa-chevron-left"></i>
                         </span>
                     </button>
+                <p class="menu-label is-size-5">
+                    <span class="icon pr-2">
+                        <img class="image" src="img/icons/siti_menu.png"/>
+                    </span>
+                    Beni archeologici
                 </p>
-                <ul class="menu-list">
+                <ul class="menu-list is-hidden" id="siti-list">
+                    <li>
+                        Anacapri
+                        <ul id="siti-anacapri-sub">
                             <li>
-                        <a class="is-block button" title="Vai al sito Villa di Gradola" id="gradola">
-                            Villa di Gradola
-                        </a>
                                 <a class="is-block button" title="Vai al sito Villa di Gradola" id="grotta_azzurra">
                                     Grotta Azzurra
                                 </a>
-                        <a class="button" title="Vai al sito Villa di Damecuta" id="damecuta">
+                            </li>
-                            Villa di Damecuta
+                            <li>
-                        </a>
+                                <a class="button" id="lopozzo">
-                        <a class="button" title="Vai al sito Grotta di Matermania" id="matermania">
+                                    Lo Pozzo (complesso idraulico)
-                            Grotta di Matermania
-                        </a>
-                        <a class="button" id="arsenale">
-                            Grotta dell'Arsenale
-                        </a>
-                        <a class="button" id="tiberio">
-                            Bagni di Tiberio
-                        </a>
-                        <a class="button" id="mura">
-                            Mura greche
-                        </a>
-                        <a class="button" id="san_michele">
-                            Villa San Michele
                                 </a>
+                            </li>
+                            <li>
                                 <a class="button" id="scala_fenicia">
                                     Scala Fenicia
                                 </a>
                             </li>
+                            <li>
+                                <a class="button" title="Vai al sito Villa di Damecuta" id="damecuta">
+                                    Villa di Damecuta
+                                </a>
+                            </li>
+                            <li>
+                                <a class="is-block button" title="Vai al sito Villa di Gradola" id="gradola">
+                                    Villa di Gradola
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" id="san_michele">
+                                    Villa San Michele
+                                </a>
+                            </li>
                         </ul>
-                <p class="menu-label">
+                    </li>
+                    <li>
+                        Capri
+                        <ul id="siti-capri-sub">
+                            <li>
+                                <a class="button" id="tiberio">
+                                    Bagni di Tiberio
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" id="arsenale">
+                                    Grotta dell'Arsenale
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" title="Vai al sito Grotta di Matermania" id="matermania">
+                                    Grotta di Matermania
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" id="mura">
+                                    Mura greche
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+                <p class="menu-label is-size-5">
                     Beni non conservati
                 </p>
-                <ul class="menu-list" id="not-conserved"></ul>
+                <ul class="menu-list is-hidden" id="not-conserved-list">
+
+                </ul>
+                <p class="menu-label is-size-5">
+                    <span class="icon pr-2">
+                        <img class="image" src="img/icons/rinv_menu.png"/>
+                    </span>
+                    Rinvenimenti
+                </p>
+                <ul class="menu-list is-hidden" id="rinvenimenti-list">
+                    <li>
+                        <a class="button" id="affresco_dame">
+                            Affresco Villa di Damecuta
+                        </a>
+                    </li>
+                    <li>
+                        <a class="button" id="candelabro">
+                            Base di candelabro
+                        </a>
+                    </li>
+                </ul>
             </aside>
         </div>
         <div class="column mb-0 pb-0 is-full is-relative">
@@ -173,7 +227,28 @@
     <div class="modal" id="finding-data">
         <div class="modal-background"></div>
         <div class="modal-content has-background-white" style="min-height: 95vh;">
-            <div id="finding-sheet"></div>
+            <div class="tabs is-centered">
+                <ul>
+                    <li class="is-active" id="for-finding-sheet">
+                        <a>
+                          <span class="icon is-small"
+                            ><i class="fas fa-info-circle" aria-hidden="true"></i
+                          ></span>
+                          <span>Scheda</span>
+                        </a>
+                    </li>
+                    <li id="for-photos">
+                      <a>
+                        <span class="icon is-small"
+                          ><i class="fas fa-image" aria-hidden="true"></i
+                        ></span>
+                        <span>Immagini</span>
+                      </a>
+                    </li>
+                </ul>
+            </div>
+            <div class="data-tabs" id="finding-sheet"></div>
+            <div class="data-tabs is-hidden" id="photos"></div>
         </div>
         <button class="modal-close is-large" aria-label="close"></button>
     </div>

webgis/js/components/Finding.js

@@ -2,11 +2,14 @@
  * @class Finding
  */
 export class Finding {
+    biblioElements = [];
+    images = null;
+    
     set data(data) {
         this._data = data;
     }
 
-    render() {
+    async render() {
         return `
         <div class="container px-4 pt-4">
             <p class="p-2">
@@ -36,6 +39,13 @@ export class Finding {
             <p class="p-2">
                 <strong>Luogo di conservazione</strong> ${this._data.conservationPlace}
             </p>
+            <p class="mt-4 pl-2 pr-5">
+                <span class="icon has-text-link">
+                    <i class="fa fa-book"></i>
+                </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>
             <p class="mt-4 pl-2 pr-5">
                 <strong class="pb-3">Descrizione</strong></br>
                 ${this._data.description}
@@ -45,4 +55,70 @@ export class Finding {
             </p>
         </div>`;
     }
+
+    renderImages() {
+		let content = `<div class="content has-text-centered">
+			<p class="is-size-5 mt-3">Immagini</p>`;
+		content += `
+			<div style="max-width: 70%; margin: 0 auto">
+				<p class="is-size-6 has-text-centered">Cliccare sull'immagine per aprire la gallery</p>
+				<figure class="is-relative is-clickable has-text-centered" id="finding-gallery">
+					<img src="img/${this.images[0].filename}" width="300"/>
+					<div class="icon overlay is-flex is-justify-content-center is-align-items-center">
+						<i class="is-flex fa fa-2x fa-play-circle"></i>
+					</div>
+				</figure>
+			</div>
+		</div>
+		`;
+
+        return content;
+    }
+
+    async setImages() {
+        let record = await this.fetchData(`${window.API_URL}/finding/${this._data.id}`)
+
+        if (record.images.length) {
+            this.images = record.images;
+        }
+    }
+    /**
+     * @param {number} recordId 
+     */
+    async biblio(recordId) {
+        let record = await this.fetchData(`${window.API_URL}/finding/${recordId}`);
+
+        let citations = '';
+
+        if (record.bibliography.length) {
+            record.bibliography.forEach(record => {
+                citations += `
+                    <span class="is-clickable is-capitalized has-text-link"
+                        id="cit-${record.id}">
+                        ${record.citation.toLowerCase()},
+                    </span> ${record.pages};
+                `;
+
+                this.biblioElements.push(`
+                    <div class="p-2 mt-2" id="ref-${record.id}">
+                        <p>${record.reference}</p>
+                    </div>
+                    `
+                );
+            });
+        }
+
+        return citations.trim().slice(0, -1);
+    }
+
+    getReference(id) {
+        return this.biblioElements.find(ref => {
+            let regex = new RegExp('ref-'+id+'"');
+            return ref.match(regex);
+        });
+    }
+
+    async fetchData(url) {
+        return await fetch(url).then(res => res.json());
+    }
 }

webgis/js/components/NotConservedSheet.js

@@ -42,8 +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 class="notification is-light mx-3 mt-4 mb-0 p-2 is-hidden" id="biblio"></div>
-            </div>
             <p class="p-2 mb-4">
                 <strong>Autore scheda:</strong> ${this._data.author}
             </p>

webgis/js/index.js

@@ -12,7 +12,12 @@ document.addEventListener('DOMContentLoaded', async () => {
     GIS.toggleSpherical(map);
 
     UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
-    UI.toggleMenu('siti');
+    UI.toggleMenu('siti', 'siti-list');
+    UI.toggleMenu('rinvenimenti', 'rinvenimenti-list');
     UI.toggleBurger('navbar-burger');
     UI.sitesMenu('.menu-list', map, sites);
+
+    document.querySelector('#close-menu').addEventListener('click', () => {
+        document.querySelector('#menu').classList.add('is-hidden');
+    })
 });

webgis/js/ui.js

@@ -67,16 +67,28 @@ UI.toggleBurger = function(burgerClass) {
 	});
 }
 /**
- * Toggle side menu and rescale map container
+ * Toggle side menu
  * @param {string} triggerId The ID of the trigger element
+ * @param {?string} listId The ID of the menu list to open (if any)
  */
-UI.toggleMenu = function (triggerId) {
+UI.toggleMenu = function (triggerId, listId = null) {
 	const trigger = document.querySelector(`#${triggerId}`);
-	trigger.addEventListener('click', () => {
 	const menu = document.querySelector('#menu');
-		menu.classList.toggle('is-hidden');
+	trigger.addEventListener('click', () => {
-		menu.classList.toggle('is-3');
+		menu.classList.remove('is-hidden');
-		//document.querySelector('#map').parentElement.classList.toggle('is-full');
+		menu.classList.add('is-3');
+		const lists = menu.querySelectorAll('ul');
+
+		if (listId !== null) {
+			const list = document.querySelector(`#${listId}`);
+			list.classList.remove('is-hidden');
+
+			for (let ul of lists) {
+				if (ul.id !== listId && !ul.id.includes('sub')) {
+					ul.classList.add('is-hidden');
+				}
+			}
+		}
 	});
 }
 /**
@@ -201,10 +213,60 @@ 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');
 	
-	let sheet = new Finding();
+	// Reset data tabs content
-	sheet.data = data;
+	for (let tab of dataTabs) {
-	modal.querySelector('#finding-sheet').innerHTML = await sheet.render();
+		tab.innerHTML = '';
+	}
+
+	let finding = new Finding();
+	finding.data = data;
+	finding.setImages();
+	modal.querySelector('#finding-sheet').innerHTML = await finding.render();
+	modal.addEventListener('click', event => {
+		const biblio = document.querySelector('#biblio');
+		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);
+	}
+	// 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');
 	const closeBtn = modal.querySelector('.modal-close');
 	const modalBg = modal.querySelector('.modal-background');
@@ -220,7 +282,6 @@ UI.openFindingModal = async function (data, selector) {
  */
 UI.sitesMenu = function (menuListSel, map, sites) {
 	// Close menu if arrow button is clicked...
-	this.toggleMenu('close-menu');
 	let markers = [];
 
 	map.eachLayer(layer => {