52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
|
import {AfterViewInit, Component, ElementRef, Input, ViewChild} from "@angular/core";
|
||
|
|
import {ActivatedRoute} from "@angular/router";
|
||
|
|
import {SliderContainerComponent} from "./slider-container.component";
|
||
|
|
import {SliderItemComponent} from "./slider-item.component";
|
||
|
|
|
||
|
|
export interface Link {
|
||
|
|
routerLink?: {
|
||
|
|
commands: string[] | string,
|
||
|
|
queryParams?: Object,
|
||
|
|
fragment?: string,
|
||
|
|
relativeTo?: ActivatedRoute
|
||
|
|
}
|
||
|
|
href?: string
|
||
|
|
external?: boolean
|
||
|
|
}
|
||
|
|
|
||
|
|
@Component({
|
||
|
|
selector: 'slider-nav-item',
|
||
|
|
template: `
|
||
|
|
<div *ngIf="container" (click)="container.start(start)" class="uk-flex uk-flex-middle" [class.uk-active]="active">
|
||
|
|
<div class="uk-width-expand">
|
||
|
|
<ng-content></ng-content>
|
||
|
|
</div>
|
||
|
|
<div *ngIf="link" class="action">
|
||
|
|
<a *ngIf="link?.routerLink" #linkElement class="uk-text-decoration-none" [routerLink]="link.routerLink.commands" [queryParams]="link.routerLink.queryParams"
|
||
|
|
[fragment]="link.routerLink.fragment" [relativeTo]="link.routerLink.relativeTo" [target]="link.external?'_blank':'_self'">
|
||
|
|
<icon name="chevron_right" ratio="1.5" [flex]="true"></icon>
|
||
|
|
</a>
|
||
|
|
<a *ngIf="link?.href" #linkElement [href]="link.href" class="uk-text-decoration-none" [target]="link.external?'_blank':'_self'">
|
||
|
|
<icon name="chevron_right" ratio="1.5" [flex]="true"></icon>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
})
|
||
|
|
export class SliderNavItemComponent extends SliderItemComponent implements AfterViewInit {
|
||
|
|
@Input()
|
||
|
|
link: Link = null;
|
||
|
|
@Input()
|
||
|
|
start: number;
|
||
|
|
active: boolean = false;
|
||
|
|
container: SliderContainerComponent;
|
||
|
|
background: string;
|
||
|
|
@ViewChild('linkElement') linkElement: ElementRef;
|
||
|
|
|
||
|
|
ngAfterViewInit() {
|
||
|
|
if(this.linkElement) {
|
||
|
|
this.linkElement.nativeElement.style.background = this.background;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|