Madeorsk/rudeshark.net
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(client): Deckでマウスホイールを使って横スクロールできるように

Browse Source
This commit is contained in:
syuilo 2020-07-17 21:53:34 +09:00
parent eb15d31ebf
commit e18caa3396
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/client/deck.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="mk-deck" :class="`${$store.state.device.deckColumnAlign}`" v-hotkey.global="keymap"> <div class="mk-deck" :class="`${$store.state.device.deckColumnAlign}`" v-hotkey.global="keymap" @wheel="onWheel">
<x-sidebar ref="nav"/> <x-sidebar ref="nav"/>
<!-- TODO: deckMainColumnPlace を見て位置変える --> <!-- TODO: deckMainColumnPlace を見て位置変える -->
@ -49,6 +49,7 @@ import { search } from './scripts/search';
import DeckColumnCore from './components/deck/column-core.vue'; import DeckColumnCore from './components/deck/column-core.vue';
import DeckColumn from './components/deck/column.vue'; import DeckColumn from './components/deck/column.vue';
import XSidebar from './components/sidebar.vue'; import XSidebar from './components/sidebar.vue';
import { getScrollContainer } from './scripts/scroll';
export default Vue.extend({ export default Vue.extend({
components: { components: {
@ -108,6 +109,7 @@ export default Vue.extend({
created() { created() {
document.documentElement.style.overflowY = 'hidden'; document.documentElement.style.overflowY = 'hidden';
document.documentElement.style.scrollBehavior = 'auto';
if (this.$store.getters.isSignedIn) { if (this.$store.getters.isSignedIn) {
this.connection = this.$root.stream.useSharedConnection('main'); this.connection = this.$root.stream.useSharedConnection('main');
@ -119,6 +121,12 @@ export default Vue.extend({
}, },
methods: { methods: {
onWheel(e) {
if (getScrollContainer(e.target) == null) {
document.documentElement.scrollLeft += e.deltaY > 0 ? 96 : -96;
}
},
showNav() { showNav() {
this.$refs.nav.show(); this.$refs.nav.show();
}, },