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

fixing directory thumbnail error

Browse Source
This commit is contained in:
Braun Patrik 2017-06-21 11:33:21 +02:00
parent 92ec203f23
commit 79ed8c0c6d
4 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,10 +2,10 @@
style="display: inline-block;"> style="display: inline-block;">
<div class="photo-container">
<div class="photo-container">
<div class="photo" *ngIf="thumbnail && thumbnail.Available" <div class="photo" *ngIf="thumbnail && thumbnail.Available"
[style.background-image]="'url('+thumbnail.src+')'"></div> [style.background-image]="getSanitizedThUrl()"></div>
<span *ngIf="!thumbnail || !thumbnail.Available" class="glyphicon glyphicon-folder-open no-image" <span *ngIf="!thumbnail || !thumbnail.Available" class="glyphicon glyphicon-folder-open no-image"
aria-hidden="true"> aria-hidden="true">

8
frontend/app/gallery/directory/directory.gallery.component.ts
View File

@ -1,4 +1,5 @@
import {Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from "@angular/core"; import {Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from "@angular/core";
import {DomSanitizer} from "@angular/platform-browser";
import {DirectoryDTO} from "../../../../common/entities/DirectoryDTO"; import {DirectoryDTO} from "../../../../common/entities/DirectoryDTO";
import {RouterLink} from "@angular/router"; import {RouterLink} from "@angular/router";
import {Utils} from "../../../../common/Utils"; import {Utils} from "../../../../common/Utils";
@ -16,16 +17,19 @@ export class GalleryDirectoryComponent implements OnInit, OnDestroy {
@ViewChild("dirContainer") container: ElementRef; @ViewChild("dirContainer") container: ElementRef;
thumbnail: Thumbnail = null; thumbnail: Thumbnail = null;
constructor(private thumbnailService: ThumbnailManagerService) { constructor(private thumbnailService: ThumbnailManagerService, private _sanitizer: DomSanitizer) {
} }
ngOnInit() { ngOnInit() {
if (this.directory.photos.length > 0) { if (this.directory.photos.length > 0) {
this.thumbnail = this.thumbnailService.getThumbnail(new Photo(this.directory.photos[0], 100, 100)); this.thumbnail = this.thumbnailService.getThumbnail(new Photo(this.directory.photos[0], 100, 100));
} }
} }
getSanitizedThUrl() {
return this._sanitizer.bypassSecurityTrustStyle('url(' + encodeURI(this.thumbnail.Src).replace(/\(/g, "%28").replace(/\)/g, "%29") + ')');
}
//TODO: implement scroll //TODO: implement scroll
isInView(): boolean { isInView(): boolean {
return document.body.scrollTop < this.container.nativeElement.offsetTop + this.container.nativeElement.clientHeight return document.body.scrollTop < this.container.nativeElement.offsetTop + this.container.nativeElement.clientHeight

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

@ -14,7 +14,7 @@ export class ThumbnailManagerService {
constructor(private thumbnailLoader: ThumbnailLoaderService) { constructor(private thumbnailLoader: ThumbnailLoaderService) {
} }
public getThumbnail(photo: Photo) { public getThumbnail(photo: Photo): Thumbnail {
return new Thumbnail(photo, this.thumbnailLoader); return new Thumbnail(photo, this.thumbnailLoader);
} }