dslak_website/src/app/detail/detail.component.ts

import { Component, OnInit, ViewChild, ViewEncapsulation} from '@angular/core'
import { Router, NavigationEnd, NavigationStart, ActivatedRoute } from '@angular/router'
import { DomSanitizer } from '@angular/platform-browser'
import { Location } from '@angular/common'
import { NgxImageGalleryComponent, GALLERY_IMAGE, GALLERY_CONF } from "ngx-image-gallery"
import { ApisService } from '../services/apis.service'
import { environment } from '../../environments/environment'

@Component({
  selector: 'app-detail',
  templateUrl: './detail.component.html',
  styleUrls: ['./detail.component.scss'],
  encapsulation: ViewEncapsulation.None,
})
export class DetailComponent implements OnInit {

  public basePath = `${environment.BASE_PATH}`

  @ViewChild(NgxImageGalleryComponent) ngxImageGallery: NgxImageGalleryComponent

  public details: any = {}
  public section: string = ''
  public id: number = 0
  private history: string[] = []

  public conf: GALLERY_CONF = {
    imageOffset: '0px',
    showDeleteControl: false,
    showImageTitle: false,
  }

  public galleryImages: GALLERY_IMAGE[] = []

  constructor(
    private apisService: ApisService,
    private router: Router,
    private location: Location,
    private activeRoute: ActivatedRoute,
    private sanitizer: DomSanitizer
  ) { }

  ngOnInit(): void {
    this.section = this.router.url.split('/')[2]
    this.id = parseInt(this.router.url.split('/')[3])
    this.showDetails(this.section, this.id)
  }

  showDetails(section, id): void {
    this.galleryImages = []
    this.apisService.getDetails(section, id).toPromise().then((response) => {
      if(this.history[this.history.length - 1] != `/detail/${section}/${id}`) {
        this.history.push(`/detail/${section}/${id}`)
      }

      const detail = response.item
      detail.videos = detail.videos ? JSON.parse(detail.videos) : []
      detail.videos.forEach((e) => {
        e.code = e.url.split('/').pop()
        switch(e.type) {
          case 'youtube':
            e.embed = this.sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${e.code}`)
            break
          case 'vimeo':
            e.embed = this.sanitizer.bypassSecurityTrustResourceUrl(`https://player.vimeo.com/video/${e.code}`)
            break
          case 'embed':
            e.embed = this.sanitizer.bypassSecurityTrustHtml(e.url)
            break
        }
      })

      detail.gallery = detail.gallery ? JSON.parse(detail.gallery) : []

      detail.gallery.forEach((e) => {
        if(!e.main) {
          this.galleryImages.push({
            url: `${e.url}`,
            altText: e.title,
            title: e.title,
            thumbnailUrl: `${this.basePath}${e.url}`
          })
        }
      })
      this.details = detail

    },(error) => {
      console.error('getPortfolio ERROR', error)
    }).catch((e) => {
      console.error('getPortfolio CATCH', e)
    })
  }

  back(): void {
    this.history.pop()
    if(this.history.length > 0) {
      const last = this.history[this.history.length - 1]
      this.section = last.split('/')[2]
      this.id = parseInt(last.split('/')[3])
      this.showDetails(this.section, this.id)
      this.location.back()
    } else {
      this.location.back()
    }
  }















  openGallery(index: number = 0) {
    this.ngxImageGallery.open(index)
  }

  // close gallery
  closeGallery() {
    this.ngxImageGallery.close()
  }

  // set new active(visible) image in gallery
  newImage(index: number = 0) {
    this.ngxImageGallery.setActiveImage(index)
  }

  // next image in gallery
  nextImage(index: number = 0) {
    this.ngxImageGallery.next()
  }

  // prev image in gallery
  prevImage(index: number = 0) {
    this.ngxImageGallery.prev()
  }

  /**************************************************/

  // EVENTS
  // callback on gallery opened
  galleryOpened(index) {
    console.info('Gallery opened at index ', index)
  }

  // callback on gallery closed
  galleryClosed() {
    console.info('Gallery closed.')
  }

  // callback on gallery image clicked
  galleryImageClicked(index) {
    console.info('Gallery image clicked with index ', index)
  }

  // callback on gallery image changed
  galleryImageChanged(index) {
    console.info('Gallery image changed to index ', index)
  }

  // callback on user clicked delete button
  deleteImage(index) {
    console.info('Delete image at index ', index)
  }
}