Update findings + menu layout (WIP)

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 = '<button class="delete"></button>';
+			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 => {