MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Page Content make header sticky and send event in component to handle this event

This commit is contained in:
Konstantinos Triantafyllou 2022-03-11 01:07:44 +02:00
parent 7e76c885ba
commit c49a79c798
1 changed files with 66 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
dashboard/sharedComponents/page-content/page-content.component.ts
View File

@ -1,24 +1,78 @@
import {Component, OnInit} from "@angular/core";
import {Component, ElementRef, EventEmitter, HostListener, OnDestroy, OnInit, Output, ViewChild} from "@angular/core";
import {Subscription} from "rxjs";
declare var UIkit;
@Component({
selector: '[page-content]',
template: `
<div id="page_content">
<div #header id="page_content_header" uk-sticky="show-on-up: true; animation: uk-animation-slide-top; media: @m" [attr.offset]="offset">
<div class="uk-container uk-container-large uk-padding-remove-vertical">
<ng-content select="[header]"></ng-content>
<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>
</div>
</div>
<div id="page_content_inner" class="uk-section uk-container uk-container-large">
<ng-content select="[inner]"></ng-content>
</div>
</div>
`
})
export class PageContentComponent implements OnInit{
public offset: string;
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);
}
}
ngOnInit() {
this.offset = getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height');
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();
}
});
}
}