add quick-contact component on the app

This commit is contained in:
Alex Martzios 2022-02-22 16:40:33 +02:00
parent cbddeddb93
commit f0388a8578
5 changed files with 58 additions and 8 deletions

View File

@ -10,7 +10,9 @@ import {properties} from "../environments/environment";
import {BehaviorSubject, Subscriber} from "rxjs"; import {BehaviorSubject, Subscriber} from "rxjs";
import {StakeholderService} from "./openaireLibrary/monitor/services/stakeholder.service"; import {StakeholderService} from "./openaireLibrary/monitor/services/stakeholder.service";
import {Header} from "./openaireLibrary/sharedComponents/navigationBar.component"; import {Header} from "./openaireLibrary/sharedComponents/navigationBar.component";
import {QuickContactComponent} from "./openaireLibrary/sharedComponents/quick-contact/quick-contact.component";
import {SmoothScroll} from "./openaireLibrary/utils/smooth-scroll"; import {SmoothScroll} from "./openaireLibrary/utils/smooth-scroll";
import {QuickContactService} from './openaireLibrary/sharedComponents/quick-contact/quick-contact.service';
@Component({ @Component({
selector: 'app-root', selector: 'app-root',
@ -43,6 +45,7 @@ import {SmoothScroll} from "./openaireLibrary/utils/smooth-scroll";
</cookie-law> </cookie-law>
<bottom *ngIf="properties && showMenu" [grantAdvance]="false" <bottom *ngIf="properties && showMenu" [grantAdvance]="false"
[properties]="properties"></bottom> [properties]="properties"></bottom>
<quick-contact *ngIf="showQuickContact"></quick-contact>
</div> </div>
` `
@ -58,11 +61,13 @@ export class AppComponent {
url: string; url: string;
header: Header; header: Header;
logoPath: string = 'assets/common-assets/'; logoPath: string = 'assets/common-assets/';
public showQuickContact: boolean;
private subscriptions: any[] = []; private subscriptions: any[] = [];
constructor(private route: ActivatedRoute, private propertiesService: EnvironmentSpecificService, constructor(private route: ActivatedRoute, private propertiesService: EnvironmentSpecificService,
private router: Router, private stakeholderService: StakeholderService, private smoothScroll: SmoothScroll, private router: Router, private stakeholderService: StakeholderService, private smoothScroll: SmoothScroll,
private userManagementService: UserManagementService) { private userManagementService: UserManagementService,
private quickContactService: QuickContactService) {
this.subscriptions.push(router.events.forEach((event) => { this.subscriptions.push(router.events.forEach((event) => {
if (event instanceof NavigationEnd) { if (event instanceof NavigationEnd) {
this.url = event.url; this.url = event.url;
@ -92,6 +97,9 @@ export class AppComponent {
}; };
this.buildMenu(); this.buildMenu();
})); }));
this.subscriptions.push(this.quickContactService.isDisplayed.subscribe(display => {
this.showQuickContact = display;
}));
} }
public ngOnDestroy() { public ngOnDestroy() {

View File

@ -12,6 +12,7 @@ import {CookieLawModule} from './openaireLibrary/sharedComponents/cookie-law/coo
import {BottomModule} from './openaireLibrary/sharedComponents/bottom.module'; import {BottomModule} from './openaireLibrary/sharedComponents/bottom.module';
import {ErrorModule} from './openaireLibrary/error/error.module'; import {ErrorModule} from './openaireLibrary/error/error.module';
import {NavigationBarModule} from './openaireLibrary/sharedComponents/navigationBar.module'; import {NavigationBarModule} from './openaireLibrary/sharedComponents/navigationBar.module';
import {QuickContactModule} from './openaireLibrary/sharedComponents/quick-contact/quick-contact.module';
import {DEFAULT_TIMEOUT, TimeoutInterceptor} from "./openaireLibrary/timeout-interceptor.service"; import {DEFAULT_TIMEOUT, TimeoutInterceptor} from "./openaireLibrary/timeout-interceptor.service";
import {Schema2jsonldModule} from "./openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module"; import {Schema2jsonldModule} from "./openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
import {HttpInterceptorService} from "./openaireLibrary/http-interceptor.service"; import {HttpInterceptorService} from "./openaireLibrary/http-interceptor.service";
@ -28,6 +29,7 @@ import {SharedModule} from "./openaireLibrary/shared/shared.module";
ErrorModule, ErrorModule,
FormsModule, FormsModule,
NavigationBarModule, NavigationBarModule,
QuickContactModule,
BottomModule, BottomModule,
CookieLawModule, CookieLawModule,
BrowserTransferStateModule, BrowserTransferStateModule,

View File

@ -230,7 +230,7 @@
</ng-template> </ng-template>
</div> </div>
</div> </div>
<div class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-text-center"> <div id="last-section" class="uk-section uk-container uk-container-large uk-margin-large-bottom uk-text-center">
<h2 class="uk-h1"> <h2 class="uk-h1">
Need more information? <br> Get in touch and let us help you<span class="uk-text-primary">.</span> Need more information? <br> Get in touch and let us help you<span class="uk-text-primary">.</span>
</h2> </h2>

View File

@ -1,4 +1,4 @@
import {Component, ViewChild} from '@angular/core'; import {Component, ViewChild, OnDestroy, AfterViewInit} from '@angular/core';
import {ActivatedRoute, Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {Meta, Title} from '@angular/platform-browser'; import {Meta, Title} from '@angular/platform-browser';
import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties'; import {EnvProperties} from '../openaireLibrary/utils/properties/env-properties';
@ -18,13 +18,14 @@ import {User} from "../openaireLibrary/login/utils/helper.class";
import {UserManagementService} from "../openaireLibrary/services/user-management.service"; import {UserManagementService} from "../openaireLibrary/services/user-management.service";
import {properties} from "../../environments/environment"; import {properties} from "../../environments/environment";
import {Subscriber} from "rxjs"; import {Subscriber} from "rxjs";
import {QuickContactService} from '../openaireLibrary/sharedComponents/quick-contact/quick-contact.service';
@Component({ @Component({
selector: 'home', selector: 'home',
templateUrl: 'home.component.html', templateUrl: 'home.component.html',
styleUrls: ['home.component.css'] styleUrls: ['home.component.css']
}) })
export class HomeComponent { export class HomeComponent implements OnDestroy, AfterViewInit {
public pageTitle = "OpenAIRE | Monitor"; public pageTitle = "OpenAIRE | Monitor";
public description = "OpenAIRE - Monitor, A new era of monitoring research. Open data. Open methodologies. Work together with us to view, understand and visualize research statistics and indicators."; public description = "OpenAIRE - Monitor, A new era of monitoring research. Open data. Open methodologies. Work together with us to view, understand and visualize research statistics and indicators.";
public stakeholders: StakeholderInfo[] = []; public stakeholders: StakeholderInfo[] = [];
@ -51,11 +52,13 @@ export class HomeComponent {
public softwareSize: any = null; public softwareSize: any = null;
public otherSize: any = null; public otherSize: any = null;
public fundersSize: any = null; public fundersSize: any = null;
public showQuickContact: boolean = true;
@ViewChild('AlertModal') modal; @ViewChild('AlertModal') modal;
private errorMessages: ErrorMessagesComponent; private errorMessages: ErrorMessagesComponent;
private subscriptions = []; private subscriptions = [];
private user: User; private user: User;
private observer: IntersectionObserver = null;
constructor( constructor(
private route: ActivatedRoute, private route: ActivatedRoute,
private _router: Router, private _router: Router,
@ -67,7 +70,9 @@ export class HomeComponent {
private userManagementService: UserManagementService, private userManagementService: UserManagementService,
private helper: HelperService, private helper: HelperService,
private seoService: SEOService, private seoService: SEOService,
private _refineFieldResultsService: RefineFieldResultsService, private _searchResearchResultsService: SearchResearchResultsService) { private _refineFieldResultsService: RefineFieldResultsService,
private _searchResearchResultsService: SearchResearchResultsService,
private quickContactService: QuickContactService) {
this._meta.updateTag({content: this.description}, "name='description'"); this._meta.updateTag({content: this.description}, "name='description'");
this._meta.updateTag({content: this.description}, "property='og:description'"); this._meta.updateTag({content: this.description}, "property='og:description'");
this._meta.updateTag({content: this.pageTitle}, "property='og:title'"); this._meta.updateTag({content: this.pageTitle}, "property='og:title'");
@ -93,7 +98,42 @@ export class HomeComponent {
this.getStakeholders(); this.getStakeholders();
})); }));
} }
OnDestroy() {
if (this.observer) {
this.observer.disconnect();
}
}
ngAfterViewInit() {
if (typeof document !== "undefined") {
this.createObserver();
}
}
createObserver() {
let target = document.querySelector('#last-section');
let options = {
root: null,
rootMargin: '200px',
threshold: 1.0
};
this.observer = new IntersectionObserver(entries => {
console.log(entries);
console.log(this.showQuickContact);
entries.forEach(entry => {
if(entry.isIntersecting && this.showQuickContact) {
this.showQuickContact = false;
this.quickContactService.setDisplay(this.showQuickContact);
} else if(!entry.isIntersecting && !this.showQuickContact) {
this.showQuickContact = true;
this.quickContactService.setDisplay(this.showQuickContact);
}
})
}, options);
this.observer.observe(target);
}
private getPageContents() { private getPageContents() {
this.subscriptions.push(this.helper.getPageHelpContents(this.properties, 'monitor', this._router.url).subscribe(contents => { this.subscriptions.push(this.helper.getPageHelpContents(this.properties, 'monitor', this._router.url).subscribe(contents => {
this.pageContents = contents; this.pageContents = contents;

@ -1 +1 @@
Subproject commit 94519de68b284f1ef4014d0eaebf02ea9ba819d6 Subproject commit f3ff37c74cf06a703b31927ee9322cc65917dcf0