Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bugfix: Scrolling functionality on short webtoons #3006

Open
wants to merge 6 commits into
base: develop
Choose a base branch
from
Open

Bugfix: Scrolling functionality on short webtoons #3006

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
be3fc1c
Small webtoons - Disabled scrolling + Forced chapter buttons
Zackareee Jun 17, 2024
c6070a3
Scroll enabled on small webtoons.
Zackareee Jun 18, 2024
e4ed24a
Indentation fix
Zackareee Jun 18, 2024
69db7e6
More indentation fixes
Zackareee Jun 18, 2024
bf75239
Undo changes
Zackareee Jun 18, 2024
a9e1e56
Remove blank line
Zackareee Jun 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<strong>Scroll Top:</strong> {{getScrollTop()}}
</div>

<div *ngIf="atTop" #topSpacer class="spacer top" role="alert" (click)="loadPrevChapter.emit()">
<div *ngIf="atTop || heightLessThanView()" #topSpacer [style.height]="heightLessThanView() ? 'inherit' : '300px'" class="spacer top" role="alert" (click)="loadPrevChapter.emit()">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Help me understand the arbitrary 300px? Is this just from the styles? If so, let's make it a css variable and use var(--) on the property so I don't forget to update it in multiple places.

<div style="height: 200px"></div>
<div>
<button class="btn btn-icon mx-auto">
Expand All @@ -32,7 +32,7 @@
<img src="{{item.src}}" style="display: block"
[style.filter]="(darkness$ | async) ?? '' | safeStyle"
class="mx-auto {{pageNum === item.page && showDebugOutline() ? 'active': ''}} {{areImagesWiderThanWindow ? 'full-width' : ''}}"
rel="nofollow" alt="image" (load)="onImageLoad($event)" id="page-{{item.page}}" [attr.page]="item.page" ondragstart="return false;" onselectstart="return false;">
rel="nofollow" alt="image" (load)="onImageLoad($event)" id="page-{{item.page}}" (wheel)="onWheel($event)" [attr.page]="item.page" ondragstart="return false;" onselectstart="return false;">
</ng-container>
</div>

Expand Down
24 changes: 23 additions & 1 deletion UI/Web/src/app/manga-reader/_components/infinite-scroller/infinite-scroller.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,11 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
this.cdRef.markForCheck();
}

// Used to catch webtoons smaller than the viewport height.
heightLessThanView() {
return this.getTotalHeight() < this.getViewportHeight();
}

getVerticalOffset() {
const reader = this.isFullscreenMode ? this.readerElemRef.nativeElement : this.document.body;

Expand All @@ -300,6 +305,19 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
|| 0);
}

onWheel(event: WheelEvent) {
if (!this.heightLessThanView()) {
// Only execute on small webtoons.
return;
}

if (event.deltaY > 0) {
this.loadNextChapter.emit();
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't update the value of this.scrollingDirection here -- not sure if this is needed. :)

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I think it is a good idea so you know the direction you were last scrolling. It wont matter much, but better to have.

} else if (event.deltaY < 0) {
this.loadPrevChapter.emit();
}
}

/**
* On scroll in document, calculate if the user/javascript has scrolled to the current image element (and it's visible), update that scrolling has ended completely,
* and calculate the direction the scrolling is occuring. This is not used for prefetching.
Expand Down Expand Up @@ -354,6 +372,10 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
return Math.round(totalHeight);
}

getViewportHeight() {
return window.innerHeight;
}

getTotalScroll() {
if (this.isFullscreenMode) {
return this.readerElemRef.nativeElement.offsetHeight + this.readerElemRef.nativeElement.scrollTop;
Expand Down Expand Up @@ -563,7 +585,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy,
}

handleBottomIntersection(entries: IntersectionObserverEntry[]) {
if (entries.length > 0 && this.pageNum > this.totalPages - 5 && this.initFinished) {
if (!this.heightLessThanView() && entries.length > 0 && this.pageNum > this.totalPages - 5 && this.initFinished) {
this.debugLog('[Intersection] The whole bottom spacer is visible', entries[0].isIntersecting);
this.loadNextChapter.emit();
}
Expand Down