[develop | WIP | ADDED]: [DEVELOPMENT ONLY] Added level4 in browse Fields of Science (FoS)
1. smooth-scroll.ts: Get behavior from current navigation > extras > state. 2. fos.component: Display level 4 FoS and handle url fragments and page scrolling accordingly.
This commit is contained in:
parent
c1a8151184
commit
f595ec5035
|
|
@ -36,9 +36,11 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="fos?.length" class="uk-container uk-container-large uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
|
||||
|
||||
<div *ngIf="fos?.length" id="levels" class="uk-container uk-container-large uk-section"
|
||||
uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-slide-bottom-medium; delay: 200">
|
||||
<div class="uk-visible@m">
|
||||
<div uk-sticky="offset: 50;" class="uk-sticky uk-background-default uk-padding uk-padding-remove-bottom uk-padding-remove-horizontal">
|
||||
<div id="keyword_search" uk-sticky="offset: 50;" class="uk-sticky uk-background-default uk-padding uk-padding-remove-bottom uk-padding-remove-horizontal">
|
||||
<div class="uk-flex uk-flex-right uk-margin-small-bottom">
|
||||
<div search-input [searchControl]="keywordControl" [options]="fosOptions" iconPosition="left" placeholder="Write a key word to filter the content"
|
||||
searchInputClass="border-bottom" class="uk-width-large"></div>
|
||||
|
|
@ -53,7 +55,25 @@
|
|||
<ul *ngIf="!keyword" class="uk-tab uk-tab-left">
|
||||
<li *ngFor="let item of fos; index as i" [class.uk-active]="activeSection === item.id"
|
||||
class="uk-margin-small-bottom uk-text-capitalize">
|
||||
<a routerLink="./" [fragment]="item.id">{{item.id}}</a>
|
||||
<a (click)="selectedParentLevels=[]" routerLink="./" [fragment]="item.id">
|
||||
<div>
|
||||
{{item.id}}
|
||||
<ng-container *ngIf="selectedParentLevels.length > 0 && selectedParentLevels[0].id==item.id">
|
||||
<div class="uk-margin-left uk-margin-xsmall-top">
|
||||
<span class="uk-flex uk-flex-middle">
|
||||
<icon [flex]="true" ratio="1" name="subdirectory_arrow_right"></icon>
|
||||
{{selectedParentLevels[1].id}}
|
||||
</span>
|
||||
<div class="uk-margin-left uk-margin-xsmall-top">
|
||||
<span class="uk-flex uk-flex-middle">
|
||||
<icon [flex]="true" ratio="1" name="subdirectory_arrow_right"></icon>
|
||||
{{selectedParentLevels[2].label}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<ul *ngIf="keyword?.length" class="uk-tab uk-tab-left">
|
||||
|
|
@ -91,7 +111,34 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="uk-width-expand@m">
|
||||
<ng-container *ngIf="!keyword">
|
||||
<div *ngIf="!keyword && selectedParentLevels.length > 0" [id]="selectedParentLevels[0].id+'||'+selectedParentLevels[1].code+'||'+selectedParentLevels[2].code">
|
||||
<a (click)="backClicked();"
|
||||
class="uk-button-link uk-flex uk-flex-middle uk-margin-bottom">
|
||||
<icon name="arrow_back" visuallyHidden="back" flex="true" ratio="1"></icon>
|
||||
<span class="uk-margin-small-left">Back</span>
|
||||
</a>
|
||||
<div>
|
||||
<h2 class="uk-h4 uk-text-capitalize uk-margin-remove">
|
||||
<a [routerLink]="properties.searchLinkToResults" [queryParams]="buildFosQueryParam(selectedParentLevels[2])"
|
||||
class="uk-link-text">
|
||||
{{selectedParentLevels[2].label}}
|
||||
</a>
|
||||
</h2>
|
||||
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-xlarge-bottom" uk-grid="masonry: false">
|
||||
<div *ngFor="let level4 of selectedParentLevels[2].children">
|
||||
<div class="uk-text-capitalize">
|
||||
<h3 class="uk-h6 uk-margin-small-bottom">
|
||||
<a [routerLink]="properties.searchLinkToResults" [queryParams]="buildFosQueryParam(level4)"
|
||||
class="uk-link-text">
|
||||
{{level4.label}}
|
||||
</a>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container *ngIf="!keyword && selectedParentLevels.length == 0">
|
||||
<div [id]="item.id" *ngFor="let item of fos; index as i">
|
||||
<div class="uk-text-capitalize">
|
||||
<h2 class="uk-h4 uk-margin-remove">
|
||||
|
|
@ -110,11 +157,50 @@
|
|||
{{child.id}}
|
||||
</a>
|
||||
</h3>
|
||||
<div *ngFor="let subChild of child.children" style="margin-bottom: 5px;">
|
||||
<!-- class="parent uk-transition-toggle" tabindex="0"-->
|
||||
<div *ngFor="let subChild of child.children; let i=index" style="margin-bottom: 7px;"
|
||||
class="uk-flex uk-flex-middle uk-flex-between uk-transition-toggle" tabindex="0">
|
||||
<!-- <span class="uk-flex uk-flex-between">-->
|
||||
<a [routerLink]="properties.searchLinkToResults" [queryParams]="buildFosQueryParam(subChild)"
|
||||
class="uk-link-text">
|
||||
class="uk-link-text uk-width-expand">
|
||||
{{searchFieldsHelper.getFosParameter() == 'foslabel' ? subChild.label : subChild.id}}
|
||||
</a>
|
||||
<span *ngIf="properties.environment == 'development' && subChild.children?.length > 0" (click)="moreClicked(item, child, subChild)"
|
||||
class="uk-transition-fade uk-width-auto uk-flex uk-flex-middle uk-margin-left label4 uk-text-small uk-text-meta">
|
||||
<!-- <a class="view-more-less-link uk-link-text uk-text-lowercase">-->
|
||||
<!-- +{{subChild.children.length}} more-->
|
||||
<!--<!– <icon [flex]="true" ratio="1" name="chevron_right"></icon>–>-->
|
||||
<!-- </a>-->
|
||||
|
||||
<icon [flex]="true" ratio="0.7" name="subdirectory_arrow_right"></icon>
|
||||
<a class="uk-link-text uk-text-lowercase">
|
||||
more
|
||||
</a>
|
||||
</span>
|
||||
|
||||
<!-- <div *ngIf="subChild.children?.length > 0" (click)="selectedParentLevels=[item, child, subChild]"-->
|
||||
<!-- class="uk-flex uk-flex-middle uk-margin-left label4 uk-text-small uk-text-meta">-->
|
||||
<!-- <a class="uk-link-text">{{subChild.children.length}} Subcategories</a>-->
|
||||
<!-- <icon [flex]="true" ratio="1" name="chevron_right"></icon>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- <span *ngIf="subChild?.children?.length > 0" (click)="fosAccordions.set(subChild.id, !fosAccordions.get(subChild.id))" class="uk-accordion-title uk-padding-remove"></span>-->
|
||||
<!-- </span>-->
|
||||
<!-- <div *ngIf="fosAccordions.get(subChild.id)" class="uk-margin-left">-->
|
||||
<!-- <div *ngFor="let level4 of subChild.children" style="margin-bottom: 7px;">-->
|
||||
<!-- <a [routerLink]="properties.searchLinkToResults" [queryParams]="buildFosQueryParam(level4)"-->
|
||||
<!-- class="label4 uk-text-small uk-text-meta">-->
|
||||
<!-- {{searchFieldsHelper.getFosParameter() == 'foslabel' ? level4.label : level4.id}}-->
|
||||
<!-- </a>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
|
||||
<!-- uk-transition-slide-top-->
|
||||
<!-- <div *ngIf="subChild.children?.length > 0" class="uk-transition-slide-top">-->
|
||||
<!-- <div class="child">-->
|
||||
<!-- <a class="uk-link uk-margin-left">{{subChild.children.length}} Subcategories ></a>-->
|
||||
<!-- </div>-->
|
||||
<!-- </div>-->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -137,10 +223,16 @@
|
|||
class="uk-link-text" [innerHTML]="highlightKeyword(subItem.id)">
|
||||
</a>
|
||||
</h3>
|
||||
<div *ngFor="let subSubItem of subItem.children" style="margin-bottom: 5px;">
|
||||
<div *ngFor="let subSubItem of subItem.children" style="margin-bottom: 7px;">
|
||||
<a [routerLink]="properties.searchLinkToResults" [queryParams]="buildFosQueryParam(subSubItem)"
|
||||
class="uk-link-text" [innerHTML]="highlightKeyword(searchFieldsHelper.getFosParameter() == 'foslabel' ? subSubItem.label : subSubItem.id)">
|
||||
</a>
|
||||
|
||||
<div *ngFor="let level4 of subSubItem?.children" class="uk-margin-left">
|
||||
<a [routerLink]="properties.searchLinkToResults" [queryParams]="buildFosQueryParam(level4)"
|
||||
class="uk-text-small uk-text-meta uk-margin-xsmall-bottom" [innerHTML]="highlightKeyword(searchFieldsHelper.getFosParameter() == 'foslabel' ? level4.label : level4.id)">
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import {debounceTime, distinctUntilChanged} from "rxjs/operators";
|
|||
import Timeout = NodeJS.Timeout;
|
||||
import {ISVocabulariesService} from "../utils/staticAutoComplete/ISVocabularies.service";
|
||||
import {SearchFields} from "../utils/properties/searchFields";
|
||||
import {HelperFunctions} from "../utils/HelperFunctions.class";
|
||||
|
||||
declare var UIkit;
|
||||
|
||||
|
|
@ -28,6 +29,8 @@ export class FosComponent implements OnInit, OnDestroy {
|
|||
public url: string = null;
|
||||
public pageTitle: string = "OpenAIRE | Fields of Science";
|
||||
public pageDescription: string = "We have integrated a Field-of-Science (FoS) taxonomy into our dataset to organize and discover research more effectively. Using the full capabilities of the OpenAIRE Graph (full-texts, citations, references, venues) we apply AI and bring forward any multidisciplinarity potential.";
|
||||
public scrollPos = 0;
|
||||
public selectedParentLevels = [];
|
||||
public fos: any[] = [];
|
||||
public fosOptions: string[] = [];
|
||||
public activeSection: string;
|
||||
|
|
@ -82,21 +85,43 @@ export class FosComponent implements OnInit, OnDestroy {
|
|||
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);
|
||||
let splitFragment = this.route.snapshot.fragment.split("||");
|
||||
this.activeSection = this.route.snapshot.fragment.split("||")[0];
|
||||
let i = this.fos.findIndex(item => (item.id == this.route.snapshot.fragment || this.route.snapshot.fragment.startsWith(item.id+"||")));
|
||||
if(i <0 || i>this.fos.length-1) {
|
||||
this._router.navigate(['./'], {fragment: "", relativeTo: this.route, state: {disableScroll: true}});
|
||||
} else {
|
||||
if (splitFragment.length > 1) {
|
||||
let level1 = this.fos[i];
|
||||
let level2 = null;
|
||||
let level3 = null;
|
||||
if (level1.children) {
|
||||
level2 = level1.children.find(item => item.code == splitFragment[1]);
|
||||
if (level2 && level2.children) {
|
||||
level3 = level2.children.find(item => item.code == splitFragment[2]);
|
||||
this.selectedParentLevels = [this.fos[i], level2, level3];
|
||||
}
|
||||
}
|
||||
if(!level2 || !level3) {
|
||||
this._router.navigate(['./'], {fragment: level1.id, relativeTo: this.route, state: {disableScroll: true}});
|
||||
}
|
||||
} else {
|
||||
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;
|
||||
this.activeSection = fragment.split("||")[0];
|
||||
if(this.tabs) {
|
||||
let slider = UIkit.slider(this.tabs.nativeElement);
|
||||
let i = this.fos.findIndex(item => item.id == fragment);
|
||||
let i = this.fos.findIndex(item => (item.id == fragment || fragment.startsWith(item.id+"||")));
|
||||
slider.show(i);
|
||||
}
|
||||
} else {
|
||||
|
|
@ -105,6 +130,9 @@ export class FosComponent implements OnInit, OnDestroy {
|
|||
}));
|
||||
this.keywordControl = this.fb.control('');
|
||||
this.subscriptions.push(this.keywordControl.valueChanges.pipe(debounceTime(500), distinctUntilChanged()).subscribe(value => {
|
||||
if(this.keyword !== undefined || value) {
|
||||
this.selectedParentLevels = [];
|
||||
}
|
||||
this.keyword = value;
|
||||
this.findMatches(this.keyword);
|
||||
if (typeof IntersectionObserver !== 'undefined') {
|
||||
|
|
@ -154,11 +182,16 @@ export class FosComponent implements OnInit, OnDestroy {
|
|||
this.fos.forEach(fos => {
|
||||
this.fosOptions.push(fos.id);
|
||||
if(fos.children) {
|
||||
fos.children.forEach(child => {
|
||||
this.fosOptions.push(child.id);
|
||||
if(child.children) {
|
||||
child.children.forEach(child2 => {
|
||||
this.fosOptions.push(child2.id);
|
||||
fos.children.forEach(l2 => {
|
||||
this.fosOptions.push(l2.id);
|
||||
if(l2.children) {
|
||||
l2.children.forEach(l3 => {
|
||||
this.fosOptions.push(l3.id);
|
||||
if(l3.children) {
|
||||
l3.children.forEach(l4 => {
|
||||
this.fosOptions.push(l4.id);
|
||||
})
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -170,19 +203,29 @@ export class FosComponent implements OnInit, OnDestroy {
|
|||
this.viewResults = JSON.parse(JSON.stringify(this.fos));
|
||||
let matchLevel1: boolean = false;
|
||||
let matchLevel2: boolean = false;
|
||||
let matchLevel3: boolean = false;
|
||||
// 1st level search
|
||||
if(this.viewResults.length) {
|
||||
this.viewResults = this.viewResults.filter(item => {
|
||||
matchLevel1 = !!item.id.includes(value?.toLowerCase());
|
||||
// // 2nd level search
|
||||
// 2nd level search
|
||||
if(item.children?.length && !matchLevel1) {
|
||||
item.children = item.children.filter(subItem => {
|
||||
matchLevel2 = !!subItem.id.includes(value?.toLowerCase());
|
||||
// 3rd level search
|
||||
if(subItem.children?.length && !matchLevel2) {
|
||||
subItem.children = subItem.children.filter(subSubItem => subSubItem.id.includes(value?.toLowerCase()));
|
||||
subItem.children = subItem.children.filter(subSubItem => {
|
||||
matchLevel3 = subSubItem.id.includes(value?.toLowerCase());
|
||||
// 4th level search
|
||||
if(subSubItem.children?.length && !matchLevel3) {
|
||||
subSubItem.children = subSubItem.children.filter(level4Item => {
|
||||
return level4Item.id.toLowerCase().includes(value?.toLowerCase())
|
||||
});
|
||||
}
|
||||
return subItem.children?.length > 0 || matchLevel2;
|
||||
return subSubItem.children?.length > 0 || matchLevel3;
|
||||
});
|
||||
}
|
||||
return subItem.children?.length > 0;
|
||||
});
|
||||
}
|
||||
return item.children?.length > 0;
|
||||
|
|
@ -191,7 +234,7 @@ export class FosComponent implements OnInit, OnDestroy {
|
|||
}
|
||||
|
||||
highlightKeyword(name) {
|
||||
if(name.includes(this.keyword.toLowerCase())) {
|
||||
if(name.toLowerCase().includes(this.keyword.toLowerCase())) {
|
||||
return name.replace(new RegExp(this.keyword, "gi"), (matchedValue) => `<mark class="highlighted">${matchedValue}</mark>`);
|
||||
} else {
|
||||
return name;
|
||||
|
|
@ -221,4 +264,41 @@ export class FosComponent implements OnInit, OnDestroy {
|
|||
// return {'foslabel': this.urlEncodeAndQuote(fos.id+"||"+fos.label)};
|
||||
return (this.searchFieldsHelper.getFosParameter() == 'foslabel' ? ({'foslabel': this.urlEncodeAndQuote(fos.id+"||"+fos.label)}) : ({'fos': this.urlEncodeAndQuote(fos.id)}));
|
||||
}
|
||||
|
||||
public backClicked() {
|
||||
let id = this.selectedParentLevels[0].id;
|
||||
this.selectedParentLevels=[];
|
||||
this.cdr.detectChanges();
|
||||
|
||||
if(this.scrollPos) {
|
||||
HelperFunctions.scrollTo(0, this.scrollPos);
|
||||
this._router.navigate(['./'], {fragment: id, relativeTo: this.route, state: {disableScroll: true}});
|
||||
} else {
|
||||
this._router.navigate(['./'], {
|
||||
fragment: id,
|
||||
relativeTo: this.route,
|
||||
state: {disableScroll: false, behavior: 'auto'}
|
||||
});
|
||||
}
|
||||
|
||||
this.cdr.detectChanges();
|
||||
if (typeof IntersectionObserver !== 'undefined') {
|
||||
setTimeout(() => {
|
||||
this.setObserver();
|
||||
}, 200);
|
||||
}
|
||||
}
|
||||
|
||||
public moreClicked(level1, level2, level3) {
|
||||
this.scrollPos = window.scrollY;
|
||||
|
||||
if(this.observer) {
|
||||
this.observer.disconnect();
|
||||
}
|
||||
this.selectedParentLevels=[level1, level2, level3];
|
||||
this.cdr.detectChanges();
|
||||
this._router.navigate(['./'],
|
||||
{fragment: this.selectedParentLevels[0].id+"||"+this.selectedParentLevels[1].code+"||"+this.selectedParentLevels[2].code,
|
||||
relativeTo: this.route, state: {disableScroll: false, behavior: 'auto'}});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,10 +24,11 @@ export class SmoothScroll {
|
|||
} else if (event instanceof NavigationEnd) {
|
||||
let headerOffset = (this.layoutService.isMobileValue?0:Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'))) + 35;
|
||||
if(!this.router.getCurrentNavigation().extras?.state?.disableScroll) {
|
||||
let behavior = this.router.getCurrentNavigation().extras?.state?.behavior ? this.router.getCurrentNavigation().extras?.state?.behavior : "smooth";
|
||||
if (this.interval) {
|
||||
clearInterval(this.interval);
|
||||
}
|
||||
const fragment = router.parseUrl(router.url).fragment;
|
||||
const fragment = router.parseUrl(routerurl).fragment;
|
||||
if (this.lastComponent !== this.currentComponent) {
|
||||
window.scrollTo({top: 0});
|
||||
}
|
||||
|
|
@ -48,7 +49,7 @@ export class SmoothScroll {
|
|||
} else {
|
||||
clearInterval(interval);
|
||||
const y = element.getBoundingClientRect().top + window.scrollY + yOffset;
|
||||
window.scrollTo({top: y, behavior: 'smooth'});
|
||||
window.scrollTo({top: y, behavior: behavior});
|
||||
}
|
||||
}, 50);
|
||||
}
|
||||
|
|
@ -58,7 +59,7 @@ export class SmoothScroll {
|
|||
}, 100);
|
||||
} else {
|
||||
setTimeout( () => {
|
||||
window.scrollTo({top: 0, behavior: 'smooth'});
|
||||
window.scrollTo({top: 0, behavior: behavior});
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
|
|
@ -77,3 +78,4 @@ export class SmoothScroll {
|
|||
}
|
||||
}
|
||||
}
|
||||
.
|
||||
Loading…
Reference in New Issue