Use KeyboardEvent.key rather than keyCode in attempt to support more keyboard layouts.

This commit is contained in:
orangemug 2018-10-30 20:12:48 +00:00
parent bce8e8b807
commit f2f0270936

View file

@ -74,50 +74,39 @@ export default class App extends React.Component {
})
const keyCodes = {
"esc": 27,
"?": 191,
"o": 79,
"e": 69,
"s": 83,
"d": 68,
"i": 73,
"m": 77,
}
const shortcuts = [
{
keyCode: keyCodes["?"],
key: "?",
handler: () => {
this.toggleModal("shortcuts");
}
},
{
keyCode: keyCodes["o"],
key: "o",
handler: () => {
this.toggleModal("open");
}
},
{
keyCode: keyCodes["e"],
key: "e",
handler: () => {
this.toggleModal("export");
}
},
{
keyCode: keyCodes["d"],
key: "d",
handler: () => {
this.toggleModal("sources");
}
},
{
keyCode: keyCodes["s"],
key: "s",
handler: () => {
this.toggleModal("settings");
}
},
{
keyCode: keyCodes["i"],
key: "i",
handler: () => {
this.setMapState(
this.state.mapState === "map" ? "inspect" : "map"
@ -125,7 +114,7 @@ export default class App extends React.Component {
}
},
{
keyCode: keyCodes["m"],
key: "m",
handler: () => {
document.querySelector(".mapboxgl-canvas").focus();
}
@ -133,13 +122,13 @@ export default class App extends React.Component {
]
document.body.addEventListener("keyup", (e) => {
if(e.keyCode === keyCodes["esc"]) {
if(e.key === "Escape") {
e.target.blur();
document.body.focus();
}
else if(this.state.isOpen.shortcuts || document.activeElement === document.body) {
const shortcut = shortcuts.find((shortcut) => {
return (shortcut.keyCode === e.keyCode)
return (shortcut.key === e.key)
})
if(shortcut) {