79 lines
2.4 KiB
TypeScript
79 lines
2.4 KiB
TypeScript
import {AfterContentInit, Component, ContentChildren, Input, OnDestroy, QueryList} from '@angular/core';
|
|
import {SliderItemComponent} from "./slider-item.component";
|
|
import {SliderNavItemComponent} from "./slider-nav-item.component";
|
|
import {SliderContainerComponent} from "./slider-container.component";
|
|
import {LayoutService} from "../../dashboard/sharedComponents/sidebar/layout.service";
|
|
import {Subscriber} from "rxjs";
|
|
|
|
@Component({
|
|
selector: 'slider-column',
|
|
template: `
|
|
<div class="uk-position-relative">
|
|
<ng-content></ng-content>
|
|
</div>
|
|
`
|
|
})
|
|
export class SliderColumnComponent implements AfterContentInit, OnDestroy {
|
|
@Input()
|
|
type: 'slider' | 'nav' = null;
|
|
@Input()
|
|
animation = null;
|
|
@ContentChildren(SliderItemComponent) items: QueryList<SliderItemComponent>;
|
|
@ContentChildren(SliderNavItemComponent) navItems: QueryList<SliderNavItemComponent>;
|
|
public isMobile: boolean;
|
|
private subscriptions: any[] = [];
|
|
|
|
constructor(private layoutService: LayoutService) {
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
this.subscriptions.forEach(value => {
|
|
if (value instanceof Subscriber) {
|
|
value.unsubscribe();
|
|
}
|
|
});
|
|
}
|
|
|
|
ngAfterContentInit() {
|
|
if (this.animation) {
|
|
this.slides.forEach(slide => {
|
|
slide.init(this.animation);
|
|
});
|
|
this.navItems.forEach(slide => {
|
|
slide.init(this.animation);
|
|
});
|
|
}
|
|
this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
|
|
this.isMobile = isMobile;
|
|
}));
|
|
}
|
|
|
|
change(time: number) {
|
|
if (this.type === 'slider') {
|
|
let slides = this.slides;
|
|
for (let i = 0; i < slides.length; i++) {
|
|
slides[i].setActive(slides[i].start <= time && (!slides[i + 1] || slides[i + 1].start > time));
|
|
}
|
|
}
|
|
if (this.type === 'nav') {
|
|
let slides = this.navItems;
|
|
for (let i = 0; i < slides.length; i++) {
|
|
slides.get(i).setActive(!this.isMobile || (slides.get(i).start <= time && (!slides.get(i + 1) || slides.get(i + 1).start > time)));
|
|
slides.get(i).active = slides.get(i).start <= time && (!slides.get(i + 1) || slides.get(i + 1).start > time);
|
|
}
|
|
}
|
|
}
|
|
|
|
setContainer(container: SliderContainerComponent) {
|
|
if (this.type === 'nav') {
|
|
this.navItems.forEach(item => {
|
|
item.container = container;
|
|
});
|
|
}
|
|
}
|
|
|
|
get slides(): SliderItemComponent[] {
|
|
return this.items.filter(item => item.type === 'slide');
|
|
}
|
|
}
|