nicolo/caprigis
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

UI changes (part 1)

Browse Source
This commit is contained in:
Nicolò P 2024-09-27 16:13:21 +02:00
parent f6883c3502
commit 3ca23381fb
6 changed files with 102 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
index.html
View File

@ -3,17 +3,19 @@
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="stylesheet" href="js/vendor/leaflet/dist/leaflet.css" /> <link rel="stylesheet" href="js/vendor/leaflet/dist/leaflet.css" />
<script src="js/vendor/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" href="css/app.css" /> <link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="js/vendor/spotlight.js/dist/css/spotlight.min.css" /> <link rel="stylesheet" href="js/vendor/spotlight.js/dist/css/spotlight.min.css" />
<link rel="stylesheet" href="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.css" />
<script src="js/vendor/leaflet/dist/leaflet.js"></script>
<script src="js/vendor/@kalisio/leaflet-graphicscale/dist/Leaflet.GraphicScale.min.js"></script>
<script src="js/index.js" type="module"></script> <script src="js/index.js" type="module"></script>
<title>Carta Archeologica di Capri</title> <title>WebGIS Isola di Capri</title>
</head> </head>
<body> <body>
<nav class="navbar mb-2" role="navigation"> <nav class="navbar mb-2" role="navigation">
<div class="navbar-brand"> <div class="navbar-brand">
<span class="navbar-item is-size-3"> <span class="navbar-item is-size-3">
Carta archeologica di Capri WebGIS Isola di Capri
</span> </span>
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="nav-menu"> <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="nav-menu">
<span aria-hidden="true"></span> <span aria-hidden="true"></span>
@ -23,13 +25,15 @@
</a> </a>
</div> </div>
<hr class="navbar-divider"> <hr class="navbar-divider">
<div class="navbar-menu ml-3" id="nav-menu"> <div class="navbar-menu ml-3 container is-align-items-center is-justify-content-center" id="nav-menu">
<button class="navbar-item button is-size-5 is-white" role="button" id="siti"> <button class="navbar-item button is-size-5 is-white" role="button" id="siti">
<i class="fa fa-list mr-2"></i> Siti indagati <i class="fa fa-list mr-2"></i> Siti indagati
</button> </button>
<button class="navbar-item is-size-5 is-white" title="Informazioni sul progetto" id="progetto">
<i class="fa fa-info-circle mr-2"></i> Progetto
</button>
</div> </div>
<div class="navbar-end"> <div class="navbar-end">
<a class="navbar-item" href="about.html" class="btn btn-link" title="About">About</a>
</div> </div>
</nav> </nav>
<!-- TODO Loader --> <!-- TODO Loader -->
@ -91,11 +95,34 @@
<div id="map"></div> <div id="map"></div>
</div> </div>
</div> </div>
<div class="modal"> <!-- Sites data modal -->
<div class="modal" id="site-data">
<div class="modal-background"></div> <div class="modal-background"></div>
<div class="modal-content has-background-white"> <div class="modal-content has-background-white">
</div> </div>
<button class="modal-close is-large" aria-label="close"></button> <button class="modal-close is-large" aria-label="close"></button>
</div> </div>
<!-- Project info modal -->
<div class="modal" id="project-info">
<div class="modal-background"></div>
<div class="modal-card content has-background-white panel">
<header class="modal-card-head">
<h1 class="modal-card-title has-text-centered"><i class="fa fa-info-circle mr-2"></i> Il progetto</h1>
<button class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<p class="p-2 mt-2 mb-2 panel-block is-size-5">
construct digital franchise table Legba concrete neural urban soul-delay industrial grade rebar. 3D-printed post- receding savant assault table nodality realism knife tiger-team augmented reality. artisanal tower advert man hotdog city network meta- artisanal euro-pop rifle.
-ware chrome artisanal shoes cartel -space face forwards Kowloon range-rover office Tokyo. crypto- sub-orbital monofilament crypto- soul-delay engine range-rover shanty town post- crypto- camera. stimulate tattoo garage car savant silent youtube post- motion wristwatch -space.
drone math- Tokyo sunglasses courier knife sign systemic decay kanji digital. numinous semiotics Tokyo assassin sign nano- 8-bit grenade tank-traps carbon sub-orbital. singularity network bridge drugs voodoo god franchise urban towards RAF neon girl.
</p>
</section>
<footer class="modal-card-foot">
<div class="buttons">
<button class="button">Chiudi</button>
</div>
</footer>
</div>
</div>
</body> </body>
</html> </html>

42
js/gis.js
View File

@ -92,10 +92,13 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
L.control.layers( L.control.layers(
baseMap, baseMap,
archeo, archeo,
{collapsed: false}
) )
.addTo(map); .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 => { sitesGroup.eachLayer(async layer => {
const fromStorage = localStorage.getItem(layer.id); const fromStorage = localStorage.getItem(layer.id);
let data = {}; let data = {};
@ -125,7 +128,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
.openTooltip(); .openTooltip();
if (typeof data === 'object') { 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? // TODO Horrible?
return {map: map, sites: sitesGroup}; 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 * Adds layers to map and returns an object
* with {baseMap, archeoLayers, sitesLayerGroup} * with {baseMap, archeoLayers, sitesLayerGroup}

1
js/index.js
View File

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

1
js/package.json
View File

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

24
js/ui.js
View File

@ -75,9 +75,10 @@ UI.toggleMenu = function (triggerId) {
* Open a modal with DB data * Open a modal with DB data
* @todo Refactor! Web components?? * @todo Refactor! Web components??
* @param {object} data The data retrieved from the DB to display as modal content * @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) { UI.openModal = async function (data, selector) {
const modal = document.querySelector('.modal'); const modal = document.querySelector(selector);
let siteSheet = new SiteSheet(); let siteSheet = new SiteSheet();
siteSheet.siteData = data; siteSheet.siteData = data;
@ -112,6 +113,25 @@ UI.openModal = async function (data) {
this.imageGallery('gallery-1', data.surveys); this.imageGallery('gallery-1', data.surveys);
this.imageGallery('gallery-2', data.photos); 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 {string} menuListSel Menu list selector
* @param {L.Map} map * @param {L.Map} map

5
js/yarn.lock
View File

@ -2,6 +2,11 @@
# yarn lockfile v1 # 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: bulma@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/bulma/-/bulma-1.0.1.tgz#e37261d6f8e1a3494c9378803d9958effb2715ce" resolved "https://registry.yarnpkg.com/bulma/-/bulma-1.0.1.tgz#e37261d6f8e1a3494c9378803d9958effb2715ce"