File
Implements
Metadata
| selector |
tc-tibco-cloud-video-carousel |
| styleUrls |
./tibco-cloud-video-carousel.component.css |
| templateUrl |
./tibco-cloud-video-carousel.component.html |
Index
Properties
|
|
|
Methods
|
|
|
Accessors
|
|
|
Methods
|
ngAfterContentInit
|
ngAfterContentInit()
|
|
|
|
|
|
setSelectedIdx
|
setSelectedIdx(idx: number)
|
|
|
Parameters :
| Name |
Type |
Optional |
| idx |
number
|
No
|
|
|
container
|
Decorators :
@ViewChild('customTemplateContainer', {read: ViewContainerRef})
|
|
|
|
idx
|
Type : number
|
Default value : 0
|
|
|
import {AfterContentInit, Component, ContentChildren, ViewChild, OnInit, QueryList, ViewContainerRef} from '@angular/core';
import {TibcoCloudVideoComponent} from '../tibco-cloud-video/tibco-cloud-video.component';
@Component({
selector: 'tc-tibco-cloud-video-carousel',
templateUrl: './tibco-cloud-video-carousel.component.html',
styleUrls: ['./tibco-cloud-video-carousel.component.css']
})
export class TibcoCloudVideoCarouselComponent implements OnInit, AfterContentInit {
constructor() { }
@ContentChildren(TibcoCloudVideoComponent) carouselItems: QueryList<TibcoCloudVideoComponent>;
@ViewChild('customTemplateContainer', { read: ViewContainerRef }) container;
currentVideo: TibcoCloudVideoComponent;
videos: TibcoCloudVideoComponent[];
idx: number = 0;
ngOnInit(): void {
}
ngAfterContentInit(): void {
if (this.carouselItems && this.carouselItems.length > 0) {
this.videos = this.carouselItems.toArray();
this.videos[this.idx].visible = true;
}
}
get last() {
if (this.idx === (this.videos.length - 1)) {
return true;
} else {
return false;
}
}
get first() {
return this.idx === 0;
}
next() {
if (this.idx < (this.videos.length - 1)) {
this.videos[this.idx].visible = false;
this.videos[this.idx].playing = false;
this.idx++;
this.videos[this.idx].visible = true;
}
}
previous() {
if (this.idx !== 0) {
this.videos[this.idx].visible = false;
this.videos[this.idx].playing = false;
this.idx--;
this.videos[this.idx].visible = true;
}
}
setSelectedIdx(idx: number) {
if (idx !== this.idx) {
this.videos[this.idx].visible = false;
this.videos[this.idx].playing = false;
this.idx = idx;
this.videos[this.idx].visible = true;
}
}
}
<div class="tibco-cloud-carousel" *ngIf="videos && videos.length > 0">
<!--div class="prev">
<mat-icon svgIcon="ic-help-right-chevron" class="carousel-ctrl prev-icon" [ngClass]="{'first': first}" (click)="previous()"></mat-icon>
</div-->
<div class="cards-container">
<ng-content></ng-content>
</div>
<div class="video-selector">
<div class="video-navigator-control" [ngClass]="{'first': first}" (click)="previous()">
<mat-icon svgIcon="ic-help-left-chevron" class="carousel-ctrl prev-icon"></mat-icon>
<span>Previous</span>
</div>
<div class="video-selection-indicator">
<mat-icon *ngFor="let video of videos; let videoIndex = index" [svgIcon]="videoIndex === idx ? 'ic-oval-filled' : 'ic-oval-clear'" [ngClass]="{'current': idx === videoIndex}" (click)="setSelectedIdx(videoIndex)"></mat-icon>
</div>
<div class="video-navigator-control justify-end" [ngClass]="{'last': last}" (click)="next()">
<span>Next</span>
<mat-icon svgIcon="ic-help-right-chevron" class="carousel-ctrl next-icon"></mat-icon>
</div>
</div>
<!--div class="next">
<mat-icon svgIcon="ic-help-right-chevron" class="carousel-ctrl next-icon" [ngClass]="{'last': last}" (click)="next()"></mat-icon>
</div-->
</div>
.tibco-cloud-carousel {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 15px;
margin-bottom: 15px;
}
.cards-container {
align-self: stretch;
}
.carousel-ctrl {
min-height: 14px;
min-width: 9px;
max-height: 14px;
max-width: 9px;
align-self: center;
margin: 8px;
}
::ng-deep .carousel-ctrl svg {
fill: #0081cb;
}
.video-navigator-control.first span {
color: grey;
}
::ng-deep .video-navigator-control.first svg > g > g {
fill: grey;
}
.video-navigator-control.last span {
color: grey;
}
::ng-deep .video-navigator-control.last svg > g > g {
fill: grey;
}
.carousel-ctrl:hover {
cursor: pointer;
}
.carousel-ctrl.first:hover {
cursor: auto;
}
.carousel-ctrl.last:hover {
cursor: auto;
}
.prev-icon {
}
.video-navigator-control:hover {
cursor: pointer;
}
.video-navigator-control.justify-end {
justify-content: flex-end;
}
.video-navigator-control {
display: flex;
flex-direction: row;
width: 114px;
max-width: 114px;
min-width: 114px;
align-items: center;
}
.video-navigator-control > span {
color: #0180CC;
font-family: "Source Sans Pro";
font-size: 16px;
font-weight: 600;
letter-spacing: 0;
line-height: 20px;
}
.video-selection-indicator {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
}
.video-selection-indicator > mat-icon:hover {
cursor: pointer;
}
.video-selection-indicator > mat-icon.current:hover {
cursor: auto;
}
.video-selection-indicator > mat-icon {
height: 9px;
width: 9px;
margin-left: 3px;
margin-right: 3px;
}
.video-selector {
display: flex;
flex-direction: row;
justify-content: space-between;
align-self: center;
margin: 10px;
max-width: 336px;
width: 336px;
min-width: 336px;
max-height: 24px;
height: 24px;
min-height: 24px;
}
Legend
Html element with directive