mirror of
https://github.com/hkalexling/Mango.git
synced 2025-08-02 10:55:30 -04:00
Merge branch 'dev' into feature/custom-sort-title-and-sorting-titles
This commit is contained in:
commit
f70be435f9
@ -13,6 +13,7 @@ const readerComponent = () => {
|
||||
selectedIndex: 0, // 0: not selected; 1: the first page
|
||||
margin: 30,
|
||||
preloadLookahead: 3,
|
||||
enableRightToLeft: false,
|
||||
|
||||
/**
|
||||
* Initialize the component by fetching the page dimensions
|
||||
@ -64,6 +65,13 @@ const readerComponent = () => {
|
||||
|
||||
const savedFlipAnimation = localStorage.getItem('enableFlipAnimation');
|
||||
this.enableFlipAnimation = savedFlipAnimation === null || savedFlipAnimation === 'true';
|
||||
|
||||
const savedRightToLeft = localStorage.getItem('enableRightToLeft');
|
||||
if (savedRightToLeft === null) {
|
||||
this.enableRightToLeft = false;
|
||||
} else {
|
||||
this.enableRightToLeft = (savedRightToLeft === 'true');
|
||||
}
|
||||
})
|
||||
.catch(e => {
|
||||
const errMsg = `Failed to get the page dimensions. ${e}`;
|
||||
@ -114,9 +122,9 @@ const readerComponent = () => {
|
||||
if (this.mode === 'continuous') return;
|
||||
|
||||
if (event.key === 'ArrowLeft' || event.key === 'k')
|
||||
this.flipPage(false);
|
||||
this.flipPage(false ^ this.enableRightToLeft);
|
||||
if (event.key === 'ArrowRight' || event.key === 'j')
|
||||
this.flipPage(true);
|
||||
this.flipPage(true ^ this.enableRightToLeft);
|
||||
},
|
||||
/**
|
||||
* Flips to the next or the previous page
|
||||
@ -136,7 +144,7 @@ const readerComponent = () => {
|
||||
this.toPage(newIdx);
|
||||
|
||||
if (this.enableFlipAnimation) {
|
||||
if (isNext)
|
||||
if (isNext ^ this.enableRightToLeft)
|
||||
this.flipAnimation = 'right';
|
||||
else
|
||||
this.flipAnimation = 'left';
|
||||
@ -320,5 +328,9 @@ const readerComponent = () => {
|
||||
enableFlipAnimationChanged() {
|
||||
localStorage.setItem('enableFlipAnimation', this.enableFlipAnimation);
|
||||
},
|
||||
|
||||
enableRightToLeftChanged() {
|
||||
localStorage.setItem('enableRightToLeft', this.enableRightToLeft);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
@ -55,8 +55,8 @@
|
||||
object-fit: contain;
|
||||
`" />
|
||||
|
||||
<div style="position:absolute;z-index:1; top:0;left:0; width:30%;height:100%;" @click="flipPage(false)"></div>
|
||||
<div style="position:absolute;z-index:1; top:0;right:0; width:30%;height:100%;" @click="flipPage(true)"></div>
|
||||
<div style="position:absolute;z-index:1; top:0;left:0; width:30%;height:100%;" @click="flipPage(false ^ enableRightToLeft)"></div>
|
||||
<div style="position:absolute;z-index:1; top:0;right:0; width:30%;height:100%;" @click="flipPage(true ^ enableRightToLeft)"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@ -114,6 +114,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="uk-margin uk-form-horizontal" x-show="mode !== 'continuous'">
|
||||
<label class="uk-form-label" for="enable-right-to-left">Right to Left</label>
|
||||
<div class="uk-form-controls">
|
||||
<input id="enable-right-to-left" class="uk-checkbox" type="checkbox" x-model="enableRightToLeft" @change="enableRightToLeftChanged()">
|
||||
</div>
|
||||
</div>
|
||||
<hr class="uk-divider-icon">
|
||||
|
||||
<div class="uk-margin">
|
||||
|
Loading…
x
Reference in New Issue
Block a user