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

70 lines
1.9 KiB
TypeScript

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;
}
}