@ohayojp.com/components
Version:
Common business components of ohayojp.
452 lines (446 loc) • 16.8 kB
JavaScript
import { __decorate, __metadata } from 'tslib';
import { Platform } from '@angular/cdk/platform';
import { TemplateRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Renderer2, Optional, Inject, ChangeDetectorRef, ViewChild, Input, NgModule } from '@angular/core';
import { NavigationEnd, Router, RouterModule } from '@angular/router';
import { ReuseTabService } from '@ohayojp.com/components/reuse-tab';
import { SettingsService, MenuService, OHAYO_I18N_TOKEN, TitleService } from '@ohayojp.com/theme';
import { isEmpty, OhayoConfigService, InputBoolean, InputNumber, OhayoUtilModule } from '@ohayojp.com/util';
import { NzAffixModule } from 'ng-zorro-antd/affix';
import { Subject, merge } from 'rxjs';
import { takeUntil, filter } from 'rxjs/operators';
import { ObserversModule } from '@angular/cdk/observers';
import { CommonModule } from '@angular/common';
import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
/**
* @fileoverview added by tsickle
* Generated from: page-header.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @record
*/
function PageHeaderPath() { }
if (false) {
/** @type {?|undefined} */
PageHeaderPath.prototype.title;
/** @type {?|undefined} */
PageHeaderPath.prototype.link;
}
class PageHeaderComponent {
// #endregion
/**
* @param {?} settings
* @param {?} renderer
* @param {?} router
* @param {?} menuSrv
* @param {?} i18nSrv
* @param {?} titleSrv
* @param {?} reuseSrv
* @param {?} cdr
* @param {?} configSrv
* @param {?} platform
*/
constructor(settings, renderer, router, menuSrv, i18nSrv, titleSrv, reuseSrv, cdr, configSrv, platform) {
this.renderer = renderer;
this.router = router;
this.menuSrv = menuSrv;
this.i18nSrv = i18nSrv;
this.titleSrv = titleSrv;
this.reuseSrv = reuseSrv;
this.cdr = cdr;
this.inited = false;
this.unsubscribe$ = new Subject();
this.isBrowser = true;
this._titleVal = '';
this.paths = [];
this.loading = false;
this.wide = false;
this.isBrowser = platform.isBrowser;
configSrv.attach(this, 'pageHeader', {
home: '首页',
homeLink: '/',
autoBreadcrumb: true,
recursiveBreadcrumb: false,
autoTitle: true,
syncTitle: true,
fixed: false,
fixedOffsetTop: 64,
});
settings.notify
.pipe(takeUntil(this.unsubscribe$), filter((/**
* @param {?} w
* @return {?}
*/
w => this.affix && w.type === 'layout' && w.name === 'collapsed')))
.subscribe((/**
* @return {?}
*/
() => this.affix.updatePosition((/** @type {?} */ ({})))));
merge(menuSrv.change.pipe(filter((/**
* @return {?}
*/
() => this.inited))), router.events.pipe(filter((/**
* @param {?} ev
* @return {?}
*/
ev => ev instanceof NavigationEnd))), i18nSrv.change)
.pipe(takeUntil(this.unsubscribe$))
.subscribe((/**
* @return {?}
*/
() => this.refresh()));
}
/**
* @private
* @return {?}
*/
get menus() {
return this.menuSrv.getPathByUrl(this.router.url, this.recursiveBreadcrumb);
}
/**
* @param {?} value
* @return {?}
*/
set title(value) {
if (value instanceof TemplateRef) {
this._title = null;
this._titleTpl = value;
this._titleVal = '';
}
else {
this._title = value;
this._titleVal = this._title;
}
}
/**
* @return {?}
*/
refresh() {
this.setTitle().genBreadcrumb();
this.cdr.detectChanges();
}
/**
* @private
* @return {?}
*/
genBreadcrumb() {
if (this.breadcrumb || !this.autoBreadcrumb || this.menus.length <= 0) {
this.paths = [];
return;
}
/** @type {?} */
const paths = [];
this.menus.forEach((/**
* @param {?} item
* @return {?}
*/
item => {
if (typeof item.hideInBreadcrumb !== 'undefined' && item.hideInBreadcrumb)
return;
/** @type {?} */
let title = item.text;
if (item.i18n && this.i18nSrv)
title = this.i18nSrv.fanyi(item.i18n);
paths.push({ title, link: (/** @type {?} */ ((item.link && [item.link]))) });
}));
// add home
if (this.home) {
paths.splice(0, 0, {
title: (this.homeI18n && this.i18nSrv && this.i18nSrv.fanyi(this.homeI18n)) || this.home,
link: [this.homeLink],
});
}
this.paths = paths;
}
/**
* @private
* @template THIS
* @this {THIS}
* @return {THIS}
*/
setTitle() {
if ((/** @type {?} */ (this))._title == null && (/** @type {?} */ (this))._titleTpl == null && (/** @type {?} */ (this)).autoTitle && (/** @type {?} */ (this)).menus.length > 0) {
/** @type {?} */
const item = (/** @type {?} */ (this)).menus[(/** @type {?} */ (this)).menus.length - 1];
/** @type {?} */
let title = item.text;
if (item.i18n && (/** @type {?} */ (this)).i18nSrv) {
title = (/** @type {?} */ (this)).i18nSrv.fanyi(item.i18n);
}
(/** @type {?} */ (this))._titleVal = (/** @type {?} */ (title));
}
if ((/** @type {?} */ (this))._titleVal && (/** @type {?} */ (this)).syncTitle) {
if ((/** @type {?} */ (this)).titleSrv) {
(/** @type {?} */ (this)).titleSrv.setTitle((/** @type {?} */ (this))._titleVal);
}
if (!(/** @type {?} */ (this)).inited && (/** @type {?} */ (this)).reuseSrv) {
(/** @type {?} */ (this)).reuseSrv.title = (/** @type {?} */ (this))._titleVal;
}
}
return (/** @type {?} */ (this));
}
/**
* @return {?}
*/
checkContent() {
if (isEmpty(this.conTpl.nativeElement)) {
this.renderer.setAttribute(this.conTpl.nativeElement, 'hidden', '');
}
else {
this.renderer.removeAttribute(this.conTpl.nativeElement, 'hidden');
}
}
/**
* @return {?}
*/
ngOnInit() {
this.refresh();
this.inited = true;
}
/**
* @return {?}
*/
ngAfterViewInit() {
this.checkContent();
}
/**
* @return {?}
*/
ngOnChanges() {
if (this.inited) {
this.refresh();
}
}
/**
* @return {?}
*/
ngOnDestroy() {
const { unsubscribe$ } = this;
unsubscribe$.next();
unsubscribe$.complete();
}
}
PageHeaderComponent.decorators = [
{
type: Component, args: [{
selector: 'page-header',
exportAs: 'pageHeader',
template: "<nz-affix #affix *ngIf=\"isBrowser && fixed; else phTpl\" [nzOffsetTop]=\"fixedOffsetTop\">\n <ng-template [ngTemplateOutlet]=\"phTpl\"></ng-template>\n</nz-affix>\n<ng-template #phTpl>\n <div class=\"page-header\">\n <div [ngClass]=\"{ 'page-header__wide': wide }\">\n <nz-skeleton [nzLoading]=\"loading\" [nzTitle]=\"false\" [nzActive]=\"true\" [nzParagraph]=\"{ rows: 3 }\" [nzAvatar]=\"{ size: 'large', shape: 'circle' }\">\n <ng-container *ngIf=\"!breadcrumb; else breadcrumb\">\n <nz-breadcrumb *ngIf=\"paths && paths.length > 0\">\n <nz-breadcrumb-item *ngFor=\"let i of paths\">\n <ng-container *ngIf=\"i.link\">\n <a [routerLink]=\"i.link\">{{ i.title }}</a>\n </ng-container>\n <ng-container *ngIf=\"!i.link\">{{ i.title }}</ng-container>\n </nz-breadcrumb-item>\n </nz-breadcrumb>\n </ng-container>\n <div class=\"page-header__detail\">\n <div *ngIf=\"logo\" class=\"page-header__logo\">\n <ng-template [ngTemplateOutlet]=\"logo\"></ng-template>\n </div>\n <div class=\"page-header__main\">\n <div class=\"page-header__row\">\n <h1 *ngIf=\"_titleVal || _titleTpl\" class=\"page-header__title\">\n <ng-container *ngIf=\"_titleVal; else _titleTpl\">{{ _titleVal }}</ng-container>\n </h1>\n <div *ngIf=\"action\" class=\"page-header__action\">\n <ng-template [ngTemplateOutlet]=\"action\"></ng-template>\n </div>\n </div>\n <div class=\"page-header__row\">\n <div class=\"page-header__desc\" (cdkObserveContent)=\"checkContent()\" #conTpl>\n <ng-content></ng-content>\n <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n </div>\n <div *ngIf=\"extra\" class=\"page-header__extra\">\n <ng-template [ngTemplateOutlet]=\"extra\"></ng-template>\n </div>\n </div>\n </div>\n </div>\n <ng-template [ngTemplateOutlet]=\"tab\"></ng-template>\n </nz-skeleton>\n </div>\n </div>\n</ng-template>\n",
preserveWhitespaces: false,
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None
}]
}
];
/** @nocollapse */
PageHeaderComponent.ctorParameters = () => [
{ type: SettingsService },
{ type: Renderer2 },
{ type: Router },
{ type: MenuService },
{ type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [OHAYO_I18N_TOKEN,] }] },
{ type: TitleService, decorators: [{ type: Optional }, { type: Inject, args: [TitleService,] }] },
{ type: ReuseTabService, decorators: [{ type: Optional }, { type: Inject, args: [ReuseTabService,] }] },
{ type: ChangeDetectorRef },
{ type: OhayoConfigService },
{ type: Platform }
];
PageHeaderComponent.propDecorators = {
conTpl: [{ type: ViewChild, args: ['conTpl', { static: false },] }],
affix: [{ type: ViewChild, args: ['affix', { static: false },] }],
title: [{ type: Input }],
loading: [{ type: Input }],
wide: [{ type: Input }],
home: [{ type: Input }],
homeLink: [{ type: Input }],
homeI18n: [{ type: Input }],
autoBreadcrumb: [{ type: Input }],
autoTitle: [{ type: Input }],
syncTitle: [{ type: Input }],
fixed: [{ type: Input }],
fixedOffsetTop: [{ type: Input }],
breadcrumb: [{ type: Input }],
recursiveBreadcrumb: [{ type: Input }],
logo: [{ type: Input }],
action: [{ type: Input }],
content: [{ type: Input }],
extra: [{ type: Input }],
tab: [{ type: Input }]
};
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], PageHeaderComponent.prototype, "loading", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Object)
], PageHeaderComponent.prototype, "wide", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], PageHeaderComponent.prototype, "autoBreadcrumb", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], PageHeaderComponent.prototype, "autoTitle", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], PageHeaderComponent.prototype, "syncTitle", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], PageHeaderComponent.prototype, "fixed", void 0);
__decorate([
InputNumber(),
__metadata("design:type", Number)
], PageHeaderComponent.prototype, "fixedOffsetTop", void 0);
__decorate([
InputBoolean(),
__metadata("design:type", Boolean)
], PageHeaderComponent.prototype, "recursiveBreadcrumb", void 0);
if (false) {
/** @type {?} */
PageHeaderComponent.ngAcceptInputType_loading;
/** @type {?} */
PageHeaderComponent.ngAcceptInputType_wide;
/** @type {?} */
PageHeaderComponent.ngAcceptInputType_autoBreadcrumb;
/** @type {?} */
PageHeaderComponent.ngAcceptInputType_autoTitle;
/** @type {?} */
PageHeaderComponent.ngAcceptInputType_syncTitle;
/** @type {?} */
PageHeaderComponent.ngAcceptInputType_fixed;
/** @type {?} */
PageHeaderComponent.ngAcceptInputType_fixedOffsetTop;
/** @type {?} */
PageHeaderComponent.ngAcceptInputType_recursiveBreadcrumb;
/** @type {?} */
PageHeaderComponent.prototype.inited;
/**
* @type {?}
* @private
*/
PageHeaderComponent.prototype.unsubscribe$;
/**
* @type {?}
* @private
*/
PageHeaderComponent.prototype.conTpl;
/**
* @type {?}
* @private
*/
PageHeaderComponent.prototype.affix;
/** @type {?} */
PageHeaderComponent.prototype.isBrowser;
/** @type {?} */
PageHeaderComponent.prototype._titleVal;
/** @type {?} */
PageHeaderComponent.prototype.paths;
/** @type {?} */
PageHeaderComponent.prototype._title;
/** @type {?} */
PageHeaderComponent.prototype._titleTpl;
/** @type {?} */
PageHeaderComponent.prototype.loading;
/** @type {?} */
PageHeaderComponent.prototype.wide;
/** @type {?} */
PageHeaderComponent.prototype.home;
/** @type {?} */
PageHeaderComponent.prototype.homeLink;
/** @type {?} */
PageHeaderComponent.prototype.homeI18n;
/** @type {?} */
PageHeaderComponent.prototype.autoBreadcrumb;
/** @type {?} */
PageHeaderComponent.prototype.autoTitle;
/** @type {?} */
PageHeaderComponent.prototype.syncTitle;
/** @type {?} */
PageHeaderComponent.prototype.fixed;
/** @type {?} */
PageHeaderComponent.prototype.fixedOffsetTop;
/** @type {?} */
PageHeaderComponent.prototype.breadcrumb;
/** @type {?} */
PageHeaderComponent.prototype.recursiveBreadcrumb;
/** @type {?} */
PageHeaderComponent.prototype.logo;
/** @type {?} */
PageHeaderComponent.prototype.action;
/** @type {?} */
PageHeaderComponent.prototype.content;
/** @type {?} */
PageHeaderComponent.prototype.extra;
/** @type {?} */
PageHeaderComponent.prototype.tab;
/**
* @type {?}
* @private
*/
PageHeaderComponent.prototype.renderer;
/**
* @type {?}
* @private
*/
PageHeaderComponent.prototype.router;
/**
* @type {?}
* @private
*/
PageHeaderComponent.prototype.menuSrv;
/**
* @type {?}
* @private
*/
PageHeaderComponent.prototype.i18nSrv;
/**
* @type {?}
* @private
*/
PageHeaderComponent.prototype.titleSrv;
/**
* @type {?}
* @private
*/
PageHeaderComponent.prototype.reuseSrv;
/**
* @type {?}
* @private
*/
PageHeaderComponent.prototype.cdr;
}
/**
* @fileoverview added by tsickle
* Generated from: page-header.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @type {?} */
const COMPONENTS = [PageHeaderComponent];
class PageHeaderModule {
}
PageHeaderModule.decorators = [
{
type: NgModule, args: [{
imports: [CommonModule, RouterModule, ObserversModule, OhayoUtilModule, NzAffixModule, NzSkeletonModule, NzBreadCrumbModule],
declarations: [...COMPONENTS],
exports: [...COMPONENTS],
},]
}
];
/**
* @fileoverview added by tsickle
* Generated from: public_api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: pageHeader.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { PageHeaderComponent, PageHeaderModule };
//# sourceMappingURL=pageHeader.js.map