120 lines
3.8 KiB
TypeScript
120 lines
3.8 KiB
TypeScript
import {
|
|
AfterContentChecked,
|
|
AfterViewInit,
|
|
ChangeDetectorRef,
|
|
Component,
|
|
ElementRef,
|
|
Input,
|
|
OnDestroy,
|
|
ViewChild
|
|
} from "@angular/core";
|
|
|
|
declare var UIkit;
|
|
|
|
@Component({
|
|
selector: 'you-we',
|
|
template: `
|
|
<div>
|
|
<div class="uk-container">
|
|
<h3 class="uk-h4 uk-text-center uk-margin-large-top uk-margin-large-bottom">Are you a <span
|
|
[ngClass]="titleClass">{{type}}?</span></h3>
|
|
</div>
|
|
<div [id]="'sticky-' + id" #sticky class="uk-sticky uk-visible@l" [ngClass]="backgroundClass"
|
|
uk-sticky="animation: uk-animation-slide-bottom" [attr.end]="'#' + id"
|
|
[attr.start]="'100vh -' + height + 'px'" [attr.offset]="offset">
|
|
<div class="uk-container">
|
|
<div class="uk-grid uk-grid-large uk-child-width-1-2@l" [class.uk-grid-divider]="!isSticky">
|
|
<div class="uk-text-center uk-first-column">
|
|
<h4 class="uk-h5 uk-margin-remove uk-margin-small-top uk-margin-small-bottom">You</h4>
|
|
</div>
|
|
<div class="uk-text-center">
|
|
<h4 class="uk-h5 uk-margin-remove uk-margin-small-top uk-margin-small-bottom">We</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div [id]="id" class="uk-container">
|
|
<div class="uk-padding uk-padding-remove-vertical">
|
|
<div class="uk-grid uk-grid-large uk-grid-divider uk-child-width-1-2@l" uk-grid
|
|
uk-height-match="target: .uk-card">
|
|
<div class="uk-flex uk-flex-column uk-flex-middle uk-child-width-1-1">
|
|
<div class="uk-margin-top uk-margin-xlarge-bottom">
|
|
<span class="uk-h3 uk-text-center uk-margin-bottom uk-hidden@l">You</span>
|
|
<ng-content select="[you]"></ng-content>
|
|
</div>
|
|
</div>
|
|
<div class="uk-flex uk-flex-column uk-flex-middle uk-child-width-1-1">
|
|
<div class="uk-margin-top uk-margin-xlarge-bottom">
|
|
<span class="uk-h3 uk-text-center uk-margin-bottom uk-hidden@l">We</span>
|
|
<ng-content select="[we]"></ng-content>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
})
|
|
export class YouWeComponent implements AfterViewInit, AfterContentChecked, OnDestroy {
|
|
@Input()
|
|
public type: string;
|
|
@Input()
|
|
public id;
|
|
@Input()
|
|
titleClass: string = "uk-text-primary";
|
|
@Input()
|
|
backgroundClass: string = "uk-background-default uk-blur-background";
|
|
@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;
|
|
}
|
|
}
|