198 lines
6.7 KiB
JavaScript
198 lines
6.7 KiB
JavaScript
'use strict';
|
|
|
|
import Spotlight from './vendor/spotlight.js/src/js/spotlight.js';
|
|
|
|
/**
|
|
* @namespace UI
|
|
*/
|
|
const UI = {};
|
|
|
|
/**
|
|
* Add a Leaflet control to center the map
|
|
* @param {Map} map The Leaflet map object
|
|
* @param {LatLngExpression} centerCoords The coordinates to center the map
|
|
* @param {number} zoom Zoom level
|
|
*/
|
|
UI.addCenterMapControl = function (map, centerCoords, zoom) {
|
|
L.Control.CenterControl = L.Control.extend({
|
|
options: {
|
|
position: 'topleft'
|
|
},
|
|
onAdd: function (map) {
|
|
let controlDiv = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar');
|
|
L.DomEvent
|
|
.addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
|
|
.addListener(controlDiv, 'click', L.DomEvent.preventDefault)
|
|
.addListener(controlDiv, 'click', function () {
|
|
map.setView(centerCoords, zoom, {animate: true});
|
|
}
|
|
);
|
|
let controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove', controlDiv);
|
|
controlUI.title = 'Centra la mappa';
|
|
controlUI.href = '#';
|
|
controlUI.innerHTML = `
|
|
<span class="icon is-medium">
|
|
<i class="fas fa-lg fa-crosshairs"></i>
|
|
</span>
|
|
`;
|
|
return controlDiv;
|
|
}
|
|
});
|
|
|
|
let centerCtr = new L.Control.CenterControl();
|
|
map.addControl(centerCtr);
|
|
}
|
|
/**
|
|
* Toggle burger menu for small screens
|
|
* @param {string} burgerClass The CSS class of the burger element
|
|
*/
|
|
UI.toggleBurger = function(burgerClass) {
|
|
const burger = document.querySelector(`.${burgerClass}`);
|
|
burger.addEventListener('click', () => {
|
|
burger.classList.toggle('is-active');
|
|
const menuId = burger.getAttribute('data-target');
|
|
document.querySelector(`#${menuId}`).classList.toggle('is-active');
|
|
});
|
|
}
|
|
/**
|
|
* Toggle side menu and rescale map container
|
|
* @param {string} triggerId The ID of the trigger element
|
|
*/
|
|
UI.toggleMenu = function (triggerId) {
|
|
const trigger = document.querySelector(`#${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');
|
|
});
|
|
}
|
|
/**
|
|
* Open a modal with DB data
|
|
* @todo Refactor! Web components??
|
|
* @param {object} data The data retrieved from the DB to display as modal content
|
|
*/
|
|
UI.openModal = async function (data) {
|
|
const modal = document.querySelector('.modal');
|
|
// DEBUG
|
|
let table = `<table class="table is-fullwidth is-striped">
|
|
<tr><th>Denominazione</th><td>${data.denominazione}</td></tr>
|
|
<tr><th>Località</th><td>${data.localita}</td></tr>
|
|
<tr><th>Indirizzo</th><td>${data.indirizzo}</td></tr>
|
|
<tr><th>Comune</th><td>${data.comune}</td></tr>
|
|
<tr><th>Localizzazione</th><td>${data.localizzazione}</td></tr>
|
|
<tr><th>Definizione</th><td>${data.definizione}</td></tr>
|
|
<tr><th>Periodo</th><td>${data.periodo}</td></tr>
|
|
<tr><th>Fase</th><td>${data.fase}</td></tr>
|
|
<tr><th>Cronologia</th><td>${data.cronologia}</td></tr>
|
|
<tr><th>Motivazione cronologia</th><td>${data.motivazione_cron}</td></tr>
|
|
<tr><th>Ritrovamento</th><td>${data.ritrovamento}</td></tr>
|
|
<tr><th>Materiali rinvenuti</th><td>${data.materiali_rinv}</td></tr>
|
|
<tr><th>Luogo custodia materiali</th><td>${data.luogo_custodia_mat}</td></tr>
|
|
<tr><th>Tutela vigente</th><td>${data.tutela_vigente}</td></tr>
|
|
<tr><th>Stato di conservazione</th><td>${data.stato_conserv}</td></tr>
|
|
<tr><th>Documenti</th><td>${data.documenti}</td></tr>
|
|
<tr><th>Descrizione</th><td><details><summary class="is-clickable">Leggi tutto</summary>${data.descrizione}</details></td></tr>
|
|
`;
|
|
if (data.documents.length) {
|
|
table += `<tr>
|
|
<th class="has-text-centered">Pubblicazioni</th>
|
|
<td><ul>
|
|
`;
|
|
for (const doc of data.documents) {
|
|
table += `
|
|
<li><a href="docs/${doc.filename}">${doc.titolo}</a></li>
|
|
`;
|
|
}
|
|
table += '</ul></td></tr>';
|
|
}
|
|
if (data.surveys.length) {
|
|
table += `<tr><th class="has-text-centered" colspan="2">Elaborazioni CNR da rilievi</th></tr>`;
|
|
table += `
|
|
<tr>
|
|
<td colspan="2" style="max-width: 70%">
|
|
<p class="is-size-6 has-text-centered p-2">Cliccare sull'immagine per aprire la gallery</p>
|
|
<figure class="image is-clickable" id="gallery-1">
|
|
<img src="../img/${data.surveys[0].filename}" />
|
|
<figcaption class="p-2 has-text-centered">${data.surveys[0].didascalia}</figcaption>
|
|
</figure>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
if (data.photos.length) {
|
|
table += `<tr><th class="has-text-centered" colspan="2">Fotografie</th></tr>`;
|
|
table += `
|
|
<tr>
|
|
<td colspan="2" style="max-width: 70%">
|
|
<p class="is-size-6 has-text-centered p-2">Cliccare sull'immagine per aprire la gallery</p>
|
|
<figure class="image is-clickable" id="gallery-2">
|
|
<img src="../img/${data.photos[0].filename}" />
|
|
<figcaption class="p-2 has-text-centered">${data.photos[0].didascalia}</figcaption>
|
|
</figure>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
// Open gallery when image is clicked
|
|
}
|
|
table += '</table>';
|
|
|
|
modal.querySelector('.modal-content').innerHTML = table;
|
|
modal.classList.add('is-active');
|
|
const closeBtn = modal.querySelector('.modal-close');
|
|
const modalBg = modal.querySelector('.modal-background');
|
|
const closeModal = () => modal.classList.remove('is-active');
|
|
// CLose modal when clicking either on the X button or on the background
|
|
closeBtn.addEventListener('click', () => {
|
|
closeModal();
|
|
});
|
|
modalBg.addEventListener('click', () => {
|
|
closeModal();
|
|
});
|
|
|
|
this.imageGallery('gallery-1', data.surveys);
|
|
this.imageGallery('gallery-2', data.photos);
|
|
}
|
|
/**
|
|
* @param {string} menuListSel Menu list selector
|
|
* @param {L.Map} map
|
|
* @param {L.LayerGroup} sites
|
|
*/
|
|
UI.sitesMenu = function (menuListSel, map, sites) {
|
|
// Close menu if arrow button is clicked...
|
|
this.toggleMenu('close-menu');
|
|
|
|
const menu = document.querySelector(menuListSel);
|
|
menu.addEventListener('click', event => {
|
|
if (event.target.nodeName === 'A') {
|
|
// zoom to layer...
|
|
const layer = sites.customGetLayer(event.target.id);
|
|
map.setView(
|
|
layer.getBounds().getCenter(),
|
|
19,
|
|
{animate: true, duration: 1, easeLinearity: 0.25}
|
|
);
|
|
}
|
|
});
|
|
}
|
|
/**
|
|
* Open Spotlight gallery
|
|
* @param {string} galleryId The id of the trigger element
|
|
* @param {Array<Object>} images Array of image objects from DB
|
|
*/
|
|
UI.imageGallery = function (galleryId, images) {
|
|
const element = document.querySelector(`#${galleryId}`);
|
|
|
|
if (element) {
|
|
let gallery = [];
|
|
for (let img of images) {
|
|
gallery.push({src: `../img/${img.filename}`, description: img.didascalia});
|
|
}
|
|
|
|
document.querySelector(`#${galleryId}`).addEventListener('click', () => {
|
|
Spotlight.show(gallery);
|
|
});
|
|
}
|
|
}
|
|
|
|
export default UI; |