[Explore | develop]: [Bug fix] Refactor code for showing help button or not.

1. home.component.ts: Removed field "showQuickContact" | In constructor set quickContactService.setDisplay(false) and in ngOnDestroy quickContactService.setDisplay(true) | Refactor intersectionObserver.
2. app.component.ts: Updated checks for <quick-contact> | Added public bottomNotIntersecting: boolean; and public displayQuickContact: boolean; (check if intersecting with specific section in home page) | Added disconnect in ngOnDestroy for IntersectionObserver subscriptions.
This commit is contained in:
Konstantina Galouni 2023-07-06 16:14:31 +03:00
parent 1d6e5deeed
commit a23afc29d2
3 changed files with 24 additions and 22 deletions

View File

@ -52,7 +52,7 @@ import {LayoutService} from './openaireLibrary/dashboard/sharedComponents/sideba
</span></a> </span></a>
</cookie-law> </cookie-law>
<bottom id="bottom" #bottom *ngIf="isClient && properties" [properties]="properties"></bottom> <bottom id="bottom" #bottom *ngIf="isClient && properties" [properties]="properties"></bottom>
<quick-contact #quickContact *ngIf="showQuickContact && contactForm" (sendEmitter)="send($event)" <quick-contact #quickContact *ngIf="bottomNotIntersecting && displayQuickContact && showQuickContact && contactForm" (sendEmitter)="send($event)"
[contactForm]="contactForm" [sending]="sending" [contact]="'Help'" class="uk-visible@m"></quick-contact> [contactForm]="contactForm" [sending]="sending" [contact]="'Help'" class="uk-visible@m"></quick-contact>
<modal-alert #modal [overflowBody]="false"></modal-alert> <modal-alert #modal [overflowBody]="false"></modal-alert>
` `
@ -65,7 +65,10 @@ export class AppComponent {
properties: EnvProperties = properties; properties: EnvProperties = properties;
user: User; user: User;
header: Header; header: Header;
public showQuickContact: boolean; /* Contact */
public showQuickContact: boolean;
public bottomNotIntersecting: boolean;
public displayQuickContact: boolean; // intersecting with specific section in home page
public contactForm: FormGroup; public contactForm: FormGroup;
public sending: boolean = false; public sending: boolean = false;
@ViewChild('quickContact') quickContact: QuickContactComponent; @ViewChild('quickContact') quickContact: QuickContactComponent;
@ -85,10 +88,6 @@ export class AppComponent {
if (typeof document !== 'undefined') { if (typeof document !== 'undefined') {
this.isClient = true; this.isClient = true;
} }
this.subscriptions.push(this.layoutService.hasQuickContact.subscribe(hasQuickContact => {
this.showQuickContact = hasQuickContact;
this.cdr.detectChanges();
}));
this.configurationService.initCommunityInformation(this.properties, this.properties.adminToolsCommunity); this.configurationService.initCommunityInformation(this.properties, this.properties.adminToolsCommunity);
this.feedbackmail = this.properties.feedbackmail; this.feedbackmail = this.properties.feedbackmail;
if (this.properties.environment == "production" || this.properties.environment == "development") { if (this.properties.environment == "production" || this.properties.environment == "development") {
@ -111,9 +110,18 @@ export class AppComponent {
badge: true badge: true
}; };
this.reset(); this.reset();
}));
this.subscriptions.push(this.layoutService.hasQuickContact.subscribe(hasQuickContact => {
if(this.showQuickContact !== hasQuickContact) {
this.showQuickContact = hasQuickContact;
this.cdr.detectChanges();
}
})); }));
this.subscriptions.push(this.quickContactService.isDisplayed.subscribe(display => { this.subscriptions.push(this.quickContactService.isDisplayed.subscribe(display => {
this.showQuickContact = display; if(this.displayQuickContact !== display) {
this.displayQuickContact = display;
this.cdr.detectChanges();
}
})); }));
} }
@ -121,6 +129,8 @@ export class AppComponent {
this.subscriptions.forEach(subscription => { this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscriber) { if (subscription instanceof Subscriber) {
subscription.unsubscribe(); subscription.unsubscribe();
} else if (typeof IntersectionObserver !== "undefined" && subscription instanceof IntersectionObserver) {
subscription.disconnect();
} }
}); });
this.configurationService.clearSubscriptions(); this.configurationService.clearSubscriptions();
@ -142,12 +152,9 @@ export class AppComponent {
}; };
let intersectionObserver = new IntersectionObserver(entries => { let intersectionObserver = new IntersectionObserver(entries => {
entries.forEach(entry => { entries.forEach(entry => {
if (entry.isIntersecting && this.showQuickContact) { if(this.bottomNotIntersecting !== (!entry.isIntersecting)) {
this.showQuickContact = false; this.bottomNotIntersecting = !entry.isIntersecting;
this.quickContactService.setDisplay(this.showQuickContact); this.cdr.detectChanges();
} else if (!entry.isIntersecting && !this.showQuickContact) {
this.showQuickContact = true;
this.quickContactService.setDisplay(this.showQuickContact);
} }
}); });
}, options); }, options);

View File

@ -121,7 +121,6 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
public properties: EnvProperties = properties; public properties: EnvProperties = properties;
public openaireEntities = OpenaireEntities; public openaireEntities = OpenaireEntities;
public readMore: boolean = false; public readMore: boolean = false;
public showQuickContact: boolean;
@ViewChild('contact') contact: ElementRef; @ViewChild('contact') contact: ElementRef;
subscriptions: any[] = []; subscriptions: any[] = [];
@ViewChildren('scrolling_element') elements: QueryList<ElementRef>; @ViewChildren('scrolling_element') elements: QueryList<ElementRef>;
@ -173,6 +172,7 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
this._meta.updateTag({content: description}, "name='description'"); this._meta.updateTag({content: description}, "name='description'");
this._meta.updateTag({content: description}, "property='og:description'"); this._meta.updateTag({content: description}, "property='og:description'");
this._meta.updateTag({content: title}, "property='og:title'"); this._meta.updateTag({content: title}, "property='og:title'");
this.quickContactService.setDisplay(false);
} }
private getPageContents() { private getPageContents() {
@ -281,6 +281,7 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
public ngOnDestroy() { public ngOnDestroy() {
this.quickContactService.setDisplay(true);
this.clear(); this.clear();
} }
@ -298,13 +299,7 @@ export class HomeComponent implements OnInit, OnDestroy, AfterViewInit {
}; };
let intersectionObserver = new IntersectionObserver(entries => { let intersectionObserver = new IntersectionObserver(entries => {
entries.forEach(entry => { entries.forEach(entry => {
if (entry.isIntersecting && this.showQuickContact) { this.quickContactService.setDisplay(!entry.isIntersecting);
this.showQuickContact = false;
this.quickContactService.setDisplay(this.showQuickContact);
} else if (!entry.isIntersecting && !this.showQuickContact) {
this.showQuickContact = true;
this.quickContactService.setDisplay(this.showQuickContact);
}
}); });
}, options); }, options);
intersectionObserver.observe(this.contact.nativeElement); intersectionObserver.observe(this.contact.nativeElement);

@ -1 +1 @@
Subproject commit ea1b054b63502fe0cd9dcc7a5559b456ea2a1fc7 Subproject commit 8b14aaf325c4c18691be36a89dca882b945d8eb0