schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2025-01-14 18:03:29 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #448 from orangemug/fix/shortcut-fixes

Browse source 
Shortcut fixes
This commit is contained in:
Orange Mug 2018-10-31 08:02:13 +00:00 committed by GitHub
commit c51c40a20e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
src/components/App.jsx
View file

@ -74,56 +74,47 @@ 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("inspect");
this.setMapState(
this.state.mapState === "map" ? "inspect" : "map"
);
}
},
{
keyCode: keyCodes["m"],
key: "m",
handler: () => {
document.querySelector(".mapboxgl-canvas").focus();
}
@ -131,16 +122,17 @@ 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(document.activeElement === document.body) {
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) {
this.setModal("shortcuts", false);
shortcut.handler(e);
}
}
@ -488,17 +480,21 @@ export default class App extends React.Component {
this.setState({ selectedLayerIndex: idx })
}
toggleModal(modalName) {
setModal(modalName, value) {
if(modalName === 'survey' && value === false) {
localStorage.setItem('survey', '');
}
this.setState({
isOpen: {
...this.state.isOpen,
[modalName]: !this.state.isOpen[modalName]
[modalName]: value
}
})
if(modalName === 'survey') {
localStorage.setItem('survey', '');
}
toggleModal(modalName) {
this.setModal(modalName, !this.state.isOpen[modalName]);
}
render() {
@ -553,6 +549,7 @@ export default class App extends React.Component {
const modals = <div>
<ShortcutsModal
ref={(el) => this.shortcutEl = el}
isOpen={this.state.isOpen.shortcuts}
onOpenToggle={this.toggleModal.bind(this, 'shortcuts')}
/>