[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.

fos/fos.component.html

@@ -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-->
+<!--&lt;!&ndash;                          <icon [flex]="true" ratio="1" name="chevron_right"></icon>&ndash;&gt;-->
+<!--                        </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>

fos/fos.component.ts

@@ -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 splitFragment = this.route.snapshot.fragment.split("||");
-						let i = this.fos.findIndex(item => item.id == this.route.snapshot.fragment);
+						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 => {
+				fos.children.forEach(l2 => {
-					this.fosOptions.push(child.id);
+					this.fosOptions.push(l2.id);
-					if(child.children) {
+					if(l2.children) {
-						child.children.forEach(child2 => {
+						l2.children.forEach(l3 => {
-							this.fosOptions.push(child2.id);
+							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'}});
+  }
 }

utils/smooth-scroll.ts

@@ -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 {
     }
   }
 }
+.