Backup_Repos/komga
1
0
Fork 0
mirror of https://github.com/gotson/komga.git synced 2025-12-22 00:13:30 +01:00
Code Issues Projects Releases Wiki Activity

feat(web reader): rtl option

Browse source 
closes #53
This commit is contained in:
Gauthier Roebroeck 2020-01-06 14:40:44 +08:00
parent 4085f1fdaa
commit 98efa9b448
1 changed files with 38 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
komga-webui/src/views/BookReader.vue
View file

@ -1,7 +1,7 @@
<template>
<div v-if="pages.length > 0" style="background: black; width: 100%; height: 100%">
<!-- clickable zone: previous page -->
<div @click="prev"
<!-- clickable zone: left -->
<div @click="rtl ? next() : prev()"
class="left-quarter full-height"
style="z-index: 1; position: absolute"
/>
@ -12,8 +12,8 @@
style="z-index: 1; position: absolute"
/>
<!-- clickable zone: next page -->
<div @click="next"
<!-- clickable zone: right -->
<div @click="rtl ? prev() : next()"
class="right-quarter full-height"
style="z-index: 1; position: absolute"
/>
@ -22,6 +22,7 @@
<slick ref="slick"
:options="slickOptions"
@afterChange="slickAfterChange"
:dir="rtl ? 'rtl' : 'ltr'"
>
<!-- Carousel: pages -->
<v-img v-for="p in pages"
@ -136,18 +137,33 @@
<!-- Menu: fit buttons -->
<v-row justify="center">
<v-col cols="auto">
<v-btn-toggle v-model="fitButtons" dense mandatory>
<v-btn @click="fitHeight = false" color="primary">
<v-btn-toggle v-model="fitButtons" dense mandatory active-class="primary">
<v-btn @click="fitHeight = false">
Fit to width
</v-btn>
<v-btn @click="fitHeight = true" color="primary">
<v-btn @click="fitHeight = true">
Fit to height
</v-btn>
</v-btn-toggle>
</v-col>
</v-row>
<!-- Menu: RTL buttons -->
<v-row justify="center">
<v-col cols="auto">
<v-btn-toggle v-model="rtlButtons" dense mandatory active-class="primary">
<v-btn @click="setRtl(false)">
Left to right
</v-btn>
<v-btn @click="setRtl(true)">
Right to left
</v-btn>
</v-btn-toggle>
</v-col>
</v-row>
<!-- Menu: keyboard shortcuts -->
<v-row>
<v-col cols="auto">
@ -160,8 +176,10 @@
<div><kbd>esc</kbd></div>
</v-col>
<v-col>
<div>Previous page</div>
<div>Next page</div>
<div v-if="!rtl">Previous page</div>
<div v-else>Next page</div>
<div v-if="!rtl">Next page</div>
<div v-else>Previous page</div>
<div>First page</div>
<div>Last page</div>
<div>Scroll down</div>
@ -205,6 +223,8 @@ export default Vue.extend({
showMenu: false,
fitButtons: 1,
fitHeight: true,
rtlButtons: 0,
rtl: false,
slickOptions: {
infinite: false,
arrows: false,
@ -214,7 +234,8 @@ export default Vue.extend({
touchMove: false,
cssEase: 'cubic-bezier(0.250, 0.100, 0.250, 1.000)',
speed: 150,
initialSlide: 0
initialSlide: 0,
rtl: false
}
}
},
@ -262,11 +283,11 @@ export default Vue.extend({
switch (e.key) {
case 'PageUp':
case 'ArrowRight':
this.next()
this.rtl ? this.prev() : this.next()
break
case 'PageDown':
case 'ArrowLeft':
this.prev()
this.rtl ? this.next() : this.prev()
break
case 'Home':
this.goToFirst()
@ -339,6 +360,11 @@ export default Vue.extend({
},
slickAfterChange (event: any, slick: any, currentSlide: any) {
this.currentPage = currentSlide + 1
},
setRtl (rtl: boolean) {
this.rtl = rtl
this.slickOptions.rtl = rtl;
(this.$refs.slick as any).setOption('rtl', rtl, true)
}
}
})