import {
AfterContentChecked,
AfterViewInit,
ChangeDetectorRef,
Component,
ElementRef,
Input,
OnDestroy,
ViewChild
} from "@angular/core";
declare var UIkit;
@Component({
selector: 'you-we',
template: `
`
})
export class YouWeComponent implements AfterViewInit, AfterContentChecked, OnDestroy {
@Input()
public type: string;
@Input()
public id;
@ViewChild('sticky') sticky: ElementRef;
public isSticky: boolean = false;
public offset: number
public height: number;
private subscriptions: any[] = [];
constructor(private cdr: ChangeDetectorRef) {
}
ngAfterViewInit() {
if (this.sticky) {
this.observeSticky();
}
}
ngAfterContentChecked() {
if (this.sticky && typeof document !== 'undefined') {
this.offset = this.calcOffset(this.sticky.nativeElement);
}
}
ngOnDestroy() {
this.subscriptions.forEach(subscription => {
if (subscription instanceof (ResizeObserver || IntersectionObserver)) {
subscription.disconnect();
}
});
}
public observeSticky() {
let resizeObs = new ResizeObserver(entries => {
entries.forEach(entry => {
setTimeout(() => {
this.offset = this.calcOffset(entry.target);
this.cdr.detectChanges();
});
})
});
this.subscriptions.push(resizeObs);
resizeObs.observe(this.sticky.nativeElement);
this.subscriptions.push(UIkit.util.on('#sticky-' + this.id, 'active', (): void => {
this.isSticky = true;
}));
this.subscriptions.push(UIkit.util.on('#sticky-' + this.id, 'inactive', () => {
this.isSticky = false;
}));
}
calcOffset(element) {
this.height = element.offsetHeight;
return window.innerHeight - this.height;
}
}