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

[new-theme | Library]: section-scroll.component: Scroll component used by connect home page updated - opacity changes according to intersectionRatio of IntersectionObserver | css for medium screens added.

This commit is contained in:
Konstantina Galouni 2022-01-28 11:01:22 +02:00
parent a59143f381
commit fca0f49119
2 changed files with 134 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
utils/section-scroll/section-scroll.component.css
View File

@ -1,44 +1,65 @@
.section {
position: relative;
height: auto;
/*.section {*/
/*position: relative;*/
/*height: auto;*/
/*display: flex;*/
}
/*}*/
.section [top] {
/*height: 80vh;*/
/*border: 1px solid rebeccapurple;*/
}
/*.section [top] {*/
/* !*height: 80vh;*!*/
/* !*border: 1px solid rebeccapurple;*!*/
/*}*/
.section [top] {
position: sticky;
top: 0;
z-index: 2;
height: auto;
/*max-height: 80vh;*/
/*border: 1px solid deeppink;*/
}
/*.content {*/
/* position: relative;*/
/*.section [top] {*/
/* top: 0;*/
/* height: auto;*/
/* z-index: 1;*/
/* border: 1px solid cyan;*/
/* !*border: 1px solid deeppink;*!*/
/*}*/
[left] {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
height: 100vh;
/*border: 1px solid red;*/
}
[left] img {
/*position: absolute;*/
/*top: 50%;*/
/*left: 50%;*/
/*transform: translate(-50%, -50%);*/
position: sticky;
top: 50%;
left: 10%;
[left] .imgContainer {
position: absolute;
top: 20%;
left: 0;
width: 100%;
height: 70%;
/*border: 1px solid greenyellow;*/
}
@media (max-width: 960px) {
[left] .imgContainer {
top: 5%;
height: 40%;
}
[left] > * {
align-items: flex-start;
}
[scroll] > * {
align-items: flex-end;
}
}
[left] img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
[scroll] {
margin-top: 15vh;
margin-bottom: 25vh;
}
[scroll] > * {
height: 60vh;
/* border: 1px solid darkorange;*/
}

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

@ -2,30 +2,26 @@ import {Component, HostListener, Input, OnInit, ViewEncapsulation} from "@angula
/**
* <section-scroll [customClass]="'optional classes for grid e.g. uk-flex-bottom'">
* <div fixed>...</div>
* <div scroll>...</div> # use uk-flex-first to change order
* <section-scroll [customClass]="'optional classes for section e.g. uk-section-primary'"
* [childrenCustomClass]="'optional classes for content e.g. uk-container'">
* <div top>...</div>
* <div left>...</div>
* <div scroll>...</div>
* </section-scroll>
*
* */
@Component({
selector: 'section-scroll',
template: `
<!--&lt;!&ndash;alternative&ndash;&gt;-->
<!--<div class="section" [ngClass]="customClass">-->
<!-- <ng-content select="[top]"></ng-content>-->
<!-- <div class="uk-grid content" [ngClass]="childrenCustomClass">-->
<!-- <ng-content select="[left]"></ng-content>-->
<!-- <ng-content select="[scroll]"></ng-content>-->
<!-- </div>-->
<!--</div>-->
<div class="section uk-grid" [ngClass]="customClass">
<ng-content select="[top]"></ng-content>
<ng-content select="[left]"></ng-content>
<ng-content select="[scroll]"></ng-content>
</div>
<div class="section" [ngClass]="customClass">
<ng-content select="[top]"></ng-content>
<div class="content" [ngClass]="childrenCustomClass">
<div class="uk-grid">
<ng-content select="[left]"></ng-content>
<ng-content select="[scroll]"></ng-content>
</div>
</div>
</div>
`,
styleUrls: ['section-scroll.component.css'],
encapsulation: ViewEncapsulation.None
@ -38,16 +34,22 @@ export class SectionScrollComponent implements OnInit {
public childrenCustomClass = null;
private absolute: HTMLCollectionOf<Element>;
private scroll: HTMLElement;
constructor() {
}
private observer: IntersectionObserver = null;
constructor() {}
@HostListener('window:resize', ['$event'])
onResize(event) {
//this.setHeight();
}
ngOnDestroy() {
if(this.observer) {
this.observer.disconnect();
}
}
ngOnInit() {
//this.setHeight();
}
@ -66,4 +68,63 @@ export class SectionScrollComponent implements OnInit {
let htmlElement = this.absolute&&this.absolute.length>0?this.absolute[0]:null;
return htmlElement?htmlElement['offsetHeight']:0;
}
ngAfterViewInit() {
if(typeof document !== "undefined") {
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");
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);
}
});
}, options);
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<=numSteps; i++) {
let ratio = i/numSteps;
thresholds.push(ratio);
}
thresholds.push(0);
return thresholds;
}
}