Biblio for sites

webgis/index.html

@@ -340,7 +340,7 @@
         </div>
     </div>
     <!-- Sites data modal -->
-    <div class="modal" id="site-data" data-controller="modal" data-modal-target="modal">
+    <div class="modal" id="site-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/SiteSheet.js

@@ -3,13 +3,21 @@
  * @class SiteSheet
  */
 export class SiteSheet {
+    biblioElements = [];
+    /*
+    constructor(data) {
+        this._siteData = data;
+    }
+    */
     /**
      * @param {object} data
      */
     set siteData(data) {
         this._siteData = data;
     }
-
+    /**
+     * @returns {string} HTML
+     */
     render() {
         return `<div class="container has-bottom-border">
             <table class="table is-fullwidth is-striped">
@@ -33,6 +41,13 @@ export class SiteSheet {
                 <tr><th>Anno di ritrovamento</th><td>${this._siteData.finding}</td></tr>
                 <tr><th>Materiali rinvenuti</th><td>${this._siteData.materials}</td></tr>
                 <tr><th>Luogo custodia materiali</th><td>${this._siteData.conservationPlace}</td></tr>
+                <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Bibliografia</th></tr>
+                <tr>
+                    <td colspan=2>
+                        ${this.biblio()}
+                        <div class="notification is-light mx-3 mt-4 mb-0 p-2 is-hidden" id="biblio-detail" data-biblio-target="biblio"></div>
+                    </td>
+                </tr>
                 <tr class="is-link"><th class="is-size-5 has-text-centered" colspan=2>Descrizione</th></tr>
                 <tr><td class="pr-6 pl-6 pt-3" colspan="2">${this._siteData.description}</td></tr>
             </table>
@@ -60,6 +75,13 @@ export class SiteSheet {
                 </span>
                 <strong>Località generica:</strong> ${this._siteData.genericPlace}
             </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> ${this.biblio()}
+            </p>
+            <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">
                 ${this._siteData.shortDescription}
             </p>
@@ -68,4 +90,36 @@ export class SiteSheet {
             </p>
         </div>`;
     }
+
+    biblio() {
+        let citations = '';
+
+        if (this._siteData.bibliography.length) {
+            this._siteData.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};
+                `;
+
+                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);
+        });
+    }
 }

webgis/js/controllers/biblio_controller.js

@@ -5,11 +5,16 @@ export default class extends Controller {
 
     open(event) {
         const biblio = window.Biblio;
-        const target = event.currentTarget;
+        this.trigger = event.currentTarget;
-        const id = target.id.replace('cit-', '');
+        const id = this.trigger.id.replace('cit-', '');
-        
+        this.ref = this.biblioTarget;
-		this.biblioTarget.innerHTML = '<button class="delete" data-action="click->biblio#hideBiblio"></button>';
+
-        this.biblioTarget.innerHTML += biblio.getReference(id);
+        if (this.trigger.parentElement.nodeName === 'TD') {
+            this.ref = this.biblioTargets.find(t => t.id === 'biblio-detail');
+        }
+
+		this.ref.innerHTML = '<button class="delete" data-action="click->biblio#hideBiblio"></button>';
+        this.ref.innerHTML += biblio.getReference(id);
 
         this.showBiblio();
     }
@@ -19,11 +24,12 @@ export default class extends Controller {
     }
 
     showBiblio() {
-        this.biblioTarget.classList.remove('is-hidden');
+        this.ref.classList.remove('is-hidden');
-		this.biblioTarget.scrollIntoView({behavior: 'smooth'});
+		this.ref.scrollIntoView({behavior: 'smooth'});
     }
 
     hideBiblio() {
-		this.biblioTarget.classList.add('is-hidden');
+		this.ref.classList.add('is-hidden');
+		this.trigger.parentElement.scrollIntoView({behavior: 'smooth'});
     }
 }

webgis/js/controllers/menu_controller.js

@@ -4,15 +4,7 @@ export default class extends Controller {
     static targets = ['list', 'menu', 'icon'];
 
     toggleMenu() {
-        /*
-        const target = event.currentTarget;
-        const id = target.getAttribute('data-id');
-        const icon = this.iconTargets.find(i => i.getAttribute('data-id') === id);
-        */
-
         this.menuTarget.classList.toggle('is-hidden');
-        //this.toggleIcon(icon);
-        //this.openList(`#${id}-list`);
     }
 
     close() {

webgis/js/ui.js

@@ -108,6 +108,7 @@ UI.openSiteModal = async function (data, selector) {
 	}
 	let siteSheet = new SiteSheet();
 	siteSheet.siteData = data;
+	window.Biblio = siteSheet;
 
 	modal.querySelector('#short-sheet').innerHTML = siteSheet.renderShort();
 	if (data.description) {