diff --git a/src/app/about/how-it-works.component.ts b/src/app/about/how-it-works.component.ts index 053b8e4..5010259 100644 --- a/src/app/about/how-it-works.component.ts +++ b/src/app/about/how-it-works.component.ts @@ -21,29 +21,33 @@ import {StakeholderEntities} from "../openaireLibrary/monitor/entities/stakehold

How it works.

-
+
Join the OpenAIRE Monitor service and we will create for you a dashboard to track and 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
- + -
-
-
+
+
+
-
+
+
+
@@ -323,6 +327,7 @@ export class HowItWorksComponent { public activeSection: string = StakeholderEntities.FUNDERS; public offset: number; public stakeholderEntities = StakeholderEntities; + public shouldSticky: boolean = true; subscriptions = []; constructor( @@ -350,6 +355,7 @@ export class HowItWorksComponent { if (typeof document !== 'undefined') { this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height')); this.cdr.detectChanges(); + this.observeBottom(); } } @@ -361,6 +367,20 @@ export class HowItWorksComponent { }); } + 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'"); diff --git a/src/app/about/you-we.component.ts b/src/app/about/you-we.component.ts index 3eb2e21..01aec9f 100644 --- a/src/app/about/you-we.component.ts +++ b/src/app/about/you-we.component.ts @@ -9,29 +9,46 @@ import { } from "@angular/core"; import {StakeholderEntities} from "../openaireLibrary/monitor/entities/stakeholder"; +declare var UIkit; + @Component({ selector: 'you-we', template: `
-

Are you a {{type}}?

-
-
- You - We -
+
+

Are you a {{type}}?

-
-
-
- You - +
+
+
+
+

You

+
+
+

We

+
-
-
- We - +
+
+
+
+
+
+ You + +
+
+
+
+ We + +
+
@@ -44,6 +61,7 @@ export class YouWeComponent implements AfterViewInit, AfterContentChecked, OnDes @Input() public id; @ViewChild('sticky') sticky: ElementRef; + public isSticky: boolean = false; public offset: number public height: number; private subscriptions: any[] = []; @@ -52,20 +70,20 @@ export class YouWeComponent implements AfterViewInit, AfterContentChecked, OnDes } ngAfterViewInit() { - if(this.sticky) { + if (this.sticky) { this.observeSticky(); } } ngAfterContentChecked() { - if(this.sticky && typeof document !== 'undefined') { + if (this.sticky && typeof document !== 'undefined') { this.offset = this.calcOffset(this.sticky.nativeElement); } } ngOnDestroy() { this.subscriptions.forEach(subscription => { - if (subscription instanceof (ResizeObserver || IntersectionObserver)) { + if (subscription instanceof (ResizeObserver || IntersectionObserver)) { subscription.disconnect(); } }); @@ -82,10 +100,16 @@ export class YouWeComponent implements AfterViewInit, AfterContentChecked, OnDes }); this.subscriptions.push(resizeObs); resizeObs.observe(this.sticky.nativeElement); + this.subscriptions.push(UIkit.util.on('#sticky-' + this.id, 'active', (): void => { + this.isSticky = true; + })); + this.subscriptions.push(UIkit.util.on('#sticky-' + this.id, 'inactive', () => { + this.isSticky = false; + })); } calcOffset(element) { this.height = element.offsetHeight; - return window.innerHeight-this.height; + return window.innerHeight - this.height; } } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 42ca9af..b2d4088 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -60,7 +60,7 @@ import {ResourcesService} from "./openaireLibrary/monitor/services/resources.ser points="7 4 13 10 7 16"> -