schnabu/maputnik
1
0
Fork 0
mirror of https://github.com/a-nyx/maputnik-with-pmtiles.git synced 2025-01-14 18:23:30 +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 = [ 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("inspect"); this.setMapState(
this.state.mapState === "map" ? "inspect" : "map"
);
} }
}, },
{ {
keyCode: keyCodes["m"], key: "m",
handler: () => { handler: () => {
document.querySelector(".mapboxgl-canvas").focus(); document.querySelector(".mapboxgl-canvas").focus();
} }
@ -131,16 +122,17 @@ 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(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) {
this.setModal("shortcuts", false);
shortcut.handler(e); shortcut.handler(e);
} }
} }
@ -488,17 +480,21 @@ export default class App extends React.Component {
this.setState({ selectedLayerIndex: idx }) this.setState({ selectedLayerIndex: idx })
} }
toggleModal(modalName) { setModal(modalName, value) {
if(modalName === 'survey' && value === false) {
localStorage.setItem('survey', '');
}
this.setState({ this.setState({
isOpen: { isOpen: {
...this.state.isOpen, ...this.state.isOpen,
[modalName]: !this.state.isOpen[modalName] [modalName]: value
} }
}) })
}
if(modalName === 'survey') { toggleModal(modalName) {
localStorage.setItem('survey', ''); this.setModal(modalName, !this.state.isOpen[modalName]);
}
} }
render() { render() {
@ -553,6 +549,7 @@ export default class App extends React.Component {
const modals = <div> const modals = <div>
<ShortcutsModal <ShortcutsModal
ref={(el) => this.shortcutEl = el}
isOpen={this.state.isOpen.shortcuts} isOpen={this.state.isOpen.shortcuts}
onOpenToggle={this.toggleModal.bind(this, 'shortcuts')} onOpenToggle={this.toggleModal.bind(this, 'shortcuts')}
/> />