50 lines
1.3 KiB
TypeScript
50 lines
1.3 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: `
|
||
|
|
<div class="uk-grid" style="align-items: self-start" [ngClass]="customClass">
|
||
|
|
<ng-content select="[fixed]"></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;
|
||
|
|
private fixed: HTMLElement;
|
||
|
|
private scroll: HTMLElement;
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
}
|
||
|
|
|
||
|
|
@HostListener('window:resize', ['$event'])
|
||
|
|
onResize(event) {
|
||
|
|
this.fixed = document.querySelector('[fixed]');
|
||
|
|
this.scroll = document.querySelector('[scroll]');
|
||
|
|
this.scroll.setAttribute('style','max-height: ' + this.height + 'px;');
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
ngOnInit() {
|
||
|
|
this.fixed = document.querySelector('[fixed]');
|
||
|
|
this.scroll = document.querySelector('[scroll]');
|
||
|
|
this.scroll.setAttribute('style','max-height: ' + this.height + 'px;');
|
||
|
|
}
|
||
|
|
|
||
|
|
get height():number {
|
||
|
|
return this.fixed?this.fixed.offsetHeight:0;
|
||
|
|
}
|
||
|
|
}
|