schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2024-12-29 08:30:31 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
orangemug 2018-10-30 20:12:48 +00:00
parent bce8e8b807
commit f2f0270936
1 changed files with 9 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/components/App.jsx
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 = [ const shortcuts = [
{ {
keyCode: keyCodes["?"], key: "?",
handler: () => { handler: () => {
this.toggleModal("shortcuts"); this.toggleModal("shortcuts");
} }
}, },
{ {
keyCode: keyCodes["o"], key: "o",
handler: () => { handler: () => {
this.toggleModal("open"); this.toggleModal("open");
} }
}, },
{ {
keyCode: keyCodes["e"], key: "e",
handler: () => { handler: () => {
this.toggleModal("export"); this.toggleModal("export");
} }
}, },
{ {
keyCode: keyCodes["d"], key: "d",
handler: () => { handler: () => {
this.toggleModal("sources"); this.toggleModal("sources");
} }
}, },
{ {
keyCode: keyCodes["s"], key: "s",
handler: () => { handler: () => {
this.toggleModal("settings"); this.toggleModal("settings");
} }
}, },
{ {
keyCode: keyCodes["i"], key: "i",
handler: () => { handler: () => {
this.setMapState( this.setMapState(
this.state.mapState === "map" ? "inspect" : "map" this.state.mapState === "map" ? "inspect" : "map"
@ -125,7 +114,7 @@ export default class App extends React.Component {
} }
}, },
{ {
keyCode: keyCodes["m"], key: "m",
handler: () => { handler: () => {
document.querySelector(".mapboxgl-canvas").focus(); document.querySelector(".mapboxgl-canvas").focus();
} }
@ -133,13 +122,13 @@ export default class App extends React.Component {
] ]
document.body.addEventListener("keyup", (e) => { document.body.addEventListener("keyup", (e) => {
if(e.keyCode === keyCodes["esc"]) { if(e.key === "Escape") {
e.target.blur(); e.target.blur();
document.body.focus(); document.body.focus();
} }
else if(this.state.isOpen.shortcuts || document.activeElement === document.body) { else if(this.state.isOpen.shortcuts || document.activeElement === document.body) {
const shortcut = shortcuts.find((shortcut) => { const shortcut = shortcuts.find((shortcut) => {
return (shortcut.keyCode === e.keyCode) return (shortcut.key === e.key)
}) })
if(shortcut) { if(shortcut) {