File
Implements
Metadata
| selector |
div[highlighted-content-main-cards] |
| styleUrls |
./highlighted-content-main-cards.component.scss |
| templateUrl |
./highlighted-content-main-cards.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
HostBindings
|
|
|
Methods
|
Private
playVideo
|
playVideo()
|
|
|
|
|
import { Component, OnInit, Input, Inject, HostBinding, OnDestroy } from '@angular/core';
import { UtilService } from 'src/app/core/services/util-service/util.service';
import { DOCUMENT } from '@angular/common';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';
import { HighlightedContentData } from 'src/app/core/interfaces/interfaces.component';
import { HighlightedContentService } from '../highlighted-content.service';
@Component({
selector: 'div[highlighted-content-main-cards]',
templateUrl: './highlighted-content-main-cards.component.html',
styleUrls: ['./highlighted-content-main-cards.component.scss']
})
export class HighlightedContentMainCardsComponent implements OnInit {
@Input() entity;
data: HighlightedContentData;
videoId: string;
title: string;
subtitle: string;
// Generates spacing for component
@HostBinding('class') get class() { return 'space-between'; }
// Generates a background-color class
@HostBinding('class.bg-off-white') get bgColor() {
const template = this.util.extract(this.entity, 'MvcData', 'ViewName');
return template === 'HighlightedContent25PercentLightGreyMain';
}
constructor(
private util: UtilService,
private idGenerator: IdGeneratorService,
private highlightedContentService: HighlightedContentService,
@Inject(DOCUMENT) private doc
) { }
ngOnInit() {
if (this.entity && this.entity.Entities) {
this.data = this.entity.Entities.map((entity: any) => this.highlightedContentService.parseJson(entity));
// Extract the first title & subtitle only
const { title, subtitle } = this.data[0];
this.title = title;
this.subtitle = subtitle;
this.videoId = this.idGenerator.getId();
}
}
private playVideo(): void {
const video = this.doc.getElementById(this.videoId);
if (video.paused) {
video.play();
this.highlightedContentService.videoPlayPauseText = 'PAUSE';
this.highlightedContentService.videoIcon = 'fas fa-pause';
} else {
video.pause();
this.highlightedContentService.videoPlayPauseText = 'PLAY';
this.highlightedContentService.videoIcon = 'fas fa-play';
}
}
}
<div class="container">
<!-- Adding ids here to support the shortcuts component -->
<div [id]="card.id" *ngFor="let card of data"></div>
<h2 *ngIf="title">{{title}} <small *ngIf="subtitle">{{subtitle}}</small></h2>
<div class="card-deck" *ngIf="data">
<ng-container *ngFor="let card of data">
<div class="card" *ngIf="card.mediaType === 'video'">
<ng-container *ngTemplateOutlet="cardHolder"></ng-container>
</div>
<a component-link [linkObject]="card.link.linkObject" class="card" *ngIf="!(card.mediaType === 'video') && card.link?.linkObject">
<ng-container *ngTemplateOutlet="cardHolder"></ng-container>
</a>
<ng-template #cardHolder>
<div class="card-img-container" *ngIf="card.mediaType !== 'missing'">
<div video-player [videoJSON]="card.videojson" *ngIf="card.mediaType === 'video'"></div>
<img class="card-img-top" [src]="card.imgURL" [alt]="card.imgAlt" *ngIf="card.mediaType === 'image'" />
</div>
<div class="card-body" *ngIf="!(card.mediaType === 'video')">
<div class="card-title" *ngIf="card.descriptionTitle" title="{{card.descriptionTitle}}">{{card.descriptionTitle}}
</div>
<div class="card-text" title="{{card.description}}" *ngIf="card.description">{{card.description | truncatetext: 250 }}
</div>
</div>
<div class="card-footer" *ngIf="!(card.mediaType === 'video')">
<span class="card-link" title="{{card.link.title | uppercase }}">
{{card.link.title | uppercase }}
</span>
<i class="icon-chevronNext" *ngIf="card.link.title"></i>
</div>
</ng-template>
</ng-container>
</div>
</div>
@import "src/app/dxa/dxa-entity/views/highlighted-content-views/highlighted-content.component.scss";
:host h2 {
margin-top: calc-rem(35);
@include font-scale(32, light);
small {
display: block;
margin-top: calc-rem(12);
@include font-scale(24, light);
max-width: 75%;
@include media-breakpoint-up(lg) {
max-width: 66.6%;
}
}
}
.card-deck {
margin-top: calc-rem(35);
a.card {
&[target=_blank]:after {
content: none; // Removes the potential new window-icon
}
&:hover {
text-decoration: none;
background-color: $light-blue;
.card-img-container {
opacity: 0.6;
}
.card-body {
border-top: 1px solid $light-blue;
}
.card-body,
.card-footer {
background-color: $light-blue;
}
.card-link {
text-decoration: underline;
}
}
}
.card {
border: 1px solid $extra-light-slate;
margin-bottom: calc-rem(30);
@include media-breakpoint-up(sm) {
flex: 0 0 calc(50% - 30px);
}
@include media-breakpoint-up(lg) {
flex: 0 0 calc(25% - 30px);
}
&-title {
@include font-scale(24, light);
color: $blue;
}
&-text {
@include font-scale(16, light);
color: $cool-grey;
}
&-img-container {
@include aspect-ratio(16 9);
@include media-breakpoint-up(sm) {
max-height: 180px;
}
img {
object-fit: cover;
}
}
&-body {
background-color: $off-white;
border-top: 1px solid $extra-light-slate;
:host-context(.bg-off-white) & {
background-color: $white;
}
}
&-footer {
border: none;
background-color: $off-white;
padding-bottom: calc-rem(20);
color: $cool-grey;
.card-link {
@include font-scale(14, uppercase);
color: $cool-grey;
}
.icon-chevronNext:before {
vertical-align: -5%;
@include font-size(14);
}
:host-context(.bg-off-white) & {
background-color: $white;
}
}
.akamai-player-wrapper {
akamai-media-player {
width: 100%;
height: 100%;
}
}
}
}
Legend
Html element with directive