Some fixes for nosleep and moving the map around
This commit is contained in:
parent
857e95845c
commit
37413a7e21
@ -23,7 +23,7 @@
|
||||
"vue-router": "^3.0.1",
|
||||
"vue2-leaflet": "^1.0.2",
|
||||
"vue2-leaflet-tracksymbol": "^1.0.10",
|
||||
"vuetify": "^1.0.0",
|
||||
"vuetify": "^1.1.0",
|
||||
"vuex": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
7
src/components/Intro.vue
Normal file
7
src/components/Intro.vue
Normal file
@ -0,0 +1,7 @@
|
||||
<template>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
};
|
||||
</script>
|
||||
@ -10,6 +10,20 @@
|
||||
|
||||
<ReportMarker v-for="marker in markers" :key="marker.id" :marker="marker"></ReportMarker>
|
||||
</v-lmap>
|
||||
<v-btn
|
||||
absolute
|
||||
dark
|
||||
fab
|
||||
large
|
||||
bottom
|
||||
left
|
||||
color="blue"
|
||||
class="overlayButton"
|
||||
v-if="recenterButton"
|
||||
@click.native.stop="recenterMap"
|
||||
>
|
||||
<v-icon>my_location</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -79,25 +93,38 @@ export default {
|
||||
this.isProgrammaticZoom = true;
|
||||
this.map.once('zoomend', () => { this.isProgrammaticZoom = false; });
|
||||
}
|
||||
if (this.map.getCenter() !== this.positionLatLng) {
|
||||
if (
|
||||
this.map.getCenter().lat !== this.positionLatLng[0] &&
|
||||
this.map.getCenter().lng !== this.positionLatLng[1]
|
||||
) {
|
||||
this.isProgrammaticMove = true;
|
||||
this.map.once('moveend', () => { this.isProgrammaticMove = false; });
|
||||
}
|
||||
this.map.setView(this.positionLatLng, this.zoom);
|
||||
this.showCompass();
|
||||
},
|
||||
updated() {
|
||||
if (!this.recenterButton) {
|
||||
if (this.map.getZoom() !== this.zoom) {
|
||||
this.isProgrammaticZoom = true;
|
||||
this.map.once('zoomend', () => { this.isProgrammaticZoom = false; });
|
||||
watch: {
|
||||
positionLatLng: (newPositionLatLng) => {
|
||||
if (!this.map) {
|
||||
// Map should have been created
|
||||
return;
|
||||
}
|
||||
if (this.map.getCenter() !== this.positionLatLng) {
|
||||
this.isProgrammaticMove = true;
|
||||
this.map.once('moveend', () => { this.isProgrammaticMove = false; });
|
||||
if (!this.recenterButton) {
|
||||
// Handle programmatic navigation
|
||||
if (this.map.getZoom() !== this.zoom) {
|
||||
this.isProgrammaticZoom = true;
|
||||
this.map.once('zoomend', () => { this.isProgrammaticZoom = false; });
|
||||
}
|
||||
if (
|
||||
this.map.getCenter().lat !== newPositionLatLng[0] &&
|
||||
this.map.getCenter().lng !== newPositionLatLng[1]
|
||||
) {
|
||||
this.isProgrammaticMove = true;
|
||||
this.map.once('moveend', () => { this.isProgrammaticMove = false; });
|
||||
}
|
||||
this.map.setView(this.positionLatLng, this.zoom);
|
||||
}
|
||||
this.map.setView(this.positionLatLng, this.zoom);
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@ -110,7 +137,7 @@ export default {
|
||||
isMouseDown: false,
|
||||
isProgrammaticZoom: false,
|
||||
isProgrammaticMove: false,
|
||||
recenterButton: null,
|
||||
recenterButton: false,
|
||||
map: null,
|
||||
};
|
||||
},
|
||||
@ -120,7 +147,8 @@ export default {
|
||||
this.onPress(event.latlng);
|
||||
}
|
||||
},
|
||||
onMoveStart() {
|
||||
onMoveStart(ev) {
|
||||
console.log(ev, this.isProgrammaticMove);
|
||||
if (!this.isProgrammaticMove) {
|
||||
this.showRecenterButton();
|
||||
}
|
||||
@ -142,22 +170,12 @@ export default {
|
||||
},
|
||||
showRecenterButton() {
|
||||
if (!this.recenterButton) {
|
||||
this.recenterButton = L.control({ position: 'bottomleft' });
|
||||
this.recenterButton.onAdd = () => {
|
||||
const btn = L.DomUtil.create('button', 'overlayButton btn btn--floating btn--large theme--dark blue legend');
|
||||
btn.type = 'button';
|
||||
btn.addEventListener('click', this.recenterMap);
|
||||
btn.innerHTML = '<div class="btn__content"><i aria-hidden="true" class="icon material-icons">my_location</i></div>';
|
||||
L.DomEvent.disableClickPropagation(btn);
|
||||
return btn;
|
||||
};
|
||||
this.map.addControl(this.recenterButton);
|
||||
this.recenterButton = true;
|
||||
}
|
||||
},
|
||||
hideRecenterButton() {
|
||||
if (this.recenterButton) {
|
||||
this.map.removeControl(this.recenterButton);
|
||||
this.recenterButton = null;
|
||||
this.recenterButton = false;
|
||||
}
|
||||
},
|
||||
recenterMap() {
|
||||
@ -166,7 +184,10 @@ export default {
|
||||
this.isProgrammaticZoom = true;
|
||||
this.map.once('zoomend', () => { this.isProgrammaticZoom = false; });
|
||||
}
|
||||
if (this.map.getCenter() !== this.positionLatLng) {
|
||||
if (
|
||||
this.map.getCenter().lat !== this.positionLatLng[0] &&
|
||||
this.map.getCenter().lng !== this.positionLatLng[1]
|
||||
) {
|
||||
this.isProgrammaticMove = true;
|
||||
this.map.once('moveend', () => { this.isProgrammaticMove = false; });
|
||||
}
|
||||
|
||||
@ -12,6 +12,9 @@ export default {
|
||||
fetching: 'Fetching current position…',
|
||||
unavailable: 'Sorry, geolocation is not available in your browser.',
|
||||
},
|
||||
intro: {
|
||||
start: "Let's go!",
|
||||
},
|
||||
menu: {
|
||||
About: 'Help',
|
||||
Map: 'Map',
|
||||
|
||||
@ -1,10 +1,17 @@
|
||||
<template>
|
||||
<v-container fluid fill-height class="no-padding">
|
||||
<v-layout row wrap fill-height>
|
||||
<v-layout v-if="isIntro" row wrap class="text-xs-center blue lighten-2">
|
||||
<v-flex xs8 offset-xs2>
|
||||
<p><img src="static/icon.svg" alt="Logo"/></p></p>
|
||||
<p>{{ $t('about.summary') }}</p>
|
||||
<v-btn round color="green" dark @click="introButtonClick">{{ $t('intro.start') }}</v-btn>
|
||||
</v-flex>
|
||||
</v-layout>
|
||||
<v-layout v-else row wrap fill-height>
|
||||
<v-flex xs12 fill-height v-if="latLng">
|
||||
<Map :positionLatLng="latLng" :heading="heading" :accuracy="accuracy" :markers="reportsMarkers" :onPress="showReportDialog"></Map>
|
||||
<v-btn
|
||||
fixed
|
||||
absolute
|
||||
dark
|
||||
fab
|
||||
large
|
||||
@ -46,16 +53,12 @@ export default {
|
||||
Map,
|
||||
ReportDialog,
|
||||
},
|
||||
created() {
|
||||
this.initializePositionWatching();
|
||||
this.listenForFirstInteraction();
|
||||
this.$store.dispatch('fetchReports');
|
||||
window.addEventListener('keydown', this.hideReportDialogOnEsc);
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.disableNoSleep();
|
||||
this.disablePositionWatching();
|
||||
window.removeEventListener('keydown', this.hideReportDialogOnEsc);
|
||||
if (!this.isIntro) {
|
||||
this.disableNoSleep();
|
||||
this.disablePositionWatching();
|
||||
window.removeEventListener('keydown', this.hideReportDialogOnEsc);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
reportsMarkers() {
|
||||
@ -73,6 +76,7 @@ export default {
|
||||
dialog: false,
|
||||
error: null,
|
||||
heading: null,
|
||||
isIntro: true,
|
||||
latLng: null,
|
||||
noSleep: null,
|
||||
reportLat: null,
|
||||
@ -163,25 +167,12 @@ export default {
|
||||
this.dialog = false;
|
||||
}
|
||||
},
|
||||
handleFirstUserInteraction() {
|
||||
introButtonClick() {
|
||||
this.setNoSleep();
|
||||
|
||||
window.removeEventListener('mousemove', this.handleFirstUserInteraction, false);
|
||||
window.removeEventListener('mousedown', this.handleFirstUserInteraction, false);
|
||||
window.removeEventListener('keypress', this.handleFirstUserInteraction, false);
|
||||
window.removeEventListener('DOMMouseScroll', this.handleFirstUserInteraction, false);
|
||||
window.removeEventListener('mousewheel', this.handleFirstUserInteraction, false);
|
||||
window.removeEventListener('touchmove', this.handleFirstUserInteraction, false);
|
||||
window.removeEventListener('MSPointerMove', this.handleFirstUserInteraction, false);
|
||||
},
|
||||
listenForFirstInteraction() {
|
||||
window.addEventListener('mousemove', this.handleFirstUserInteraction, false);
|
||||
window.addEventListener('mousedown', this.handleFirstUserInteraction, false);
|
||||
window.addEventListener('keypress', this.handleFirstUserInteraction, false);
|
||||
window.addEventListener('DOMMouseScroll', this.handleFirstUserInteraction, false);
|
||||
window.addEventListener('mousewheel', this.handleFirstUserInteraction, false);
|
||||
window.addEventListener('touchmove', this.handleFirstUserInteraction, false);
|
||||
window.addEventListener('MSPointerMove', this.handleFirstUserInteraction, false);
|
||||
this.isIntro = false;
|
||||
this.initializePositionWatching();
|
||||
this.$store.dispatch('fetchReports');
|
||||
window.addEventListener('keydown', this.hideReportDialogOnEsc);
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -191,14 +182,17 @@ export default {
|
||||
.no-padding {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.overlayButton {
|
||||
z-index: 1000 !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.overlay {
|
||||
.v-overlay, .v-dialog__content {
|
||||
z-index: 1002 !important;
|
||||
}
|
||||
|
||||
.overlayButton {
|
||||
z-index: 1000 !important;
|
||||
position: absolute !important;
|
||||
bottom: 24px !important;
|
||||
border-radius: 50% !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -5992,9 +5992,9 @@ vue@^2.5.2:
|
||||
version "2.5.16"
|
||||
resolved "https://registry.yarnpkg.com/vue/-/vue-2.5.16.tgz#07edb75e8412aaeed871ebafa99f4672584a0085"
|
||||
|
||||
vuetify@^1.0.0:
|
||||
version "1.0.19"
|
||||
resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-1.0.19.tgz#fb6d123dd1c217795fc2333e912c0ecbed2ed69e"
|
||||
vuetify@^1.1.0:
|
||||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/vuetify/-/vuetify-1.1.1.tgz#8d8f64306a45aaf862487addae8decf082dac0a3"
|
||||
|
||||
vuex@^3.0.1:
|
||||
version "3.0.1"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user