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

import {
  AfterViewInit,
  ChangeDetectorRef,
  Component,
  ElementRef,
  Input,
  OnDestroy,
  OnInit,
  ViewChild
} from "@angular/core";
import {LayoutService} from "../sidebar/layout.service";
import {Subscription} from "rxjs";

declare var UIkit;
declare var ResizeObserver;

@Component({
  selector: '[page-content]',
  template: `
    <div id="page_content">
      <div id="page_content_sticky_footer" #sticky_footer class="uk-blur-background"
           [attr.uk-sticky]="'bottom: true;'" [attr.offset]="footer_offset">
        <div class="uk-container uk-container-large">
          <div class="uk-padding-small uk-padding-remove-vertical">
            <ng-content select="[sticky_footer]"></ng-content>
          </div>
        </div>
      </div>
      <div id="page_content_header" #header class="uk-blur-background"
           [attr.uk-sticky]="(headerSticky && shouldSticky)?'media: @m':null" [attr.offset]="offset"
           [attr.style]="'margin-top: '+(footer_height? '-'+footer_height+'px': '0')">
        <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 id="page_content_footer" #footer>
        <div class="uk-container uk-container-large">
          <div class="uk-padding-small uk-padding-remove-vertical">
            <ng-content select="[footer]"></ng-content>
          </div>
        </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;
  public footer_offset: number = 0;
  public footer_height: number = 0;
  @ViewChild("sticky_footer") sticky_footer;
  subscriptions = [];

  constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef) {
  }
  
  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);
      }

      if(this.sticky_footer) {
        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)) {
        subscription.disconnect();
      }
    });
  }

  ngAfterContentChecked() {
    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);
  }

  calcStickyFooterOffset(element) {
    this.footer_height = element.offsetHeight;
    return window.innerHeight-this.footer_height;
  }
}