Interactive citations

css/app.css

@@ -30,6 +30,12 @@ a:visited {
     background: #fff; 
     font-family: inherit;
 }
+
+.leaflet-top,
+.leaflet-left {
+    z-index: 999 !important;
+}
+
 .leaflet-control a {
     text-decoration: none;
     color: initial;
@@ -141,6 +147,10 @@ a:visited {
     max-width: 600px;
     left: 35vw;
 }
+/* Menu overlay */
+#menu {
+    z-index: 1000;
+}
 /* Content in tabs */
 .docs-title {
     width: 300px;

webgis/index.html

@@ -42,7 +42,7 @@
         <div class="loading loading-lg"></div>
     </div>
     <div class="main columns">
-        <div class="column is-hidden" id="menu">
+        <div class="column is-hidden is-overlay has-background-white" id="menu">
             <aside class="menu ml-4">
                 <p class="menu-label">
                     Beni archeologici
@@ -77,9 +77,13 @@
                         </a>
                     </li>
                 </ul>
+                <p class="menu-label">
+                    Beni non conservati
+                </p>
+                <ul class="menu-list" id="not-conserved"></ul>
             </aside>
         </div>
-        <div class="column is-full">
+        <div class="column is-full is-relative">
             <div id="map" aria-describedby="map-progress" aria-busy="true" style="position: relative;">
                 <progress id="map-progress" class="p-2 progress is-medium is-link" aria-label="Map loading..." />
             </div>

webgis/js/components/NotConservedSheet.js

@@ -3,6 +3,7 @@
  * @class NotConservedSheet
  */
 export class NotConservedSheet {
+    biblioElements = [];
     /**
      * @param {object} data
      */
@@ -12,7 +13,7 @@ export class NotConservedSheet {
 
     async render() {
         return `
-        <div class="container ml-3">
+        <div class="container">
             <p class="p-2">
                 <span class="icon has-text-link">
                     <i class="fa fa-tag"></i>
@@ -41,6 +42,8 @@ export class NotConservedSheet {
                 </span>
                 <strong>Bibliografia:</strong> ${await this.biblio(this._data.id)}
             </p>
+            <div class="notification is-light mx-2 mt-2 p-2 is-hidden" id="biblio">
+            </div>
             <p class="p-2">
                 <strong>Autore scheda:</strong> ${this._data.author}
             </p>
@@ -50,18 +53,32 @@ export class NotConservedSheet {
     async biblio(recordId) {
         let record = await this.fetchData(`${window.API_URL}/not_conserved/${recordId}`);
 
-        let biblio = '';
+        let citations = '';
 
         if (record.bibliography.length) {
             record.bibliography.forEach(record => {
-                biblio += `
-                    <span class="is-capitalized">${record.citation.toLowerCase()}</span>,
-                    ${record.pages};
+                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" id="ref-${record.id}">
+                        <p><strong>Riferimento</strong></p>
+                        <p>${record.reference}</p>
+                    </div>
+                    `
+                );
             });
         }
 
-        return biblio.trim().slice(0, -1);
+        return citations.trim().slice(0, -1);
+    }
+
+    getReference(id) {
+        return this.biblioElements.find(ref => ref.includes(`ref-${id}`));
     }
 
     async fetchData(url) {

webgis/js/package.json

@@ -5,6 +5,7 @@
   "author": "Nicolò P.",
   "license": "GPLv3",
   "dependencies": {
+    "@hotwired/stimulus": "^3.2.2",
     "@kalisio/leaflet-graphicscale": "^1.0.0",
     "bulma": "^1.0.1",
     "fontawesome-free": "^1.0.4",

webgis/js/ui.js

@@ -69,8 +69,8 @@ UI.toggleMenu = function (triggerId) {
 	trigger.addEventListener('click', () => {
 		const menu = document.querySelector('#menu');
 		menu.classList.toggle('is-hidden');
-		menu.classList.toggle('is-2');
-		document.querySelector('#map').parentElement.classList.toggle('is-full');
+		menu.classList.toggle('is-3');
+		//document.querySelector('#map').parentElement.classList.toggle('is-full');
 	});
 }
 /**
@@ -154,6 +154,19 @@ UI.openNotConserModal = async function (data, selector) {
 	let sheet = new NotConservedSheet();
 	sheet.siteData = data;
 	modal.querySelector('#not-conser-sheet').innerHTML = await sheet.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 += sheet.getReference(id);
+			biblio.classList.remove('is-hidden');
+		}
+
+		if (event.target.className == 'delete') {
+			biblio.classList.add('is-hidden');
+		}
+	});
 
 	modal.classList.add('is-active');
 	const closeBtn = modal.querySelector('.modal-close');
@@ -162,6 +175,7 @@ UI.openNotConserModal = async function (data, selector) {
 	// CLose modal when clicking either on the X button or on the background
 	closeBtn.addEventListener('click', () => closeModal());
 	modalBg.addEventListener('click', () => closeModal());
+
 }
 /**
  * Open a modal with project info

webgis/js/yarn.lock

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@hotwired/stimulus@^3.2.2":
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/@hotwired/stimulus/-/stimulus-3.2.2.tgz#071aab59c600fed95b97939e605ff261a4251608"
+  integrity sha512-eGeIqNOQpXoPAIP7tC1+1Yc1yl1xnwYqg+3mzqxyrbE5pg5YFBZcA6YoTiByJB6DKAEsiWtl6tjTJS4IYtbB7A==
+
 "@kalisio/leaflet-graphicscale@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@kalisio/leaflet-graphicscale/-/leaflet-graphicscale-1.0.0.tgz#5a163e01805208b08ddafd9301e6ad0d4c603e51"