import { AfterViewInit, ChangeDetectorRef, Component, ContentChildren, ElementRef, EventEmitter, Input, OnDestroy, Output, QueryList, ViewChild } from "@angular/core"; import {SliderTabComponent} from "./slider-tab.component"; import {ActivatedRoute, Router} from "@angular/router"; import {Subscription} from "rxjs"; import Timeout = NodeJS.Timeout; declare var UIkit; @Component({ selector: 'slider-tabs', template: `
`, }) export class SliderTabsComponent implements AfterViewInit, OnDestroy { /** * Type of tabs: * Static = Uikit tabs with @connect class or selector * Dynamic = Active is defined by tabComponent's active Input * Scrollable = Active is defined by the active fragment of URL and position of scroll * */ @Input() public type: 'static' | 'dynamic' | 'scrollable' = 'static'; /** * Connect selector in static type. Default: .uk-switcher * */ @Input() public connect = '.uk-switcher'; /** * Threshold between 0.0 to 1.0 for Intersection Observer * */ @Input() public scrollThreshold = 0.1; /** * Tabs view: Horizontal is the default. * */ @Input() public position: 'horizontal' | 'left' | 'right' = 'horizontal'; /** * Tabs flex position: Left is the default. * */ @Input() public flexPosition: 'center' | 'left' | 'right' = 'left'; /** * Set a class for the container * */ @Input() public containerClass: string; /** * Set a class above tabs * */ @Input() public customClass: string; /** * Tabs class * */ @Input() public tabsClass: string = 'uk-tab'; @Input() public border: boolean = true; @Input() public arrows: boolean = true; @ContentChildren(SliderTabComponent) tabs: QueryList; @ViewChild('sliderElement') sliderElement: ElementRef; @ViewChild('tabsElement') tabsElement: ElementRef; private slider; /** * Notify regarding new active element * */ @Output() activeEmitter: EventEmitter = new EventEmitter(); private activeIndex: number = 0; private subscriptions: any[] = []; private observer: IntersectionObserver; private timeout: Timeout; constructor(private route: ActivatedRoute, private router: Router, private cdr: ChangeDetectorRef) { } ngAfterViewInit() { this.initTabs(); this.tabs.changes.subscribe(() => { this.initTabs(); }); } public initTabs() { if (typeof document !== 'undefined' && this.tabs.length > 0) { setTimeout(() => { if (this.position === 'horizontal') { this.slider = UIkit.slider(this.sliderElement.nativeElement, {finite: true}); this.slider.clsActive = 'uk-slider-active'; this.slider.updateActiveClasses(); this.slider.slides.forEach((item, index) => { if(!this.tabs.get(index).active) { item.classList.remove('uk-active'); } }); if (this.type === 'static') { let tabs = UIkit.switcher(this.tabsElement.nativeElement, {connect: this.connect}); tabs.show(this.activeIndex); if (this.connect.includes('#')) { this.scrollToStart(); } } else if(this.type =='dynamic') { this.activeIndex = this.tabs.toArray().findIndex(tab => tab.active); this.slider.show(this.activeIndex); } else if (this.type === 'scrollable') { this.scrollable(this.slider); } } else { this.scrollable(); } }); } } private scrollToStart() { this.subscriptions.push(UIkit.util.on(this.connect, 'shown', (event): void => { let index = event.detail[0].index(); if (index !== this.activeIndex) { this.activeIndex = index; this.router.navigate(['./'], {relativeTo: this.route, fragment: this.connect.replace('#', ''), queryParamsHandling: "merge"}); } })); } private scrollable(slider = null) { this.activeFragment(this.route.snapshot.fragment, slider); this.subscriptions.push(this.route.fragment.subscribe(fragment => { this.activeFragment(fragment, slider); })); this.setObserver(); } private setObserver() { if (this.observer) { this.observer.disconnect(); } this.observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { if (this.timeout) { clearTimeout(this.timeout); } this.timeout = setTimeout(() => { this.router.navigate(['./'], { fragment: entry.target.id, relativeTo: this.route, state: {disableScroll: true}, queryParamsHandling: 'merge' }); }, 200); } }); }, {threshold: 0.1}); this.tabs.forEach(tab => { let element = document.getElementById(tab.id); if (element) { this.observer.observe(element); } }); } public showActive(index) { this.activeIndex = index; this.activeEmitter.emit(this.tabs.get(this.activeIndex).id); if(this.slider) { this.slider.show(this.activeIndex); } } private activeFragment(fragment, slider) { let index = 0; if (fragment) { index = this.tabs.toArray().findIndex(item => item.id == fragment); } if (slider) { slider.show(index); } this.tabs.forEach((tab, i) => { if (index === i) { tab.active = true; this.activeEmitter.emit(tab.id); } else { tab.active = false; } }); this.cdr.detectChanges(); } get leftTabs(): SliderTabComponent[] { return this.tabs.toArray().filter(tab => tab.align === 'left'); } get rightTabs(): SliderTabComponent[] { return this.tabs.toArray().filter(tab => tab.align === 'right'); } ngOnDestroy() { this.subscriptions.forEach(subscription => { if (subscription instanceof Subscription) { subscription.unsubscribe(); } else if (subscription instanceof Function) { subscription(); } }); if (this.observer) { this.observer.disconnect(); } } }