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

Bugfixes (#1177)

Browse source 
* Fixed an underline on hover of pagination link

* Ensure title of companion bar eats full width if there is no filter

* If a user doesn't have the Download role, they will not be able to download over OPDS.

* Fixed a bug where after going into webtoon reader mode then leaving, the bookmark effect would continue using the webtoon mode styling

* Fixed a bug where continuous reader wasn't being triggered due to moving scrollbar to body and a floating point percision error on scroll top

* Fixed how continuous trigger is shown so that we properly adjust scroll on the top (for prev chapter)

* Fixed a bad merge that broke saving any edits to series metadata

* When a epub key is not correct, even after we correct it, ignore the inlining of the style so the book is at least still readable.

* Disabled double rendering (this feature is being postponed to a later release)

* Disabled user setting and forced it to Single on any save

* Removed cache directory from UpdateSettings validation as we don't allow changing it.

* Fix security issue with url parse

* After all migrations run, update the installed version in the Database. Send that installed version on the stat service.

* Dependency bot to update some security stuff

* Some misc code cleanup and fixes on the typeahead (still broken)
This commit is contained in:
Joseph Milazzo 2022-03-25 18:38:13 -05:00 • committed by GitHub
parent 1a011e30c2
commit 242d8b106d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
27 changed files with 165 additions and 118 deletions
Download patch file Download diff file Expand all files Collapse all files

24
UI/Web/package-lock.json generated
View file

@ -8995,9 +8995,9 @@
}
},
"minimist": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
"version": "1.2.6",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
"integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q=="
},
"minipass": {
"version": "3.1.6",
@ -9224,9 +9224,9 @@
}
},
"node-forge": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.2.1.tgz",
"integrity": "sha512-Fcvtbb+zBcZXbTTVwqGA5W+MKBj56UjVRevvchv5XrcyXbmNdesfZL37nlcWOfpgHhgmxApw3tQbTr4CqNmX4w==",
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.0.tgz",
"integrity": "sha512-08ARB91bUi6zNKzVmaj3QO7cr397uiDT2nJ63cHjyNtCTWIgvS47j3eT0WfzUwS9+6Z5YshRaoasFkXCKrIYbA==",
"dev": true
},
"node-gyp": {
@ -10498,8 +10498,7 @@
"dependencies": {
"ansi-regex": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
"integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
"resolved": "",
"dev": true
},
"strip-ansi": {
@ -10704,8 +10703,7 @@
"dependencies": {
"ansi-regex": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
"integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
"resolved": "",
"dev": true
},
"ansi-styles": {
@ -12296,9 +12294,9 @@
}
},
"url-parse": {
"version": "1.5.4",
"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.4.tgz",
"integrity": "sha512-ITeAByWWoqutFClc/lRZnFplgXgEZr3WJ6XngMM/N9DMIm4K8zXPCZ1Jdu0rERwO84w1WC5wkle2ubwTA4NTBg==",
"version": "1.5.10",
"resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
"integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
"requires": {
"querystringify": "^2.1.1",
"requires-port": "^1.0.0"

18
UI/Web/src/app/cards/_modals/edit-series-modal/edit-series-modal.component.ts
View file

@ -101,6 +101,8 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
this.libraryService.getLibraryNames().pipe(takeUntil(this.onDestroy)).subscribe(names => {
this.libraryName = names[this.series.libraryId];
});
this.initSeries = Object.assign({}, this.series);
this.editSeriesForm = this.fb.group({
@ -217,10 +219,14 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
return {id: 0, title: title, promoted: false, coverImage: '', summary: '', coverImageLocked: false };
});
this.collectionTagSettings.compareFn = (options: CollectionTag[], filter: string) => {
console.log('compareFN:')
console.log('options: ', options);
console.log('filter: ', filter);
console.log('results: ', options.filter(m => this.utilityService.filter(m.title, filter)));
return options.filter(m => this.utilityService.filter(m.title, filter));
}
this.collectionTagSettings.singleCompareFn = (a: CollectionTag, b: CollectionTag) => {
return a.id == b.id;
this.collectionTagSettings.selectionCompareFn = (a: CollectionTag, b: CollectionTag) => {
return a.title === b.title;
}
if (this.metadata.collectionTags) {
@ -248,7 +254,7 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
this.tagsSettings.addTransformFn = ((title: string) => {
return {id: 0, title: title };
});
this.tagsSettings.singleCompareFn = (a: Tag, b: Tag) => {
this.tagsSettings.selectionCompareFn = (a: Tag, b: Tag) => {
return a.id == b.id;
}
@ -272,7 +278,7 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
this.genreSettings.compareFn = (options: Genre[], filter: string) => {
return options.filter(m => this.utilityService.filter(m.title, filter));
}
this.genreSettings.singleCompareFn = (a: Genre, b: Genre) => {
this.genreSettings.selectionCompareFn = (a: Genre, b: Genre) => {
return a.title == b.title;
}
@ -316,7 +322,7 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
this.languageSettings.fetchFn = (filter: string) => of(this.validLanguages)
.pipe(map(items => this.languageSettings.compareFn(items, filter)));
this.languageSettings.singleCompareFn = (a: Language, b: Language) => {
this.languageSettings.selectionCompareFn = (a: Language, b: Language) => {
return a.isoCode == b.isoCode;
}
@ -366,7 +372,7 @@ export class EditSeriesModalComponent implements OnInit, OnDestroy {
return options.filter(m => this.utilityService.filter(m.name, filter));
}
personSettings.singleCompareFn = (a: Person, b: Person) => {
personSettings.selectionCompareFn = (a: Person, b: Person) => {
return a.name == b.name && a.role == b.role;
}
personSettings.fetchFn = (filter: string) => {

2
UI/Web/src/app/events-widget/events-widget.component.ts
View file

@ -110,7 +110,7 @@ export class EventsWidgetComponent implements OnInit, OnDestroy {
break;
case 'ended':
data = this.progressEventsSource.getValue();
data = data.filter(m => m.name !== message.name); // This does not work // && m.title !== message.title
data = data.filter(m => m.name !== message.name);
this.progressEventsSource.next(data);
this.activeEvents = Math.max(this.activeEvents - 1, 0);
break;

4
UI/Web/src/app/manga-reader/infinite-scroller/infinite-scroller.component.scss
View file

@ -42,10 +42,10 @@ img, .full-width {
}
.bookmark-effect {
animation: bookmark 1s cubic-bezier(0.165, 0.84, 0.44, 1);
animation: infinite-scroll-bookmark 1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@keyframes bookmark {
@keyframes infinite-scroll-bookmark {
0%, 100% {
filter: opacity(1);
}

39
UI/Web/src/app/manga-reader/infinite-scroller/infinite-scroller.component.ts
View file

@ -2,6 +2,7 @@ import { DOCUMENT } from '@angular/common';
import { Component, ElementRef, EventEmitter, Inject, Input, OnChanges, OnDestroy, OnInit, Output, Renderer2, SimpleChanges } from '@angular/core';
import { BehaviorSubject, fromEvent, merge, ReplaySubject, Subject } from 'rxjs';
import { debounceTime, take, takeUntil } from 'rxjs/operators';
import { ScrollService } from 'src/app/scroll.service';
import { ReaderService } from '../../_services/reader.service';
import { PAGING_DIRECTION } from '../_models/reader-enums';
import { WebtoonImage } from '../_models/webtoon-image';
@ -93,7 +94,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
/**
* The minimum width of images in webtoon. On image loading, this is checked and updated. All images will get this assigned to them for rendering.
*/
webtoonImageWidth: number = window.innerWidth || this.document.documentElement.clientWidth || this.document.body.clientWidth;
webtoonImageWidth: number = window.innerWidth || this.document.body.clientWidth || this.document.documentElement.clientWidth;
/**
* Used to tell if a scrollTo() operation is in progress
*/
@ -145,7 +146,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
get areImagesWiderThanWindow() {
let [_, innerWidth] = this.getInnerDimensions();
return this.webtoonImageWidth > (innerWidth || document.documentElement.clientWidth);
return this.webtoonImageWidth > (innerWidth || document.body.clientWidth);
}
@ -153,7 +154,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
private readonly onDestroy = new Subject<void>();
constructor(private readerService: ReaderService, private renderer: Renderer2, @Inject(DOCUMENT) private document: Document) {
constructor(private readerService: ReaderService, private renderer: Renderer2, @Inject(DOCUMENT) private document: Document, private scrollService: ScrollService) {
// This will always exist at this point in time since this is used within manga reader
const reader = document.querySelector('.reader');
if (reader !== null) {
@ -230,7 +231,7 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
recalculateImageWidth() {
const [_, innerWidth] = this.getInnerDimensions();
this.webtoonImageWidth = innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
this.webtoonImageWidth = innerWidth || document.body.clientWidth || document.documentElement.clientWidth;
}
getVerticalOffset() {
@ -244,8 +245,9 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
}
return (offset
|| document.body.scrollTop
|| document.documentElement.scrollTop
|| document.body.scrollTop || 0);
|| 0);
}
/**
@ -290,19 +292,20 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
getTotalHeight() {
let totalHeight = 0;
document.querySelectorAll('img[id^="page-"]').forEach(img => totalHeight += img.getBoundingClientRect().height);
return totalHeight;
return Math.round(totalHeight);
}
getTotalScroll() {
if (this.isFullscreenMode) {
return this.readerElemRef.nativeElement.offsetHeight + this.readerElemRef.nativeElement.scrollTop;
}
return document.documentElement.offsetHeight + document.documentElement.scrollTop;
return document.body.offsetHeight + document.body.scrollTop;
}
getScrollTop() {
if (this.isFullscreenMode) {
return this.readerElemRef.nativeElement.scrollTop;
}
return document.documentElement.scrollTop;
return document.body.scrollTop;
}
checkIfShouldTriggerContinuousReader() {
@ -316,14 +319,14 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
if (this.atTop && this.pageNum > 0) {
this.atTop = false;
}
if (totalScroll === totalHeight && !this.atBottom) {
this.atBottom = true;
this.setPageNum(this.totalPages);
// Scroll user back to original location
this.previousScrollHeightMinusTop = this.getScrollTop();
requestAnimationFrame(() => document.documentElement.scrollTop = this.previousScrollHeightMinusTop + (SPACER_SCROLL_INTO_PX / 2));
requestAnimationFrame(() => document.body.scrollTop = this.previousScrollHeightMinusTop + (SPACER_SCROLL_INTO_PX / 2));
} else if (totalScroll >= totalHeight + SPACER_SCROLL_INTO_PX && this.atBottom) {
// This if statement will fire once we scroll into the spacer at all
this.loadNextChapter.emit();
@ -335,8 +338,10 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
this.atTop = true;
// Scroll user back to original location
this.previousScrollHeightMinusTop = document.documentElement.scrollHeight - document.documentElement.scrollTop;
requestAnimationFrame(() => window.scrollTo(0, SPACER_SCROLL_INTO_PX)); // TODO: does this need to be fullscreen protected?
this.previousScrollHeightMinusTop = document.body.scrollHeight - document.body.scrollTop;
const reader = this.isFullscreenMode ? this.readerElemRef.nativeElement : this.document.body;
requestAnimationFrame(() => this.scrollService.scrollTo((SPACER_SCROLL_INTO_PX / 2), reader));
} else if (this.getScrollTop() < 5 && this.pageNum === 0 && this.atTop) {
// If already at top, then we moving on
this.loadPrevChapter.emit();
@ -377,8 +382,8 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
return (rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top <= (innerHeight || document.documentElement.clientHeight) &&
rect.left <= (innerWidth || document.documentElement.clientWidth)
rect.top <= (innerHeight || document.body.clientHeight) &&
rect.left <= (innerWidth || document.body.clientWidth)
);
}
@ -398,10 +403,10 @@ export class InfiniteScrollerComponent implements OnInit, OnChanges, OnDestroy {
if (rect.bottom >= 0 &&
rect.right >= 0 &&
rect.top <= (innerHeight || document.documentElement.clientHeight) &&
rect.left <= (innerWidth || document.documentElement.clientWidth)
rect.top <= (innerHeight || document.body.clientHeight) &&
rect.left <= (innerWidth || document.body.clientWidth)
) {
const topX = (innerHeight || document.documentElement.clientHeight);
const topX = (innerHeight || document.body.clientHeight);
return Math.abs(rect.top / topX) <= 0.25;
}
return false;

3
UI/Web/src/app/manga-reader/manga-reader.component.html
View file

@ -19,6 +19,7 @@
<span class="visually-hidden">Keyboard Shortcuts Modal</span>
</button>
<!-- {{this.pageNum}} -->
{{readerService.imageUrlToPageNum(canvasImage.src)}}<ng-container *ngIf="ShouldRenderDoublePage && (this.pageNum + 1 <= maxPages - 1 && this.pageNum > 0)"> - {{PageNumber + 1}}</ng-container>
<button class="btn btn-icon btn-small" role="checkbox" [attr.aria-checked]="isCurrentPageBookmarked" title="{{isCurrentPageBookmarked ? 'Unbookmark Page' : 'Bookmark Page'}}" (click)="bookmarkPage()"><i class="{{isCurrentPageBookmarked ? 'fa' : 'far'}} fa-bookmark" aria-hidden="true"></i><span class="visually-hidden">{{isCurrentPageBookmarked ? 'Unbookmark Page' : 'Bookmark Page'}}</span></button>
</div>
@ -154,7 +155,7 @@
</div>
<div class="row mb-2">
<div class="col-md-6 col-sm-12">
<div class="col-md-6 col-sm-12" *ngIf="false">
<label for="layout-mode" class="form-label">Layout Mode</label>
<select class="form-control" id="page-fitting" formControlName="layoutMode">
<option [value]="opt.value" *ngFor="let opt of layoutModes">{{opt.text}}</option>

13
UI/Web/src/app/manga-reader/manga-reader.component.ts
View file

@ -851,10 +851,13 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
const notInSplit = this.currentImageSplitPart !== (this.isSplitLeftToRight() ? SPLIT_PAGE_PART.RIGHT_PART : SPLIT_PAGE_PART.LEFT_PART);
const pageAmount = (this.layoutMode !== LayoutMode.Single && !this.isCoverImage()) ? 2: 1;
// If the prev page before we change current page is a cover image, we actually are skipping a page
console.log('Page ', this.PageNumber, ' is cover image: ', this.isCoverImage(this.cachedImages.prev()))
console.log('Page ', this.pageNum, ' is cover image: ', this.isCoverImage())
const pageAmount = (this.layoutMode !== LayoutMode.Single && !this.isCoverImage(this.cachedImages.prev())) ? 2: 1;
// BUG: isCoverImage works on canvasImage, where we need to know if the previous image is a cover image or not.
console.log('pageAmt: ', pageAmount);
if ((this.pageNum - 1 < 0 && notInSplit) || this.isLoading) {
if (this.isLoading) { return; }
// Move to next volume/chapter automatically
@ -1021,8 +1024,10 @@ export class MangaReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.generalSettingsForm.get('fittingOption')?.setValue(newScale, {emitEvent: false});
}
isCoverImage() {
return this.canvasImage.width > this.canvasImage.height;
isCoverImage(elem?: HTMLImageElement) {
if (elem) return elem.width > elem.height;
const element = elem || this.canvasImage;
return element.width > element.height;
}

18
UI/Web/src/app/metadata-filter/metadata-filter.component.ts
View file

@ -201,7 +201,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
return options.filter(m => this.utilityService.filter(m.title, filter));
}
this.formatSettings.singleCompareFn = (a: FilterItem<MangaFormat>, b: FilterItem<MangaFormat>) => {
this.formatSettings.selectionCompareFn = (a: FilterItem<MangaFormat>, b: FilterItem<MangaFormat>) => {
return a.title == b.title;
}
@ -225,7 +225,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
this.librarySettings.compareFn = (options: Library[], filter: string) => {
return options.filter(m => this.utilityService.filter(m.name, filter));
}
this.librarySettings.singleCompareFn = (a: Library, b: Library) => {
this.librarySettings.selectionCompareFn = (a: Library, b: Library) => {
return a.name == b.name;
}
@ -252,7 +252,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
this.genreSettings.compareFn = (options: Genre[], filter: string) => {
return options.filter(m => this.utilityService.filter(m.title, filter));
}
this.genreSettings.singleCompareFn = (a: Genre, b: Genre) => {
this.genreSettings.selectionCompareFn = (a: Genre, b: Genre) => {
return a.title == b.title;
}
@ -279,7 +279,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
return options.filter(m => this.utilityService.filter(m.title, filter));
}
this.ageRatingSettings.singleCompareFn = (a: AgeRatingDto, b: AgeRatingDto) => {
this.ageRatingSettings.selectionCompareFn = (a: AgeRatingDto, b: AgeRatingDto) => {
return a.title == b.title;
}
@ -306,7 +306,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
return options.filter(m => this.utilityService.filter(m.title, filter));
}
this.publicationStatusSettings.singleCompareFn = (a: PublicationStatusDto, b: PublicationStatusDto) => {
this.publicationStatusSettings.selectionCompareFn = (a: PublicationStatusDto, b: PublicationStatusDto) => {
return a.title == b.title;
}
@ -332,7 +332,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
this.tagsSettings.fetchFn = (filter: string) => this.metadataService.getAllTags(this.filter.libraries)
.pipe(map(items => this.tagsSettings.compareFn(items, filter)));
this.tagsSettings.singleCompareFn = (a: Tag, b: Tag) => {
this.tagsSettings.selectionCompareFn = (a: Tag, b: Tag) => {
return a.id == b.id;
}
@ -358,7 +358,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
this.languageSettings.fetchFn = (filter: string) => this.metadataService.getAllLanguages(this.filter.libraries)
.pipe(map(items => this.languageSettings.compareFn(items, filter)));
this.languageSettings.singleCompareFn = (a: Language, b: Language) => {
this.languageSettings.selectionCompareFn = (a: Language, b: Language) => {
return a.isoCode == b.isoCode;
}
@ -384,7 +384,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
this.collectionSettings.fetchFn = (filter: string) => this.collectionTagService.allTags()
.pipe(map(items => this.collectionSettings.compareFn(items, filter)));
this.collectionSettings.singleCompareFn = (a: CollectionTag, b: CollectionTag) => {
this.collectionSettings.selectionCompareFn = (a: CollectionTag, b: CollectionTag) => {
return a.id == b.id;
}
@ -453,7 +453,7 @@ export class MetadataFilterComponent implements OnInit, OnDestroy {
return options.filter(m => this.utilityService.filter(m.name, filter));
}
personSettings.singleCompareFn = (a: Person, b: Person) => {
personSettings.selectionCompareFn = (a: Person, b: Person) => {
return a.name == b.name && a.role == b.role;
}
personSettings.fetchFn = (filter: string) => {

2
UI/Web/src/app/sidenav/side-nav-companion-bar/side-nav-companion-bar.component.html
View file

@ -4,7 +4,7 @@
<ng-content select="[title]"></ng-content>
<ng-content select="[subtitle]"></ng-content>
</div>
<div class="col mr-auto">
<div class="col mr-auto hide-if-empty">
<ng-content select="[main]"></ng-content>
</div>
<div class="col" *ngIf="hasFilter">

3
UI/Web/src/app/sidenav/side-nav-companion-bar/side-nav-companion-bar.component.scss
View file

@ -0,0 +1,3 @@
.hide-if-empty:empty {
display: none;
}

8
UI/Web/src/app/typeahead/typeahead-settings.ts
View file

@ -28,13 +28,15 @@ export class TypeaheadSettings<T> {
*/
savedData!: T[] | T;
/**
* Function to compare the elements. Should return all elements that fit the matching criteria. This is only used with non-Observable based fetchFn, but must be defined for all uses of typeahead (TODO)
* Function to compare the elements. Should return all elements that fit the matching criteria.
* This is only used with non-Observable based fetchFn, but must be defined for all uses of typeahead (TODO)
*/
compareFn!: ((optionList: T[], filter: string) => T[]);
/**
* Function which is used for comparing objects when keeping track of state. Useful over shallow equal when you have image urls that have random numbers on them.
* Function which is used for comparing objects when keeping track of state.
* Useful over shallow equal when you have image urls that have random numbers on them.
*/
singleCompareFn?: SelectionCompareFn<T>;
selectionCompareFn?: SelectionCompareFn<T>;
/**
* Function to fetch the data from the server. If data is mainatined in memory, wrap in an observable.
*/

41
UI/Web/src/app/typeahead/typeahead.component.ts
View file

@ -1,4 +1,5 @@
import { Component, ContentChild, ElementRef, EventEmitter, HostListener, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, TemplateRef, ViewChild } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { Component, ContentChild, ElementRef, EventEmitter, HostListener, Inject, Input, OnDestroy, OnInit, Output, Renderer2, RendererStyleFlags2, TemplateRef, ViewChild } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { Observable, of, ReplaySubject, Subject } from 'rxjs';
import { debounceTime, filter, map, shareReplay, switchMap, take, takeUntil, tap } from 'rxjs/operators';
@ -168,7 +169,7 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
private readonly onDestroy = new Subject<void>();
constructor(private renderer2: Renderer2) { }
constructor(private renderer2: Renderer2, @Inject(DOCUMENT) private document: Document) { }
ngOnDestroy(): void {
this.onDestroy.next();
@ -224,9 +225,9 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
let results: Observable<any[]>;
if (Array.isArray(this.settings.fetchFn)) {
const filteredArray = this.settings.compareFn(this.settings.fetchFn, val.trim());
results = of(filteredArray).pipe(map((items: any[]) => items.filter(item => this.filterSelected(item))));
results = of(filteredArray).pipe(takeUntil(this.onDestroy), map((items: any[]) => items.filter(item => this.filterSelected(item))));
} else {
results = this.settings.fetchFn(val.trim()).pipe(map((items: any[]) => items.filter(item => this.filterSelected(item))));
results = this.settings.fetchFn(val.trim()).pipe(takeUntil(this.onDestroy), map((items: any[]) => items.filter(item => this.filterSelected(item))));
}
return results;
@ -234,10 +235,11 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
tap((val) => {
this.isLoadingOptions = false;
this.focusedIndex = 0;
setTimeout(() => {
this.updateShowAddItem(val);
this.updateHighlight();
}, 10);
this.updateShowAddItem(val);
// setTimeout(() => {
// this.updateShowAddItem(val);
// this.updateHighlight();
// }, 10);
setTimeout(() => this.updateHighlight(), 20);
}),
shareReplay(),
@ -279,7 +281,7 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
case KEY_CODES.DOWN_ARROW:
case KEY_CODES.RIGHT_ARROW:
{
this.focusedIndex = Math.min(this.focusedIndex + 1, document.querySelectorAll('.list-group-item').length - 1);
this.focusedIndex = Math.min(this.focusedIndex + 1, this.document.querySelectorAll('.list-group-item').length - 1);
this.updateHighlight();
break;
}
@ -292,14 +294,14 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
}
case KEY_CODES.ENTER:
{
document.querySelectorAll('.list-group-item').forEach((item, index) => {
this.document.querySelectorAll('.list-group-item').forEach((item, index) => {
if (item.classList.contains('active')) {
this.filteredOptions.pipe(take(1)).subscribe((res: any[]) => {
// This isn't giving back the filtered array, but everything
console.log(item.classList.contains('add-item'));
if (this.settings.addIfNonExisting && item.classList.contains('add-item')) {
this.addNewItem(this.typeaheadControl.value);
this.resetField();
this.focusedIndex = 0;
return;
}
@ -337,12 +339,12 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
}
toggleSelection(opt: any): void {
this.optionSelection.toggle(opt, undefined, this.settings.singleCompareFn);
this.optionSelection.toggle(opt, undefined, this.settings.selectionCompareFn);
this.selectedData.emit(this.optionSelection.selected());
}
removeSelectedOption(opt: any) {
this.optionSelection.toggle(opt, undefined, this.settings.singleCompareFn);
this.optionSelection.toggle(opt, undefined, this.settings.selectionCompareFn);
this.selectedData.emit(this.optionSelection.selected());
this.resetField();
}
@ -376,9 +378,14 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
this.onInputFocus(undefined);
}
/**
*
* @param item
* @returns True if the item is NOT selected already
*/
filterSelected(item: any) {
if (this.settings.unique && this.settings.multiple) {
return !this.optionSelection.isSelected(item, this.settings.singleCompareFn);
return !this.optionSelection.isSelected(item, this.settings.selectionCompareFn);
}
return true;
@ -402,7 +409,7 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
if (this.inputElem) {
// hack: To prevent multiple typeaheads from being open at once, click document then trigger the focus
document.querySelector('body')?.click();
this.document.body.click();
this.inputElem.nativeElement.focus();
this.hasFocus = true;
}
@ -422,7 +429,7 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
// Updates the highlight to focus on the selected item
updateHighlight() {
document.querySelectorAll('.list-group-item').forEach((item, index) => {
this.document.querySelectorAll('.list-group-item').forEach((item, index) => {
if (index === this.focusedIndex && !item.classList.contains('no-hover')) {
// apply active class
this.renderer2.addClass(item, 'active');
@ -438,6 +445,8 @@ export class TypeaheadComponent implements OnInit, OnDestroy {
&& this.typeaheadControl.value.trim().length >= Math.max(this.settings.minCharacters, 1)
&& this.typeaheadControl.dirty
&& (typeof this.settings.compareFn == 'function' && this.settings.compareFn(options, this.typeaheadControl.value.trim()).length === 0);
console.log('show Add item: ', this.showAddItem);
console.log('compare func: ', this.settings.compareFn(options, this.typeaheadControl.value.trim()));
}

2
UI/Web/src/app/user-settings/user-preferences/user-preferences.component.html
View file

@ -68,7 +68,7 @@
</div>
<div class="row g-0">
<div class="col-md-6 col-sm-12 pe-2 mb-2">
<div class="col-md-6 col-sm-12 pe-2 mb-2" *ngIf="false">
<label for="settings-layoutmode-option" class="form-label">Layout Mode</label>&nbsp;<i class="fa fa-info-circle" aria-hidden="true" placement="right" [ngbTooltip]="layoutModeTooltip" role="button" tabindex="0"></i>
<ng-template #layoutModeTooltip>Render a single image to the screen to two side-by-side images</ng-template>
<span class="visually-hidden" id="settings-layoutmode-option-help"><ng-container [ngTemplateOutlet]="layoutModeTooltip"></ng-container></span>

3
UI/Web/src/theme/components/_pagination.scss
View file

@ -10,7 +10,7 @@
border-color: var(--pagination-active-link-border-color);
&:hover {
color: var(--pagination-link-text-color);;
color: var(--pagination-link-text-color);
}
}
@ -21,6 +21,7 @@
&:hover {
color: var(--pagination-link-hover-color);
text-decoration: none;
}
}