Crude tabs...

index.html

@@ -56,22 +56,10 @@
                     <li>
                         <a class="is-block button" title="Vai al sito Villa di Gradola" id="gradola">
                             Villa di Gradola
-                            <span class="dropdown-trigger icon is-small">
-                                <i class="fas fa-angle-down ml-2" aria-hidden="true"></i>
-                            </span>
                         </a>
-                            <div class="dropdown ml-2">
-                                <div class="dropdown-menu" id="dropdown-menu" role="menu">
-                                  <div class="dropdown-content">
-                                    <a class="dropdown-item" data-sheet="gradola">Scheda del sito</a>
-                                    <a class="dropdown-item" data-docs="gradola">Documentazione</a>
-                                    <a class="dropdown-item" data-surveys="gradola">Elaborazioni CNR</a>
-                                    <a class="dropdown-item" data-photos="gradola">Fotografie</a>
-                                  </div>
-                                </div>
-                            </div>
                         <a class="button" title="Vai al sito Villa di Damecuta" id="damecuta">
                             Villa di Damecuta
+                        </a>
                         <a class="button" title="Vai al sito Grotta di Matermania" id="matermania">
                             Grotta di Matermania
                         </a>
@@ -99,6 +87,37 @@
     <div class="modal" id="site-data">
         <div class="modal-background"></div>
         <div class="modal-content has-background-white">
+            <div class="tabs is-centered">
+                <ul>
+                    <li class="is-active" id="for-site-sheet">
+                        <a>
+                          <span class="icon is-small"
+                            ><i class="fas fa-info-circle" aria-hidden="true"></i
+                          ></span>
+                          <span>Scheda descrittiva</span>
+                        </a>
+                    </li>
+                    <li id="for-photos">
+                      <a>
+                        <span class="icon is-small"
+                          ><i class="fas fa-image" aria-hidden="true"></i
+                        ></span>
+                        <span>Disegni e fotografie</span>
+                      </a>
+                    </li>
+                    <li id="for-documents">
+                      <a>
+                        <span class="icon is-small"
+                          ><i class="far fa-file-alt" aria-hidden="true"></i
+                        ></span>
+                        <span>Documenti</span>
+                      </a>
+                    </li>
+                </ul>
+            </div>
+            <div class="data-tabs" id="site-sheet"></div>
+            <div class="data-tabs is-hidden" id="photos"></div>
+            <div class="data-tabs is-hidden" id="documents"></div>
         </div>
         <button class="modal-close is-large" aria-label="close"></button>
     </div>

js/components/SiteDocuments.js

@@ -11,10 +11,8 @@ export class SiteDocuments {
     }
 
     render() {
-        let content = `<div class="has-bottom-border"><details>
+        let content = `<div class="has-bottom-border">
-            <summary class="is-clickable has-text-centered p-2 is-size-5">
+                <h3 class="p-2">Documentazione di archivio</h3>
-                Documentazione di archivio
-            </summary>
             <div class="p-2">
             <ol class="ml-2 pl-4">
             `;
@@ -23,11 +21,9 @@ export class SiteDocuments {
 				<li><a href="docs/${doc.filename}">${doc.titolo}</a></li>
 			`;
 		}
-		content += '</ol></div></details></div>';
+		content += '</ol></div></div>';
-		content += `<div class="has-bottom-border"><details>
+		content += `<div class="has-bottom-border">
-            <summary class="is-clickable has-text-centered p-2 is-size-5">
+                <h3 class="p-2">Pubblicazioni del progetto Carta Archeologica</h3>
-                Pubblicazioni del progetto Carta Archeologica
-            </summary>
             <div class="p-2">
             <ol class="ml-2 pl-4">
         `;
@@ -36,7 +32,7 @@ export class SiteDocuments {
 				<li><a href="docs/${doc.filename}">${doc.titolo}</a></li>
 			`;
 		}
-		content += '</ol></div></details></div>';
+		content += '</ol></div></div>';
 
         return content;
     }

js/components/SiteSheet.js

