File
Implements
Metadata
| selector |
div[media-kit-main] |
| styleUrls |
./media-kit-main.component.scss |
| templateUrl |
./media-kit-main.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
HostBindings
|
|
|
|
Readonly
downloadZipURL
|
Type : string
|
Default value : '/downloadBinary'
|
|
|
|
mediaKitDownloadLabel
|
Type : string
|
Default value : '{mediaDownload}'
|
|
|
|
Readonly
mediaKitDownloadSliderItemsKey
|
Type : string
|
Default value : 'mediaKitDownloadSliderItems'
|
|
|
|
mediaKitNumberOfItemsLabel
|
Type : string
|
Default value : '{download {0} items}'
|
|
|
|
Readonly
mediaKitNumberOfItemsSliderKey
|
Type : string
|
Default value : 'mediaKitNumberOfItemsSlider'
|
|
|
import { Component, OnInit, Input, HostBinding } from '@angular/core';
import { LabelService } from 'src/app/core/services/label-service/label-service.service';
import { MediaKitService } from 'src/app/core/services/mediaKit-service/media-kit.service';
import { MediaKit } from 'src/app/core/interfaces/interfaces.component';
@Component({
selector: 'div[media-kit-main]',
templateUrl: './media-kit-main.component.html',
styleUrls: ['./media-kit-main.component.scss']
})
export class MediaKitMainComponent implements OnInit {
@Input() entity;
data: MediaKit;
readonly downloadZipURL = '/downloadBinary';
readonly mediaKitDownloadSliderItemsKey = 'mediaKitDownloadSliderItems';
readonly mediaKitNumberOfItemsSliderKey = 'mediaKitNumberOfItemsSlider';
mediaKitDownloadLabel = '{mediaDownload}';
mediaKitNumberOfItemsLabel = '{download {0} items}';
zipfileUrl: string;
zipFileName: string;
buttonDisabled: boolean;
@HostBinding('class') get class() { return 'space-between--slider-no-bottom'; }
constructor(private mediaKit: MediaKitService,
private labels: LabelService) { }
ngOnInit() {
this.data = this.mediaKit.parseMediaKit(this.entity);
// slider should not include any pdfs
this.data.mediaItems = this.data.mediaItems.filter(e => !e.url.endsWith('pdf'));
const itemCount = this.mediaKit.nbrOfDownloadableItems(this.data);
this.labels.getLabel(this.mediaKitDownloadSliderItemsKey).then(label => this.mediaKitDownloadLabel = label);
this.labels.getLabel(this.mediaKitNumberOfItemsSliderKey).then(label => {
// This label contains a 'special' token {0} that is replaced with the number of items in the slider
this.mediaKitNumberOfItemsLabel = label.replace(/\{0\}/g, itemCount + '');
});
this.zipfileUrl = this.mediaKit.buildQueryString(this.data);
this.zipFileName = this.data.zipFileName;
this.buttonDisabled = (itemCount === 0);
}
}
<div class="media-slider">
<div slider [nrOfElements]="data.mediaItems.length" [columnSize]="'md'" [btnClass]="'btn-off-white'">
<h2 title>{{data.title}}</h2>
<div slider-element class="col swiper-slide" *ngFor="let mediaItem of data.mediaItems">
<div class="card">
<div class="slider-element" *ngIf="mediaItem.mimeType.startsWith('image')">
<img class="card-img-top" [src]="mediaItem.url" [alt]="mediaItem.altText">
</div>
<div class="slider-element" *ngIf="mediaItem.isVideo">
<div video-player class="slider-video" [videoJSON]="mediaItem.mediaItem"></div>
</div>
</div>
</div>
</div>
</div>
<div class="action-panel" action-panel [openOrDownloadUrl]="zipfileUrl" [buttonText]="data.buttonTitle"
[newWindow]="false" [disabled]="buttonDisabled">
<span class="download-label" action-text> {{mediaKitDownloadLabel}} </span>
<span class="items-number" action-text> ({{mediaKitNumberOfItemsLabel}}) </span>
</div>
@import "src/app/styles/helpers";
:host {
background-color: $light-green;
}
.media-slider {
padding-bottom: calc-rem(25);
h2 {
@include font-scale(32, light);
}
.card {
margin-left: auto;
margin-right: auto;
border: none;
width: 90%;
.slider-element {
display: flex;
position: relative;
width: 100%;
height: 100%;
border-bottom: 1px solid $off-white;
&:before {
content: "";
display: block;
padding-top: 56.25%; // Aspect ratio 16:9
}
.card-img-top {
height: 100%;
position: absolute;
object-fit: cover;
}
.slider-video {
height: 100%;
width: 100%;
position: absolute;
}
}
}
}
.action-panel {
.download-label {
@include font-scale(24, light);
}
.items-number {
@include font-scale(12, light);
}
}
Legend
Html element with directive