diff --git a/webgis/img/Londra_British_Museum_base_candelabro.jpg b/webgis/img/Londra_British_Museum_base_candelabro.jpg new file mode 100644 index 0000000..246e85d Binary files /dev/null and b/webgis/img/Londra_British_Museum_base_candelabro.jpg differ diff --git a/webgis/img/affresco_da_damecuta.png b/webgis/img/affresco_da_damecuta.png new file mode 100644 index 0000000..f9d577d Binary files /dev/null and b/webgis/img/affresco_da_damecuta.png differ diff --git a/webgis/img/icons/rinv_menu.png b/webgis/img/icons/rinv_menu.png new file mode 100644 index 0000000..60370f8 Binary files /dev/null and b/webgis/img/icons/rinv_menu.png differ diff --git a/webgis/img/icons/siti_menu.png b/webgis/img/icons/siti_menu.png new file mode 100644 index 0000000..614b74b Binary files /dev/null and b/webgis/img/icons/siti_menu.png differ diff --git a/webgis/index.html b/webgis/index.html index 4cc5477..108be3d 100644 --- a/webgis/index.html +++ b/webgis/index.html @@ -63,49 +63,103 @@
@@ -173,7 +227,28 @@ diff --git a/webgis/js/components/Finding.js b/webgis/js/components/Finding.js index d713ac2..c13cb9c 100644 --- a/webgis/js/components/Finding.js +++ b/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 `

@@ -36,6 +39,13 @@ export class Finding {

Luogo di conservazione ${this._data.conservationPlace}

+

+ + + + Bibliografia: ${await this.biblio(this._data.id)} +

+

Descrizione
${this._data.description} @@ -45,4 +55,70 @@ export class Finding {

`; } + + renderImages() { + let content = `
+

Immagini

`; + content += ` +
+

Cliccare sull'immagine per aprire la gallery

+
+ +
+ +
+
+
+
+ `; + + 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 += ` + + ${record.citation.toLowerCase()}, + ${record.pages}; + `; + + this.biblioElements.push(` +
+

${record.reference}

+
+ ` + ); + }); + } + + 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()); + } } diff --git a/webgis/js/components/NotConservedSheet.js b/webgis/js/components/NotConservedSheet.js index c7a7fcc..41c2560 100644 --- a/webgis/js/components/NotConservedSheet.js +++ b/webgis/js/components/NotConservedSheet.js @@ -42,8 +42,7 @@ export class NotConservedSheet { Bibliografia: ${await this.biblio(this._data.id)}

- +

Autore scheda: ${this._data.author}

diff --git a/webgis/js/index.js b/webgis/js/index.js index cd59600..ee14cf3 100644 --- a/webgis/js/index.js +++ b/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'); + }) }); diff --git a/webgis/js/ui.js b/webgis/js/ui.js index 462ff69..f8c3cc1 100644 --- a/webgis/js/ui.js +++ b/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}`); + const menu = document.querySelector('#menu'); trigger.addEventListener('click', () => { - const menu = document.querySelector('#menu'); - menu.classList.toggle('is-hidden'); - menu.classList.toggle('is-3'); - //document.querySelector('#map').parentElement.classList.toggle('is-full'); + menu.classList.remove('is-hidden'); + 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'); + + // Reset data tabs content + for (let tab of dataTabs) { + tab.innerHTML = ''; + } - let sheet = new Finding(); - sheet.data = data; - modal.querySelector('#finding-sheet').innerHTML = await sheet.render(); + 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 = ''; + 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 => {