ngx-bit
Version:
A flexible NG-ZORRO helper library
371 lines (359 loc) • 15.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, Input, Directive, TemplateRef, ViewChild, ContentChild, ContentChildren, NgModule } from '@angular/core';
import * as i1 from '@angular/router';
import { NavigationEnd, PRIMARY_OUTLET, Router, RouterModule } from '@angular/router';
import { Subject } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { StorageMap } from '@ngx-pwa/local-storage';
import * as i2 from '@ngx-pwa/local-storage/public-api';
import { BitService } from 'ngx-bit';
import { CommonModule } from '@angular/common';
import { NzMenuModule } from 'ng-zorro-antd/menu';
import { NzIconModule } from 'ng-zorro-antd/icon';
import { BitPipeModule } from 'ngx-bit/pipe';
import { BitDirectiveModule } from 'ngx-bit/directive';
import { NzLayoutModule } from 'ng-zorro-antd/layout';
import { NzPageHeaderModule } from 'ng-zorro-antd/page-header';
import { NzBreadCrumbModule } from 'ng-zorro-antd/breadcrumb';
import { NzSpaceModule } from 'ng-zorro-antd/space';
class BitRouterService {
constructor(router, storage) {
this.router = router;
this.storage = storage;
/**
* 被激活的导航
* Activated navigation
*/
this.navActive = [];
/**
* 允许返回
* Allow back
*/
this.back = false;
/**
* Title
*/
this.title = null;
/**
* SubTitle
*/
this.subTitle = null;
/**
* default breadcrumb Root
*/
this.breadcrumbRoot = 0;
/**
* Header actions
*/
this.actions = [];
/**
* Status
*/
this.changed = new Subject();
}
/**
* 初始化平行路由
* Initialize parallel routing
*/
setup() {
if (this.events$) {
return;
}
if (this.router.url !== '/') {
this.match(this.router, this.router.url);
}
this.events$ = this.router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe((event) => {
if (event.url !== '/') {
this.match(this.router, event.url);
}
else {
this.clearBreadcrumb();
}
});
}
/**
* 设置平行路由数据，同步导航与页头
* Set parallel routing data, synchronize navigation and page header
*/
setData(data) {
this.storage.set('resource', data.resource).subscribe(_ => _);
this.storage.set('router', data.router).subscribe(_ => _);
}
/**
* 取消平行路由逻辑
* Cancel parallel routing logic
*/
uninstall() {
if (this.events$) {
this.events$.unsubscribe();
}
}
match(router, url) {
const primary = router.parseUrl(url).root.children[PRIMARY_OUTLET];
const segments = primary.segments;
this.storage.get('router').pipe(map((data) => {
if (data) {
for (let i = 0; i < segments.length; i++) {
const key = segments.slice(0, i + 1).map(v => v.path).join('/');
if (data.hasOwnProperty(key)) {
return key;
}
}
}
return null;
})).subscribe(maybeKey => {
if (!maybeKey) {
router.navigate(['/empty']);
this.clearBreadcrumb();
}
else {
this.dynamicBreadcrumb(maybeKey);
}
});
}
dynamicBreadcrumb(key) {
this.storage.get('resource').subscribe((data) => {
const queue = [];
const breadcrumb = [];
const navActive = [];
if (data.hasOwnProperty(key)) {
const node = data[key];
const name = JSON.parse(node.name);
this.title = name;
navActive.unshift(node.key);
breadcrumb.unshift({
name,
key: node.key,
router: node.router
});
if (node.parent !== this.breadcrumbRoot) {
queue.push(node.parent);
}
}
while (queue.length !== this.breadcrumbRoot) {
const parentKey = queue.pop();
if (data.hasOwnProperty(parentKey)) {
const next = data[parentKey];
navActive.unshift(next.key);
breadcrumb.unshift({
name: JSON.parse(next.name),
key: next.key,
router: next.router
});
if (next.parent !== this.breadcrumbRoot) {
queue.push(next.parent);
}
}
}
this.navActive = navActive;
this.breadcrumb = breadcrumb;
});
}
clearBreadcrumb() {
this.navActive = [];
this.breadcrumb = [];
this.title = null;
}
}
BitRouterService.ɵprov = i0.ɵɵdefineInjectable({ factory: function BitRouterService_Factory() { return new BitRouterService(i0.ɵɵinject(i1.Router), i0.ɵɵinject(i2.StorageMap)); }, token: BitRouterService, providedIn: "root" });
BitRouterService.decorators = [
{ type: Injectable, args: [{ providedIn: 'root' },] }
];
BitRouterService.ctorParameters = () => [
{ type: Router },
{ type: StorageMap }
];
class BitSiderComponent {
constructor(bit, router) {
this.bit = bit;
this.router = router;
this.collapsed = false;
this.data = [];
}
/**
* 返回层级
*/
level(data) {
let deep = 0;
while (data.hasOwnProperty('parentNode')) {
deep++;
data = data.parentNode;
}
return deep * 24;
}
}
BitSiderComponent.decorators = [
{ type: Component, args: [{
selector: 'bit-sider',
template: "<nz-sider nzCollapsible [(nzCollapsed)]=\"collapsed\" [nzBreakpoint]=\"'lg'\">\n <div class=\"scroll-bar\">\n <ul\n nz-menu\n [nzTheme]=\"'dark'\"\n [nzInlineCollapsed]=\"collapsed\"\n [nzMode]=\"collapsed ? 'vertical' : 'inline'\"\n >\n <ng-container *ngTemplateOutlet=\"navTemplate; context: { $implicit: data }\"></ng-container>\n <ng-template #navTemplate let-navs>\n <ng-container *ngFor=\"let nav of navs\">\n <ng-container *ngIf=\"nav.router; else notRouter\">\n <li\n nz-menu-item\n [nzPaddingLeft]=\"level(nav)\"\n [bitOpen]=\"[nav.key]\"\n [nzSelected]=\"router.navActive.includes(nav.key)\"\n >\n <i nz-icon [nzType]=\"nav.icon\"></i>\n <span class=\"nav-text\">{{ nav.name | object: bit.locale }}</span>\n </li>\n </ng-container>\n <ng-template #notRouter>\n <li\n nz-submenu\n [nzOpen]=\"router.navActive.includes(nav.key)\"\n [nzPaddingLeft]=\"level(nav)\"\n >\n <span title>\n <i nz-icon [nzType]=\"nav.icon\"></i>\n <span>{{ nav.name | object: bit.locale }}</span>\n </span>\n <ul>\n <ng-container\n *ngTemplateOutlet=\"navTemplate; context: { $implicit: nav.children }\"\n ></ng-container>\n </ul>\n </li>\n </ng-template>\n </ng-container>\n </ng-template>\n </ul>\n </div>\n</nz-sider>\n",
styles: ["nz-sider{overflow:hidden;height:100%;position:fixed;left:0}nz-sider .scroll-bar{height:calc(100% - 48px);overflow:auto}"]
},] }
];
BitSiderComponent.ctorParameters = () => [
{ type: BitService },
{ type: BitRouterService }
];
BitSiderComponent.propDecorators = {
collapsed: [{ type: Input }],
data: [{ type: Input }]
};
class BitPageHeaderComponent {
constructor(bit, router) {
this.bit = bit;
this.router = router;
}
}
BitPageHeaderComponent.decorators = [
{ type: Component, args: [{
selector: 'bit-page-header',
template: "<ng-container *ngTemplateOutlet=\"router.banner\"></ng-container>\n<nz-page-header [nzGhost]=\"false\" [nzBackIcon]=\"!router.back ? null : ''\" (nzBack)=\"bit.back()\">\n <nz-breadcrumb [nzSeparator]=\"breadcrumbIcon\" nz-page-header-breadcrumb>\n <ng-template #breadcrumbIcon>\n <i nz-icon nzType=\"right\"></i>\n </ng-template>\n <nz-breadcrumb-item>\n <a routerLink=\"/\">{{ bit.l[\"dashboard\"] }}</a>\n </nz-breadcrumb-item>\n <nz-breadcrumb-item *ngFor=\"let x of router.breadcrumb; index as i; last as islast\">\n <ng-container *ngIf=\"islast; else notLast\">\n {{ x.name | object: bit.locale }}\n </ng-container>\n <ng-template #notLast>\n <a *ngIf=\"x.router; else notRouterlink\" [bitHistory]=\"x.key\">\n {{ x.name | object: bit.locale }}\n </a>\n <ng-template #notRouterlink>{{ x.name | object: bit.locale }}</ng-template>\n </ng-template>\n </nz-breadcrumb-item>\n </nz-breadcrumb>\n <nz-page-header-title>{{ router.title | object: bit.locale }}</nz-page-header-title>\n <nz-page-header-subtitle>{{ router.subTitle | object: bit.locale }}</nz-page-header-subtitle>\n <nz-page-header-tags>\n <ng-container *ngTemplateOutlet=\"router.tags\"></ng-container>\n </nz-page-header-tags>\n <nz-page-header-extra>\n <nz-space>\n <ng-container *ngFor=\"let action of router.actions\">\n <ng-container *nzSpaceItem>\n <ng-container *ngTemplateOutlet=\"action\"></ng-container>\n </ng-container>\n </ng-container>\n </nz-space>\n </nz-page-header-extra>\n <nz-page-header-content>\n <ng-container *ngTemplateOutlet=\"router.content\"></ng-container>\n </nz-page-header-content>\n <nz-page-header-footer>\n <ng-container *ngTemplateOutlet=\"router.footer\"></ng-container>\n </nz-page-header-footer>\n</nz-page-header>\n",
styles: ["::ng-deep .ant-page-header-footer{margin-top:0}"]
},] }
];
BitPageHeaderComponent.ctorParameters = () => [
{ type: BitService },
{ type: BitRouterService }
];
class BitHeaderTagsDirective {
constructor(ref) {
this.ref = ref;
}
}
BitHeaderTagsDirective.decorators = [
{ type: Directive, args: [{
selector: '[bitHeaderTags]'
},] }
];
BitHeaderTagsDirective.ctorParameters = () => [
{ type: TemplateRef }
];
class BitHeaderBannerDirective {
constructor(ref) {
this.ref = ref;
}
}
BitHeaderBannerDirective.decorators = [
{ type: Directive, args: [{
selector: '[bitHeaderBanner]'
},] }
];
BitHeaderBannerDirective.ctorParameters = () => [
{ type: TemplateRef }
];
class BitHeaderActionDirective {
constructor(ref) {
this.ref = ref;
}
}
BitHeaderActionDirective.decorators = [
{ type: Directive, args: [{
selector: '[bitHeaderAction]'
},] }
];
BitHeaderActionDirective.ctorParameters = () => [
{ type: TemplateRef }
];
class BitHeaderFooterDirective {
constructor(ref) {
this.ref = ref;
}
}
BitHeaderFooterDirective.decorators = [
{ type: Directive, args: [{
selector: '[bitHeaderFooter]'
},] }
];
BitHeaderFooterDirective.ctorParameters = () => [
{ type: TemplateRef }
];
class BitHeaderComponent {
constructor(router) {
this.router = router;
}
ngOnInit() {
this.router.subTitle = this.subTitle;
this.router.back = this.back !== undefined;
}
ngAfterViewInit() {
var _a, _b, _c, _d;
this.router.banner = (_a = this.banner) === null || _a === void 0 ? void 0 : _a.ref;
this.router.actions = (_b = this.actions) === null || _b === void 0 ? void 0 : _b.map(v => v.ref);
this.router.tags = (_c = this.tags) === null || _c === void 0 ? void 0 : _c.ref;
this.router.content = this.content;
this.router.footer = (_d = this.footer) === null || _d === void 0 ? void 0 : _d.ref;
this.router.changed.next(true);
}
ngOnDestroy() {
this.router.subTitle = null;
this.router.back = false;
this.router.banner = undefined;
this.router.actions = [];
this.router.tags = undefined;
this.router.content = undefined;
this.router.footer = undefined;
}
}
BitHeaderComponent.decorators = [
{ type: Component, args: [{
selector: 'bit-header',
template: `
<ng-template #ContentTpl>
<ng-content></ng-content>
</ng-template>
`
},] }
];
BitHeaderComponent.ctorParameters = () => [
{ type: BitRouterService }
];
BitHeaderComponent.propDecorators = {
subTitle: [{ type: Input }],
back: [{ type: Input }],
content: [{ type: ViewChild, args: ['ContentTpl',] }],
banner: [{ type: ContentChild, args: [BitHeaderBannerDirective,] }],
tags: [{ type: ContentChild, args: [BitHeaderTagsDirective,] }],
actions: [{ type: ContentChildren, args: [BitHeaderActionDirective,] }],
footer: [{ type: ContentChild, args: [BitHeaderFooterDirective,] }]
};
class BitRouterModule {
}
BitRouterModule.decorators = [
{ type: NgModule, args: [{
imports: [
NzMenuModule,
NzIconModule,
BitDirectiveModule,
BitPipeModule,
NzLayoutModule,
NzPageHeaderModule,
NzBreadCrumbModule,
RouterModule,
CommonModule,
NzSpaceModule
],
declarations: [
BitSiderComponent,
BitPageHeaderComponent,
BitHeaderComponent,
BitHeaderActionDirective,
BitHeaderBannerDirective,
BitHeaderTagsDirective,
BitHeaderFooterDirective
],
exports: [
BitSiderComponent,
BitPageHeaderComponent,
BitHeaderComponent,
BitHeaderActionDirective,
BitHeaderBannerDirective,
BitHeaderTagsDirective,
BitHeaderFooterDirective
],
providers: [BitRouterService]
},] }
];
/**
* Generated bundle index. Do not edit.
*/
export { BitHeaderActionDirective, BitHeaderBannerDirective, BitHeaderComponent, BitHeaderFooterDirective, BitHeaderTagsDirective, BitPageHeaderComponent, BitRouterModule, BitRouterService, BitSiderComponent };
//# sourceMappingURL=ngx-bit-router.js.map