gamebrary/src/components/KeyboardShortcutsModal.vue
2021-04-21 08:40:00 -07:00

116 lines
2 KiB
Vue

<template lang="html">
<b-modal
id="keyboard-shortcuts"
title="BootstrapVue"
hide-footer
>
<template v-slot:modal-header="{ close }">
<modal-header
title="Keyboard Shortcuts"
@close="close"
/>
</template>
<!-- TODO: use table? -->
<p>
<kbd class="mr-1">Esc </kbd>
Close modal
</p>
<p
v-for="(shortcut, name) in KEYBOARD_SHORTCUTS"
:key="name"
>
<kbd
v-for="key in shortcut"
:key="key"
class="mr-1"
>
{{ key }}
</kbd>
{{ $t(`shortcuts.${name.substr(6)}`) }}
</p>
<div class="bg-secondary p-2 rounded">
<p>Game modal shortucts</p>
<p>
<kbd class="mr-1">
<i class="fas fa-angle-left fa-fw" aria-hidden />
</kbd>
Previous game
</p>
<p>
<kbd class="mr-1">
<i class="fas fa-angle-right fa-fw" aria-hidden />
</kbd>
Next game
</p>
<p>
<kbd class="mr-1">
T
</kbd>
Game Tags
</p>
<p>
<kbd class="mr-1">
N
</kbd>
Game notes
</p>
<p>
<kbd class="mr-1">
P
</kbd>
Game progress
</p>
</div>
</b-modal>
</template>
<script>
import { KEYBOARD_SHORTCUTS } from '@/constants';
import { mapState } from 'vuex';
export default {
data() {
return {
KEYBOARD_SHORTCUTS,
};
},
computed: {
...mapState(['user']),
},
mounted() {
this.$bus.$on('HANDLE_SHORTCUT', this.handleShortcut);
},
destroyed() {
this.$bus.$off('HANDLE_SHORTCUT');
},
methods: {
handleShortcut({ srcKey }) {
const name = srcKey.substr(6);
if (srcKey.includes('MODAL')) {
this.$bvModal.show(name);
}
if (srcKey.includes('ROUTE')) {
if (this.$route.name !== name) {
this.$router.push({ name });
}
}
},
},
};
</script>