Probindo/database-pertani-web
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hover and scroll on map

Browse Source
This commit is contained in:
fir2be
2026-10-15 14:12:03 +07:00
parent 2e8271d27a
commit df2b5a1312
2 changed files with 29 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/dashboard/produktivitas.blade.php
+21 -2
View File
@@ -248,6 +248,7 @@
box-shadow: 0 6px 24px rgba(0, 0, 0, .2);
left: auto;
max-height: calc(100% - 2rem);
overscroll-behavior: contain;
overflow-y: auto;
padding: .875rem;
pointer-events: auto;
@@ -258,6 +259,11 @@
z-index: 700;
}
.produksi-map-information-overlay:focus-visible {
outline: 2px solid var(--bs-primary, #7367f0);
outline-offset: 2px;
}
.produksi-map-information {
display: flex;
flex-direction: column;
@@ -782,7 +788,7 @@
Kembali ke Atas
</button>
<div id="produksi-map-empty" class="produksi-map-empty">Belum ada poligon lahan untuk filter ini.</div>
<div class="produksi-map-information-overlay">
<div class="produksi-map-information-overlay" tabindex="0" role="region" aria-label="Informasi peta sebaran">
<div class="produksi-map-information" id="produksi-map-information"></div>
</div>
</div>
@@ -810,7 +816,7 @@
Kembali ke Atas
</button>
<div id="produksi-budidaya-map-empty" class="produksi-map-empty">Belum ada poligon lahan untuk filter ini.</div>
<div class="produksi-map-information-overlay">
<div class="produksi-map-information-overlay" tabindex="0" role="region" aria-label="Informasi peta praktik budidaya">
<div class="produksi-map-information" id="produksi-budidaya-map-information"></div>
</div>
</div>
@@ -1460,6 +1466,17 @@ document.addEventListener('DOMContentLoaded', function () {
map: null,
};
function enableMapInformationInteraction(mapElement) {
const informationOverlay = mapElement.querySelector('.produksi-map-information-overlay');
if (!informationOverlay) return;
L.DomEvent.disableScrollPropagation(informationOverlay);
L.DomEvent.disableClickPropagation(informationOverlay);
informationOverlay.addEventListener('click', function () {
informationOverlay.focus({ preventScroll: true });
});
}
function initProductionMap() {
const element = document.getElementById('produksi-sebaran-map');
@@ -1485,6 +1502,7 @@ document.addEventListener('DOMContentLoaded', function () {
productionMapState.group = L.featureGroup().addTo(productionMapState.map);
productionMapState.backButton = document.getElementById('produksi-map-back');
productionMapState.empty = document.getElementById('produksi-map-empty');
enableMapInformationInteraction(element);
L.control.zoom({ position: 'topleft' }).addTo(productionMapState.map);
@@ -1712,6 +1730,7 @@ document.addEventListener('DOMContentLoaded', function () {
cultivationMapState.group = L.featureGroup().addTo(cultivationMapState.map);
cultivationMapState.backButton = document.getElementById('produksi-budidaya-map-back');
cultivationMapState.empty = document.getElementById('produksi-budidaya-map-empty');
enableMapInformationInteraction(element);
L.control.zoom({ position: 'topleft' }).addTo(cultivationMapState.map);