mirror of
https://github.com/Kareadita/Kavita.git
synced 2025-07-09 03:04:19 -04:00
Scroll Resume (#1460)
* When we navigate from a page then back, resume back on the last scroll key (if clicked) * Resume jump key position when navigating back to a page. Removed some extra blank space on collection detail when a collection doesn't have a summary or cover image. * Ignore progress events on series cards * Added a url to swagger for /, which could be reverse proxy url
This commit is contained in:
parent
ac9f1c722e
commit
268f4368fa
@ -111,6 +111,12 @@ namespace API
|
||||
}
|
||||
});
|
||||
|
||||
c.AddServer(new OpenApiServer()
|
||||
{
|
||||
Description = "Custom Url",
|
||||
Url = "/"
|
||||
});
|
||||
|
||||
c.AddServer(new OpenApiServer()
|
||||
{
|
||||
Description = "Local Server",
|
||||
|
@ -75,6 +75,10 @@
|
||||
&:hover {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -1,6 +1,7 @@
|
||||
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
||||
import { DOCUMENT } from '@angular/common';
|
||||
import { AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, TemplateRef, TrackByFunction, ViewChild } from '@angular/core';
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ContentChild, ElementRef, EventEmitter, HostListener, Inject, Input, OnChanges, OnDestroy, OnInit, Output, TemplateRef, TrackByFunction, ViewChild } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { VirtualScrollerComponent } from '@iharbeck/ngx-virtual-scroller';
|
||||
import { Subject } from 'rxjs';
|
||||
import { FilterSettings } from 'src/app/metadata-filter/filter-settings';
|
||||
@ -13,15 +14,13 @@ import { ActionItem } from 'src/app/_services/action-factory.service';
|
||||
import { JumpbarService } from 'src/app/_services/jumpbar.service';
|
||||
import { SeriesService } from 'src/app/_services/series.service';
|
||||
|
||||
const keySize = 25; // Height of the JumpBar button
|
||||
|
||||
@Component({
|
||||
selector: 'app-card-detail-layout',
|
||||
templateUrl: './card-detail-layout.component.html',
|
||||
styleUrls: ['./card-detail-layout.component.scss'],
|
||||
changeDetection: ChangeDetectionStrategy.OnPush
|
||||
})
|
||||
export class CardDetailLayoutComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
|
||||
export class CardDetailLayoutComponent implements OnInit, OnDestroy, OnChanges {
|
||||
|
||||
@Input() header: string = '';
|
||||
@Input() isLoading: boolean = false;
|
||||
@ -74,7 +73,7 @@ export class CardDetailLayoutComponent implements OnInit, OnDestroy, OnChanges,
|
||||
|
||||
constructor(private seriesService: SeriesService, public utilityService: UtilityService,
|
||||
@Inject(DOCUMENT) private document: Document, private changeDetectionRef: ChangeDetectorRef,
|
||||
private jumpbarService: JumpbarService) {
|
||||
private jumpbarService: JumpbarService, private router: Router) {
|
||||
this.filter = this.seriesService.createSeriesFilter();
|
||||
this.changeDetectionRef.markForCheck();
|
||||
|
||||
@ -109,29 +108,23 @@ export class CardDetailLayoutComponent implements OnInit, OnDestroy, OnChanges,
|
||||
this.virtualScroller.refresh();
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
// NOTE: I can't seem to figure out a way to resume the JumpKey with the scroller.
|
||||
// this.virtualScroller.vsUpdate.pipe(takeWhile(() => this.hasResumedJumpKey), takeUntil(this.onDestory)).subscribe(() => {
|
||||
// const resumeKey = this.jumpbarService.getResumeKey(this.header);
|
||||
// console.log('Resume key:', resumeKey);
|
||||
// if (resumeKey !== '') {
|
||||
// const keys = this.jumpBarKeys.filter(k => k.key === resumeKey);
|
||||
// if (keys.length >= 1) {
|
||||
// console.log('Scrolling to ', keys[0].key);
|
||||
// this.scrollTo(keys[0]);
|
||||
// this.hasResumedJumpKey = true;
|
||||
// }
|
||||
// }
|
||||
// this.hasResumedJumpKey = true;
|
||||
// });
|
||||
}
|
||||
|
||||
ngOnChanges(): void {
|
||||
this.jumpBarKeysToRender = [...this.jumpBarKeys];
|
||||
this.resizeJumpBar();
|
||||
|
||||
|
||||
if (!this.hasResumedJumpKey && this.jumpBarKeysToRender.length > 0) {
|
||||
const resumeKey = this.jumpbarService.getResumeKey(this.router.url);
|
||||
if (resumeKey === '') return;
|
||||
const keys = this.jumpBarKeysToRender.filter(k => k.key === resumeKey);
|
||||
if (keys.length < 1) return;
|
||||
|
||||
this.hasResumedJumpKey = true;
|
||||
setTimeout(() => this.scrollTo(keys[0]), 100);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -161,7 +154,7 @@ export class CardDetailLayoutComponent implements OnInit, OnDestroy, OnChanges,
|
||||
}
|
||||
|
||||
this.virtualScroller.scrollToIndex(targetIndex, true, 0, 1000);
|
||||
this.jumpbarService.saveResumeKey(this.header, jumpKey.key);
|
||||
this.jumpbarService.saveResumeKey(this.router.url, jumpKey.key);
|
||||
this.changeDetectionRef.markForCheck();
|
||||
return;
|
||||
}
|
||||
|
@ -1,5 +1,4 @@
|
||||
import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output } from '@angular/core';
|
||||
import { ToastrService } from 'ngx-toastr';
|
||||
import { Observable, Subject } from 'rxjs';
|
||||
import { filter, map, takeUntil } from 'rxjs/operators';
|
||||
import { DownloadEvent, DownloadService } from 'src/app/shared/_services/download.service';
|
||||
@ -125,7 +124,7 @@ export class CardItemComponent implements OnInit, OnDestroy {
|
||||
|
||||
constructor(public imageService: ImageService, private libraryService: LibraryService,
|
||||
public utilityService: UtilityService, private downloadService: DownloadService,
|
||||
private toastr: ToastrService, public bulkSelectionService: BulkSelectionService,
|
||||
public bulkSelectionService: BulkSelectionService,
|
||||
private messageHub: MessageHubService, private accountService: AccountService,
|
||||
private scrollService: ScrollService, private readonly cdRef: ChangeDetectorRef) {}
|
||||
|
||||
@ -188,20 +187,22 @@ export class CardItemComponent implements OnInit, OnDestroy {
|
||||
chapter.pagesRead = updateEvent.pagesRead;
|
||||
}
|
||||
} else {
|
||||
// Ignore
|
||||
return;
|
||||
// re-request progress for the series
|
||||
const s = this.utilityService.asSeries(this.entity);
|
||||
let pagesRead = 0;
|
||||
if (s.hasOwnProperty('volumes')) {
|
||||
s.volumes.forEach(v => {
|
||||
v.chapters.forEach(c => {
|
||||
if (c.id === updateEvent.chapterId) {
|
||||
c.pagesRead = updateEvent.pagesRead;
|
||||
}
|
||||
pagesRead += c.pagesRead;
|
||||
});
|
||||
});
|
||||
s.pagesRead = pagesRead;
|
||||
}
|
||||
// const s = this.utilityService.asSeries(this.entity);
|
||||
// let pagesRead = 0;
|
||||
// if (s.hasOwnProperty('volumes')) {
|
||||
// s.volumes.forEach(v => {
|
||||
// v.chapters.forEach(c => {
|
||||
// if (c.id === updateEvent.chapterId) {
|
||||
// c.pagesRead = updateEvent.pagesRead;
|
||||
// }
|
||||
// pagesRead += c.pagesRead;
|
||||
// });
|
||||
// });
|
||||
// s.pagesRead = pagesRead;
|
||||
// }
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -10,15 +10,15 @@
|
||||
</div>
|
||||
|
||||
<div [ngStyle]="{'height': ScrollingBlockHeight}" class="main-container container-fluid pt-2" *ngIf="collectionTag !== undefined" #scrollingBlock>
|
||||
<div class="row mb-3">
|
||||
<div class="row mb-3" *ngIf="(collectionTag.coverImage !== '' && collectionTag.coverImage !== undefined && collectionTag.coverImage !== null) || summary.length > 0">
|
||||
<div class="col-md-2 col-xs-4 col-sm-6 d-none d-sm-block" *ngIf="collectionTag.coverImage !== '' && collectionTag.coverImage !== undefined && collectionTag.coverImage !== null">
|
||||
<app-image maxWidth="481px" [imageUrl]="tagImage"></app-image>
|
||||
</div>
|
||||
<div class="col-md-10 col-xs-8 col-sm-6 mt-2">
|
||||
<app-read-more [text]="summary" [maxLength]="250"></app-read-more>
|
||||
</div>
|
||||
<hr>
|
||||
</div>
|
||||
<hr>
|
||||
<app-bulk-operations [actionCallback]="bulkActionCallback"></app-bulk-operations>
|
||||
|
||||
<app-card-detail-layout
|
||||
|
Loading…
x
Reference in New Issue
Block a user