Slider tabs: Fix initialization.

This commit is contained in:
Konstantinos Triantafyllou 2023-07-19 14:09:10 +03:00
parent 9855f5c179
commit 584f1d22f8
1 changed files with 34 additions and 29 deletions

View File

@ -145,38 +145,43 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
} }
ngAfterViewInit() { ngAfterViewInit() {
this.tabs.changes.subscribe(tabs => { this.initTabs();
if (typeof document !== 'undefined' && this.tabs.length > 0) { this.tabs.changes.subscribe(() => {
setTimeout(() => { this.initTabs();
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.tab(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();
}
});
}
}); });
} }
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.tab(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() { private scrollToStart() {
this.subscriptions.push(UIkit.util.on(this.connect, 'shown', (event): void => { this.subscriptions.push(UIkit.util.on(this.connect, 'shown', (event): void => {
let index = event.detail[0].index(); let index = event.detail[0].index();