Backups/Mango
1
0
Fork 0
mirror of https://github.com/hkalexling/Mango.git synced 2025-08-02 02:45:29 -04:00
Code Issues Projects Releases Wiki Activity

First draft of image fit.

Browse Source
This commit is contained in:
Hiers 2022-07-05 22:01:21 +01:00
parent e7c4123dec
commit 405b958deb
2 changed files with 42 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
public/js/reader.js
View File

@ -14,6 +14,7 @@ const readerComponent = () => {
margin: 30,
preloadLookahead: 3,
enableRightToLeft: false,
fitType: 'vert',
/**
* Initialize the component by fetching the page dimensions
@ -65,6 +66,10 @@ const readerComponent = () => {
this.preloadImage(this.items[idx - 1].url);
}
const savedFitType = localStorage.getItem('fitType');
if(savedFitType){
this.fitType = savedFitType;
}
const savedFlipAnimation = localStorage.getItem('enableFlipAnimation');
this.enableFlipAnimation = savedFlipAnimation === null || savedFlipAnimation === 'true';
@ -301,6 +306,21 @@ const readerComponent = () => {
});
});
},
/**
* Changes how the view should fit to the screen or if it should use the image's real size
*
* @param {string} fitType - ver, horz and real for fitting to height, width,
* and showing real size, respectively
*/
setFit(fitType){
if (fitType === 'vert'){
document.styleSheets[0].rules[21].style.maxWidth = '100%';
} else if(fitType === 'horz'){
document.styleSheets[0].rules[21].style.maxWidth = '100%';
} else if (fitType === 'real'){
document.styleSheets[0].rules[21].style.maxWidth = '';
}
},
/**
* Marks progress as 100% and jumps to the next entry
*
@ -335,6 +355,12 @@ const readerComponent = () => {
this.toPage(this.selectedIndex);
},
fitChanged(){
this.fitType = $('#fit-select').val();
this.setFit(this.fitType);
localStorage.setItem('fitType', this.fitType);
},
preloadLookaheadChanged() {
localStorage.setItem('preloadLookahead', this.preloadLookahead);
},

21
src/views/reader.html.ecr
View File

@ -40,18 +40,18 @@
<%- end -%>
</div>
<div x-cloak x-show="!loading && mode !== 'continuous'" class="uk-flex uk-flex-middle" style="height:100vh">
<div x-cloak x-show="!loading && mode !== 'continuous'" class="uk-flex uk-flex-middle" style="height:${fitType === 'vert' ? '100vh' : ''">
<img uk-img :class="{
'uk-align-center': true,
'uk-animation-slide-left': flipAnimation === 'left',
'uk-animation-slide-right': flipAnimation === 'right'
}" :data-src="curItem.url" :width="curItem.width" :height="curItem.height" :id="curItem.id" @click="clickImage($event)" :style="`
width:${mode === 'width' ? '100vw' : 'auto'};
height:${mode === 'height' ? '100vh' : 'auto'};
width:${fitType === 'horz' ? '100vw' : 'auto'};
height:${mode === 'vert' ? '100vh' : 'auto'};
margin-bottom:0;
max-width:100%;
max-height:100%;
max-width:${fitType === 'horz' ? '100%' : ''};
max-height:${fitType === 'vert' ? '100%' : ''};
object-fit: contain;
`" />
@ -94,6 +94,17 @@
</div>
</div>
<div class="uk-margin" x-show="mode !== 'continuous'">
<label class="uk-form-label" for="mode-select">Page fit</label>
<div class="uk-form-controls">
<select id="fit-select" class="uk-select" @change="fitChanged()">
<option value="vert">Fit height</option>
<option value="horz">Fit width</option>
<option value="real">Real size</option>
</select>
</div>
</div>
<div class="uk-margin" x-show="mode === 'continuous'">
<label class="uk-form-label" for="margin-range" x-text="`Page Margin: ${margin}px`"></label>
<div class="uk-form-controls">