2022-03-11 00:07:44 +01:00
|
|
|
import {Component, ElementRef, EventEmitter, HostListener, OnDestroy, OnInit, Output, ViewChild} from "@angular/core";
|
|
|
|
import {Subscription} from "rxjs";
|
|
|
|
|
|
|
|
declare var UIkit;
|
2020-11-01 16:41:02 +01:00
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: '[page-content]',
|
|
|
|
template: `
|
2022-03-11 00:07:44 +01:00
|
|
|
<div id="page_content" [class.sticky]="sticky">
|
|
|
|
<div #header id="page_content_header">
|
|
|
|
<div class="uk-container uk-container-large uk-padding-remove-vertical">
|
|
|
|
<ng-content select="[header]"></ng-content>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div id="page_content_inner" [class.sticky]="sticky" class="uk-section uk-container uk-container-large">
|
|
|
|
<ng-content select="[inner]"></ng-content>
|
2022-03-03 16:44:59 +01:00
|
|
|
</div>
|
2020-11-01 16:41:02 +01:00
|
|
|
</div>
|
|
|
|
`
|
|
|
|
})
|
2022-03-11 00:07:44 +01:00
|
|
|
export class PageContentComponent implements OnInit, OnDestroy {
|
|
|
|
private current;
|
|
|
|
private shouldSticky: boolean = false;
|
|
|
|
public offset: number;
|
|
|
|
public sticky: boolean = false;
|
|
|
|
@Output()
|
|
|
|
public stickyEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
|
|
|
|
@ViewChild("header") public header: ElementRef;
|
|
|
|
private subscriptions: any[] = [];
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
}
|
|
|
|
|
|
|
|
@HostListener('window:scroll', ['$event.target']) // for window scroll events
|
|
|
|
scroll(e) {
|
|
|
|
let scroll = window.pageYOffset;
|
|
|
|
let previous = this.offset;
|
|
|
|
if (scroll > this.current) {
|
|
|
|
this.offset = 0;
|
|
|
|
} else {
|
|
|
|
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height') + 1);
|
|
|
|
}
|
|
|
|
if (this.offset !== previous) {
|
|
|
|
UIkit.sticky(this.header.nativeElement, {
|
|
|
|
offset: this.offset
|
|
|
|
});
|
|
|
|
}
|
|
|
|
this.current = scroll;
|
|
|
|
if(this.current > this.header.nativeElement.offsetTop + this.header.nativeElement.offsetHeight && this.shouldSticky) {
|
|
|
|
this.sticky = true;
|
|
|
|
this.stickyEmitter.emit(this.sticky);
|
|
|
|
}
|
|
|
|
}
|
2020-11-01 16:41:02 +01:00
|
|
|
|
2022-03-03 16:44:59 +01:00
|
|
|
ngOnInit() {
|
2022-03-11 00:07:44 +01:00
|
|
|
if (typeof window !== "undefined") {
|
|
|
|
this.current = window.pageYOffset;
|
|
|
|
}
|
|
|
|
this.subscriptions.push(UIkit.util.on(document, 'active', '#page_content_header', (): void => {
|
|
|
|
this.shouldSticky = true;
|
|
|
|
}));
|
|
|
|
this.subscriptions.push(UIkit.util.on(document, 'inactive', '#page_content_header', (): void => {
|
|
|
|
this.sticky = false;
|
|
|
|
this.shouldSticky = false;
|
|
|
|
this.stickyEmitter.emit(this.sticky);
|
|
|
|
}));
|
|
|
|
}
|
|
|
|
|
|
|
|
ngOnDestroy() {
|
|
|
|
this.subscriptions.forEach(subscription => {
|
|
|
|
if (subscription instanceof Subscription) {
|
|
|
|
subscription.unsubscribe();
|
|
|
|
} else if (subscription instanceof Function) {
|
|
|
|
subscription();
|
|
|
|
}
|
|
|
|
});
|
2020-11-01 16:41:02 +01:00
|
|
|
}
|
|
|
|
}
|