@@ -12,10 +12,6 @@ export class SiteSheet {
 
     render() {
         return `<div class="container has-bottom-border">
-            <details>
-            <summary class="is-clickable has-text-centered p-2 is-size-5">
-                Scheda del sito
-            </summary>
             <table class="table is-fullwidth is-striped">
                 <tr><th>Denominazione</th><td>${this._siteData.denominazione}</td></tr>
                 <tr><th>Località</th><td>${this._siteData.localita}</td></tr>
@@ -37,7 +33,6 @@ export class SiteSheet {
                     <td><details><summary class="is-clickable">Leggi tutto</summary>${this._siteData.descrizione}</details></td>
                 </tr>
             </table>
-            </details>
         </div>`;
     }
 }

js/gis.js

@@ -281,18 +281,7 @@ GIS.loadLayer = async function (geoJSON, options, popup = true) {
             }
             else {
                 layer.on("click", async () => {
-                    const fromStorage = localStorage.getItem(layerId);
+                    let data = GIS.layerData(layerId);
-                    let data = {};
-
-                    if (fromStorage !== 'undefined') {
-                        try {
-                            data = JSON.parse(fromStorage);
-                        } catch (error) {
-                            console.log(error);
-                        }
-                    } else {
-                        await GIS._fetchData(layerId);
-                    }
                     
                     if (typeof data === 'object') {
                         UI.openModal(data);
@@ -304,6 +293,27 @@ GIS.loadLayer = async function (geoJSON, options, popup = true) {
 
     return layer;
 }
+/**
+ * Retrieves data for a given layer
+ * @param {string} layerId 
+ * @returns {object} Data for this layer from DB or cache
+ */
+GIS.layerData = async function (layerId) {
+    const fromStorage = localStorage.getItem(layerId);
+    let data = {};
+
+    if (fromStorage !== 'undefined') {
+        try {
+            data = JSON.parse(fromStorage);
+        } catch (error) {
+            console.log(error);
+        }
+    } else {
+        data = await GIS._fetchData(layerId);
+    }
+
+    return data;
+}
 /**
  * Cache data from DB in local storage
  * for a given layer

js/index.js

@@ -11,8 +11,4 @@ document.addEventListener('DOMContentLoaded', async () => {
     UI.sitesMenu('.menu-list', map, sites);
     UI.projectInfo('#project-info');
 
-    // TEMP
-    document.querySelector('.dropdown-trigger').addEventListener('click', function() {
-        document.querySelector('.dropdown').classList.toggle('is-active');
-    });
 });

js/ui.js

@@ -73,35 +73,57 @@ UI.toggleMenu = function (triggerId) {
 }
 /**
  * Open a modal with DB data
- * @todo Refactor! Web components??
+ * @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.openModal = async function (data, selector) {
 	const modal = document.querySelector(selector);
+	const tabs = modal.querySelector('.tabs > ul');
 
 	let siteSheet = new SiteSheet();
 	siteSheet.siteData = data;
-	modal.querySelector('.modal-content').innerHTML = siteSheet.render();
+	modal.querySelector('#site-sheet').innerHTML = siteSheet.render();
 
-	let content = ``;
 	if (data.documents.length) {
 		let siteDocs = new SiteDocuments;
 		siteDocs.siteData = data;
-		modal.querySelector('.modal-content').innerHTML += siteDocs.render();
+		modal.querySelector('#documents').innerHTML = siteDocs.render();
 	}
 	if (data.surveys.length) {
 		let siteSurveys = new SiteSurveys;
 		siteSurveys.siteData = data.surveys[0];
-		modal.querySelector('.modal-content').innerHTML += siteSurveys.render();
+		modal.querySelector('#photos').innerHTML += siteSurveys.render();
 	}
 	if (data.photos.length) {
 		let sitePhotos = new SitePhotos;
 		sitePhotos.siteData = data.photos[0];
-		modal.querySelector('.modal-content').innerHTML += sitePhotos.render();
+		modal.querySelector('#photos').innerHTML += sitePhotos.render();
 	}
 
-	modal.querySelector('.modal-content').innerHTML += content;
+	let dataTabs = modal.querySelectorAll('.data-tabs');
+	// 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');