self-hosted/pigallery2
1
0
Fork 0
mirror of https://github.com/bpatrik/pigallery2.git synced 2024-12-14 11:23:17 +02:00
Code Issues Releases Activity

improving grid performance

Browse Source
This commit is contained in:
Patrik J. Braun 2018-05-16 18:52:08 -04:00
parent 1b2e941fa5
commit cdd67d8395
5 changed files with 25 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/app/gallery/grid/grid.gallery.component.ts
View File

@ -29,6 +29,7 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy
@ViewChild('gridContainer') gridContainer: ElementRef;
@ViewChildren(GalleryPhotoComponent) gridPhotoQL: QueryList<GalleryPhotoComponent>;
private scrollListenerPhotos: GalleryPhotoComponent[] = [];
@Input() photos: Array<PhotoDTO>;
@Input() lightbox: GalleryLightboxComponent;
@ -89,6 +90,11 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy
ngAfterViewInit() {
this.lightbox.setGridPhotoQL(this.gridPhotoQL);
if (Config.Client.enableOnScrollThumbnailPrioritising === true) {
this.gridPhotoQL.changes.subscribe(() => {
this.scrollListenerPhotos = this.gridPhotoQL.filter(pc => pc.ScrollListener);
});
}
this.updateContainerDimensions();
this.sortPhotos();
@ -188,15 +194,19 @@ export class GalleryGridComponent implements OnChanges, AfterViewInit, OnDestroy
@HostListener('window:scroll')
onScroll() {
if (!this.onScrollFired) {
if (!this.onScrollFired &&
// should we trigger this at all?
(this.renderedPhotoIndex < this.photos.length || this.scrollListenerPhotos.length > 0)) {
window.requestAnimationFrame(() => {
this.renderPhotos();
if (Config.Client.enableOnScrollThumbnailPrioritising === true) {
this.gridPhotoQL.toArray().forEach((pc: GalleryPhotoComponent) => {
this.scrollListenerPhotos.forEach((pc: GalleryPhotoComponent) => {
pc.onScroll();
});
this.scrollListenerPhotos = this.scrollListenerPhotos.filter(pc => pc.ScrollListener);
}
this.onScrollFired = false;
});
this.onScrollFired = true;

10
frontend/app/gallery/grid/photo/photo.grid.gallery.component.ts
View File

@ -6,6 +6,7 @@ import {RouterLink} from '@angular/router';
import {Thumbnail, ThumbnailManagerService} from '../../thumnailManager.service';
import {Config} from '../../../../../common/config/public/Config';
import {AnimationBuilder} from '@angular/animations';
import {PageHelper} from '../../../model/page.helper';
@Component({
selector: 'app-gallery-grid-photo',
@ -53,13 +54,16 @@ export class GalleryPhotoComponent implements IRenderable, OnInit, OnDestroy {
isInView(): boolean {
return document.body.scrollTop < this.container.nativeElement.offsetTop + this.container.nativeElement.clientHeight
&& document.body.scrollTop + window.innerHeight > this.container.nativeElement.offsetTop;
return PageHelper.ScrollY < this.container.nativeElement.offsetTop + this.container.nativeElement.clientHeight
&& PageHelper.ScrollY + window.innerHeight > this.container.nativeElement.offsetTop;
}
get ScrollListener(): boolean {
return !this.thumbnail.Available && !this.thumbnail.Error;
}
onScroll() {
if (this.thumbnail.Available === true) {
if (this.thumbnail.Available === true || this.thumbnail.Error === true) {
return;
}
const isInView = this.isInView();

4
frontend/app/gallery/share/share.gallery.component.html
View File

@ -20,7 +20,7 @@
</div>
<div class="modal-body">
<div class="row">
<div class="col-9">
<div class="col-7 col-sm-9">
<input id="shareLink"
name="shareLink"
placeholder="link"
@ -28,7 +28,7 @@
type="text"
[ngModel]="url">
</div>
<div class="col-3">
<div class="col-5 col-sm-3">
<button id="copyButton" name="copyButton"
ngxClipboard [cbContent]="url"
(cbOnSuccess)="onCopy()"

1
frontend/app/gallery/thumnailManager.service.ts
View File

@ -185,7 +185,6 @@ export class Thumbnail extends ThumbnailBase {
this.thumbnailTask.priority = ThumbnailLoadingPriority.medium;
}
}
}
public load() {

7
frontend/app/model/page.helper.ts
View File

@ -1,6 +1,7 @@
export class PageHelper {
private static readonly supportPageOffset = window.pageXOffset !== undefined;
private static readonly isCSS1Compat = ((document.compatMode || '') === 'CSS1Compat');
private static readonly body = document.getElementsByTagName('body')[0];
constructor() {
@ -11,14 +12,14 @@ export class PageHelper {
}
public static showScrollY() {
document.getElementsByTagName('body')[0].style.overflowY = 'scroll';
PageHelper.body.style.overflowY = 'scroll';
}
public static isScrollYVisible(): boolean {
return document.getElementsByTagName('body')[0].style.overflowY === 'scroll';
return PageHelper.body.style.overflowY === 'scroll';
}
public static hideScrollY() {
document.getElementsByTagName('body')[0].style.overflowY = 'hidden';
PageHelper.body.style.overflowY = 'hidden';
}
}