xuthus/pigallery2
1
0
Fork 0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00
Code Actions Projects Activity

Improve screen resizing

Browse Source
This commit is contained in:
Patrik J. Braun 2023-08-26 15:37:01 +02:00
parent 340360e5c7
commit 0cf0e733b4
3 changed files with 97 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/frontend/app/ui/gallery/grid/grid.gallery.component.css
View File

@ -1,3 +1,8 @@
:host {
display: block;
width: 100%;
}
div {
/*display: block;*/
line-height: normal;

2
src/frontend/app/ui/gallery/grid/grid.gallery.component.html
View File

@ -1,4 +1,4 @@
<div #gridContainer>
<div #gridContainer [style.width]="renderDelayTimer ? containerWidth+'px' : ''">
<app-gallery-grid-photo
*ngFor="let gridPhoto of photosToRender"
(click)="photoClicked(gridPhoto.media)"

54
src/frontend/app/ui/gallery/grid/grid.gallery.component.ts
View File

@ -55,6 +55,7 @@ export class GalleryGridComponent
private MAX_ROW_COUNT = 5;
private onScrollFired = false;
private helperTime: number = null;
public renderDelayTimer: number = null; // delays render on resize
private renderedPhotoIndex = 0;
constructor(
@ -94,7 +95,6 @@ export class GalleryGridComponent
return;
}
this.updateContainerDimensions();
this.mergeNewPhotos();
this.helperTime = window.setTimeout((): void => {
this.renderPhotos();
if (this.delayedRenderUpToPhoto) {
@ -107,6 +107,10 @@ export class GalleryGridComponent
if (this.helperTime != null) {
clearTimeout(this.helperTime);
}
if (this.renderDelayTimer) {
clearTimeout(this.renderDelayTimer);
this.renderDelayTimer = null;
}
if (this.subscriptions.route !== null) {
this.subscriptions.route.unsubscribe();
this.subscriptions.route = null;
@ -118,6 +122,12 @@ export class GalleryGridComponent
if (this.isAfterViewInit === false) {
return;
}
if (this.renderDelayTimer) {
clearTimeout(this.renderDelayTimer);
this.renderDelayTimer = null;
}
this.renderDelayTimer = window.setTimeout(() => {
this.renderDelayTimer = null;
// render the same amount of images on resize
const renderedIndex = this.renderedPhotoIndex;
// do not rerender if container is not changes
@ -125,6 +135,7 @@ export class GalleryGridComponent
return;
}
this.renderPhotos(renderedIndex);
}, 100);
}
photoClicked(media: MediaDTO): void {
@ -256,43 +267,6 @@ export class GalleryGridComponent
this.changeDetector.detectChanges();
}
// TODO: This is deprecated,
// we do not post update galleries anymore since the cover member in the DriectoryDTO
private mergeNewPhotos(): void {
// merge new data with old one
let lastSameIndex = 0;
let lastRowId = null;
let i = 0;
for (; i < this.media.length && i < this.photosToRender.length; ++i) {
// If a media changed the whole row has to be removed
if (this.photosToRender[i].rowId !== lastRowId) {
lastSameIndex = i;
lastRowId = this.photosToRender[i].rowId;
}
if (this.photosToRender[i].equals(this.media[i]) === false) {
break;
}
}
// if all the same
if (
this.photosToRender.length > 0 &&
i === this.photosToRender.length &&
i === this.media.length &&
this.photosToRender[i - 1].equals(this.media[i - 1])
) {
lastSameIndex = i;
}
if (lastSameIndex > 0) {
this.photosToRender.splice(
lastSameIndex,
this.photosToRender.length - lastSameIndex
);
this.renderedPhotoIndex = lastSameIndex;
} else {
this.clearRenderedPhotos();
}
}
/**
* Returns true, if scroll is >= 70% to render more images.
* Or of onscroll rendering is off: return always to render all the images at once
@ -348,12 +322,12 @@ export class GalleryGridComponent
PageHelper.showScrollY();
// if the width changed a bit or the height changed a lot
if (
this.containerWidth !== this.gridContainer.nativeElement.clientWidth ||
this.containerWidth !== this.gridContainer.nativeElement.parentElement.clientWidth ||
this.screenHeight < window.innerHeight * 0.75 ||
this.screenHeight > window.innerHeight * 1.25
) {
this.screenHeight = window.innerHeight;
this.containerWidth = this.gridContainer.nativeElement.clientWidth;
this.containerWidth = this.gridContainer.nativeElement.parentElement.clientWidth;
this.clearRenderedPhotos();
if (!pre) {
PageHelper.hideScrollY();