Let browsers handle focusing, they seem to do fine
This commit is contained in:
parent
396b16291f
commit
008c2da4c6
@ -2,7 +2,7 @@
|
|||||||
<nav id="map__context-menu" v-show="menuVisible" ref="menuElement" :style="style">
|
<nav id="map__context-menu" v-show="menuVisible" ref="menuElement" :style="style">
|
||||||
<ul class="menu">
|
<ul class="menu">
|
||||||
<li>
|
<li>
|
||||||
<button ref="locationButton" type="button" v-clipboard="locationCopy">{{ locationLabel }}</button>
|
<button type="button" v-clipboard="locationCopy">{{ locationLabel }}</button>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<button type="button" v-clipboard="url">{{ messageCopyLink }}</button>
|
<button type="button" v-clipboard="url">{{ messageCopyLink }}</button>
|
||||||
@ -21,7 +21,7 @@ import {computed, defineComponent, onMounted, onUnmounted} from "@vue/runtime-co
|
|||||||
import {LeafletMouseEvent} from "leaflet";
|
import {LeafletMouseEvent} from "leaflet";
|
||||||
import {useStore} from "@/store";
|
import {useStore} from "@/store";
|
||||||
import WorldListItem from "@/components/sidebar/WorldListItem.vue";
|
import WorldListItem from "@/components/sidebar/WorldListItem.vue";
|
||||||
import {ref, watch} from "vue";
|
import {ref} from "vue";
|
||||||
import {getUrlForLocation} from "@/util";
|
import {getUrlForLocation} from "@/util";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
@ -114,12 +114,6 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
watch(menuVisible, visible => {
|
|
||||||
if (visible) {
|
|
||||||
requestAnimationFrame(() => locationButton.value && locationButton.value.focus());
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
window.addEventListener('click', closeContextMenu);
|
window.addEventListener('click', closeContextMenu);
|
||||||
window.addEventListener('keyup', handleEsc);
|
window.addEventListener('keyup', handleEsc);
|
||||||
@ -130,8 +124,18 @@ export default defineComponent({
|
|||||||
window.removeEventListener('keyup', handleEsc);
|
window.removeEventListener('keyup', handleEsc);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
window.addEventListener('contextmenu', e => {
|
||||||
|
if(e.target.classList.contains('leaflet-zoom-animated')) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
props.leaflet.on('contextmenu', (e: LeafletMouseEvent) => {
|
props.leaflet.on('contextmenu', (e: LeafletMouseEvent) => {
|
||||||
|
console.log('This event handler');
|
||||||
|
e.originalEvent.stopImmediatePropagation();
|
||||||
e.originalEvent.preventDefault();
|
e.originalEvent.preventDefault();
|
||||||
|
props.leaflet.closePopup();
|
||||||
|
props.leaflet.closeTooltip();
|
||||||
event.value = e;
|
event.value = e;
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -141,7 +145,6 @@ export default defineComponent({
|
|||||||
|
|
||||||
menuVisible,
|
menuVisible,
|
||||||
menuElement,
|
menuElement,
|
||||||
locationButton,
|
|
||||||
url,
|
url,
|
||||||
|
|
||||||
locationLabel,
|
locationLabel,
|
||||||
|
Loading…
Reference in New Issue
Block a user