Move some UI to Stimulus + Lo Pozzo geojson

webgis/js/controllers/menu_controller.js

@@ -1,17 +1,22 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-    static targets = ['list', 'menu'];
+    static targets = ['list', 'menu', 'icon'];
 
-    toggleMenu(event) {
+    toggleMenu() {
+        /*
         const target = event.currentTarget;
         const id = target.getAttribute('data-id');
+        const icon = this.iconTargets.find(i => i.getAttribute('data-id') === id);
+        */
 
         this.menuTarget.classList.toggle('is-hidden');
+        //this.toggleIcon(icon);
+        //this.openList(`#${id}-list`);
+    }
 
-        this.openList(`#${id}-list`);
-
-        console.log(this.menuTarget);
+    close() {
+        this.menuTarget.classList.add('is-hidden');
     }
 
     openList(id) {

webgis/js/controllers/modal_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ['close', 'modal'];
+
+    open() {
+        this.modalTarget.classList.add('is-active');
+    }
+
+    close() {
+        this.modalTarget.classList.remove('is-active');
+    }
+}
+

webgis/js/gis.js

@@ -72,6 +72,7 @@ const MARKER_NAMES = {
         'san_michele' : 'Villa San Michele',
         'scala_fenicia' : 'Scala Fenicia',
         'grotta_azzurra' : 'Grotta Azzurra',
+        'lopozzo' : 'Località Lo Pozzo',
     },
 };
 
@@ -150,6 +151,9 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
         archeo,
     ).addTo(map);
 
+    // TEMP!! Remove point for Lo Pozzo...
+    map.removeLayer(sitesGroup.customGetLayer('lopozzo'));
+
     // TODO Horrible?
     return {map: map, sites: sitesGroup};
 }
@@ -295,6 +299,7 @@ GIS.initLayers = async function(map) {
     let layerTiberio = await this.loadLayer('tiberio.geojson', optionsSiti, false);
     let layerScala = await this.loadLayer('scala_fenicia.geojson', optionsSiti, false);
     let layerGrotta = await this.loadLayer('grotta_azzurra.geojson', optionsGrotta, false);
+    let layerLopozzo = await this.loadLayer('lopozzo.geojson', optionsSiti, false);
 
     layerMater.id = 'matermania';
     layerMaterArea.id = 'matermania_area';
@@ -308,6 +313,7 @@ GIS.initLayers = async function(map) {
     layerTiberio.id = 'tiberio';
     layerScala.id = 'scala_fenicia';
     layerGrotta.id = 'grotta_azzurra';
+    layerLopozzo.id = 'lopozzo';
 
     let osmap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
         maxNativeZoom : 22,
@@ -339,6 +345,7 @@ GIS.initLayers = async function(map) {
         layerTiberio,
         layerScala,
         layerGrotta,
+        layerLopozzo
     ]);
     const baseGroup = new L.LayerGroup([osmap]);
     baseGroup.addTo(map);

webgis/js/icons.js

@@ -30,6 +30,6 @@ Icons.finding = L.icon(
     }
 );
 
-Icons.camera = L.divIcon({className: 'fa fa-2x fa-camera'});
+Icons.camera = L.divIcon({className: 'fa fa-camera'});
 
 export default Icons;

webgis/js/index.js

@@ -2,6 +2,7 @@ import GIS from './gis.js';
 import UI from './ui.js';
 import { Application } from '@hotwired/stimulus';
 import MenuController from './controllers/menu_controller.js';
+import ModalController from './controllers/modal_controller.js';
 
 document.addEventListener('DOMContentLoaded', async () => {
     // Register Stimulus controllers
@@ -17,17 +18,14 @@ document.addEventListener('DOMContentLoaded', async () => {
     GIS.toggleSpherical(map);
 
     UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
-    //UI.toggleMenu('siti', 'siti-list');
-    //UI.toggleMenu('rinvenimenti', 'rinvenimenti-list');
     UI.toggleBurger('navbar-burger');
     UI.sitesMenu('.menu-list', map, sites);
 
-    document.querySelector('#close-menu').addEventListener('click', () => {
-        document.querySelector('#menu').classList.add('is-hidden');
-    })
+    window.LMap = map;
 });
 
 function initStimulus() {
     window.Stimulus = Application.start();
     Stimulus.register("menu", MenuController);
+    Stimulus.register("modal", ModalController);
 }

webgis/js/ui.js

@@ -106,8 +106,6 @@ UI.openSiteModal = async function (data, selector) {
 	for (let tab of dataTabs) {
 		tab.innerHTML = '';
 	}
-	//tabs.classList.remove('is-hidden');
-
 	let siteSheet = new SiteSheet();
 	siteSheet.siteData = data;
 
@@ -161,12 +159,6 @@ UI.openSiteModal = async function (data, selector) {
 	});
 
 	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());
 
 	this.imageGallery('gallery-1', surveys);
 	this.imageGallery('gallery-2', photos);
@@ -199,13 +191,6 @@ UI.openNotConserModal = async function (data, selector) {
 	});
 
 	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 {object} data The data retrieved from the DB to display as modal content
@@ -268,12 +253,6 @@ UI.openFindingModal = async function (data, selector) {
 		}
 	});
 	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
@@ -281,7 +260,6 @@ UI.openFindingModal = async function (data, selector) {
  * @param {L.LayerGroup} sites
  */
 UI.sitesMenu = function (menuListSel, map, sites) {
-	// Close menu if arrow button is clicked...
 	let markers = [];
 
 	map.eachLayer(layer => {