UNPKG

ng-zorro-antd

Version:

An enterprise-class UI components based on Ant Design and Angular

169 lines (163 loc) 4.96 kB
import { Platform } from '@angular/cdk/platform'; import { fromEvent } from 'rxjs'; import { distinctUntilChanged, throttleTime } from 'rxjs/operators'; import { DOCUMENT, CommonModule } from '@angular/common'; import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Inject, Input, Output, ViewEncapsulation, NgModule } from '@angular/core'; import { fadeMotion, toNumber, NzScrollService, SCROLL_SERVICE_PROVIDER } from 'ng-zorro-antd/core'; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzBackTopComponent { /** * @param {?} scrollSrv * @param {?} doc * @param {?} platform * @param {?} cd */ constructor(scrollSrv, doc, platform, cd) { this.scrollSrv = scrollSrv; this.doc = doc; this.platform = platform; this.cd = cd; this.scroll$ = null; this.target = null; this.visible = false; this._visibilityHeight = 400; this.nzClick = new EventEmitter(); } /** * @param {?} value * @return {?} */ set nzVisibilityHeight(value) { this._visibilityHeight = toNumber(value, 400); } /** * @return {?} */ get nzVisibilityHeight() { return this._visibilityHeight; } /** * @param {?} el * @return {?} */ set nzTarget(el) { this.target = typeof el === 'string' ? this.doc.querySelector(el) : el; this.registerScrollEvent(); } /** * @return {?} */ ngOnInit() { if (!this.scroll$) { this.registerScrollEvent(); } } /** * @return {?} */ clickBackTop() { this.scrollSrv.scrollTo(this.getTarget(), 0); this.nzClick.emit(true); } /** * @private * @return {?} */ getTarget() { return this.target || window; } /** * @private * @return {?} */ handleScroll() { if (this.visible === this.scrollSrv.getScroll(this.getTarget()) > this.nzVisibilityHeight) { return; } this.visible = !this.visible; this.cd.markForCheck(); } /** * @private * @return {?} */ removeListen() { if (this.scroll$) { this.scroll$.unsubscribe(); } } /** * @private * @return {?} */ registerScrollEvent() { if (!this.platform.isBrowser) { return; } this.removeListen(); this.handleScroll(); this.scroll$ = fromEvent(this.getTarget(), 'scroll') .pipe(throttleTime(50), distinctUntilChanged()) .subscribe((/** * @return {?} */ () => this.handleScroll())); } /** * @return {?} */ ngOnDestroy() { this.removeListen(); } } NzBackTopComponent.decorators = [ { type: Component, args: [{ selector: 'nz-back-top', exportAs: 'nzBackTop', animations: [fadeMotion], template: "<div class=\"ant-back-top\" (click)=\"clickBackTop()\" @fadeMotion *ngIf=\"visible\">\n <ng-template #defaultContent>\n <div class=\"ant-back-top-content\">\n <div class=\"ant-back-top-icon\"></div>\n </div>\n </ng-template>\n <ng-template [ngTemplateOutlet]=\"nzTemplate || defaultContent\"></ng-template>\n</div>", changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false }] } ]; /** @nocollapse */ NzBackTopComponent.ctorParameters = () => [ { type: NzScrollService }, { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }, { type: Platform }, { type: ChangeDetectorRef } ]; NzBackTopComponent.propDecorators = { nzTemplate: [{ type: Input }], nzVisibilityHeight: [{ type: Input }], nzTarget: [{ type: Input }], nzClick: [{ type: Output }] }; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ class NzBackTopModule { } NzBackTopModule.decorators = [ { type: NgModule, args: [{ declarations: [NzBackTopComponent], exports: [NzBackTopComponent], imports: [CommonModule], providers: [SCROLL_SERVICE_PROVIDER] },] } ]; /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ /** * @fileoverview added by tsickle * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc */ export { NzBackTopComponent, NzBackTopModule }; //# sourceMappingURL=ng-zorro-antd-back-top.js.map