Frontend
Public
Commits
Tim Donohue authored and GitHub committed 4847fc6f7af Merge
| 1 - | import { Component, Input, OnInit } from '@angular/core'; |
| 1 + | import { Component, Input, OnChanges, OnInit } from '@angular/core'; |
| 2 2 | import { NgxGalleryImage, NgxGalleryOptions } from '@kolkov/ngx-gallery'; |
| 3 3 | import { MediaViewerItem } from '../../../core/shared/media-viewer-item.model'; |
| 4 4 | import { NgxGalleryAnimation } from '@kolkov/ngx-gallery'; |
| 5 5 | import { Observable } from 'rxjs'; |
| 6 6 | import { AuthService } from '../../../core/auth/auth.service'; |
| 7 7 | |
| 8 8 | /** |
| 9 9 | * This componenet render an image gallery for the image viewer |
| 10 10 | */ |
| 11 11 | @Component({ |
| 12 12 | selector: 'ds-media-viewer-image', |
| 13 13 | templateUrl: './media-viewer-image.component.html', |
| 14 14 | styleUrls: ['./media-viewer-image.component.scss'], |
| 15 15 | }) |
| 16 - | export class MediaViewerImageComponent implements OnInit { |
| 16 + | export class MediaViewerImageComponent implements OnChanges, OnInit { |
| 17 17 | @Input() images: MediaViewerItem[]; |
| 18 18 | @Input() preview?: boolean; |
| 19 19 | @Input() image?: string; |
| 20 20 | |
| 21 21 | thumbnailPlaceholder = './assets/images/replacement_image.svg'; |
| 22 22 | |
| 23 - | galleryOptions: NgxGalleryOptions[]; |
| 24 - | galleryImages: NgxGalleryImage[]; |
| 23 + | galleryOptions: NgxGalleryOptions[] = []; |
| 24 + | |
| 25 + | galleryImages: NgxGalleryImage[] = []; |
| 25 26 | |
| 26 27 | /** |
| 27 28 | * Whether or not the current user is authenticated |
| 28 29 | */ |
| 29 30 | isAuthenticated$: Observable<boolean>; |
| 30 31 | |
| 31 32 | constructor( |
| 32 33 | protected authService: AuthService, |
| 33 34 | ) { |
| 34 35 | } |
| 35 36 | |
| 36 - | /** |
| 37 - | * Thi method sets up the gallery settings and data |
| 38 - | */ |
| 39 - | ngOnInit(): void { |
| 40 - | this.isAuthenticated$ = this.authService.isAuthenticated(); |
| 37 + | ngOnChanges(): void { |
| 41 38 | this.galleryOptions = [ |
| 42 39 | { |
| 43 40 | preview: this.preview !== undefined ? this.preview : true, |
| 44 41 | image: true, |
| 45 42 | imageSize: 'contain', |
| 46 43 | thumbnails: false, |
| 47 44 | imageArrows: false, |
| 48 45 | startIndex: 0, |
| 49 46 | imageAnimation: NgxGalleryAnimation.Slide, |
| 50 47 | previewCloseOnEsc: true, |
| 51 48 | previewZoom: true, |
| 52 49 | previewRotate: true, |
| 53 50 | previewFullscreen: true, |
| 54 51 | }, |
| 55 52 | ]; |
| 56 - | |
| 57 53 | if (this.image) { |
| 58 54 | this.galleryImages = [ |
| 59 55 | { |
| 60 56 | small: this.image, |
| 61 57 | medium: this.image, |
| 62 58 | big: this.image, |
| 63 59 | }, |
| 64 60 | ]; |
| 65 61 | } else { |
| 66 62 | this.galleryImages = this.convertToGalleryImage(this.images); |
| 67 63 | } |
| 68 64 | } |
| 69 65 | |
| 66 + | ngOnInit(): void { |
| 67 + | this.isAuthenticated$ = this.authService.isAuthenticated(); |
| 68 + | this.ngOnChanges(); |
| 69 + | } |
| 70 + | |
| 70 71 | /** |
| 71 72 | * This method convert an array of MediaViewerItem into NgxGalleryImage array |
| 72 73 | * @param medias input NgxGalleryImage array |
| 73 74 | */ |
| 74 75 | convertToGalleryImage(medias: MediaViewerItem[]): NgxGalleryImage[] { |
| 75 76 | const mappedImages = []; |
| 76 77 | for (const image of medias) { |
| 77 78 | if (image.format === 'image') { |
| 78 79 | mappedImages.push({ |
| 79 80 | small: image.thumbnail |