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

Start using Stimulus

Browse Source
This commit is contained in:
Nicolò P. 2024-11-27 10:06:00 +01:00
parent fbb9efc4c7
commit 8ef3331b25
3 changed files with 68 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
webgis/index.html
View File

@ -11,7 +11,8 @@
{
"imports": {
"three": "./js/vendor/three/build/three.module.js",
"@photo-sphere-viewer/core": "./js/vendor/@photo-sphere-viewer/core/index.module.js"
"@photo-sphere-viewer/core": "./js/vendor/@photo-sphere-viewer/core/index.module.js",
"@hotwired/stimulus": "./js/vendor/@hotwired/stimulus/dist/stimulus.js"
}
}
</script>
@ -20,7 +21,7 @@
<script src="js/index.js" type="module"></script>
<title>WebGIS Isola di Capri</title>
</head>
<body>
<body data-controller="menu">
<nav class="navbar mb-0" role="navigation">
<div class="navbar-brand">
<a href="/" class="navbar-item is-size-5 has-text-dark ml-4" title="Torna alla home page">
@ -40,7 +41,8 @@
</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" role="button" id="siti"
data-action="click->menu#toggleMenu" data-id="siti">
Beni archeologici
</button>
<button class="navbar-item button is-size-5 is-white" role="button" id="non-conserv">
@ -61,10 +63,11 @@
<div class="loading loading-lg"></div>
</div>
<div class="main columns">
<div class="column is-hidden is-4 is-3-widescreen is-4-desktop is-5-mobile is-overlay has-background-white-ter" id="menu">
<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">
<button title="Chiudi menu" class="delete is-pulled-right" id="close-menu"></button>
<p class="menu-label is-size-5 mt-2 is-clickable">
<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>
@ -73,7 +76,7 @@
<i class="fa fa-chevron-right"></i>
</span>
</p>
<ul class="menu-list is-hidden" id="siti-list">
<ul class="menu-list is-hidden" id="siti-list" data-menu-target="list">
<li>
Anacapri
<ul id="siti-anacapri-sub">
@ -144,7 +147,7 @@
<i class="fa fa-chevron-right"></i>
</span>
</p>
<ul class="menu-list is-hidden" id="not-conserved-list">
<ul class="menu-list is-hidden" id="not-conserved-list" data-menu-target="list">
</ul>
<p class="menu-label is-size-5 is-clickable">

46
webgis/js/controllers/menu_controller.js Normal file
View File

@ -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;
}
}

14
webgis/js/index.js
View File

@ -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);
}