File
Implements
Metadata
| selector |
[news-document] |
| styleUrls |
./news-document.component.scss |
| templateUrl |
./news-document.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Inputs
|
|
|
|
theme
|
Type : "dark" | "light"
|
Default value : 'dark'
|
|
|
|
type
|
Type : "LIST" | "GRID"
|
Default value : 'LIST'
|
|
|
|
compId
|
Default value : this.idGenerator.getId()
|
|
|
|
descTextLength
|
Type : number
|
Default value : 150
|
|
|
import { Component, Input, OnInit, HostBinding, Inject } from '@angular/core';
import { ResizeContentService } from 'src/app/core/services/resize-service/resize-content.service';
import { ConstantsService } from 'src/app/shared/constants/constants.service';
import { DOCUMENT } from '@angular/common';
import { IdGeneratorService } from 'src/app/core/services/id-generator.service';
@Component({
selector: '[news-document]',
templateUrl: './news-document.component.html',
styleUrls: ['./news-document.component.scss']
})
export class NewsDocumentComponent implements OnInit {
@Input() newsDocument;
@Input() type: 'LIST' | 'GRID' = 'LIST';
@Input() theme: 'dark' | 'light' = 'dark';
imageUrl: string;
timeZone: string;
descTextLength = 150;
compId = this.idGenerator.getId();
constructor(
private resizeService: ResizeContentService,
private constants: ConstantsService,
private idGenerator: IdGeneratorService,
@Inject(DOCUMENT) private document
) {}
ngOnInit() {
this.imageUrl = this.newsDocument.image_url;
this.imageUrl = this.imageUrl ? this.imageUrl : null;
this.timeZone = this.newsDocument.doc_date_timezone;
this.timeZone = this.timeZone ? this.timeZone.split('-')[0] : '';
if (!this.imageUrl) {
this.descTextLength = 300;
}
// Don't truncate description text on mobile view.
this.resizeService.registerCallback(this.compId, () => {
const currentWidth = window.innerWidth || this.document.documentElement.clientWidth;
if (currentWidth < this.constants.BOOTSTRAP_BREAKPOINTS.MD) {
this.descTextLength = 9999;
}
});
}
}
<article role="article" class="card list-card" *ngIf="type==='LIST'">
<div class="row no-gutters">
<div class="col-md-4" *ngIf="imageUrl">
<a class="news-image" [routerLink]="newsDocument.url">
<img [src]="imageUrl" class="card-img-top" [alt]="newsDocument.title">
</a>
</div>
<div [ngClass]="{'col-md-8': imageUrl, 'col-md-12': !imageUrl}">
<div class="card-body" [ngClass]="{'no-image': !imageUrl}">
<a class="card-title" [routerLink]="newsDocument.url">
<span class="card-title-text">{{ newsDocument.title }}</span>
<small class="card-title-url">{{ newsDocument.url }}</small>
</a>
<div class="card-text date">
<small class="text-muted">{{ newsDocument.doc_date_time | date: 'yyyy.MM.dd' }} {{timeZone}}</small>
</div>
<div class="card-text description" *ngIf="newsDocument.description" [innerHTML]="newsDocument.description"></div>
</div>
</div>
</div>
</article>
<article role="article" class="card grid-card" *ngIf="type==='GRID'" [ngClass]="theme">
<a class="news-image" *ngIf="imageUrl" [routerLink]="newsDocument.url">
<img [src]="imageUrl" class="card-img-top" [alt]="newsDocument.title">
</a>
<div class="card-body">
<div class="card-text date">
<small class="text-muted">{{ newsDocument.doc_date_time | date: 'yyyy.MM.dd' }} {{timeZone}}</small>
</div>
<a class="card-title" [routerLink]="newsDocument.url" *ngIf="newsDocument.title">{{newsDocument.title}}</a>
<div class="card-text description" *ngIf="newsDocument.description" [innerHTML]="newsDocument.description | truncatetext:descTextLength"></div>
</div>
</article>
@import "src/app/styles/helpers";
:host {
height: 100%;
}
.list-card {
border: none;
.card-title {
@include font-scale(24, light);
color: $blue;
word-break: break-word;
display: flex;
flex-direction: column;
margin-bottom: calc-rem(10);
&:hover {
text-decoration: none;
.card-title-text {
text-decoration: underline;
}
}
&-url {
@include font-size(14);
}
}
.card-body {
height: 100%;
padding-top: 0;
&.no-image {
padding-left: 0;
}
.description {
color: $cool-grey;
@include font-scale(16, light);
::ng-deep em {
font-weight: bold;
font-style: normal;
}
}
}
.card-text {
margin-bottom: 0;
&.date {
.text-muted {
@include font-scale(12, uppercase);
}
}
}
}
.news-image {
display: flex;
width: 100%;
border-bottom: 1px solid $off-white;
@include aspect-ratio(16 9);
.card-img-top {
object-fit: cover;
}
}
.grid-card {
height: 100%;
border: none;
&.dark {
.card-body {
background-color: $off-white;
}
}
.card-title {
@include font-scale(24, light);
word-break: break-word;
}
.card-text {
&.date {
.text-muted {
@include font-scale(12, uppercase);
}
}
&.description {
margin-top: calc-rem(20);
@include font-scale(16, light);
word-break: break-word;
::ng-deep em {
font-weight: bold;
font-style: normal;
}
}
}
}
Legend
Html element with directive