|
|
|
@ -1,6 +1,8 @@ |
|
|
|
import { Component, OnInit } from '@angular/core' |
|
|
|
import { Component, OnInit, ViewChild } 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' |
|
|
|
|
|
|
|
@Component({ |
|
|
|
@ -10,18 +12,33 @@ import { ApisService } from '../services/apis.service' |
|
|
|
}) |
|
|
|
export class DetailComponent implements OnInit { |
|
|
|
|
|
|
|
@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 activeRoute: ActivatedRoute, |
|
|
|
private sanitizer: DomSanitizer |
|
|
|
) { } |
|
|
|
|
|
|
|
ngOnInit(): void { |
|
|
|
this.showDetails(this.router.url.split('/')[2], this.router.url.split('/')[3]) |
|
|
|
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 { |
|
|
|
@ -29,7 +46,25 @@ export class DetailComponent implements OnInit { |
|
|
|
if(this.history[this.history.length - 1] != `/detail/${section}/${id}`) { |
|
|
|
this.history.push(`/detail/${section}/${id}`) |
|
|
|
} |
|
|
|
this.details = response.item |
|
|
|
|
|
|
|
const detail = response.item |
|
|
|
detail.videos = detail.videos ? JSON.parse(detail.videos) : [] |
|
|
|
detail.videos.forEach((e) => { |
|
|
|
e.code = e.url.split('/').pop() |
|
|
|
e.embed = this.sanitizer.bypassSecurityTrustResourceUrl(`https://www.youtube.com/embed/${e.code}`) |
|
|
|
}) |
|
|
|
detail.gallery = detail.gallery ? JSON.parse(detail.gallery) : [] |
|
|
|
|
|
|
|
detail.gallery.forEach((e) => { |
|
|
|
this.galleryImages.push({ |
|
|
|
url: e.url, |
|
|
|
altText: e.title, |
|
|
|
title: e.title, |
|
|
|
thumbnailUrl: e.url |
|
|
|
}) |
|
|
|
}) |
|
|
|
this.details = detail |
|
|
|
|
|
|
|
},(error) => { |
|
|
|
console.error('getPortfolio ERROR', error) |
|
|
|
}).catch((e) => { |
|
|
|
@ -41,10 +76,78 @@ export class DetailComponent implements OnInit { |
|
|
|
this.history.pop() |
|
|
|
if(this.history.length > 0) { |
|
|
|
const last = this.history[this.history.length - 1] |
|
|
|
this.showDetails(last.split('/')[2], last.split('/')[3]) |
|
|
|
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); |
|
|
|
} |
|
|
|
} |
|
|
|
|
