93 lines
3.0 KiB
TypeScript
93 lines
3.0 KiB
TypeScript
import {AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from "@angular/core";
|
|
import {LayoutService} from "../sidebar/layout.service";
|
|
|
|
declare var UIkit;
|
|
|
|
@Component({
|
|
selector: '[page-content]',
|
|
template: `
|
|
<div id="page_content">
|
|
<div id="page_content_header" #header class="uk-blur-background"
|
|
[attr.uk-sticky]="(headerSticky && shouldSticky)?'media: @m':null" [attr.offset]="offset">
|
|
<div class="uk-container uk-container-large">
|
|
<div class="uk-padding-small uk-padding-remove-vertical">
|
|
<ng-content select="[header]"></ng-content>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="page_content_actions" #actions class="uk-blur-background"
|
|
[attr.uk-sticky]="(!headerSticky && shouldSticky)?'media: @m':null" [attr.offset]="offset">
|
|
<div class="uk-container uk-container-large">
|
|
<div class="uk-padding-small uk-padding-remove-vertical">
|
|
<ng-content select="[actions]"></ng-content>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="page_content_inner" class="uk-container uk-container-large">
|
|
<div class="uk-padding-small uk-padding-remove-vertical">
|
|
<ng-content select="[inner]"></ng-content>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`,
|
|
})
|
|
export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
|
|
@Input()
|
|
public headerSticky: boolean = false;
|
|
public offset: number;
|
|
public shouldSticky: boolean = true;
|
|
@ViewChild('header') header: ElementRef;
|
|
@ViewChild('actions') actions: ElementRef;
|
|
private headerObserver: IntersectionObserver;
|
|
private bottomObserver: IntersectionObserver;
|
|
|
|
constructor(private layoutService: LayoutService) {
|
|
}
|
|
|
|
ngOnInit() {
|
|
if (typeof document !== "undefined") {
|
|
this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
|
|
}
|
|
}
|
|
|
|
get isStickyActive() {
|
|
if(this.header && this.actions && this.shouldSticky) {
|
|
let sticky = (this.headerSticky)?this.header.nativeElement:this.actions.nativeElement;
|
|
return UIkit.sticky(sticky).isActive;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
ngAfterViewInit() {
|
|
if(typeof document !== "undefined") {
|
|
let bottom = document.getElementById('bottom');
|
|
if(bottom) {
|
|
this.bottomObserver = new IntersectionObserver(entries => {
|
|
entries.forEach(entry => {
|
|
this.shouldSticky = !entry.isIntersecting;
|
|
})
|
|
});
|
|
this.bottomObserver.observe(bottom);
|
|
}
|
|
if(this.header) {
|
|
this.headerObserver = new IntersectionObserver(entries => {
|
|
entries.forEach(entry => {
|
|
this.layoutService.setReplaceHeader(!entry.isIntersecting);
|
|
})
|
|
}, {threshold: 0.5});
|
|
this.headerObserver.observe(this.header.nativeElement);
|
|
}
|
|
}
|
|
}
|
|
|
|
ngOnDestroy() {
|
|
if(this.bottomObserver) {
|
|
this.bottomObserver.disconnect();
|
|
}
|
|
if(this.headerObserver) {
|
|
this.headerObserver.disconnect();
|
|
}
|
|
}
|
|
}
|