1
0
mirror of https://github.com/xuthus83/pigallery2.git synced 2024-11-03 21:04:03 +08:00
pigallery2/frontend/app/gallery/directory/directory.gallery.component.ts

76 lines
2.4 KiB
TypeScript
Raw Normal View History

2018-03-31 03:30:30 +08:00
import {Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';
import {DirectoryDTO} from '../../../../common/entities/DirectoryDTO';
import {RouterLink} from '@angular/router';
import {Utils} from '../../../../common/Utils';
import {Photo} from '../Photo';
import {Thumbnail, ThumbnailManagerService} from '../thumnailManager.service';
2018-05-10 01:56:02 +08:00
import {PageHelper} from '../../model/page.helper';
import {QueryService} from '../../model/query.service';
2018-11-02 17:40:09 +08:00
import {PhotoDTO} from '../../../../common/entities/PhotoDTO';
2016-03-21 03:05:51 +08:00
@Component({
2018-05-04 07:17:08 +08:00
selector: 'app-gallery-directory',
templateUrl: './directory.gallery.component.html',
styleUrls: ['./directory.gallery.component.css'],
providers: [RouterLink],
2016-03-21 03:05:51 +08:00
})
export class GalleryDirectoryComponent implements OnInit, OnDestroy {
@Input() directory: DirectoryDTO;
2018-03-31 03:30:30 +08:00
@ViewChild('dirContainer') container: ElementRef;
thumbnail: Thumbnail = null;
2016-05-09 23:04:56 +08:00
2017-07-04 01:17:49 +08:00
constructor(private thumbnailService: ThumbnailManagerService,
private _sanitizer: DomSanitizer,
public queryService: QueryService) {
2017-07-04 01:17:49 +08:00
}
2016-03-21 03:05:51 +08:00
size: number = null;
2017-03-20 07:01:41 +08:00
2018-11-02 17:40:09 +08:00
public get SamplePhoto(): PhotoDTO {
if (this.directory.photos.length > 0) {
return this.directory.photos[0];
}
return null;
}
2017-06-21 17:33:21 +08:00
getSanitizedThUrl() {
return this._sanitizer.bypassSecurityTrustStyle('url(' + encodeURI(this.thumbnail.Src).replace(/\(/g, '%28')
.replace(/\)/g, '%29') + ')');
2017-06-21 17:33:21 +08:00
}
// TODO: implement scroll
isInView(): boolean {
return document.body.scrollTop < this.container.nativeElement.offsetTop + this.container.nativeElement.clientHeight
&& document.body.scrollTop + window.innerHeight > this.container.nativeElement.offsetTop;
}
2017-03-18 07:11:53 +08:00
getDirectoryPath() {
return Utils.concatUrls(this.directory.path, this.directory.name);
}
2016-03-27 02:24:12 +08:00
ngOnDestroy() {
if (this.thumbnail != null) {
this.thumbnail.destroy();
2017-03-20 07:01:41 +08:00
}
}
2016-05-09 23:04:56 +08:00
ngOnInit() {
if (this.directory.photos.length > 0) {
2018-11-02 17:40:09 +08:00
this.thumbnail = this.thumbnailService.getThumbnail(new Photo(this.SamplePhoto, this.calcSize(), this.calcSize()));
}
}
2017-07-21 03:06:59 +08:00
calcSize() {
2018-05-10 01:56:02 +08:00
if (this.size == null || PageHelper.isScrollYVisible()) {
const size = 220 + 5;
const containerWidth = this.container.nativeElement.parentElement.parentElement.clientWidth;
this.size = containerWidth / Math.round((containerWidth / size));
}
return Math.floor(this.size - 5);
2017-07-21 03:06:59 +08:00
}
2016-03-21 03:05:51 +08:00
}