caprigis/js/ui.js

'use strict';

/**
 * @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
 * @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.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>`;
		for (const img of data.surveys) {
			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>
			`;
		}
	}
	if (data.photos.length) {
		table += `<tr><th class="has-text-centered" colspan="2">Fotografie</th></tr>`;
		for (const img of data.photos) {
			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;