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

Add option to display page at native width
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse source 
This helps with low-res content as it does not interpolate the image and
thus is sharper.
This commit is contained in:
Simon Bruder 2019-09-05 21:29:14 +00:00
parent b379842442
commit 73b485253c
No known key found for this signature in database
GPG key ID: 6F03E0000CC5B62F
1 changed files with 18 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,7 +1,7 @@
<template>
<div class="reader" v-shortkey="{left: ['arrowleft'], right: ['arrowright']}" @shortkey="navigation">
<div class="page-container">
<img ref="currentImage" :style="{ width: orientation === 'vertical' ? pageWidth + '%' : '100%' }" :src="info.pages[page]" @load="setScroll(); setOrientation()">
<img ref="currentImage" :style="{ width: getRealPageWidth() }" :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]">
@ -11,8 +11,10 @@
<router-link :to="'/series/' + info.series">All Volumes</router-link>
<p>{{ page + 1 }}/{{ info.pages.length }}</p>
<p>
<button v-on:click="changePageWidth(5)">+</button>
<button v-on:click="changePageWidth(-5)">-</button>
<button :disabled="originalPageWidth" v-on:click="changePageWidth(-5)">-</button>
<button :disabled="originalPageWidth" v-on:click="changePageWidth(5)">+</button>
<br/>
<button v-on:click="originalPageWidth = !originalPageWidth">{{ originalPageWidth ? 'fixed width' : '1:1' }}</button>
</p>
<button v-on:click="changeDirection">{{ direction.toUpperCase() }}</button>
<button class="hide" v-on:click="showSidebar = false">Hide</button>
@ -33,6 +35,7 @@ export default {
},
scrollPositions: [],
pageWidth: 60,
originalPageWidth: false,
showSidebar: true,
direction: 'rtl',
orientation: 'vertical'
@ -111,6 +114,18 @@ export default {
} else if (image.width === image.height) {
this.orientation = 'square'
}
},
getRealPageWidth () {
if (this.orientation === 'horizontal') {
return '100%'
}
if (this.originalPageWidth === true) {
return 'auto'
}
return this.pageWidth + '%'
}
}
}