@wizdm/animate
Version:
On Scroll Animation for Angular
55 lines • 7.4 kB
JavaScript
import { Directive, Input, Optional, Inject, ElementRef, forwardRef, NgZone } from '@angular/core';
import { ScrollDispatcher, ViewportRuler } from '@angular/cdk/scrolling';
import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
import { ANIMATE_CONFIG } from './animate.config';
import { AnimateService } from './animate.service';
import * as i0 from "@angular/core";
import * as i1 from "@angular/cdk/scrolling";
import * as i2 from "./animate.config";
export class AnimateDirective extends AnimateService {
constructor(elref, scroll, port, zone, config) {
// Constructs the parent AnimateService
super(scroll, port, zone, config);
this.elref = elref;
/** When true instructs the directive to use the element's bounding rect as the animation view */
this.useElement = false;
}
// Updates the AnimateService options on changes
ngOnChanges(changes) {
super.setup({
// Uses the host element as the container, when requested
root: coerceBooleanProperty(this.useElement) ? this.elref.nativeElement : null,
// Computes the optional offsets
top: coerceNumberProperty(this.top, 0),
right: coerceNumberProperty(this.right, 0),
bottom: coerceNumberProperty(this.bottom, 0),
left: coerceNumberProperty(this.left, 0)
});
}
}
/** @nocollapse */ AnimateDirective.ɵprov = i0.ɵɵdefineInjectable({ factory: function AnimateDirective_Factory() { return new AnimateDirective(i0.ɵɵinject(i0.ElementRef), i0.ɵɵinject(i1.ScrollDispatcher), i0.ɵɵinject(i1.ViewportRuler), i0.ɵɵinject(i0.NgZone), i0.ɵɵinject(i2.ANIMATE_CONFIG, 8)); }, token: AnimateDirective, providedIn: "root" });
AnimateDirective.decorators = [
{ type: Directive, args: [{
selector: '[wmAnimateView]',
providers: [
// Provides the AnimateDirective as the service, so, for the children components to trigger within a modified viewport
{ provide: AnimateService, useExisting: forwardRef(() => AnimateDirective) },
]
},] }
];
/** @nocollapse */
AnimateDirective.ctorParameters = () => [
{ type: ElementRef },
{ type: ScrollDispatcher },
{ type: ViewportRuler },
{ type: NgZone },
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [ANIMATE_CONFIG,] }] }
];
AnimateDirective.propDecorators = {
useElement: [{ type: Input }],
top: [{ type: Input }],
left: [{ type: Input }],
bottom: [{ type: Input }],
right: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYW5pbWF0ZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9hbmltYXRlL3NyYy9saWIvYW5pbWF0ZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQTRCLFFBQVEsRUFBRSxNQUFNLEVBQUUsVUFBVSxFQUFFLFVBQVUsRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDN0gsT0FBTyxFQUFFLGdCQUFnQixFQUFFLGFBQWEsRUFBRSxNQUFNLHdCQUF3QixDQUFDO0FBQ3pFLE9BQU8sRUFBRSxxQkFBcUIsRUFBRSxvQkFBb0IsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ3BGLE9BQU8sRUFBaUIsY0FBYyxFQUFFLE1BQU0sa0JBQWtCLENBQUE7QUFDaEUsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLG1CQUFtQixDQUFDOzs7O0FBU25ELE1BQU0sT0FBTyxnQkFBaUIsU0FBUSxjQUFjO0lBRWxELFlBQW9CLEtBQThCLEVBQzlCLE1BQXdCLEVBQ3hCLElBQW1CLEVBQ25CLElBQVksRUFDd0IsTUFBc0I7UUFDNUUsdUNBQXVDO1FBQ3ZDLEtBQUssQ0FBQyxNQUFNLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxNQUFNLENBQUMsQ0FBQztRQU5oQixVQUFLLEdBQUwsS0FBSyxDQUF5QjtRQVNsRCxpR0FBaUc7UUFDeEYsZUFBVSxHQUFZLEtBQUssQ0FBQztJQUhyQyxDQUFDO0lBaUJELGlEQUFpRDtJQUNqRCxXQUFXLENBQUMsT0FBc0I7UUFFaEMsS0FBSyxDQUFDLEtBQUssQ0FBQztZQUNWLHlEQUF5RDtZQUN6RCxJQUFJLEVBQUUscUJBQXFCLENBQUMsSUFBSSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLGFBQWEsQ0FBQyxDQUFDLENBQUMsSUFBSTtZQUM5RSxnQ0FBZ0M7WUFFaEMsR0FBRyxFQUFFLG9CQUFvQixDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQyxDQUFDO1lBQ3RDLEtBQUssRUFBRSxvQkFBb0IsQ0FBQyxJQUFJLENBQUMsS0FBSyxFQUFFLENBQUMsQ0FBQztZQUMxQyxNQUFNLEVBQUUsb0JBQW9CLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUM7WUFDNUMsSUFBSSxFQUFFLG9CQUFvQixDQUFDLElBQUksQ0FBQyxJQUFJLEVBQUUsQ0FBQyxDQUFDO1NBQ3pDLENBQUMsQ0FBQztJQUNMLENBQUM7Ozs7WUE5Q0YsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxpQkFBaUI7Z0JBQzFCLFNBQVMsRUFBRTtvQkFDVixzSEFBc0g7b0JBQ3RILEVBQUUsT0FBTyxFQUFFLGNBQWMsRUFBRSxXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGdCQUFnQixDQUFDLEVBQUU7aUJBQzdFO2FBQ0Y7Ozs7WUFac0UsVUFBVTtZQUN4RSxnQkFBZ0I7WUFBRSxhQUFhO1lBRHVELE1BQU07NENBbUI5RSxRQUFRLFlBQUksTUFBTSxTQUFDLGNBQWM7Ozt5QkFNckQsS0FBSztrQkFHTCxLQUFLO21CQUdMLEtBQUs7cUJBR0wsS0FBSztvQkFHTCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgRGlyZWN0aXZlLCBJbnB1dCwgT25DaGFuZ2VzLCBTaW1wbGVDaGFuZ2VzLCBPcHRpb25hbCwgSW5qZWN0LCBFbGVtZW50UmVmLCBmb3J3YXJkUmVmLCBOZ1pvbmUgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFNjcm9sbERpc3BhdGNoZXIsIFZpZXdwb3J0UnVsZXIgfSBmcm9tICdAYW5ndWxhci9jZGsvc2Nyb2xsaW5nJztcbmltcG9ydCB7IGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSwgY29lcmNlTnVtYmVyUHJvcGVydHkgfSBmcm9tICdAYW5ndWxhci9jZGsvY29lcmNpb24nO1xuaW1wb3J0IHsgQW5pbWF0ZUNvbmZpZywgQU5JTUFURV9DT05GSUcgfSBmcm9tICcuL2FuaW1hdGUuY29uZmlnJ1xuaW1wb3J0IHsgQW5pbWF0ZVNlcnZpY2UgfSBmcm9tICcuL2FuaW1hdGUuc2VydmljZSc7XG5cbkBEaXJlY3RpdmUoe1xuICBzZWxlY3RvcjogJ1t3bUFuaW1hdGVWaWV3XScsXG4gICBwcm92aWRlcnM6IFtcbiAgICAvLyBQcm92aWRlcyB0aGUgQW5pbWF0ZURpcmVjdGl2ZSBhcyB0aGUgc2VydmljZSwgc28sIGZvciB0aGUgY2hpbGRyZW4gY29tcG9uZW50cyB0byB0cmlnZ2VyIHdpdGhpbiBhIG1vZGlmaWVkIHZpZXdwb3J0XG4gICAgeyBwcm92aWRlOiBBbmltYXRlU2VydmljZSwgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gQW5pbWF0ZURpcmVjdGl2ZSkgfSxcbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBBbmltYXRlRGlyZWN0aXZlIGV4dGVuZHMgQW5pbWF0ZVNlcnZpY2UgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWxyZWY6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+LFxuICAgICAgICAgICAgICAgICAgICAgIHNjcm9sbDogU2Nyb2xsRGlzcGF0Y2hlciwgIFxuICAgICAgICAgICAgICAgICAgICAgIHBvcnQ6IFZpZXdwb3J0UnVsZXIsXG4gICAgICAgICAgICAgICAgICAgICAgem9uZTogTmdab25lLCBcbiAgICAgICAgICAgICAgICAgICAgICBAT3B0aW9uYWwoKSBASW5qZWN0KEFOSU1BVEVfQ09ORklHKSBjb25maWc/OiBBbmltYXRlQ29uZmlnKSB7IFxuICAgIC8vIENvbnN0cnVjdHMgdGhlIHBhcmVudCBBbmltYXRlU2VydmljZVxuICAgIHN1cGVyKHNjcm9sbCwgcG9ydCwgem9uZSwgY29uZmlnKTsgXG4gIH1cblxuICAvKiogV2hlbiB0cnVlIGluc3RydWN0cyB0aGUgZGlyZWN0aXZlIHRvIHVzZSB0aGUgZWxlbWVudCdzIGJvdW5kaW5nIHJlY3QgYXMgdGhlIGFuaW1hdGlvbiB2aWV3ICovXG4gIEBJbnB1dCgpIHVzZUVsZW1lbnQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICAvKiogT3B0aW9uYWwgdG9wIG9mZnNldCAqL1xuICBASW5wdXQoKSB0b3A6IG51bWJlcjtcblxuICAvKiogT3B0aW9uYWwgbGVmdCBvZmZzZXQgKi9cbiAgQElucHV0KCkgbGVmdDogbnVtYmVyO1xuXG4gIC8qKiBPcHRpb25hbCBib3R0b20gb2Zmc2V0ICovXG4gIEBJbnB1dCgpIGJvdHRvbTogbnVtYmVyO1xuXG4gIC8qKiBPcHRpb25hbCByaWdodCBvZmZzZXQgKi9cbiAgQElucHV0KCkgcmlnaHQ6IG51bWJlcjtcblxuICAvLyBVcGRhdGVzIHRoZSBBbmltYXRlU2VydmljZSBvcHRpb25zIG9uIGNoYW5nZXMgXG4gIG5nT25DaGFuZ2VzKGNoYW5nZXM6IFNpbXBsZUNoYW5nZXMpIHtcblxuICAgIHN1cGVyLnNldHVwKHsgXG4gICAgICAvLyBVc2VzIHRoZSBob3N0IGVsZW1lbnQgYXMgdGhlIGNvbnRhaW5lciwgd2hlbiByZXF1ZXN0ZWRcbiAgICAgIHJvb3Q6IGNvZXJjZUJvb2xlYW5Qcm9wZXJ0eSh0aGlzLnVzZUVsZW1lbnQpID8gdGhpcy5lbHJlZi5uYXRpdmVFbGVtZW50IDogbnVsbCxcbiAgICAgIC8vIENvbXB1dGVzIHRoZSBvcHRpb25hbCBvZmZzZXRzXG4gICAgICBcbiAgICAgIHRvcDogY29lcmNlTnVtYmVyUHJvcGVydHkodGhpcy50b3AsIDApLCBcbiAgICAgIHJpZ2h0OiBjb2VyY2VOdW1iZXJQcm9wZXJ0eSh0aGlzLnJpZ2h0LCAwKSwgXG4gICAgICBib3R0b206IGNvZXJjZU51bWJlclByb3BlcnR5KHRoaXMuYm90dG9tLCAwKSxcbiAgICAgIGxlZnQ6IGNvZXJjZU51bWJlclByb3BlcnR5KHRoaXMubGVmdCwgMClcbiAgICB9KTtcbiAgfVxufSJdfQ==