openaire-library/dashboard/sharedComponents/page-content/page-content.component.ts

import {AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from "@angular/core";

declare var UIkit;

@Component({
  selector: '[page-content]',
  template: `
    <div id="page_content">
      <div id="page_content_header" #header [class.uk-blur-background]="headerSticky && isStickyActive"
           [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]="!headerSticky && isStickyActive"
           [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;
  public
  private observer: IntersectionObserver;
  
  constructor() {
  }
  
  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.observer = new IntersectionObserver(entries => {
          entries.forEach(entry => {
            this.shouldSticky = !entry.isIntersecting;
          })
        });
        this.observer.observe(bottom);
      }
    }
  }
  
  ngOnDestroy() {
    if(this.observer) {
      this.observer.disconnect();
    }
  }
}