Cutlery/Kavita
1
0
Fork 0
mirror of https://github.com/Kareadita/Kavita.git synced 2025-07-09 03:04:19 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixes bus in vertical writing mode. (#1871)

Browse Source
This commit is contained in:
CKolle 2023-03-10 14:50:18 +01:00 committed by GitHub
parent ef89a2500e
commit 549292eb75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.html
View File

@ -1,4 +1,4 @@
<div class="container-flex {{darkMode ? 'dark-mode' : ''}} reader-container {{ColumnLayout}} {{WritingStyle}}" tabindex="0" #reader> <div class="container-flex {{darkMode ? 'dark-mode' : ''}} reader-container {{ColumnLayout}} {{WritingStyleClass}}" tabindex="0" #reader>
<div class="fixed-top" #stickyTop> <div class="fixed-top" #stickyTop>
<a class="visually-hidden-focusable focus-visible" href="javascript:void(0);" (click)="moveFocus()">Skip to main content</a> <a class="visually-hidden-focusable focus-visible" href="javascript:void(0);" (click)="moveFocus()">Skip to main content</a>
<ng-container [ngTemplateOutlet]="actionBar"></ng-container> <ng-container [ngTemplateOutlet]="actionBar"></ng-container>
@ -73,7 +73,7 @@
</app-drawer> </app-drawer>
</div> </div>
<div #readingSection class="reading-section {{ColumnLayout}} {{WritingStyle}}" [ngStyle]="{'width': PageWidthForPagination}" [ngClass]="{'immersive' : immersiveMode || !actionBarVisible}" [@isLoading]="isLoading ? true : false"> <div #readingSection class="reading-section {{ColumnLayout}} {{WritingStyleClass}}" [ngStyle]="{'width': PageWidthForPagination}" [ngClass]="{'immersive' : immersiveMode || !actionBarVisible}" [@isLoading]="isLoading ? true : false">
<ng-container *ngIf="clickToPaginate"> <ng-container *ngIf="clickToPaginate">
<div class="left {{clickOverlayClass('left')}} no-observe" [ngClass]="{'immersive' : immersiveMode}" <div class="left {{clickOverlayClass('left')}} no-observe" [ngClass]="{'immersive' : immersiveMode}"
@ -84,15 +84,16 @@
(click)="movePage(readingDirection === ReadingDirection.LeftToRight ? PAGING_DIRECTION.FORWARD : PAGING_DIRECTION.BACKWARDS)" (click)="movePage(readingDirection === ReadingDirection.LeftToRight ? PAGING_DIRECTION.FORWARD : PAGING_DIRECTION.BACKWARDS)"
tabindex="-1" [ngStyle]="{height: PageHeightForPagination}"></div> tabindex="-1" [ngStyle]="{height: PageHeightForPagination}"></div>
</ng-container> </ng-container>
<div #bookContainer class="book-container {{WritingStyle}}" [ngClass]="{'immersive' : immersiveMode}"> <div #bookContainer class="book-container {{WritingStyleClass}}" [ngClass]="{'immersive' : immersiveMode}">
<div #readingHtml class="book-content {{ColumnLayout}} {{WritingStyle}}" [ngStyle]="{'max-height': ColumnHeight, 'max-width': VerticalBookContentWidth, 'width': VerticalBookContentWidth, 'column-width': ColumnWidth}" <div #readingHtml class="book-content {{ColumnLayout}} {{WritingStyleClass}}" [ngStyle]="{'max-height': ColumnHeight, 'max-width': VerticalBookContentWidth, 'width': VerticalBookContentWidth, 'column-width': ColumnWidth}"
[ngClass]="{'immersive': immersiveMode && actionBarVisible}" [ngClass]="{'immersive': immersiveMode && actionBarVisible}"
[innerHtml]="page" *ngIf="page !== undefined" (click)="toggleMenu($event)" (mousedown)="mouseDown($event)" (wheel)="onWheel($event)"></div> [innerHtml]="page" *ngIf="page !== undefined" (click)="toggleMenu($event)" (mousedown)="mouseDown($event)" (wheel)="onWheel($event)"></div>
<div *ngIf="page !== undefined && (scrollbarNeeded || layoutMode !== BookPageLayoutMode.Default)" (click)="$event.stopPropagation();" <div *ngIf="page !== undefined && (scrollbarNeeded || layoutMode !== BookPageLayoutMode.Default) && !(writingStyle === WritingStyle.Vertical && layoutMode === BookPageLayoutMode.Default)"
[ngClass]="{'bottom-bar': layoutMode !== BookPageLayoutMode.Default}"> (click)="$event.stopPropagation();"
[ngClass]="{'bottom-bar': layoutMode !== BookPageLayoutMode.Default}">
<ng-container [ngTemplateOutlet]="actionBar"></ng-container> <ng-container [ngTemplateOutlet]="actionBar"></ng-container>
</div> </div>
</div> </div>

11
UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.ts
View File

@ -272,6 +272,9 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
return BookPageLayoutMode; return BookPageLayoutMode;
} }
get WritingStyle() {
return WritingStyle;
}
get TabID(): typeof TabID { get TabID(): typeof TabID {
return TabID; return TabID;
} }
@ -396,7 +399,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
} }
} }
get WritingStyle() { get WritingStyleClass() {
switch (this.writingStyle) { switch (this.writingStyle) {
case WritingStyle.Horizontal: case WritingStyle.Horizontal:
return ''; return '';
@ -913,9 +916,9 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.scrollService.scrollTo(0, this.reader.nativeElement); this.scrollService.scrollTo(0, this.reader.nativeElement);
} else if (this.writingStyle === WritingStyle.Vertical) { } else if (this.writingStyle === WritingStyle.Vertical) {
if (this.pagingDirection === PAGING_DIRECTION.BACKWARDS) { if (this.pagingDirection === PAGING_DIRECTION.BACKWARDS) {
setTimeout(() => this.scrollService.scrollTo(this.bookContentElemRef.nativeElement.scrollHeight, this.bookContentElemRef.nativeElement)); setTimeout(() => this.scrollService.scrollTo(this.bookContentElemRef.nativeElement.scrollHeight, this.bookContentElemRef.nativeElement, 'auto'));
} else { } else {
setTimeout(() => this.scrollService.scrollTo(0, this.bookContentElemRef.nativeElement)); setTimeout(() => this.scrollService.scrollTo(0, this.bookContentElemRef.nativeElement,'auto' ));
} }
} }
else { else {
@ -1000,7 +1003,7 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
if (currentVirtualPage > 1) { if (currentVirtualPage > 1) {
// -2 apparently goes back 1 virtual page... // -2 apparently goes back 1 virtual page...
if (this.writingStyle === WritingStyle.Vertical) { if (this.writingStyle === WritingStyle.Vertical) {
this.scrollService.scrollTo((currentVirtualPage - 2) * pageWidth, this.bookContentElemRef.nativeElement, "auto"); this.scrollService.scrollTo((currentVirtualPage - 2) * pageWidth, this.bookContentElemRef.nativeElement, 'auto');
} else { } else {
this.scrollService.scrollToX((currentVirtualPage - 2) * pageWidth, this.bookContentElemRef.nativeElement); this.scrollService.scrollToX((currentVirtualPage - 2) * pageWidth, this.bookContentElemRef.nativeElement);
} }