From 55bd190ec8f21923addcfcbefd82669a29679ae7 Mon Sep 17 00:00:00 2001 From: Alex Martzios Date: Tue, 18 Oct 2022 15:31:37 +0300 Subject: [PATCH] FOS page: add horizontal navigation tabs for mobile/tablet --- explore/src/app/fos/fos.component.html | 38 ++++++++++++++++++++---- explore/src/app/fos/fos.component.ts | 41 ++++++++++++++++++++++---- 2 files changed, 69 insertions(+), 10 deletions(-) diff --git a/explore/src/app/fos/fos.component.html b/explore/src/app/fos/fos.component.html index 92648243..cbdc1f98 100644 --- a/explore/src/app/fos/fos.component.html +++ b/explore/src/app/fos/fos.component.html @@ -37,16 +37,18 @@
-
-
-
+
+
+
+
+
-
+
+
+
+
+
+
+
+
+ + +
+ + +
+
+
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(); + }); + } })); }); }