ng-zorro-antd
Version:
An enterprise-class UI components based on Ant Design and Angular
600 lines (593 loc) • 18.1 kB
JavaScript
import { Platform, PlatformModule } from '@angular/cdk/platform';
import { EventEmitter, Component, ViewEncapsulation, ChangeDetectionStrategy, Inject, ChangeDetectorRef, ViewChild, Input, Output, TemplateRef, ElementRef, Renderer2, ContentChild, NgModule } from '@angular/core';
import { __decorate, __metadata } from 'tslib';
import { DOCUMENT, CommonModule } from '@angular/common';
import { fromEvent } from 'rxjs';
import { throttleTime, distinctUntilChanged } from 'rxjs/operators';
import { toNumber, NzConfigService, NzScrollService, InputBoolean, WithConfig, InputNumber, SCROLL_SERVICE_PROVIDER } from 'ng-zorro-antd/core';
import { NzAffixModule } from 'ng-zorro-antd/affix';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function Section() { }
if (false) {
/** @type {?} */
Section.prototype.comp;
/** @type {?} */
Section.prototype.top;
}
/** @type {?} */
var sharpMatcherRegx = /#([^#]+)$/;
var NzAnchorComponent = /** @class */ (function () {
function NzAnchorComponent(nzConfigService, scrollSrv, doc, cdr, platform) {
this.nzConfigService = nzConfigService;
this.scrollSrv = scrollSrv;
this.doc = doc;
this.cdr = cdr;
this.platform = platform;
this.nzAffix = true;
this.nzClick = new EventEmitter();
this.nzScroll = new EventEmitter();
this.visible = false;
this.wrapperStyle = { 'max-height': '100vh' };
this.links = [];
this.animating = false;
this.target = null;
this.scroll$ = null;
this.destroyed = false;
}
Object.defineProperty(NzAnchorComponent.prototype, "nzOffsetTop", {
get: /**
* @return {?}
*/
function () {
return this._offsetTop;
},
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
this._offsetTop = toNumber(value, 0);
this.wrapperStyle = {
'max-height': "calc(100vh - " + this._offsetTop + "px)"
};
},
enumerable: true,
configurable: true
});
Object.defineProperty(NzAnchorComponent.prototype, "nzTarget", {
set: /**
* @param {?} el
* @return {?}
*/
function (el) {
this.target = typeof el === 'string' ? this.doc.querySelector(el) : el;
this.registerScrollEvent();
},
enumerable: true,
configurable: true
});
/**
* @param {?} link
* @return {?}
*/
NzAnchorComponent.prototype.registerLink = /**
* @param {?} link
* @return {?}
*/
function (link) {
this.links.push(link);
};
/**
* @param {?} link
* @return {?}
*/
NzAnchorComponent.prototype.unregisterLink = /**
* @param {?} link
* @return {?}
*/
function (link) {
this.links.splice(this.links.indexOf(link), 1);
};
/**
* @private
* @return {?}
*/
NzAnchorComponent.prototype.getTarget = /**
* @private
* @return {?}
*/
function () {
return this.target || window;
};
/**
* @return {?}
*/
NzAnchorComponent.prototype.ngAfterViewInit = /**
* @return {?}
*/
function () {
this.registerScrollEvent();
};
/**
* @return {?}
*/
NzAnchorComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.destroyed = true;
this.removeListen();
};
/**
* @private
* @return {?}
*/
NzAnchorComponent.prototype.registerScrollEvent = /**
* @private
* @return {?}
*/
function () {
var _this = this;
if (!this.platform.isBrowser) {
return;
}
this.removeListen();
this.scroll$ = fromEvent(this.getTarget(), 'scroll')
.pipe(throttleTime(50), distinctUntilChanged())
.subscribe((/**
* @return {?}
*/
function () { return _this.handleScroll(); }));
// Browser would maintain the scrolling position when refreshing.
// So we have to delay calculation in avoid of getting a incorrect result.
setTimeout((/**
* @return {?}
*/
function () { return _this.handleScroll(); }));
};
/**
* @private
* @return {?}
*/
NzAnchorComponent.prototype.removeListen = /**
* @private
* @return {?}
*/
function () {
if (this.scroll$) {
this.scroll$.unsubscribe();
}
};
/**
* @private
* @param {?} element
* @return {?}
*/
NzAnchorComponent.prototype.getOffsetTop = /**
* @private
* @param {?} element
* @return {?}
*/
function (element) {
if (!element || !element.getClientRects().length) {
return 0;
}
/** @type {?} */
var rect = element.getBoundingClientRect();
if (rect.width || rect.height) {
if (this.getTarget() === window) {
return rect.top - (/** @type {?} */ ((/** @type {?} */ (element.ownerDocument)).documentElement)).clientTop;
}
return rect.top - ((/** @type {?} */ (this.getTarget()))).getBoundingClientRect().top;
}
return rect.top;
};
/**
* @return {?}
*/
NzAnchorComponent.prototype.handleScroll = /**
* @return {?}
*/
function () {
var _this = this;
if (typeof document === 'undefined' || this.destroyed || this.animating) {
return;
}
/** @type {?} */
var sections = [];
/** @type {?} */
var scope = (this.nzOffsetTop || 0) + this.nzBounds;
this.links.forEach((/**
* @param {?} comp
* @return {?}
*/
function (comp) {
/** @type {?} */
var sharpLinkMatch = sharpMatcherRegx.exec(comp.nzHref.toString());
if (!sharpLinkMatch) {
return;
}
/** @type {?} */
var target = _this.doc.getElementById(sharpLinkMatch[1]);
if (target) {
/** @type {?} */
var top_1 = _this.getOffsetTop(target);
if (top_1 < scope) {
sections.push({
top: top_1,
comp: comp
});
}
}
}));
this.visible = !!sections.length;
if (!this.visible) {
this.clearActive();
this.cdr.detectChanges();
}
else {
/** @type {?} */
var maxSection = sections.reduce((/**
* @param {?} prev
* @param {?} curr
* @return {?}
*/
function (prev, curr) { return (curr.top > prev.top ? curr : prev); }));
this.handleActive(maxSection.comp);
}
};
/**
* @private
* @return {?}
*/
NzAnchorComponent.prototype.clearActive = /**
* @private
* @return {?}
*/
function () {
this.links.forEach((/**
* @param {?} i
* @return {?}
*/
function (i) {
i.active = false;
i.markForCheck();
}));
};
/**
* @private
* @param {?} comp
* @return {?}
*/
NzAnchorComponent.prototype.handleActive = /**
* @private
* @param {?} comp
* @return {?}
*/
function (comp) {
this.clearActive();
comp.active = true;
comp.markForCheck();
/** @type {?} */
var linkNode = (/** @type {?} */ (((/** @type {?} */ (comp.elementRef.nativeElement))).querySelector('.ant-anchor-link-title')));
this.ink.nativeElement.style.top = linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5 + "px";
this.visible = true;
this.cdr.detectChanges();
this.nzScroll.emit(comp);
};
/**
* @param {?} linkComp
* @return {?}
*/
NzAnchorComponent.prototype.handleScrollTo = /**
* @param {?} linkComp
* @return {?}
*/
function (linkComp) {
var _this = this;
/** @type {?} */
var el = this.doc.querySelector(linkComp.nzHref);
if (!el) {
return;
}
this.animating = true;
/** @type {?} */
var containerScrollTop = this.scrollSrv.getScroll(this.getTarget());
/** @type {?} */
var elOffsetTop = this.getOffsetTop(el);
/** @type {?} */
var targetScrollTop = containerScrollTop + elOffsetTop - (this.nzOffsetTop || 0);
this.scrollSrv.scrollTo(this.getTarget(), targetScrollTop, undefined, (/**
* @return {?}
*/
function () {
_this.animating = false;
_this.handleActive(linkComp);
}));
this.nzClick.emit(linkComp.nzHref);
};
NzAnchorComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-anchor',
exportAs: 'nzAnchor',
preserveWhitespaces: false,
template: "<nz-affix *ngIf=\"nzAffix;else content\" [nzOffsetTop]=\"nzOffsetTop\">\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n</nz-affix>\n<ng-template #content>\n <div class=\"ant-anchor-wrapper\" [ngStyle]=\"wrapperStyle\">\n <div class=\"ant-anchor\" [ngClass]=\"{'fixed': !nzAffix && !nzShowInkInFixed}\">\n <div class=\"ant-anchor-ink\">\n <div class=\"ant-anchor-ink-ball\" [class.visible]=\"visible\" #ink></div>\n </div>\n <ng-content></ng-content>\n </div>\n </div>\n</ng-template>",
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush
}] }
];
/** @nocollapse */
NzAnchorComponent.ctorParameters = function () { return [
{ type: NzConfigService },
{ type: NzScrollService },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
{ type: ChangeDetectorRef },
{ type: Platform }
]; };
NzAnchorComponent.propDecorators = {
ink: [{ type: ViewChild, args: ['ink', { static: false },] }],
nzAffix: [{ type: Input }],
nzShowInkInFixed: [{ type: Input }],
nzBounds: [{ type: Input }],
nzOffsetTop: [{ type: Input }],
nzTarget: [{ type: Input }],
nzClick: [{ type: Output }],
nzScroll: [{ type: Output }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], NzAnchorComponent.prototype, "nzAffix", void 0);
__decorate([
WithConfig(false), InputBoolean(),
__metadata("design:type", Boolean)
], NzAnchorComponent.prototype, "nzShowInkInFixed", void 0);
__decorate([
WithConfig(5), InputNumber(),
__metadata("design:type", Number)
], NzAnchorComponent.prototype, "nzBounds", void 0);
__decorate([
WithConfig(),
__metadata("design:type", Number),
__metadata("design:paramtypes", [Number])
], NzAnchorComponent.prototype, "nzOffsetTop", null);
return NzAnchorComponent;
}());
if (false) {
/**
* @type {?}
* @private
*/
NzAnchorComponent.prototype.ink;
/** @type {?} */
NzAnchorComponent.prototype.nzAffix;
/** @type {?} */
NzAnchorComponent.prototype.nzShowInkInFixed;
/** @type {?} */
NzAnchorComponent.prototype.nzBounds;
/**
* @type {?}
* @private
*/
NzAnchorComponent.prototype._offsetTop;
/** @type {?} */
NzAnchorComponent.prototype.nzClick;
/** @type {?} */
NzAnchorComponent.prototype.nzScroll;
/** @type {?} */
NzAnchorComponent.prototype.visible;
/** @type {?} */
NzAnchorComponent.prototype.wrapperStyle;
/**
* @type {?}
* @private
*/
NzAnchorComponent.prototype.links;
/**
* @type {?}
* @private
*/
NzAnchorComponent.prototype.animating;
/**
* @type {?}
* @private
*/
NzAnchorComponent.prototype.target;
/**
* @type {?}
* @private
*/
NzAnchorComponent.prototype.scroll$;
/**
* @type {?}
* @private
*/
NzAnchorComponent.prototype.destroyed;
/** @type {?} */
NzAnchorComponent.prototype.nzConfigService;
/**
* @type {?}
* @private
*/
NzAnchorComponent.prototype.scrollSrv;
/**
* @type {?}
* @private
*/
NzAnchorComponent.prototype.doc;
/**
* @type {?}
* @private
*/
NzAnchorComponent.prototype.cdr;
/**
* @type {?}
* @private
*/
NzAnchorComponent.prototype.platform;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzAnchorLinkComponent = /** @class */ (function () {
function NzAnchorLinkComponent(elementRef, anchorComp, cdr, platform, renderer) {
this.elementRef = elementRef;
this.anchorComp = anchorComp;
this.cdr = cdr;
this.platform = platform;
this.nzHref = '#';
this.titleStr = '';
this.active = false;
renderer.addClass(elementRef.nativeElement, 'ant-anchor-link');
}
Object.defineProperty(NzAnchorLinkComponent.prototype, "nzTitle", {
set: /**
* @param {?} value
* @return {?}
*/
function (value) {
if (value instanceof TemplateRef) {
this.titleStr = null;
this.titleTpl = value;
}
else {
this.titleStr = value;
}
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
NzAnchorLinkComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.anchorComp.registerLink(this);
};
/**
* @param {?} e
* @return {?}
*/
NzAnchorLinkComponent.prototype.goToClick = /**
* @param {?} e
* @return {?}
*/
function (e) {
e.preventDefault();
e.stopPropagation();
if (this.platform.isBrowser) {
this.anchorComp.handleScrollTo(this);
}
};
/**
* @return {?}
*/
NzAnchorLinkComponent.prototype.markForCheck = /**
* @return {?}
*/
function () {
this.cdr.markForCheck();
};
/**
* @return {?}
*/
NzAnchorLinkComponent.prototype.ngOnDestroy = /**
* @return {?}
*/
function () {
this.anchorComp.unregisterLink(this);
};
NzAnchorLinkComponent.decorators = [
{ type: Component, args: [{
selector: 'nz-link',
exportAs: 'nzLink',
preserveWhitespaces: false,
template: "<a (click)=\"goToClick($event)\" href=\"{{nzHref}}\" class=\"ant-anchor-link-title\" title=\"{{titleStr}}\">\n <span *ngIf=\"titleStr; else (titleTpl || nzTemplate)\">{{ titleStr }}</span>\n</a>\n<ng-content></ng-content>",
host: {
'[class.ant-anchor-link-active]': 'active'
},
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
styles: ["\n nz-link {\n display: block;\n }\n "]
}] }
];
/** @nocollapse */
NzAnchorLinkComponent.ctorParameters = function () { return [
{ type: ElementRef },
{ type: NzAnchorComponent },
{ type: ChangeDetectorRef },
{ type: Platform },
{ type: Renderer2 }
]; };
NzAnchorLinkComponent.propDecorators = {
nzHref: [{ type: Input }],
nzTitle: [{ type: Input }],
nzTemplate: [{ type: ContentChild, args: ['nzTemplate', { static: false },] }]
};
return NzAnchorLinkComponent;
}());
if (false) {
/** @type {?} */
NzAnchorLinkComponent.prototype.nzHref;
/** @type {?} */
NzAnchorLinkComponent.prototype.titleStr;
/** @type {?} */
NzAnchorLinkComponent.prototype.titleTpl;
/** @type {?} */
NzAnchorLinkComponent.prototype.active;
/** @type {?} */
NzAnchorLinkComponent.prototype.nzTemplate;
/** @type {?} */
NzAnchorLinkComponent.prototype.elementRef;
/**
* @type {?}
* @private
*/
NzAnchorLinkComponent.prototype.anchorComp;
/**
* @type {?}
* @private
*/
NzAnchorLinkComponent.prototype.cdr;
/**
* @type {?}
* @private
*/
NzAnchorLinkComponent.prototype.platform;
}
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NzAnchorModule = /** @class */ (function () {
function NzAnchorModule() {
}
NzAnchorModule.decorators = [
{ type: NgModule, args: [{
declarations: [NzAnchorComponent, NzAnchorLinkComponent],
exports: [NzAnchorComponent, NzAnchorLinkComponent],
imports: [CommonModule, NzAffixModule, PlatformModule],
providers: [SCROLL_SERVICE_PROVIDER]
},] }
];
return NzAnchorModule;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NzAnchorComponent, NzAnchorLinkComponent, NzAnchorModule };
//# sourceMappingURL=ng-zorro-antd-anchor.js.map