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

Scrolling Enhancements (#2417)

Browse source
This commit is contained in:
Joe Milazzo 2023-11-08 16:11:50 -06:00 • committed by GitHub
parent 8875bc3585
commit f4e8daf983
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 51 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

4
UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.html
View file

@ -24,7 +24,7 @@
<ng-container [ngTemplateOutlet]="noDataTemplate"></ng-container>
</p>
<virtual-scroller [ngClass]="{'empty': items.length === 0 && !isLoading}" #scroll [items]="items" [bufferAmount]="bufferAmount" [parentScroll]="parentScroll" >
<virtual-scroller [ngClass]="{'empty': items.length === 0 && !isLoading}" #scroll [items]="items" [bufferAmount]="bufferAmount" [parentScroll]="parentScroll">
<div class="grid row g-0" #container>
<div class="card col-auto mt-2 mb-2"
(click)="tryToSaveJumpKey(item)"
@ -61,7 +61,7 @@
<ng-template #jumpBar>
<div class="jump-bar">
<ng-container *ngFor="let jumpKey of jumpBarKeysToRender; let i = index;">
<button class="btn btn-link" [ngClass]="{'disabled': hasCustomSort()}" (click)="scrollTo(jumpKey)" [ngbTooltip]="jumpKey.size + ' Series'" placement="left">
<button class="btn btn-link" [ngClass]="{'disabled': hasCustomSort()}" (click)="scrollTo(jumpKey)" [ngbTooltip]="t('jumpkey-count', {count: jumpKey.size})" placement="left">
{{jumpKey.title}}
</button>
</ng-container>

43
UI/Web/src/app/cards/card-detail-layout/card-detail-layout.component.ts
View file

@ -39,6 +39,9 @@ import {TranslocoDirective} from "@ngneat/transloco";
import {CardActionablesComponent} from "../../_single-module/card-actionables/card-actionables.component";
import {SeriesFilterV2} from "../../_models/metadata/v2/series-filter-v2";
const ANIMATION_TIME_MS = 0;
@Component({
selector: 'app-card-detail-layout',
standalone: true,
@ -49,6 +52,13 @@ import {SeriesFilterV2} from "../../_models/metadata/v2/series-filter-v2";
})
export class CardDetailLayoutComponent implements OnInit, OnChanges {
private readonly filterUtilityService = inject(FilterUtilitiesService);
protected readonly utilityService = inject(UtilityService);
private readonly cdRef = inject(ChangeDetectorRef);
private readonly jumpbarService = inject(JumpbarService);
private readonly router = inject(Router);
private readonly scrollService = inject(ScrollService);
@Input() header: string = '';
@Input() isLoading: boolean = false;
@Input() items: any[] = [];
@ -89,7 +99,6 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
@ViewChild(VirtualScrollerComponent) private virtualScroller!: VirtualScrollerComponent;
private readonly filterUtilityService = inject(FilterUtilitiesService);
filter: SeriesFilterV2 = this.filterUtilityService.createSeriesV2Filter();
libraries: Array<FilterItem<Library>> = [];
@ -97,15 +106,9 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
hasResumedJumpKey: boolean = false;
bufferAmount: number = 1;
protected readonly Breakpoint = Breakpoint;
get Breakpoint() {
return Breakpoint;
}
constructor(public utilityService: UtilityService,
@Inject(DOCUMENT) private document: Document, private cdRef: ChangeDetectorRef,
private jumpbarService: JumpbarService, private router: Router, private scrollService: ScrollService) {
}
constructor(@Inject(DOCUMENT) private document: Document) {}
@HostListener('window:resize', ['$event'])
@HostListener('window:orientationchange', ['$event'])
@ -136,6 +139,8 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
this.virtualScroller.refresh();
});
}
}
@ -143,6 +148,8 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
this.jumpBarKeysToRender = [...this.jumpBarKeys];
this.resizeJumpBar();
// TODO: I wish I had signals so I can tap into when isLoading is false and trigger the scroll code
// Don't resume jump key when there is a custom sort order, as it won't work
if (!this.hasCustomSort()) {
if (!this.hasResumedJumpKey && this.jumpBarKeysToRender.length > 0) {
@ -154,14 +161,15 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
this.hasResumedJumpKey = true;
setTimeout(() => this.scrollTo(keys[0]), 100);
}
} else {
// I will come back and refactor this to work
// const scrollPosition = this.jumpbarService.getResumePosition(this.router.url);
// console.log('scroll position: ', scrollPosition);
// if (scrollPosition > 0) {
// setTimeout(() => this.virtualScroller.scrollToIndex(scrollPosition, true, 0, 1000), 100);
// }
}
// else {
// // I will come back and refactor this to work
// // const scrollPosition = this.jumpbarService.getResumePosition(this.router.url);
// // console.log('scroll position: ', scrollPosition);
// // if (scrollPosition > 0) {
// // setTimeout(() => this.virtualScroller.scrollToIndex(scrollPosition, true, 0, 1000), 100);
// // }
// }
}
hasCustomSort() {
@ -192,10 +200,11 @@ export class CardDetailLayoutComponent implements OnInit, OnChanges {
targetIndex += this.jumpBarKeys[i].size;
}
this.virtualScroller.scrollToIndex(targetIndex, true, 0, 1000);
this.virtualScroller.scrollToIndex(targetIndex, true, 0, ANIMATION_TIME_MS);
this.jumpbarService.saveResumeKey(this.router.url, jumpKey.key);
// TODO: This doesn't work, we need the offset from virtual scroller
this.jumpbarService.saveScrollOffset(this.router.url, this.scrollService.scrollPosition);
this.cdRef.markForCheck();
}