Use singleclick event listener on map, fix #35

This commit is contained in:
Lucas Verney 2018-08-28 14:49:21 +02:00
parent 11aa82b310
commit b06ba60816
2 changed files with 2 additions and 22 deletions

View File

@ -387,14 +387,7 @@ export default {
}); });
// Add click handler // Add click handler
this.map.on('click', this.handleClick); this.map.on('singleclick', this.handleClick);
// Take care that OpenLayer map actually catches "pointerdown"
// events and not "click" events. Then, we need an explicit event
// handler for "click" to stop propagation to ReportCard component.
document.querySelector('#map').addEventListener(
'click',
event => event.stopPropagation(),
);
// Show recenter button on dragging the map // Show recenter button on dragging the map
this.map.on('pointerdrag', () => { this.map.on('pointerdrag', () => {

View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<ReportErrorModal v-model="hasError"></ReportErrorModal> <ReportErrorModal v-model="hasError"></ReportErrorModal>
<v-bottom-sheet v-model="isActive" persistent id="reportCardSheet"> <v-bottom-sheet v-model="isActive" id="reportCardSheet">
<v-card> <v-card>
<v-container fluid> <v-container fluid>
<v-layout row wrap> <v-layout row wrap>
@ -84,19 +84,6 @@ export default {
}, },
mounted() { mounted() {
window.addEventListener('keydown', this.hideReportDialogOnEsc); window.addEventListener('keydown', this.hideReportDialogOnEsc);
// Use persistent mode and recreate the clicking outside event handler
// here as Vuetify uses capture mode which has some issues with
// OpenLayers events.
const app = document.querySelector('[data-app]') || document.body;
app.addEventListener(
'click',
(event) => {
if (this.isActive && event.target.closest('#reportCardSheet') === null) {
this.isActive = false;
}
},
);
}, },
props: { props: {
value: Boolean, value: Boolean,