MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make a map for dynamic contect in left and scroll section

This commit is contained in:
Konstantinos Triantafyllou 2022-02-21 16:33:02 +02:00
parent 5a69cb2101
commit fde8375524
1 changed files with 42 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
utils/section-scroll/section-scroll.component.ts
View File

@ -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<Element>;
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<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() {
}
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<HTMLElement> = 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;
}