Refactor bview to Stimulus (mostly)
This commit is contained in:
+66
-1
@@ -27,7 +27,12 @@
|
||||
<title>WebGIS Isola di Capri</title>
|
||||
</head>
|
||||
<body data-controller="menu modal bview"
|
||||
data-action="menu-ready@document->menu#buildMenu menu-ready@document->menu#buildCartographyMenu keydown.esc->bview#closeView">
|
||||
data-action="
|
||||
menu-ready@document->menu#buildMenu
|
||||
menu-ready@document->menu#buildCartographyMenu
|
||||
keydown.esc->bview#closeView
|
||||
bview-active@document->bview#openView
|
||||
">
|
||||
<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">
|
||||
@@ -613,5 +618,65 @@
|
||||
</div>
|
||||
<button class="modal-close is-large" aria-label="close"></button>
|
||||
</div>
|
||||
<!-- Top bar for bview -->
|
||||
<div class="container bview-bar has-background-primary-90 p-3 is-hidden" data-bview-target="bar">
|
||||
<button title="Esci da mappa di dettaglio" class="delete is-pulled-right" data-action="bview#closeView"></button>
|
||||
<p class="has-text-centered has-text-weight-semibold is-size-5 p-2">Mappa di dettaglio interattiva</p>
|
||||
<p class="has-text-centered is-size-6 mt-0 pt-0">(Chiudere questo riquadro o premere ESC per uscire)</p>
|
||||
</div>
|
||||
<!-- Legend for bview -->
|
||||
<div class="bview-legend container is-hidden has-background-white p-4" data-bview-target="legend">
|
||||
<h4 class="has-text-weight-semibold pb-2">Legenda opere murarie</h4>
|
||||
<ul type="none">
|
||||
<li>
|
||||
<li>
|
||||
<span class="icon-text">
|
||||
<span class="icon polygon-tech">
|
||||
<i class="fas fa-square"></i>
|
||||
</span>
|
||||
<span>Opera poligonale</span>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="icon-text">
|
||||
<span class="icon uncertain-tech">
|
||||
<i class="fas fa-square"></i>
|
||||
</span>
|
||||
<span>Opera incerta</span>
|
||||
</span>
|
||||
</li>
|
||||
<span class="icon-text">
|
||||
<span class="icon reticul-tech">
|
||||
<i class="fas fa-square"></i>
|
||||
</span>
|
||||
<span>Opera reticolata</span>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="icon-text">
|
||||
<span class="icon later-tech">
|
||||
<i class="fas fa-square"></i>
|
||||
</span>
|
||||
<span>Opera laterizia</span>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="icon-text">
|
||||
<span class="icon mixed-tech">
|
||||
<i class="fas fa-square"></i>
|
||||
</span>
|
||||
<span>Opera mista</span>
|
||||
</span>
|
||||
</li>
|
||||
<li>
|
||||
<span class="icon-text">
|
||||
<span class="icon cement-tech">
|
||||
<i class="fas fa-square"></i>
|
||||
</span>
|
||||
<span>Opera cementizia</span>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -2,7 +2,13 @@ import { Controller } from "@hotwired/stimulus"
|
||||
import { GisState } from '../state.js';
|
||||
|
||||
export default class extends Controller {
|
||||
static targets = ['bar'];
|
||||
static targets = ['bar', 'legend'];
|
||||
|
||||
openView() {
|
||||
this.barTarget.classList.remove('is-hidden');
|
||||
this.legendTarget.classList.remove('is-hidden');
|
||||
GisState.map._container.classList.add('bview-active');
|
||||
}
|
||||
|
||||
closeView(event) {
|
||||
// Don't do anything if ESC keyboard event
|
||||
@@ -10,7 +16,8 @@ export default class extends Controller {
|
||||
if (event instanceof KeyboardEvent && !GisState.bViewActive) return;
|
||||
|
||||
this.resetMap();
|
||||
this.barTarget.remove();
|
||||
this.barTarget.classList.add('is-hidden');
|
||||
this.legendTarget.classList.add('is-hidden');
|
||||
GisState.bViewActive = false;
|
||||
}
|
||||
|
||||
|
||||
+6
-7
@@ -102,7 +102,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
|
||||
// TEST: marker with SVG icon...
|
||||
L.marker([40.5591380,14.2296069], { icon: Icons.wall, id: 'tiberio' })
|
||||
.on('click', () => this.activateBuildingView('tiberio'))
|
||||
.bindTooltip('Mappa USM')
|
||||
.bindTooltip('Mappa di dettaglio interattiva')
|
||||
.addTo(map);
|
||||
|
||||
GisState.map = map;
|
||||
@@ -122,13 +122,14 @@ GIS.activateBuildingView = async function(layerId) {
|
||||
const map = GisState.map;
|
||||
saveCurrentState(map);
|
||||
let currentBase = GisState.currentMapState.baseLayer;
|
||||
const geometries = GisState.layers.geometries;
|
||||
|
||||
map.removeLayer(currentBase);
|
||||
// Remove site layers then re-add it so vector lines
|
||||
// are placed correctly above the new base map
|
||||
GisState.layers.geometries.removeFrom(map);
|
||||
geometries.removeFrom(map);
|
||||
map.addLayer(GisState.baseLayers['Limiti amministrativi']);
|
||||
GisState.layers.geometries.addTo(map);
|
||||
geometries.addTo(map);
|
||||
|
||||
// TODO: move to function in Map module??
|
||||
const wallLayers = [];
|
||||
@@ -143,7 +144,6 @@ GIS.activateBuildingView = async function(layerId) {
|
||||
|
||||
wallLayer.addTo(map);
|
||||
wallLayers.push(wallLayer);
|
||||
|
||||
}
|
||||
catch {
|
||||
continue;
|
||||
@@ -159,9 +159,8 @@ GIS.activateBuildingView = async function(layerId) {
|
||||
);
|
||||
map.setMinZoom(this.BVIEW_MIN_ZOOM);
|
||||
map.setMaxZoom(this.BVIEW_MAX_ZOOM);
|
||||
// This is terrible...
|
||||
UI.addBuildingViewBar();
|
||||
map._container.classList.add('bview-active');
|
||||
// Global event for Stimulus
|
||||
document.dispatchEvent(new Event('bview-active'));
|
||||
GisState.bViewActive = true;
|
||||
}
|
||||
/**
|
||||
|
||||
@@ -58,21 +58,21 @@ Options.walls = {
|
||||
fillColor: '#10ee47',
|
||||
fillOpacity: 1,
|
||||
opacity: 1,
|
||||
weight: 4.5,
|
||||
weight: 3,
|
||||
},
|
||||
"mista" : {
|
||||
color: '#f0280f',
|
||||
fillColor: '#f0280f',
|
||||
fillOpacity: 1,
|
||||
opacity: 1,
|
||||
weight: 4.5,
|
||||
weight: 3,
|
||||
},
|
||||
"incerta" : {
|
||||
color: '#133cee',
|
||||
fillColor: '#133cee',
|
||||
fillOpacity: 1,
|
||||
opacity: 1,
|
||||
weight: 4.5,
|
||||
weight: 3,
|
||||
}
|
||||
};
|
||||
Options.cluster = {
|
||||
|
||||
@@ -59,20 +59,6 @@ UI.addCenterMapControl = function (map, centerCoords, zoom) {
|
||||
let centerCtr = new L.Control.CenterControl();
|
||||
map.addControl(centerCtr);
|
||||
}
|
||||
|
||||
UI.addBuildingViewBar = function() {
|
||||
const bar = document.createElement('div');
|
||||
bar.className = 'container bview-bar has-background-primary-90 p-3';
|
||||
bar.setAttribute('data-bview-target', 'bar');
|
||||
|
||||
bar.innerHTML = html`
|
||||
<button title="Esci da mappa USM" class="delete is-pulled-right" data-action="bview#closeView"></button>
|
||||
<p class="has-text-centered has-text-weight-semibold is-size-5 p-2">Mappa Unità Stratigrafica Muraria (USM)</p>
|
||||
<p class="has-text-centered is-size-6 mt-0 pt-0">(Chiudere questo riquadro o premere ESC per uscire)</p>
|
||||
`;
|
||||
|
||||
document.body.appendChild(bar);
|
||||
}
|
||||
/**
|
||||
* Toggle burger menu for small screens
|
||||
* @param {string} burgerClass The CSS class of the burger element
|
||||
|
||||
Reference in New Issue
Block a user