AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Reader scroll area fix (#1257)

Browse source 
* Changes to make the pagination area scrollable (not working, debug code for Robbie)

* Adjusted the html to be easier to understand and more streamlined

* Fixed inability to scroll in manga reader over pagination areas for everything but the bottom bar

* Book reader now allows you to scroll over pagination area
This commit is contained in:
Joseph Milazzo 2022-05-15 14:34:53 -05:00 • committed by GitHub
parent ccb6414e9e
commit cdc4931770
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 93 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

16
UI/Web/src/app/book-reader/book-reader/book-reader.component.html
View file

@ -73,15 +73,21 @@
</div>
<div #readingSection class="reading-section {{ColumnLayout}}" [@isLoading]="isLoading ? true : false">
<div #readingCont class="book-container {{ColumnLayout}}">
<ng-container *ngIf="clickToPaginate">
<div class="left {{clickOverlayClass('left')}} no-observe"
(click)="movePage(readingDirection === ReadingDirection.LeftToRight ? PAGING_DIRECTION.BACKWARDS : PAGING_DIRECTION.FORWARD)"
tabindex="-1" [ngStyle]="{height: PageHeightForPagination}"></div>
<div class="{{scrollbarNeeded ? 'right-with-scrollbar' : 'right'}} {{clickOverlayClass('right')}} no-observe"
(click)="movePage(readingDirection === ReadingDirection.LeftToRight ? PAGING_DIRECTION.FORWARD : PAGING_DIRECTION.BACKWARDS)"
tabindex="-1" [ngStyle]="{height: PageHeightForPagination}"></div>
</ng-container>
<div class="book-container {{ColumnLayout}}">
<div #readingHtml class="book-content {{ColumnLayout}}" [ngStyle]="{'max-height': ColumnHeight, 'column-width': ColumnWidth}"
[innerHtml]="page" *ngIf="page !== undefined" (click)="toggleMenu($event)" (mousedown)="mouseDown($event)"></div>
<ng-container *ngIf="clickToPaginate">
<div class="left {{clickOverlayClass('left')}} no-observe" (click)="movePage(readingDirection === ReadingDirection.LeftToRight ? PAGING_DIRECTION.BACKWARDS : PAGING_DIRECTION.FORWARD)" tabindex="-1"></div>
<div class="{{scrollbarNeeded ? 'right-with-scrollbar' : 'right'}} {{clickOverlayClass('right')}} no-observe" (click)="movePage(readingDirection === ReadingDirection.LeftToRight ? PAGING_DIRECTION.FORWARD : PAGING_DIRECTION.BACKWARDS)" tabindex="-1"></div>
</ng-container>
<div *ngIf="page !== undefined && (scrollbarNeeded || layoutMode !== BookPageLayoutMode.Default)" (click)="$event.stopPropagation();">
<ng-container [ngTemplateOutlet]="actionBar"></ng-container>

29
UI/Web/src/app/book-reader/book-reader/book-reader.component.scss
View file

@ -263,48 +263,41 @@ $action-bar-height: 38px;
.right {
position: fixed;
position: absolute;
right: 0px; // with scrollbar: 17px
top: 0px;
top: $action-bar-height;
width: 20%; // with scrollbar: 18%
height: 100%;
z-index: 2;
cursor: pointer;
opacity: 0;
background: transparent;
padding-top: $action-bar-height;
}
// This class pushes the click area to the left a bit to let users click the scrollbar
.right-with-scrollbar {
position: fixed;
position: absolute;
right: 17px;
top: 0px;
top: $action-bar-height;
width: 18%;
height: 100%;
z-index: 2;
cursor: pointer;
opacity: 0;
background: transparent;
padding-top: $action-bar-height;
}
.left {
position: fixed;
position: absolute;
left: 0px;
top: 0px;
top: $action-bar-height;
width: 20%;
height: 100%;
background: transparent;
z-index: 2;
cursor: pointer;
opacity: 0;
background: transparent;
padding-top: $action-bar-height;
}
.highlight {
background-color: rgba(65, 225, 100, 0.5) !important;
animation: fadein .5s both;

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

@ -27,6 +27,7 @@ import { User } from 'src/app/_models/user';
import { ThemeService } from 'src/app/_services/theme.service';
import { ScrollService } from 'src/app/_services/scroll.service';
import { PAGING_DIRECTION } from 'src/app/manga-reader/_models/reader-enums';
import { LayoutMode } from 'src/app/manga-reader/_models/layout-mode';
enum TabID {
@ -364,6 +365,14 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
}
}
get PageHeightForPagination() {
if (this.layoutMode === BookPageLayoutMode.Default) {
return (this.readingSectionElemRef?.nativeElement?.scrollHeight || 0) - (this.topOffset * 2) + 'px';
}
return this.ColumnHeight;
}
constructor(private route: ActivatedRoute, private router: Router, private accountService: AccountService,
private seriesService: SeriesService, private readerService: ReaderService, private location: Location,
@ -1000,6 +1009,8 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
getFirstVisibleElementXPath() {
let resumeElement: string | null = null;
if (this.readingHtml === null) return null;
const intersectingEntries = Array.from(this.readingHtml.nativeElement.querySelectorAll('div,o,p,ul,li,a,img,h1,h2,h3,h4,h5,h6,span'))
.filter(element => !element.classList.contains('no-observe'))
.filter(entry => {