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

Page content: Remove observer component vars and add them in subscriptions array.

This commit is contained in:
Konstantinos Triantafyllou 2022-08-30 13:11:32 +03:00
parent 2c27854213
commit 29100c8d6f
1 changed files with 51 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -65,13 +65,11 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
public shouldSticky: boolean = true;
@ViewChild('header') header: ElementRef;
@ViewChild('actions') actions: ElementRef;
private headerObserver: IntersectionObserver;
private bottomObserver: IntersectionObserver;
public footer_offset: number = 0;
public footer_height: number = 0;
@ViewChild("sticky_footer") sticky_footer;
subscriptions = [];
constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef) {
}
@ -82,8 +80,8 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
}
get isStickyActive() {
if(this.header && this.actions && this.shouldSticky) {
let sticky = (this.headerSticky)?this.header.nativeElement:this.actions.nativeElement;
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;
@ -91,71 +89,69 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
}
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);
}
if(this.sticky_footer) {
this.observeStickyFooter();
}
if (typeof document !== "undefined") {
this.observeBottom();
this.observeHeader();
this.observeStickyFooter();
}
}
ngOnDestroy() {
if(this.bottomObserver) {
this.bottomObserver.disconnect();
}
if(this.headerObserver) {
this.headerObserver.disconnect();
}
this.subscriptions.forEach(subscription => {
if (subscription instanceof Subscription) {
subscription.unsubscribe();
} else if (subscription instanceof Function) {
subscription();
} else if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
subscription.disconnect();
}
});
}
ngAfterContentChecked() {
if(this.sticky_footer && typeof document !== 'undefined') {
if (this.sticky_footer && typeof document !== 'undefined') {
this.footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement);
}
}
public observeStickyFooter() {
let resizeObs = new ResizeObserver(entries => {
entries.forEach(entry => {
setTimeout(() => {
// console.log(entry);
this.footer_offset = this.calcStickyFooterOffset(entry.target);
this.cdr.detectChanges();
});
})
});
this.subscriptions.push(resizeObs);
resizeObs.observe(this.sticky_footer.nativeElement);
private observeBottom() {
let bottom = document.getElementById('bottom');
if (bottom) {
let bottomObs = new IntersectionObserver(entries => {
entries.forEach(entry => {
this.shouldSticky = !entry.isIntersecting;
})
});
this.subscriptions.push(bottomObs);
bottomObs.observe(bottom);
}
}
private observeHeader() {
if (this.header) {
let headerObs = new IntersectionObserver(entries => {
entries.forEach(entry => {
this.layoutService.setReplaceHeader(!entry.isIntersecting);
})
}, {threshold: 0.5});
this.subscriptions.push(headerObs);
headerObs.observe(this.header.nativeElement);
}
}
private observeStickyFooter() {
if (this.sticky_footer) {
let resizeObs = new ResizeObserver(entries => {
entries.forEach(entry => {
setTimeout(() => {
this.footer_offset = this.calcStickyFooterOffset(entry.target);
this.cdr.detectChanges();
});
})
});
this.subscriptions.push(resizeObs);
resizeObs.observe(this.sticky_footer.nativeElement);
}
}
calcStickyFooterOffset(element) {
this.footer_height = element.offsetHeight;
return window.innerHeight-this.footer_height;
return window.innerHeight - this.footer_height;
}
}