Interactive citations

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"