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;
  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") {
      // TODO make it smooth
      // this.observeBottom();
      this.observeHeader();
      this.observeStickyFooter();
    }
  }
  
  ngOnDestroy() {
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
        subscription.disconnect();
      }
    });
  }
  
  ngAfterContentChecked() {
    if (this.sticky_footer && typeof document !== 'undefined') {
      this.footer_offset = this.calcStickyFooterOffset(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 => {
          if(entry.boundingClientRect.height > 0) {
            this.layoutService.setReplaceHeader(!entry.isIntersecting);
          }
        })
      });
      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;
  }
}