Move some UI to Stimulus + Lo Pozzo geojson

css/app.css

@@ -154,6 +154,7 @@ a:visited {
 /* Menu overlay */
 #menu {
     z-index: 1000;
+    overflow-y: auto;
 }
 /* Content in tabs */
 .docs-title {

webgis/geojson/lopozzo.geojson

@@ -0,0 +1,8 @@
+{
+"type": "FeatureCollection",
+"name": "lopozzo",
+"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
+"features": [
+{ "type": "Feature", "properties": { "id": 1, "denominaz": "area residenziale e complesso idraulico in località Lo Pozzo" }, "geometry": { "type": "Point", "coordinates": [ 14.213643789607119, 40.556601906452713 ] } }
+]
+}

webgis/index.html

@@ -41,21 +41,32 @@
         </div>
         <hr class="navbar-divider">
         <div class="navbar-end pb-1 pt-1" 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 mr-3" role="button"
-                data-action="click->menu#toggleMenu" data-id="siti">
+                data-action="click->menu#toggleMenu">
-                Beni archeologici
+                <span class="icon mr-2">
-            </button>
+                    <i class="fa fa-list"></i>
-            <button class="navbar-item button is-size-5 is-white" role="button" id="non-conserv">
+                </span>
-                Beni non conservati
+                Apri menu
-            </button>
-            <button class="navbar-item button is-size-5 is-white mr-3" role="button" id="rinvenimenti">
-                Rinvenimenti
             </button>
             <button class="button is-outlined is-rounded is-link mr-4 mt-1" id="howto" title="Istruzioni">
                 <span class="icon is-large has-text-link">
                     <i class="fas fa-question fa-lg"></i>
                 </span>
             </button>
+            <!--
+            <button class="navbar-item button is-size-5 is-white" role="button"
+                data-action="click->menu#toggleMenu" data-id="siti">
+                Beni archeologici
+            </button>
+            <button class="navbar-item button is-size-5 is-white" role="button"
+                data-action="click->menu#toggleMenu" data-id="non-conser">
+                Beni non conservati
+            </button>
+            <button class="navbar-item button is-size-5 is-white mr-3" role="button"
+                data-action="click->menu#toggleMenu" data-id="rinv">
+                Rinvenimenti
+            </button>
+            -->
         </div>
     </nav>
     <div class="wait-lg text-center is-hidden" style="clear: both;">
@@ -65,15 +76,15 @@
     <div class="main columns">
         <div class="column is-hidden is-4 is-4-desktop is-5-mobile is-overlay has-background-white-ter" id="menu"
             data-menu-target="menu">
-            <aside class="menu ml-4">
+            <aside class="menu ml-4 mt-3">
-                <button title="Chiudi menu" class="delete is-pulled-right" id="close-menu"></button>
+                <button title="Chiudi menu" class="delete is-pulled-right" data-action="click->menu#close"></button>
                 <p class="menu-label is-size-5 mt-2 is-clickable" data-action="click->menu#toggle" data-id="siti">
                     <span class="icon pr-2">
                         <img class="image" src="img/icons/siti_menu.png"/>
                     </span>
                     Beni archeologici
                     <span class="icon pl-2">
-                        <i class="fa fa-chevron-right"></i>
+                        <i class="fa fa-chevron-right" data-menu-target="icon" data-id="siti"></i>
                     </span>
                 </p>
                 <ul class="menu-list is-hidden" id="siti-list" data-menu-target="list">
@@ -138,33 +149,54 @@
                         </ul>
                     </li>
                 </ul>
-                <p class="menu-label is-size-5 is-clickable">
+                <p class="menu-label is-size-5 is-clickable" data-action="click->menu#toggle" data-id="non-conser">
                     <span class="icon pr-2">
                         <img class="image" src="img/icons/non_cons_menu.png"/>
                     </span>
                     Beni non conservati
                     <span class="icon pl-2">
-                        <i class="fa fa-chevron-right"></i>
+                        <i class="fa fa-chevron-right" data-menu-target="icon" data-id="non-conser"></i>
                     </span>
                 </p>
-                <ul class="menu-list is-hidden" id="not-conserved-list" data-menu-target="list">
+                <ul class="menu-list is-hidden" id="non-conser-list" data-menu-target="list">
-
+                    <li>
+                        Anacapri
+                        <ul id="noncons-anacapri-sub">
+                            <li>
+                                <a class="button" id="cala">
+                                    Cala a mare - resti di ambienti
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" id="campetiello">
+                                    Punta Campetiello - scala
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" id="castagnaro">
+                                    Castagnaro - area funeraria
+                                </a>
+                            </li>
+                            <li>
+                                <a class="button" id="ceselle">
+                                    Ceselle - necropoli
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
                 </ul>
-                <p class="menu-label is-size-5 is-clickable">
+                <p class="menu-label is-size-5 is-clickable" data-action="click->menu#toggle" data-id="rinv">
                     <span class="icon pr-2">
                         <img class="image" src="img/icons/rinv_menu.png"/>
                     </span>
                     Rinvenimenti
                     <span class="icon pl-2">
-                        <i class="fa fa-chevron-right"></i>
+                        <i class="fa fa-chevron-right" data-menu-target="icon" data-id="rinv"></i>
                     </span>
                 </p>
-                <ul class="menu-list is-hidden" id="rinvenimenti-list">
+                <ul class="menu-list is-hidden" id="rinv-list" data-menu-target="list">
                     <li>
                         Anacapri
-                        <span class="icon is-small">
-                            <i class="fa fa-plus"></i>
-                        </span>
                         <ul id="rinv-anacapri-sub">
                             <li>
                                 <a class="button" id="affresco_dame">
@@ -188,8 +220,8 @@
         </div>
     </div>
     <!-- Sites data modal -->
-    <div class="modal" id="site-data">
+    <div class="modal" id="site-data" data-controller="modal" data-modal-target="modal">
-        <div class="modal-background"></div>
+        <div class="modal-background" data-action="click->modal#close"></div>
         <div class="modal-content has-background-white" style="min-height: 95vh;">
             <div class="tabs is-centered">
                 <ul>
@@ -232,19 +264,19 @@
             <div class="data-tabs is-hidden" id="photos"></div>
             <div class="data-tabs is-hidden" id="documents"></div>
         </div>
-        <button class="modal-close is-large" aria-label="close"></button>
+        <button class="modal-close is-large" aria-label="close" data-action="click->modal#close"></button>
     </div>
     <!-- Not conserved modal -->
-    <div class="modal" id="not-conser-data">
+    <div class="modal" id="not-conser-data" data-controller="modal" data-modal-target="modal">
-        <div class="modal-background"></div>
+        <div class="modal-background" data-action="click->modal#close"></div>
         <div class="modal-content has-background-white" style="min-height: 95vh;">
             <div id="not-conser-sheet"></div>
         </div>
-        <button class="modal-close is-large" aria-label="close"></button>
+        <button class="modal-close is-large" aria-label="close" data-action="click->modal#close"></button>
     </div>
     <!-- Not conserved modal -->
-    <div class="modal" id="finding-data">
+    <div class="modal" id="finding-data" data-controller="modal" data-modal-target="modal">
-        <div class="modal-background"></div>
+        <div class="modal-background" data-action="click->modal#close"></div>
         <div class="modal-content has-background-white" style="min-height: 95vh;">
             <div class="tabs is-centered">
                 <ul>
@@ -269,7 +301,7 @@
             <div class="data-tabs" id="finding-sheet"></div>
             <div class="data-tabs is-hidden" id="photos"></div>
         </div>
-        <button class="modal-close is-large" aria-label="close"></button>
+        <button class="modal-close is-large" aria-label="close" data-action="click->modal#close"></button>
     </div>
     <!-- Spherical photo modal -->
     <div class="modal" id="spherical-modal">

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`);
+    close() {
-
+        this.menuTarget.classList.add('is-hidden');
-        console.log(this.menuTarget);
     }
 
     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', () => {
+    window.LMap = map;
-        document.querySelector('#menu').classList.add('is-hidden');
-    })
 });
 
 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 => {