'use strict';
/**
* @namespace UI
*/
const UI = {};
const centerIcon = ``;
const siteIcon = ``;
/**
* 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 = centerIcon;
return controlDiv;
}
});
let centerCtr = new L.Control.CenterControl();
map.addControl(centerCtr);
}
/**
*
* @param {Map} map
* @param {LatLng} coordinates
* @param {string} popupContent The site's name
*/
UI.addSitesControl = function (map, coordinates, popupContent, initZoom = 15) {
const popUpCoords = L.latLng(coordinates.lat + 0.0001, coordinates.lng);
L.Control.SiteControl = L.Control.extend({
options: {
position: 'topright'
},
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.setZoom(initZoom);
map.setView(
coordinates,
19,
{animate: true, duration: 1, easeLinearity: 0.25}
);
L.popup()
.setLatLng(popUpCoords)
.setContent(popupContent)
.openOn(map);
});
let controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove site-control', controlDiv);
controlUI.title = `Vai a ${popupContent}`;
controlUI.href = '#';
controlUI.innerHTML = siteIcon;
return controlDiv;
}
});
let siteCtr = new L.Control.SiteControl();
map.addControl(siteCtr);
}
/**
*
* @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
modal.querySelector('.modal-content').innerHTML = `
${data}
`;
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();
});
}
export default UI;