135 lines
4.4 KiB
JavaScript
135 lines
4.4 KiB
JavaScript
'use strict';
|
|
|
|
/**
|
|
* @namespace UI
|
|
*/
|
|
const UI = {};
|
|
|
|
/**
|
|
* Add a control to center the map
|
|
* @param {Map} map
|
|
* @param {LatLngExpression} centerCoords
|
|
* @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);
|
|
}
|
|
/**
|
|
*
|
|
* @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
|
|
* @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>${data.descrizione}</td></tr>
|
|
`;
|
|
if (data.images.length) {
|
|
table += `<tr><th class="has-text-centered" colspan="2">Immagini</th></tr>`;
|
|
for (const img of data.images) {
|
|
table += `
|
|
<tr>
|
|
<td colspan="2" style="max-width: 70%">
|
|
<figure class="image">
|
|
<img src="/img/${img.filename}" />
|
|
<figcaption class="p-2 has-text-centered">${img.didascalia}</figcaption>
|
|
</figure>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}
|
|
}
|
|
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();
|
|
});
|
|
}
|
|
/**
|
|
* @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}
|
|
);
|
|
}
|
|
});
|
|
}
|
|
|
|
export default UI; |