gallery-frontend/src/app/gallery/album/album.component.ts

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<Thumbnail> = [];
    public thumbnailsMiddle: Array<Thumbnail> = [];
    public thumbnailsRight: Array<Thumbnail> = [];

    constructor(private titleService: Title,
                private route: ActivatedRoute,
                private displayImageService: DisplayImageService) {
    }

    ngOnInit() {
        this.route.data.subscribe((data: { albums: Array<Album> }) => {
            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 => <Thumbnail>{
            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
            )
        }
    }
}