Start using Stimulus

webgis/js/controllers/menu_controller.js

@@ -0,0 +1,46 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ['list', 'menu'];
+
+    toggleMenu(event) {
+        const target = event.currentTarget;
+        const id = target.getAttribute('data-id');
+
+        this.menuTarget.classList.toggle('is-hidden');
+
+        this.openList(`#${id}-list`);
+
+        console.log(this.menuTarget);
+    }
+
+    openList(id) {
+        document.querySelector(id).classList.remove('is-hidden');
+    }
+
+    toggle(event) {
+        const target = event.currentTarget; 
+        const targetIcon = target.querySelector('.fa');
+        const id = target.getAttribute('data-id');
+        const listId = `${id}-list`;
+        const list = this.listTargets.find(t => t.id === listId);
+
+        if (list) {
+            list.classList.toggle('is-hidden');
+        }
+
+        this.toggleIcon(targetIcon);
+    }
+
+    toggleIcon(icon) {
+        if (icon.classList.contains('fa-chevron-right')) {
+            icon.classList.remove('fa-chevron-right');
+            icon.classList.add('fa-chevron-down');
+        } else {
+            icon.classList.add('fa-chevron-right');
+            icon.classList.remove('fa-chevron-down');
+        }
+
+        return icon;
+    }
+}

webgis/js/index.js

@@ -1,7 +1,12 @@
 import GIS from './gis.js';
 import UI from './ui.js';
+import { Application } from '@hotwired/stimulus';
+import MenuController from './controllers/menu_controller.js';
 
 document.addEventListener('DOMContentLoaded', async () => {
+    // Register Stimulus controllers
+    initStimulus();
+
     let progress = document.querySelector('progress');
     const init = await GIS.initMap('map');
     progress.classList.add('is-hidden');
@@ -12,8 +17,8 @@ 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.toggleMenu('siti', 'siti-list');
+    //UI.toggleMenu('rinvenimenti', 'rinvenimenti-list');
     UI.toggleBurger('navbar-burger');
     UI.sitesMenu('.menu-list', map, sites);
 
@@ -21,3 +26,8 @@ document.addEventListener('DOMContentLoaded', async () => {
         document.querySelector('#menu').classList.add('is-hidden');
     })
 });
+
+function initStimulus() {
+    window.Stimulus = Application.start();
+    Stimulus.register("menu", MenuController);
+}