diff --git a/explore/src/app/fos/fos.component.ts b/explore/src/app/fos/fos.component.ts
index 0545672a..422149e5 100644
--- a/explore/src/app/fos/fos.component.ts
+++ b/explore/src/app/fos/fos.component.ts
@@ -1,5 +1,5 @@
import {HttpClient} from "@angular/common/http";
-import {Component, OnDestroy, OnInit} from "@angular/core";
+import {ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild} from "@angular/core";
import {Subscription} from "rxjs";
import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
@@ -15,6 +15,8 @@ import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
import {debounceTime, distinctUntilChanged} from "rxjs/operators";
import Timeout = NodeJS.Timeout;
+declare var UIkit;
+
@Component({
selector: 'fos',
templateUrl: 'fos.component.html',
@@ -42,6 +44,8 @@ export class FosComponent implements OnInit, OnDestroy {
private subscriptions: Subscription[] = [];
private observer: IntersectionObserver;
private timeout: Timeout;
+ @ViewChild('tabs') tabs: ElementRef;
+ public sliderInit: boolean = false;
constructor(
private httpClient: HttpClient,
@@ -52,7 +56,8 @@ export class FosComponent implements OnInit, OnDestroy {
private _meta: Meta,
private _title: Title,
private seoService: SEOService,
- private _piwikService: PiwikService
+ private _piwikService: PiwikService,
+ private cdr: ChangeDetectorRef
) {}
ngOnInit() {
@@ -67,9 +72,33 @@ export class FosComponent implements OnInit, OnDestroy {
this.httpClient.get(properties.domain+'/assets/vocabulary/fos.json').subscribe(data => {
this.fos = data['fos'];
this.convertFosToOptions();
+ if (typeof document !== 'undefined') {
+ setTimeout(()=> {
+ let slider = UIkit.slider(this.tabs.nativeElement);
+ slider.clsActive = 'uk-slider-active';
+ slider.updateActiveClasses();
+ this.sliderInit = true;
+ slider.slides.forEach(item => {
+ item.classList.remove('uk-active');
+ });
+ if (this.route.snapshot.fragment) {
+ this.activeSection = this.route.snapshot.fragment;
+ let i = this.fos.findIndex(item => item.id == this.route.snapshot.fragment);
+ slider.show(i);
+ } else {
+ this.activeSection = this.fos[0].id;
+ }
+ this.cdr.detectChanges();
+ });
+ }
this.subscriptions.push(this.route.fragment.subscribe(fragment => {
if(fragment) {
this.activeSection = fragment;
+ if(this.tabs) {
+ let slider = UIkit.slider(this.tabs.nativeElement);
+ let i = this.fos.findIndex(item => item.id == fragment);
+ slider.show(i);
+ }
} else {
this.activeSection = this.fos[0].id;
}
@@ -78,9 +107,11 @@ export class FosComponent implements OnInit, OnDestroy {
this.subscriptions.push(this.keywordControl.valueChanges.pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
this.keyword = value;
this.findMatches(this.keyword);
- setTimeout(() => {
- this.setObserver();
- });
+ if (typeof document !== 'undefined') {
+ setTimeout(() => {
+ this.setObserver();
+ });
+ }
}));
});
}