openaire-library/utils/section-scroll/section-scroll.component.ts

import {Component, HostListener, Input, OnInit, ViewEncapsulation} from "@angular/core";


/**
 * <section-scroll [customClass]="'optional classes for grid e.g. uk-flex-bottom'">
 *   <div fixed>...</div>
 *   <div scroll>...</div> # use uk-flex-first to change order
 * </section-scroll>
 *
 * */
@Component({
  selector: 'section-scroll',
  template: `

<!--&lt;!&ndash;alternative&ndash;&gt;-->
<!--<div class="section" [ngClass]="customClass">-->
<!--  <ng-content select="[top]"></ng-content>-->
<!--  <div class="uk-grid content"  [ngClass]="childrenCustomClass">-->
<!--    <ng-content select="[left]"></ng-content>-->
<!--    <ng-content select="[scroll]"></ng-content>-->
<!--  </div>-->
<!--</div>-->

<div class="section uk-grid" [ngClass]="customClass">
  <ng-content select="[top]"></ng-content>
    <ng-content select="[left]"></ng-content>
    <ng-content select="[scroll]"></ng-content>
</div>
  `,
  styleUrls: ['section-scroll.component.css'],
  encapsulation: ViewEncapsulation.None
})
export class SectionScrollComponent implements OnInit {
  
  @Input()
  public customClass = null;
  @Input()
  public childrenCustomClass = null;
  private absolute: HTMLCollectionOf<Element>;
  private scroll: HTMLElement;
  
  constructor() {
  }
  
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    //this.setHeight();
  }
  
  
  ngOnInit() {
    //this.setHeight();
  }

  setHeight() {
    if(typeof document !== "undefined") {
      // this.absolute = document.querySelector('[absolute]');
      this.absolute = document.getElementsByClassName('absolute');
      this.scroll = document.querySelector('[scroll]');
      this.scroll.setAttribute('style','max-height: ' + this.height + 'px;');

    }
  }
  
  get height():number {
    let htmlElement = this.absolute&&this.absolute.length>0?this.absolute[0]:null;
    return htmlElement?htmlElement['offsetHeight']:0;
  }
}