mirror of
https://github.com/romancm/gamebrary
synced 2024-12-23 01:23:13 +00:00
116 lines
2 KiB
Vue
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>
|