File
Implements
Metadata
| encapsulation |
ViewEncapsulation.None |
| selector |
common-thumbnail |
| styleUrls |
./thumbnail.scss |
| templateUrl |
./thumbnail.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
Outputs
|
|
|
|
reviewMode
|
Type : boolean
|
Default value : false
|
|
|
Methods
|
delete
|
delete(evt: any)
|
|
|
Parameters :
| Name |
Type |
Optional |
| evt |
any
|
No
|
|
|
hideFullSizeView
|
hideFullSizeView()
|
|
|
|
|
|
showFullSizeView
|
showFullSizeView()
|
|
|
|
|
|
Public
fullSizeViewModal
|
Type : ModalDirective
|
Decorators :
@ViewChild('fullSizeViewModal')
|
|
|
|
scaledWidth
|
Type : number
|
Default value : 300
|
|
|
Design Guidelines
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente, magnam ipsam. Sit quasi natus architecto rerum unde non provident! Quia nisi facere amet iste mollitia voluptatem non molestias esse optio?
Aperiam fugiat consectetur temporibus, iste repellat, quisquam sapiente nisi distinctio optio, autem nemo tenetur error eum voluptatibus ab accusamus quis voluptatum blanditiis. Quam et ut reprehenderit vitae nobis, at ipsum!
Exercitationem pariatur animi repudiandae corporis obcaecati ratione ducimus beatae quam, nostrum magnam unde numquam quidem cupiditate odit id. Beatae alias molestiae, optio incidunt harum quia voluptates deserunt sequi. Nesciunt, optio.
import { Component, ViewChild, OnInit, Input, Output, EventEmitter, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { ModalDirective } from 'ngx-bootstrap/modal';
import { CommonImage } from '../../models/images.model';
@Component({
selector: 'common-thumbnail',
templateUrl: './thumbnail.html',
styleUrls: ['./thumbnail.scss'],
encapsulation: ViewEncapsulation.None
})
export class ThumbnailComponent implements OnInit {
@Input() imageObject: CommonImage;
@Input() reviewMode: boolean = false;
@Output() deleteImage: EventEmitter<CommonImage> = new EventEmitter<CommonImage>();
@ViewChild('fullSizeViewModal') public fullSizeViewModal: ModalDirective;
private viewContainerRef: ViewContainerRef;
constructor(viewContainerRef: ViewContainerRef) {
this.viewContainerRef = viewContainerRef;
}
scaledWidth: number = 300;
ngOnInit() {
const scaledWidthString: string = (180 * this.imageObject.naturalWidth / this.imageObject.naturalHeight).toFixed(0);
this.scaledWidth = parseInt(scaledWidthString, 10);
if (this.scaledWidth > 250) {
this.scaledWidth = 250;
} else if (this.scaledWidth < 30) {
this.scaledWidth = 100;
}
if (isNaN(this.scaledWidth)) {
this.scaledWidth = 300;
}
}
delete(evt: any) {
this.deleteImage.emit(this.imageObject);
}
showFullSizeView() {
this.fullSizeViewModal.config.backdrop = false;
this.fullSizeViewModal.show();
}
hideFullSizeView() {
this.fullSizeViewModal.hide();
}
}
<div class="thumbnail-container">
<img [src]="imageObject.fileContent" alt="" tabindex="0"
[ngClass]="{'image-thumbnail': scaledWidth <= 300, 'image-thumbnail-width-priority': scaledWidth > 300}"
(click)="showFullSizeView()">
<div class="action-strip" *ngIf="!reviewMode">
<a href="javascript:void(0)" (click)="delete($event)" class='text-danger' tabindex="0">Remove</a>
</div>
</div>
<div bsModal #fullSizeViewModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">{{imageObject.name}}</h4>
<button type="button" class="close" (click)="hideFullSizeView()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12" >
<img [src]="imageObject.fileContent" alt="{{imageObject.name}}" class="center-block img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
Legend
Html element with directive