import {ChangeDetectorRef, Component} from "@angular/core"; import {Router} from '@angular/router'; import {Meta, Title} from '@angular/platform-browser'; import {PiwikService} from '../openaireLibrary/utils/piwik/piwik.service'; import {HelperService} from "../openaireLibrary/utils/helper/helper.service"; import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service"; import {Subscriber} from "rxjs"; import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component"; import {EnvProperties} from "../openaireLibrary/utils/properties/env-properties"; import {properties} from "../../environments/environment"; import {StakeholderEntities} from "../openaireLibrary/monitor/entities/stakeholder"; @Component({ selector: 'how-it-works', template: `

How it works.

Join the OpenAIRE Monitor service and we will create for you a dashboard to track, understand and position your organization's research activities and their impact, discover and evaluate Open Science trends for your organization and make data-driven decisions. Here's how it works.
Get Started
`, styles: [` .custom-translate-bottom-left { transform: translate(-20%, 20%); } `] }) export class HowItWorksComponent { public url: string = null; public pageTitle: string = "OpenAIRE - Monitor | How it works"; public description: string = "OpenAIRE - Monitor | How it works"; public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'About - How it works'}]; public properties: EnvProperties = properties; public sections: string[] = [StakeholderEntities.FUNDERS, StakeholderEntities.RIS, StakeholderEntities.ORGANIZATIONS]; public activeSection: string = StakeholderEntities.FUNDERS; public offset: number; public stakeholderEntities = StakeholderEntities; public shouldSticky: boolean = true; subscriptions = []; constructor( private _router: Router, private _meta: Meta, private _title: Title, private seoService: SEOService, private _piwikService: PiwikService, private helper: HelperService, private cdr: ChangeDetectorRef) { } ngOnInit() { if (this.properties.enablePiwikTrack && (typeof document !== 'undefined')) { this.subscriptions.push(this._piwikService.trackView(this.properties, this.pageTitle, this.properties.piwikSiteId).subscribe()); } this.url = this.properties.domain + this.properties.baseLink + this._router.url; this.seoService.createLinkForCanonicalURL(this.url); this.updateUrl(this.url); this.updateTitle(this.pageTitle); this.updateDescription(this.description); } ngAfterViewInit() { if (typeof document !== 'undefined') { this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height')); this.cdr.detectChanges(); this.observeBottom(); } } ngOnDestroy() { this.subscriptions.forEach(subscription => { if (subscription instanceof Subscriber) { subscription.unsubscribe(); } }); } private observeBottom() { let bottom = document.getElementById('bottom'); if (bottom) { let bottomObs = new IntersectionObserver(entries => { entries.forEach(entry => { this.shouldSticky = !entry.isIntersecting; this.cdr.detectChanges(); }) }); this.subscriptions.push(bottomObs); bottomObs.observe(bottom); } } private updateDescription(description: string) { this._meta.updateTag({content: description}, "name='description'"); this._meta.updateTag({content: description}, "property='og:description'"); } private updateTitle(title: string) { var _title = ((title.length > 50) ? title.substring(0, 50) : title); this._title.setTitle(_title); this._meta.updateTag({content: _title}, "property='og:title'"); } private updateUrl(url: string) { this._meta.updateTag({content: url}, "property='og:url'"); } }