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