Merge branch 'new-theme' of code-repo.d4science.org:MaDgIK/openaire-library into new-theme

searchPages/searchUtils/newSearchPage.component.ts

@@ -58,7 +58,7 @@ export class NewSearchPageComponent {
   @Input() customFilter: SearchCustomFilter;
   @Input() sort: boolean = true;
   @Input() sortedByChanged: string = "";
-  @Input() searchFormClass: string = "uk-background-muted";
+  @Input() searchFormClass: string = "searchForm";
   //From simple:
   @Input() rangeFilters: RangeFilter[] = [];
   @Input() rangeFields: string[][] = [];

utils/section-scroll/section-scroll.component.ts

@@ -1,4 +1,4 @@
-import {Component, HostListener, Input, OnInit, ViewEncapsulation} from "@angular/core";
+import {AfterViewInit, Component, Input, ViewEncapsulation} from "@angular/core";
 
 
 /**
@@ -26,22 +26,25 @@ import {Component, HostListener, Input, OnInit, ViewEncapsulation} from "@angula
   styleUrls: ['section-scroll.component.css'],
   encapsulation: ViewEncapsulation.None
 })
-export class SectionScrollComponent implements OnInit {
+export class SectionScrollComponent implements AfterViewInit {
   
   @Input()
   public customClass = null;
   @Input()
   public childrenCustomClass = null;
-  private absolute: HTMLCollectionOf<Element>;
+  @Input()
-  private scroll: HTMLElement;
+  public animationSteps: number = 20;
-
   private observer: IntersectionObserver = null;
+  /**
+   * Define as keys the ids of elements in scroll section and as values the ids of left section
+   * */
+  @Input()
+  private map: Map<string, string> = null;
+  private left: Map<string, HTMLElement> = new Map<string, HTMLElement>();
+  private scroll: Map<string, HTMLElement> = new Map<string, HTMLElement>();
+  private lastElementId: string = null;
   
-  constructor() {}
+  constructor() {
-
-  @HostListener('window:resize', ['$event'])
-  onResize(event) {
-    //this.setHeight();
   }
   
   ngOnDestroy() {
@@ -50,80 +53,56 @@ export class SectionScrollComponent implements OnInit {
     }
   }
   
-  ngOnInit() {
-    //this.setHeight();
-  }
-
-  setHeight() {
-    if(typeof document !== "undefined") {
-      // this.absolute = document.querySelector('[absolute]');
-      this.absolute = document.getElementsByClassName('absolute');
-      this.scroll = document.querySelector('[scroll]');
-      this.scroll.setAttribute('style','max-height: ' + this.height + 'px;');
-
-    }
-  }
-  
-  get height():number {
-    let htmlElement = this.absolute&&this.absolute.length>0?this.absolute[0]:null;
-    return htmlElement?htmlElement['offsetHeight']:0;
-  }
-
   ngAfterViewInit() {
-    if(typeof document !== "undefined") {
+    if (typeof document !== "undefined" && this.map) {
       this.createObserver();
     }
   }
   
   createObserver() {
     let observer;
-
     let options = {
       root: null,
       rootMargin: "-20%",
       threshold: this.buildThresholdList()
     };
-
+    Array.from(this.map.values()).forEach(value => {
-    let imgElement1: HTMLElement = document.getElementById("imgId1");
+      this.left.set(value, document.getElementById(value));
-    let imgElement2: HTMLElement = document.getElementById("imgId2");
+      this.left.get(value).style.display = 'none';
-    let imgElement3: HTMLElement = document.getElementById("imgId3");
+    })
-    let imgElement4: HTMLElement = document.getElementById("imgId4");
+    Array.from(this.map.keys()).forEach(key => {
-    let imgElement5: HTMLElement = document.getElementById("imgId5");
+      this.scroll.set(key, document.getElementById(key));
-
+    })
     observer = new IntersectionObserver(entries => {
       entries.forEach((entry) => {
-        entry.target['style'].opacity = entry.intersectionRatio;
+        entry.target['style'].opacity = String(entry.intersectionRatio);
-
+        let id = this.map.get(entry.target.id);
-        if (entry.target.id == "1st") {
+        if (this.left.has(id) && this.lastElementId !== id) {
-          imgElement1.parentElement.style.opacity = String(entry.intersectionRatio);
+          if(entry.isIntersecting) {
-        } else if (entry.target.id == "2nd") {
+            this.lastElementId = id;
-          imgElement2.parentElement.style.opacity = String(entry.intersectionRatio);
+            Array.from(this.left.keys()).forEach(element => {
-        } else if (entry.target.id == "3rd") {
+              if (element !== id) {
-          imgElement3.parentElement.style.opacity = String(entry.intersectionRatio);
+                this.left.get(element).style.display = 'none';
-        } else if (entry.target.id == "4th") {
+              } else {
-          imgElement4.parentElement.style.opacity = String(entry.intersectionRatio);
+                this.left.get(element).style.display = 'block';
-        } else if (entry.target.id == "5th") {
+              }
-          imgElement5.parentElement.style.opacity = String(entry.intersectionRatio);
+            });
+          }
+          // this.left.get(id).parentElement.style.opacity = String(entry.intersectionRatio);
         }
       });
     }, options);
-
+    Array.from(this.scroll.values()).forEach(target => {
-    let targets: NodeListOf<HTMLElement> = document.getElementsByName('txt');
-    targets.forEach(target =>
-    {
       observer.observe(target)
     });
   }
   
   buildThresholdList() {
     let thresholds = [];
-    let numSteps = 20;
+    for (let i = 1.0; i <= this.animationSteps; i++) {
-
+      let ratio = i / this.animationSteps;
-    for (let i=1.0; i<=numSteps; i++) {
-      let ratio = i/numSteps;
       thresholds.push(ratio);
     }
-
     thresholds.push(0);
     return thresholds;
   }