UI changes (part 1)

js/gis.js

@@ -92,10 +92,13 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     L.control.layers(
             baseMap,
             archeo,
-            {collapsed: false}
         )
         .addTo(map);
 
+    // Add scale and ruler controls
+    L.control.scale({imperial: false}).addTo(map);
+    L.control.graphicScale({fill: 'hollow', position: 'bottomright'}).addTo(map);
+
     sitesGroup.eachLayer(async layer => {
         const fromStorage = localStorage.getItem(layer.id);
         let data = {};
@@ -125,7 +128,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
                 .openTooltip();
             
             if (typeof data === 'object') {
-                marker.on('click', () => UI.openModal(data));
+                marker.on('click', () => UI.openModal(data, '#site-data'));
             }
         }
     });
@@ -133,6 +136,41 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     // TODO Horrible?
     return {map: map, sites: sitesGroup};
 }
+/*
+GIS._prepareLayers = async function(layer) {
+    const fromStorage = localStorage.getItem(layer.id);
+    let data = {};
+    let coords = layer.getBounds().getCenter();
+
+    if (fromStorage !== 'undefined') {
+        try {
+            data = JSON.parse(fromStorage);
+            const lat = data?.lat ?? coords[0];
+            const lon = data?.lon ?? coords[1];
+            coords = [lat, lon];
+        } catch (error) {
+            console.log(error);
+        }
+    } else {
+        data = await GIS._fetchData(layer.id);
+    }
+
+    // TODO: terrible!
+    if (!layer.id.includes('area')) {
+        const marker = L.marker(coords)
+            .addTo(map)
+            .bindTooltip(
+                Object.keys(archeo).find(k => archeo[k] === layer)
+                    .replace(/\s\(.*$/, '')
+            )
+            .openTooltip();
+        
+        if (typeof data === 'object') {
+            marker.on('click', () => UI.openModal(data, '#site-data'));
+        }
+    }
+}
+*/
 /**
  * Adds layers to map and returns an object
  * with {baseMap, archeoLayers, sitesLayerGroup}

js/index.js

@@ -9,6 +9,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     UI.toggleMenu('siti');
     UI.toggleBurger('navbar-burger');
     UI.sitesMenu('.menu-list', map, sites);
+    UI.projectInfo('#project-info');
 
     // TEMP
     document.querySelector('.dropdown-trigger').addEventListener('click', function() {

js/package.json

@@ -5,6 +5,7 @@
   "author": "Nicolò P.",
   "license": "GPLv3",
   "dependencies": {
+    "@kalisio/leaflet-graphicscale": "^1.0.0",
     "bulma": "^1.0.1",
     "fontawesome-free": "^1.0.4",
     "leaflet": "^1.9.4",

js/ui.js

@@ -75,9 +75,10 @@ UI.toggleMenu = function (triggerId) {
  * Open a modal with DB data
  * @todo Refactor! Web components??
  * @param {object} data The data retrieved from the DB to display as modal content
+ * @param {string} selector The modal selector
  */
-UI.openModal = async function (data) {
-	const modal = document.querySelector('.modal');
+UI.openModal = async function (data, selector) {
+	const modal = document.querySelector(selector);
 
 	let siteSheet = new SiteSheet();
 	siteSheet.siteData = data;
@@ -112,6 +113,25 @@ UI.openModal = async function (data) {
 	this.imageGallery('gallery-1', data.surveys);
 	this.imageGallery('gallery-2', data.photos);
 }
+/**
+ * Open a modal with project info
+ * @param {string} selector The modal selector to open project info
+ */
+UI.projectInfo = function (selector) {
+	const modal = document.querySelector(selector);
+
+	document.querySelector('#progetto').addEventListener('click', () => {
+		modal.classList.add('is-active');
+		const closeIcon = modal.querySelector('.delete');
+		const modalBg = modal.querySelector('.modal-background');
+		const closeBtn = modal.querySelector('.buttons > .button');
+		const closeModal = () => modal.classList.remove('is-active');
+		// Close modal when clicking either on the X button or on the background
+		closeBtn.addEventListener('click', () => closeModal());
+		closeIcon.addEventListener('click', () => closeModal());
+		modalBg.addEventListener('click', () => closeModal());
+	});
+}
 /**
  * @param {string} menuListSel Menu list selector
  * @param {L.Map} map

js/yarn.lock

@@ -2,6 +2,11 @@
 # yarn lockfile v1
 
 
+"@kalisio/leaflet-graphicscale@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@kalisio/leaflet-graphicscale/-/leaflet-graphicscale-1.0.0.tgz#5a163e01805208b08ddafd9301e6ad0d4c603e51"
+  integrity sha512-iy42jngdr8c+9iymJ+TCRmotYjcRAHz+4V1OXhuDt4vy49dYjsCpeYOi27m6UOWrSkwNLqPkn2q0OXXYVhutUg==
+
 bulma@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/bulma/-/bulma-1.0.1.tgz#e37261d6f8e1a3494c9378803d9958effb2715ce"