Fos: Change search-modifier, make some page alignments and add observer to handle scroll
This commit is contained in:
parent
98effe34a0
commit
dc1f947d7a
|
@ -1,16 +1,15 @@
|
|||
import {NgModule} from '@angular/core';
|
||||
import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
|
||||
import {RouterModule, Routes} from '@angular/router';
|
||||
import {OpenaireErrorPageComponent} from './error/errorPage.component';
|
||||
import {PageURLResolverComponent} from "./openaireLibrary/utils/pageURLResolver.component";
|
||||
|
||||
const routes: Routes = [
|
||||
// Other Pages
|
||||
{path: '', loadChildren: () => import('./home/home.module').then(m => m.HomeModule)},
|
||||
//{ path: 'home', loadChildren: './home/home.module#HomeModule'},
|
||||
{path: 'home', redirectTo: '', pathMatch: 'full'},
|
||||
{path: 'mail-preferences', loadChildren: () => import('./userEmailPreferences/mailPrefs.module').then(m => m.LibMailPrefsModule)},
|
||||
{path: 'sdgs', loadChildren: () => import('./sdg/sdg.module').then(m => m.SdgModule)},
|
||||
{path: 'fields-of-science', loadChildren: () => import('./fos/fos.module').then(m => m.FosModule)},
|
||||
{path: 'fields-of-science', loadChildren: () => import('./fos/fos.module').then(m => m.FosModule), data: {extraOffset: 100}},
|
||||
{path: 'contact-us', loadChildren: () => import('./contact/contact.module').then(m => m.ContactModule)},
|
||||
// ORCID Pages
|
||||
{path: 'orcid', loadChildren: () => import('./orcid/orcid.module').then(m => m.LibOrcidModule)},
|
||||
|
|
|
@ -39,15 +39,15 @@
|
|||
<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 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" placeholder="Search"
|
||||
class="uk-width-large"></div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<ng-container>
|
||||
<div class="uk-margin-top uk-padding-small">
|
||||
<div id="parentContainer" class="uk-grid uk-grid-large" uk-grid>
|
||||
<div class="uk-width-1-4">
|
||||
<div class="uk-sticky" uk-sticky="bottom: !#parentContainer; offset: 150;">
|
||||
<div class="uk-sticky" uk-sticky="bottom: !#parentContainer; offset: 200;">
|
||||
<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">
|
||||
|
@ -73,9 +73,9 @@
|
|||
</a>
|
||||
</h2>
|
||||
</div>
|
||||
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-medium-bottom" uk-grid="masonry: false">
|
||||
<div class="uk-grid uk-child-width-1-3 uk-margin-large-top uk-margin-xlarge-bottom" uk-grid="masonry: false">
|
||||
<div *ngFor="let child of item.children">
|
||||
<div class="whole-child uk-text-capitalize">
|
||||
<div class="uk-text-capitalize">
|
||||
<h3 class="uk-h6 uk-margin-small-bottom">
|
||||
<a [routerLink]="properties.searchLinkToResults" [queryParams]="{'fos': urlEncodeAndQuote(child.id)}"
|
||||
class="uk-link-text">
|
||||
|
|
|
@ -13,6 +13,7 @@ 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;
|
||||
|
||||
@Component({
|
||||
selector: 'fos',
|
||||
|
@ -38,7 +39,9 @@ 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;
|
||||
|
||||
constructor(
|
||||
private httpClient: HttpClient,
|
||||
|
@ -75,6 +78,9 @@ 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();
|
||||
});
|
||||
}));
|
||||
});
|
||||
}
|
||||
|
@ -83,6 +89,33 @@ export class FosComponent implements OnInit, OnDestroy {
|
|||
for (let sub of this.subscriptions) {
|
||||
sub.unsubscribe();
|
||||
}
|
||||
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() {
|
||||
|
@ -109,19 +142,11 @@ export class FosComponent implements OnInit, OnDestroy {
|
|||
// 1st level search
|
||||
if(this.viewResults.length) {
|
||||
this.viewResults = this.viewResults.filter(item => {
|
||||
if(item.id.includes(value?.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(value?.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(value?.toLowerCase()));
|
||||
|
|
|
@ -1 +1 @@
|
|||
Subproject commit d6c54949df4c0106ad0f290fcc1c245a9324015d
|
||||
Subproject commit 09706515ba1feb0d44c02485bee9782f63a5978f
|
|
@ -1 +1 @@
|
|||
Subproject commit 8bb758b340d05b50b65da48863ff7ed69fdc122b
|
||||
Subproject commit f2d544d4f1ec152db80528be300f0936add71190
|
Loading…
Reference in New Issue