+
+
No results were found.
diff --git a/explore/src/app/fos/fos.component.ts b/explore/src/app/fos/fos.component.ts
index d43eeeda..5e44c821 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";
@@ -12,6 +12,10 @@ import {Location} from "@angular/common";
import {StringUtils} from "../openaireLibrary/utils/string-utils.class";
import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
import {PiwikService} from "../openaireLibrary/utils/piwik/piwik.service";
+import {debounceTime, distinctUntilChanged} from "rxjs/operators";
+import Timeout = NodeJS.Timeout;
+
+declare var UIkit;
@Component({
selector: 'fos',
@@ -25,7 +29,7 @@ export class FosComponent implements OnInit, OnDestroy {
public fos: any[] = [];
public fosOptions: string[] = [];
- public index: number = 0;
+ public activeSection: string;
public keywordControl: UntypedFormControl;
public keyword: string = null;
@@ -36,8 +40,12 @@ export class FosComponent implements OnInit, OnDestroy {
properties: EnvProperties = properties;
public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'Fields of Science'}];
-
- subscriptions: Subscription[] = [];
+
+ private subscriptions: Subscription[] = [];
+ private observer: IntersectionObserver;
+ private timeout: Timeout;
+ @ViewChild('tabs') tabs: ElementRef;
+ public sliderInit: boolean = false;
constructor(
private httpClient: HttpClient,
@@ -48,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() {
@@ -60,15 +69,48 @@ export class FosComponent implements OnInit, OnDestroy {
this.updateUrl(this.url);
this.updateTitle(this.pageTitle);
this.updateDescription(this.pageDescription);
- this.keywordControl = this.fb.control('');
this.httpClient.get(properties.domain+'/assets/vocabulary/fos.json').subscribe(data => {
this.fos = data['fos'];
this.convertFosToOptions();
- this.subscriptions.push(this.route.queryParams.subscribe(params => {
- if(params.keyword) {
- this.keywordControl.setValue(params.keyword);
- this.keyword = this.keywordControl.value;
- this.findMatches();
+ 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;
+ }
+ }));
+ this.keywordControl = this.fb.control('');
+ this.subscriptions.push(this.keywordControl.valueChanges.pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
+ this.keyword = value;
+ this.findMatches(this.keyword);
+ if (typeof document !== 'undefined') {
+ setTimeout(() => {
+ this.setObserver();
+ });
}
}));
});
@@ -78,19 +120,33 @@ export class FosComponent implements OnInit, OnDestroy {
for (let sub of this.subscriptions) {
sub.unsubscribe();
}
- }
-
- changeDisplayedFos(i) {
- this.index = i;
- }
-
- onSubmit() {
- if(this.keywordControl.value) {
- this.keyword = this.keywordControl.value;
- // TODO: router.navigate();
- this.location.go(window.location.pathname + '?keyword=' + this.keyword);
- this.findMatches();
+ if(this.observer) {
+ this.observer.disconnect();
}
+ }
+
+ 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}});
+ }, 200);
+ }
+ });
+ }, {threshold: 0.25, rootMargin: '-100px'});
+ this.fos.forEach(fos => {
+ let element = document.getElementById(fos.id);
+ if(element) {
+ this.observer.observe(element);
+ }
+ });
}
convertFosToOptions() {
@@ -110,29 +166,21 @@ export class FosComponent implements OnInit, OnDestroy {
});
}
- findMatches() {
+ findMatches(value: string) {
this.viewResults = JSON.parse(JSON.stringify(this.fos));
let matchLevel1: boolean = false;
let matchLevel2: boolean = false;
// 1st level search
if(this.viewResults.length) {
this.viewResults = this.viewResults.filter(item => {
- if(item.id.includes(this.keyword.toLowerCase())) {
- matchLevel1 = true;
- } else {
- matchLevel1 = false;
- }
+ matchLevel1 = !!item.id.includes(value?.toLowerCase());
// // 2nd level search
if(item.children?.length && !matchLevel1) {
item.children = item.children.filter(subItem => {
- if(subItem.id.includes(this.keyword.toLowerCase())) {
- matchLevel2 = true;
- } else {
- matchLevel2 = false;
- }
+ matchLevel2 = !!subItem.id.includes(value?.toLowerCase());
// 3rd level search
if(subItem.children?.length && !matchLevel2) {
- subItem.children = subItem.children.filter(subSubItem => subSubItem.id.includes(this.keyword.toLowerCase()));
+ subItem.children = subItem.children.filter(subSubItem => subSubItem.id.includes(value?.toLowerCase()));
}
return subItem.children?.length > 0 || matchLevel2;
});
@@ -150,12 +198,6 @@ export class FosComponent implements OnInit, OnDestroy {
}
}
- clearKeyword() {
- this.keyword = null;
- this.keywordControl.setValue('');
- this.location.go(window.location.pathname);
- }
-
public urlEncodeAndQuote(str: string): string {
return StringUtils.quote(StringUtils.URIEncode(str));
}
diff --git a/explore/src/app/home/home.component.html b/explore/src/app/home/home.component.html
index 45fb8e44..62980d3e 100644
--- a/explore/src/app/home/home.component.html
+++ b/explore/src/app/home/home.component.html
@@ -26,12 +26,12 @@
All linked together through citations and semantics.