From 3ca23381fb9e59caaf1b5efb379810f3b803d5c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=B2=20P?= Date: Fri, 27 Sep 2024 16:13:21 +0200 Subject: [PATCH] UI changes (part 1) --- index.html | 39 +++++++++++++++++++++++++++++++++------ js/gis.js | 42 ++++++++++++++++++++++++++++++++++++++++-- js/index.js | 1 + js/package.json | 1 + js/ui.js | 24 ++++++++++++++++++++++-- js/yarn.lock | 5 +++++ 6 files changed, 102 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index e4aeb30..1dcf6ef 100644 --- a/index.html +++ b/index.html @@ -3,17 +3,19 @@ - + + + - Carta Archeologica di Capri + WebGIS Isola di Capri @@ -91,11 +95,34 @@
-
+ + + + diff --git a/js/gis.js b/js/gis.js index 696888e..df21eac 100644 --- a/js/gis.js +++ b/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} diff --git a/js/index.js b/js/index.js index bace100..c4e9dce 100644 --- a/js/index.js +++ b/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() { diff --git a/js/package.json b/js/package.json index ad7209f..94038bb 100644 --- a/js/package.json +++ b/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", diff --git a/js/ui.js b/js/ui.js index 868ebc2..4e8b42a 100644 --- a/js/ui.js +++ b/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 diff --git a/js/yarn.lock b/js/yarn.lock index a463d0c..a354ecb 100644 --- a/js/yarn.lock +++ b/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"