add quick-contact component on the app
This commit is contained in:
parent
cbddeddb93
commit
f0388a8578
|
@ -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() {
|
||||||
|
|
|
@ -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,
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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
|
Loading…
Reference in New Issue