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