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

import {Component, OnInit} from '@angular/core';

import {Album} from "../shared/album.model";
import {ActivatedRoute} from "@angular/router";
import {Title} from "@angular/platform-browser";
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;

@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();
      if(this.route.snapshot.params.image) {
        this.imageClick(
          this.route.snapshot.params.slug,
          this.route.snapshot.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.height,
    }).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 + 10);
          break;
        case IDX_MIDDLE:
          this.thumbnailsMiddle.push(thumbnail);
          this.middleHeight += (thumbnail.height + 10);
          break;
        case IDX_RIGHT:
          this.thumbnailsRight.push(thumbnail);
          this.rightHeight += (thumbnail.height + 10);
          break;
      }
    });
  }

  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
      )
    }
  }
}