Display vertical pages at full width
All checks were successful
continuous-integration/drone/push Build is passing

This commit is contained in:
Simon Bruder 2019-08-01 22:25:38 +00:00
parent 8f3a7b93e5
commit 8949744657
No known key found for this signature in database
GPG key ID: 6F03E0000CC5B62F

View file

@ -1,7 +1,7 @@
<template>
<div class="reader" v-shortkey="{left: ['arrowleft'], right: ['arrowright']}" @shortkey="navigation">
<div class="page-container">
<img :style="{ width: pageWidth + '%' }" :src="info.pages[page]" @load="setScroll">
<img ref="currentImage" :style="{ width: orientation === 'vertical' ? pageWidth + '%' : '100%' }" :src="info.pages[page]" @load="setScroll(); setOrientation()">
<!-- prefetching -->
<img style="display: none;" :src="info.pages[page-1]">
<img style="display: none;" :src="info.pages[page+1]">
@ -34,7 +34,8 @@ export default {
scrollPositions: [],
pageWidth: 60,
showSidebar: true,
direction: 'rtl'
direction: 'rtl',
orientation: 'vertical'
}
},
computed: {
@ -98,6 +99,18 @@ export default {
} else {
throw new Error('cannot change reading direction: invalid direction currently set')
}
},
setOrientation () {
let image = this.$refs.currentImage
if (image.width < image.height) {
this.orientation = 'vertical'
} else if (image.width > image.height) {
this.orientation = 'horizonal'
} else if (image.width === image.height) {
this.orientation = 'square'
}
}
}
}