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'], styleUrls: ['section-scroll.component.css'],
encapsulation: ViewEncapsulation.None encapsulation: ViewEncapsulation.None
}) })
export class SectionScrollComponent implements OnInit { export class SectionScrollComponent implements AfterViewInit {
@Input() @Input()
public customClass = null; public customClass = null;
@Input() @Input()
public childrenCustomClass = null; public childrenCustomClass = null;
private absolute: HTMLCollectionOf<Element>; @Input()
private scroll: HTMLElement; public animationSteps: number = 20;
private observer: IntersectionObserver = null; private observer: IntersectionObserver = null;
/**
constructor() {} * Define as keys the ids of elements in scroll section and as values the ids of left section
* */
@HostListener('window:resize', ['$event']) @Input()
onResize(event) { private map: Map<string, string> = null;
//this.setHeight(); private left: Map<string, HTMLElement> = new Map<string, HTMLElement>();
private scroll: Map<string, HTMLElement> = new Map<string, HTMLElement>();
private lastElementId: string = null;
constructor() {
} }
ngOnDestroy() { ngOnDestroy() {
if(this.observer) { if (this.observer) {
this.observer.disconnect(); 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() { ngAfterViewInit() {
if(typeof document !== "undefined") { if (typeof document !== "undefined" && this.map) {
this.createObserver(); this.createObserver();
} }
} }
createObserver() { createObserver() {
let observer; let observer;
let options = { let options = {
root: null, root: null,
rootMargin: "-20%", rootMargin: "-20%",
threshold: this.buildThresholdList() 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 => { observer = new IntersectionObserver(entries => {
entries.forEach((entry) => { 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); }, options);
Array.from(this.scroll.values()).forEach(target => {
let targets: NodeListOf<HTMLElement> = document.getElementsByName('txt');
targets.forEach(target =>
{
observer.observe(target) observer.observe(target)
}); });
} }
buildThresholdList() { buildThresholdList() {
let thresholds = []; 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(ratio);
} }
thresholds.push(0); thresholds.push(0);
return thresholds; return thresholds;
} }