import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from "@angular/router"; import { Title } from "@angular/platform-browser"; import { Album } from "../shared/album.model"; import { DisplayImageService } from "../display-image/display-image.service"; import { environment } from "../../../environments/environment"; import { Image } from "../shared/image.model"; import { Thumbnail } from "../shared/thumbnail.model"; const IDX_LEFT = 0; const IDX_MIDDLE = 1; const IDX_RIGHT = 2; const THUMB_MARGIN = 10; @Component({ selector: 'app-album', templateUrl: './album.component.html', styleUrls: ['./album.component.css'], }) export class AlbumComponent implements OnInit { public album: Album = new Album(); private leftHeight: number = 0; private middleHeight: number = 0; private rightHeight: number = 0; public thumbnailsLeft: Array = []; public thumbnailsMiddle: Array = []; public thumbnailsRight: Array = []; constructor(private titleService: Title, private route: ActivatedRoute, private displayImageService: DisplayImageService) { } ngOnInit() { this.route.data.subscribe((data: { albums: Array }) => { this.album = data.albums.find(album => album.slug == this.route.snapshot.params.slug); this.titleService.setTitle(`${this.album.name} - photos.yvan.hu`); this.initThumbnails(); this.route.params.subscribe((params: { slug: string, image: string }) => { if (params.image) { this.imageClick( params.slug, params.image ) } }); }); } private initThumbnails() { this.album.images.map(image => { slug: '', image: this.imageUrl(image), path: image.path, label: { title: image.path, extraRight: '', extraLeft: '', }, height: image.thumbHeight, }).map(thumbnail => { let heights = [this.leftHeight, this.middleHeight, this.rightHeight]; let idx = heights.reduce((low, nxt, idx) => nxt < heights[low] ? idx : low, 0); switch (idx) { case IDX_LEFT: this.thumbnailsLeft.push(thumbnail); this.leftHeight += thumbnail.height + THUMB_MARGIN; break; case IDX_MIDDLE: this.thumbnailsMiddle.push(thumbnail); this.middleHeight += thumbnail.height + THUMB_MARGIN; break; case IDX_RIGHT: this.thumbnailsRight.push(thumbnail); this.rightHeight += thumbnail.height + THUMB_MARGIN; break; } }); } public get exportUrl(): string { return environment.apiUrl + `/export-album/${this.album.slug}.zip`; } private imageUrl(image: Image): string { return environment.apiUrl + `/image/${this.route.snapshot.params.slug}/${image.path}/thumb`; } public imageClick(slug: string, path: string) { this.displayImageService.activate(slug, path, this.album.name); } public switchImage(evnt: { direction: string, currentPath: string }) { switch (evnt.direction) { case 'next': this.nextImage(evnt.currentPath); break; case 'prev': this.prevImage(evnt.currentPath); break; } } private nextImage(path: string) { let currentIndex: number = this.album.images.findIndex(image => image.path == path); if (this.album.images.length - 1 > currentIndex) { this.displayImageService.activate( this.album.slug, this.album.images[currentIndex + 1].path ) } } private prevImage(path: string) { let currentIndex: number = this.album.images.findIndex(image => image.path == path); if (0 < currentIndex) { this.displayImageService.activate( this.album.slug, this.album.images[currentIndex - 1].path ) } } }