simon/mangareader
Archived
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

frontend: variable reading direction
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source
This commit is contained in:
Simon Bruder 2019-07-16 15:11:00 +00:00
parent c97f8df9e9
commit 23a04a3b52
No known key found for this signature in database
GPG key ID: 6F03E0000CC5B62F
1 changed files with 20 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
frontend/src/views/Reader.vue
View file

@ -1,5 +1,5 @@
<template>
<div class="reader" v-shortkey="{next: ['arrowleft'], prev: ['arrowright']}" @shortkey="navigation" :style="{ 'grid-template-columns': showSidebar ? 'auto 250px' : 'auto' }">
<div class="reader" v-shortkey="{left: ['arrowleft'], right: ['arrowright']}" @shortkey="navigation" :style="{ 'grid-template-columns': showSidebar ? 'auto 250px' : 'auto' }">
<div>
<img :style="{ width: pageWidth + '%' }" :src="info.pages[page]" @load="setScroll">
<!-- prefetching -->
@ -14,6 +14,7 @@
<button v-on:click="changePageWidth(5)">+</button>
<button v-on:click="changePageWidth(-5)">-</button>
</p>
<button v-on:click="changeDirection">{{ direction.toUpperCase() }}</button>
<button class="hide" v-on:click="showSidebar = false">Hide</button>
</div>
<div class="sidebar-enabler" :style="{ display: showSidebar ? 'none' : '' }" v-on:click="showSidebar = true"></div>
@ -32,7 +33,8 @@ export default {
},
scrollPositions: [],
pageWidth: 60,
showSidebar: true
showSidebar: true,
direction: 'rtl'
}
},
computed: {
@ -68,13 +70,12 @@ export default {
},
navigation (event) {
switch (event.srcKey) {
case 'next':
this.setPage(this.page + 1)
break
case 'prev':
this.setPage(this.page - 1)
break
if ((event.srcKey === 'right' && this.direction === 'ltr') || (event.srcKey === 'left' && this.direction === 'rtl')) {
this.setPage(this.page + 1)
} else if ((event.srcKey === 'left' && this.direction === 'ltr') || (event.srcKey === 'right' && this.direction === 'rtl')) {
this.setPage(this.page - 1)
} else {
throw new Error('cannot nagivate: invalid parameters')
}
},
@ -82,6 +83,16 @@ export default {
if (this.pageWidth + change > 0 && this.pageWidth + change <= 100) {
this.pageWidth += change
}
},
changeDirection () {
if (this.direction === 'rtl') {
this.direction = 'ltr'
} else if (this.direction === 'ltr') {
this.direction = 'rtl'
} else {
throw new Error('cannot change reading direction: invalid direction currently set')
}
}
}
}