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

Fix flickering in section-scroll. Add event handler in quick contact

This commit is contained in:
Konstantinos Triantafyllou 2022-03-02 12:27:17 +02:00
parent 03c06830be
commit 894ce0add6
3 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
sharedComponents/quick-contact/quick-contact.component.html
View File

@ -1,7 +1,7 @@
<div class="quick-contact">
<a class="uk-button uk-button-secondary uk-text-uppercase uk-flex uk-flex-middle" (click)="toggleModal()">
<icon *ngIf="!showForm" name="mail" [flex]="true"></icon>
<icon *ngIf="showForm" name="close" [flex]="true"></icon>
<a class="uk-button uk-button-secondary uk-text-uppercase uk-flex uk-flex-middle">
<icon *ngIf="!showDrop" name="mail" [flex]="true"></icon>
<icon *ngIf="showDrop" name="close" [flex]="true"></icon>
<span class="uk-margin-small-left">Contact</span>
</a>
<div #drop id="quick-contact" class="uk-card uk-card-default uk-drop uk-overflow-auto" uk-drop="mode: click; pos: top-right; animation: uk-animation-fade">

12
sharedComponents/quick-contact/quick-contact.component.ts
View File

@ -10,7 +10,7 @@ declare var UIkit;
styleUrls: ['quick-contact.component.css']
})
export class QuickContactComponent implements OnInit, OnDestroy {
public showForm: boolean = false;
public showDrop: boolean = false;
@Input()
public contactForm: FormGroup;
@Input()
@ -28,6 +28,12 @@ export class QuickContactComponent implements OnInit, OnDestroy {
event.preventDefault();
}
}));
this.subscriptions.push(UIkit.util.on(document, 'show', '#quick-contact', (event) => {
this.showDrop = true;
}));
this.subscriptions.push(UIkit.util.on(document, 'hide', '#quick-contact', (event) => {
this.showDrop = false;
}));
}
}
@ -48,8 +54,4 @@ export class QuickContactComponent implements OnInit, OnDestroy {
public send(event) {
this.sendEmitter.emit(event);
}
public toggleModal() {
this.showForm = !this.showForm;
}
}

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

@ -42,7 +42,6 @@ export class SectionScrollComponent implements AfterViewInit {
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() {
}
@ -68,6 +67,7 @@ export class SectionScrollComponent implements AfterViewInit {
};
Array.from(this.map.values()).forEach(value => {
let element = document.getElementById(value);
element.style.display = 'none';
this.left.set(value, element);
})
Array.from(this.map.keys()).forEach(key => {
@ -77,14 +77,14 @@ export class SectionScrollComponent implements AfterViewInit {
entries.forEach((entry) => {
entry.target['style'].opacity = String(entry.intersectionRatio);
let id = this.map.get(entry.target.id);
if (this.left.has(id)) {
let element = this.left.get(id).parentElement;
if(this.lastElementId !== id || Number.parseFloat(element.style.opacity) < 1) {
this.left.get(id).parentElement.style.opacity = String(entry.intersectionRatio);
}
if(entry.isIntersecting) {
this.lastElementId = id;
}
if(entry.isIntersecting) {
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';
}
});
}
});
}, options);