From fde83755242bebb7d4cecb29bfb7f0cc127ed2e4 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Mon, 21 Feb 2022 16:33:02 +0200 Subject: [PATCH 1/2] Make a map for dynamic contect in left and scroll section --- .../section-scroll.component.ts | 105 +++++++----------- 1 file changed, 42 insertions(+), 63 deletions(-) diff --git a/utils/section-scroll/section-scroll.component.ts b/utils/section-scroll/section-scroll.component.ts index 64d40d9a..12f1267d 100644 --- a/utils/section-scroll/section-scroll.component.ts +++ b/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,104 +26,83 @@ 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; - private scroll: HTMLElement; - + @Input() + public animationSteps: number = 20; private observer: IntersectionObserver = null; - - constructor() {} - - @HostListener('window:resize', ['$event']) - onResize(event) { - //this.setHeight(); + /** + * Define as keys the ids of elements in scroll section and as values the ids of left section + * */ + @Input() + private map: Map = null; + private left: Map = new Map(); + private scroll: Map = new Map(); + private lastElementId: string = null; + + constructor() { } ngOnDestroy() { - if(this.observer) { + if (this.observer) { this.observer.disconnect(); } } - - 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() }; - - let imgElement1: HTMLElement = document.getElementById("imgId1"); - let imgElement2: HTMLElement = document.getElementById("imgId2"); - let imgElement3: HTMLElement = document.getElementById("imgId3"); - let imgElement4: HTMLElement = document.getElementById("imgId4"); - let imgElement5: HTMLElement = document.getElementById("imgId5"); - + Array.from(this.map.values()).forEach(value => { + this.left.set(value, document.getElementById(value)); + this.left.get(value).style.display = 'none'; + }) + Array.from(this.map.keys()).forEach(key => { + this.scroll.set(key, document.getElementById(key)); + }) observer = new IntersectionObserver(entries => { entries.forEach((entry) => { - entry.target['style'].opacity = entry.intersectionRatio; - - if (entry.target.id == "1st") { - imgElement1.parentElement.style.opacity = String(entry.intersectionRatio); - } else if (entry.target.id == "2nd") { - imgElement2.parentElement.style.opacity = String(entry.intersectionRatio); - } else if (entry.target.id == "3rd") { - imgElement3.parentElement.style.opacity = String(entry.intersectionRatio); - } else if (entry.target.id == "4th") { - imgElement4.parentElement.style.opacity = String(entry.intersectionRatio); - } else if (entry.target.id == "5th") { - imgElement5.parentElement.style.opacity = String(entry.intersectionRatio); + entry.target['style'].opacity = String(entry.intersectionRatio); + let id = this.map.get(entry.target.id); + if (this.left.has(id) && this.lastElementId !== id) { + if(entry.isIntersecting) { + this.lastElementId = id; + Array.from(this.left.keys()).forEach(element => { + if (element !== id) { + this.left.get(element).style.display = 'none'; + } else { + this.left.get(element).style.display = 'block'; + } + }); + } + // this.left.get(id).parentElement.style.opacity = String(entry.intersectionRatio); } }); }, options); - - let targets: NodeListOf = document.getElementsByName('txt'); - targets.forEach(target => - { + Array.from(this.scroll.values()).forEach(target => { observer.observe(target) }); } - + buildThresholdList() { let thresholds = []; - let numSteps = 20; - - for (let i=1.0; i<=numSteps; i++) { - let ratio = i/numSteps; + for (let i = 1.0; i <= this.animationSteps; i++) { + let ratio = i / this.animationSteps; thresholds.push(ratio); } - thresholds.push(0); return thresholds; } From 94519de68b284f1ef4014d0eaebf02ea9ba819d6 Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Mon, 21 Feb 2022 16:34:43 +0200 Subject: [PATCH 2/2] Search page: Change form class back to searchForm --- searchPages/searchUtils/newSearchPage.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/searchPages/searchUtils/newSearchPage.component.ts b/searchPages/searchUtils/newSearchPage.component.ts index f960c800..e82b7f66 100644 --- a/searchPages/searchUtils/newSearchPage.component.ts +++ b/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[][] = [];