ng-materialgrammi
Version:
An Angular framework which follows
75 lines • 8.77 kB
JavaScript
import { Component, EventEmitter, HostListener, Output, ViewChild } from '@angular/core';
import * as i0 from "@angular/core";
export class InviewComponent {
constructor() {
this.active = new EventEmitter();
this.boxOnScreen = new EventEmitter();
this.viewport = {
width: 0,
height: 0
};
this.box = {
left: 0,
right: 0,
top: 0,
bottom: 0
};
this.boxInView = false;
}
ngOnInit() {
this.calculateScreen();
this.calculateBox();
this.inviewCheck();
}
ngAfterViewInit() {
this.calculateScreen();
this.calculateBox();
this.inviewCheck();
}
onScroll() {
this.calculateBox();
this.inviewCheck();
}
calculateScreen() {
this.viewport.width = document.documentElement.clientWidth;
this.viewport.height = document.documentElement.clientHeight;
}
calculateBox() {
if (this.inView) {
this.box.top = this.inView.nativeElement.getBoundingClientRect().top;
this.box.bottom = this.inView.nativeElement.getBoundingClientRect().bottom;
this.box.left = this.inView.nativeElement.getBoundingClientRect().left;
this.box.right = this.inView.nativeElement.getBoundingClientRect().right;
this.boxOnScreen.emit(this.box);
}
}
inviewCheck() {
if (this.box.top < this.viewport.height &&
this.box.bottom > 0 &&
this.box.left < this.viewport.width &&
this.box.right > 0) {
this.boxInView = true;
}
else {
this.boxInView = false;
}
this.active.emit(this.boxInView);
}
}
InviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: InviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
InviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.0.3", type: InviewComponent, selector: "mg-inview", outputs: { active: "active", boxOnScreen: "boxOnScreen" }, host: { listeners: { "document:scroll": "onScroll($event)" } }, viewQueries: [{ propertyName: "inView", first: true, predicate: ["inView"], descendants: true }], ngImport: i0, template: "<div class=\"viewport\" #inView>\n <ng-content></ng-content>\n</div>", styles: [""] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.0.3", ngImport: i0, type: InviewComponent, decorators: [{
type: Component,
args: [{ selector: 'mg-inview', template: "<div class=\"viewport\" #inView>\n <ng-content></ng-content>\n</div>", styles: [""] }]
}], ctorParameters: function () { return []; }, propDecorators: { active: [{
type: Output
}], boxOnScreen: [{
type: Output
}], inView: [{
type: ViewChild,
args: ["inView"]
}], onScroll: [{
type: HostListener,
args: ['document:scroll', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW52aWV3LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hdGVyaWFsZ3JhbW1pL3NyYy9saWIvY29tcG9uZW50cy9pbnZpZXcvaW52aWV3LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL21hdGVyaWFsZ3JhbW1pL3NyYy9saWIvY29tcG9uZW50cy9pbnZpZXcvaW52aWV3LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBaUIsU0FBUyxFQUFjLFlBQVksRUFBRSxZQUFZLEVBQVUsTUFBTSxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQzs7QUFPNUgsTUFBTSxPQUFPLGVBQWU7SUFxQjFCO1FBbkJVLFdBQU0sR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO1FBQzVCLGdCQUFXLEdBQUcsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUUzQyxhQUFRLEdBQUc7WUFDVCxLQUFLLEVBQUUsQ0FBQztZQUNSLE1BQU0sRUFBRSxDQUFDO1NBQ1YsQ0FBQztRQUVGLFFBQUcsR0FBRztZQUNKLElBQUksRUFBRSxDQUFDO1lBQ1AsS0FBSyxFQUFFLENBQUM7WUFDUixHQUFHLEVBQUUsQ0FBQztZQUNOLE1BQU0sRUFBRSxDQUFDO1NBQ1YsQ0FBQztRQUlGLGNBQVMsR0FBRyxLQUFLLENBQUM7SUFFRixDQUFDO0lBRWpCLFFBQVE7UUFDTixJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDdkIsSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3BCLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRUQsZUFBZTtRQUNiLElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQztRQUN2QixJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7UUFDcEIsSUFBSSxDQUFDLFdBQVcsRUFBRSxDQUFDO0lBQ3JCLENBQUM7SUFHRCxRQUFRO1FBQ04sSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO1FBQ3BCLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztJQUNyQixDQUFDO0lBRUQsZUFBZTtRQUNiLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxHQUFHLFFBQVEsQ0FBQyxlQUFlLENBQUMsV0FBVyxDQUFDO1FBQzNELElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTSxHQUFHLFFBQVEsQ0FBQyxlQUFlLENBQUMsWUFBWSxDQUFDO0lBQy9ELENBQUM7SUFFRCxZQUFZO1FBQ1YsSUFBSSxJQUFJLENBQUMsTUFBTSxFQUFFO1lBQ2YsSUFBSSxDQUFDLEdBQUcsQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMscUJBQXFCLEVBQUUsQ0FBQyxHQUFHLENBQUM7WUFDckUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxNQUFNLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMscUJBQXFCLEVBQUUsQ0FBQyxNQUFNLENBQUM7WUFDM0UsSUFBSSxDQUFDLEdBQUcsQ0FBQyxJQUFJLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMscUJBQXFCLEVBQUUsQ0FBQyxJQUFJLENBQUM7WUFDdkUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLE1BQU0sQ0FBQyxhQUFhLENBQUMscUJBQXFCLEVBQUUsQ0FBQyxLQUFLLENBQUM7WUFDekUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDO1NBQ2pDO0lBQ0gsQ0FBQztJQUVELFdBQVc7UUFDVCxJQUNFLElBQUksQ0FBQyxHQUFHLENBQUMsR0FBRyxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsTUFBTTtZQUNuQyxJQUFJLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxDQUFDO1lBQ25CLElBQUksQ0FBQyxHQUFHLENBQUMsSUFBSSxHQUFHLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSztZQUNuQyxJQUFJLENBQUMsR0FBRyxDQUFDLEtBQUssR0FBRyxDQUFDLEVBQ2hCO1lBQ0YsSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUM7U0FDdkI7YUFBTTtZQUNMLElBQUksQ0FBQyxTQUFTLEdBQUcsS0FBSyxDQUFDO1NBQ3hCO1FBQ0QsSUFBSSxDQUFDLE1BQU0sQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQ25DLENBQUM7OzRHQXBFVSxlQUFlO2dHQUFmLGVBQWUsOFFDUDVCLHlFQUVNOzJGREtPLGVBQWU7a0JBTDNCLFNBQVM7K0JBQ0UsV0FBVzswRUFNWCxNQUFNO3NCQUFmLE1BQU07Z0JBQ0csV0FBVztzQkFBcEIsTUFBTTtnQkFjYyxNQUFNO3NCQUExQixTQUFTO3VCQUFDLFFBQVE7Z0JBbUJuQixRQUFRO3NCQURQLFlBQVk7dUJBQUMsaUJBQWlCLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBBZnRlclZpZXdJbml0LCBDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSG9zdExpc3RlbmVyLCBPbkluaXQsIE91dHB1dCwgVmlld0NoaWxkIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ21nLWludmlldycsXG4gIHRlbXBsYXRlVXJsOiAnLi9pbnZpZXcuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9pbnZpZXcuY29tcG9uZW50LmNzcyddXG59KVxuZXhwb3J0IGNsYXNzIEludmlld0NvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgQWZ0ZXJWaWV3SW5pdCB7XG5cbiAgQE91dHB1dCgpIGFjdGl2ZSA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcbiAgQE91dHB1dCgpIGJveE9uU2NyZWVuID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIHZpZXdwb3J0ID0ge1xuICAgIHdpZHRoOiAwLFxuICAgIGhlaWdodDogMFxuICB9O1xuXG4gIGJveCA9IHtcbiAgICBsZWZ0OiAwLFxuICAgIHJpZ2h0OiAwLFxuICAgIHRvcDogMCxcbiAgICBib3R0b206IDBcbiAgfTtcblxuICBAVmlld0NoaWxkKFwiaW5WaWV3XCIpIGluVmlldz86IEVsZW1lbnRSZWY7XG5cbiAgYm94SW5WaWV3ID0gZmFsc2U7XG5cbiAgY29uc3RydWN0b3IoKSB7IH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICB0aGlzLmNhbGN1bGF0ZVNjcmVlbigpO1xuICAgIHRoaXMuY2FsY3VsYXRlQm94KCk7XG4gICAgdGhpcy5pbnZpZXdDaGVjaygpO1xuICB9XG5cbiAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgIHRoaXMuY2FsY3VsYXRlU2NyZWVuKCk7XG4gICAgdGhpcy5jYWxjdWxhdGVCb3goKTtcbiAgICB0aGlzLmludmlld0NoZWNrKCk7XG4gIH1cblxuICBASG9zdExpc3RlbmVyKCdkb2N1bWVudDpzY3JvbGwnLCBbJyRldmVudCddKVxuICBvblNjcm9sbCgpIHtcbiAgICB0aGlzLmNhbGN1bGF0ZUJveCgpO1xuICAgIHRoaXMuaW52aWV3Q2hlY2soKTtcbiAgfVxuXG4gIGNhbGN1bGF0ZVNjcmVlbigpIHtcbiAgICB0aGlzLnZpZXdwb3J0LndpZHRoID0gZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LmNsaWVudFdpZHRoO1xuICAgIHRoaXMudmlld3BvcnQuaGVpZ2h0ID0gZG9jdW1lbnQuZG9jdW1lbnRFbGVtZW50LmNsaWVudEhlaWdodDtcbiAgfVxuXG4gIGNhbGN1bGF0ZUJveCgpIHtcbiAgICBpZiAodGhpcy5pblZpZXcpIHtcbiAgICAgIHRoaXMuYm94LnRvcCA9IHRoaXMuaW5WaWV3Lm5hdGl2ZUVsZW1lbnQuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCkudG9wO1xuICAgICAgdGhpcy5ib3guYm90dG9tID0gdGhpcy5pblZpZXcubmF0aXZlRWxlbWVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS5ib3R0b207XG4gICAgICB0aGlzLmJveC5sZWZ0ID0gdGhpcy5pblZpZXcubmF0aXZlRWxlbWVudC5nZXRCb3VuZGluZ0NsaWVudFJlY3QoKS5sZWZ0O1xuICAgICAgdGhpcy5ib3gucmlnaHQgPSB0aGlzLmluVmlldy5uYXRpdmVFbGVtZW50LmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLnJpZ2h0O1xuICAgICAgdGhpcy5ib3hPblNjcmVlbi5lbWl0KHRoaXMuYm94KTtcbiAgICB9XG4gIH1cblxuICBpbnZpZXdDaGVjaygpIHtcbiAgICBpZiAoXG4gICAgICB0aGlzLmJveC50b3AgPCB0aGlzLnZpZXdwb3J0LmhlaWdodCAmJlxuICAgICAgdGhpcy5ib3guYm90dG9tID4gMCAmJlxuICAgICAgdGhpcy5ib3gubGVmdCA8IHRoaXMudmlld3BvcnQud2lkdGggJiZcbiAgICAgIHRoaXMuYm94LnJpZ2h0ID4gMFxuICAgICAgKSB7XG4gICAgICB0aGlzLmJveEluVmlldyA9IHRydWU7XG4gICAgfSBlbHNlIHtcbiAgICAgIHRoaXMuYm94SW5WaWV3ID0gZmFsc2U7XG4gICAgfVxuICAgIHRoaXMuYWN0aXZlLmVtaXQodGhpcy5ib3hJblZpZXcpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwidmlld3BvcnRcIiAjaW5WaWV3PlxuICAgIDxuZy1jb250ZW50PjwvbmctY29udGVudD5cbjwvZGl2PiJdfQ==