yoyo-ng-modulewindy
Version:
服务于52ABP模板的前端开源的相关组件内容。整合了ng-alain和你NG ZORRO的内容
336 lines • 13.1 kB
JavaScript
import { Component, Input, Output, ChangeDetectionStrategy, ChangeDetectorRef, EventEmitter, ElementRef, Renderer2, Inject, } from '@angular/core';
import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { DOCUMENT } from '@angular/common';
import { combineLatest } from 'rxjs';
import { filter } from 'rxjs/operators';
import { toNumber, toBoolean } from 'yoyo-ng-module/util';
import { ReuseTabService } from './reuse-tab.service';
import { ReuseTabMatchMode, } from './interface';
import { ReuseTabContextService } from './reuse-tab-context.service';
import { NzDropdownService } from 'ng-zorro-antd';
import { LocalizationService } from 'yoyo-ng-module/abp/localization/localization.service';
var ReuseTabComponent = /** @class */ (function () {
function ReuseTabComponent(srv, cd, router, route, el, render, doc, localizationService, nzDropdownService //右键菜单
) {
var _this = this;
this.srv = srv;
this.cd = cd;
this.router = router;
this.route = route;
this.el = el;
this.render = render;
this.doc = doc;
this.localizationService = localizationService;
this.nzDropdownService = nzDropdownService; //右键菜单
this.list = [];
this.pos = 0;
// region: properties
/** 设置匹配模式 */
this.mode = ReuseTabMatchMode.Menu;
this._debug = false;
this._allowClose = true;
this._fixed = true;
this._showCurrent = true;
/** 切换时回调 */
this.change = new EventEmitter();
/** 关闭回调 */
this.close = new EventEmitter();
var route$ = this.router.events.pipe(filter(function (evt) { return evt instanceof NavigationEnd; }));
this.sub$ = combineLatest(this.srv.change, route$).subscribe(function (_a) {
var res = _a[0], e = _a[1];
return _this.genList(res);
});
}
Object.defineProperty(ReuseTabComponent.prototype, "debug", {
/** 是否Debug模式 */
get: function () { return this._debug; },
set: function (value) {
this._debug = toBoolean(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(ReuseTabComponent.prototype, "max", {
/** 允许最多复用多少个页面 */
get: function () {
return this._max;
},
set: function (value) {
this._max = toNumber(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(ReuseTabComponent.prototype, "allowClose", {
/** 允许关闭 */
get: function () {
return this._allowClose;
},
set: function (value) {
this._allowClose = toBoolean(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(ReuseTabComponent.prototype, "fixed", {
/** 是否固定 */
get: function () {
return this._fixed;
},
set: function (value) {
this._fixed = toBoolean(value);
},
enumerable: true,
configurable: true
});
Object.defineProperty(ReuseTabComponent.prototype, "showCurrent", {
/** 总是显示当前页 */
get: function () {
return this._showCurrent;
},
set: function (value) {
this._showCurrent = toBoolean(value);
},
enumerable: true,
configurable: true
});
ReuseTabComponent.prototype.genTit = function (title) {
return title.text;
};
ReuseTabComponent.prototype.genList = function (notify) {
var _this = this;
var isClosed = notify && notify.active === 'close';
var beforeClosePos = isClosed
? this.list.findIndex(function (w) { return w.url === notify.url; })
: -1;
var ls = this.srv.items.map(function (item, index) {
return {
url: item.url,
title: _this.genTit(item.title),
closable: _this.allowClose && item.closable && _this.srv.count > 0,
index: index,
active: false,
last: false,
icon: _this.srv.getIcon(item.url)
};
});
if (this.showCurrent) {
var snapshot = this.route.snapshot;
var url_1 = this.srv.getUrl(snapshot);
var idx = ls.findIndex(function (w) { return w.url === url_1; });
// jump directly when the current exists in the list
// or create a new current item and jump
if (idx !== -1 || (isClosed && notify.url === url_1)) {
this.pos = isClosed
? idx >= beforeClosePos
? this.pos - 1
: this.pos
: idx;
}
else {
var snapshotTrue = this.srv.getTruthRoute(snapshot);
ls.push({
url: url_1,
title: this.genTit(this.srv.getTitle(url_1, snapshotTrue)),
closable: this.allowClose &&
this.srv.count > 0 &&
this.srv.getClosable(url_1, snapshotTrue),
index: ls.length,
active: false,
last: false,
icon: this.srv.getIcon(url_1)
});
this.pos = ls.length - 1;
}
// fix unabled close last item
if (ls.length <= 1)
ls[0].closable = false;
}
this.list = ls;
if (ls.length && isClosed) {
this.to(null, this.pos);
}
this.refStatus(false);
this.visibility();
this.cd.detectChanges();
};
ReuseTabComponent.prototype.visibility = function () {
if (this.showCurrent)
return;
this.render.setStyle(this.el.nativeElement, 'display', this.list.length === 0 ? 'none' : 'block');
};
// region: UI
ReuseTabComponent.prototype.cmChange = function (res) {
switch (res.type) {
case 'close':
this._close(null, res.item.index, res.includeNonCloseable);
break;
case 'closeRight':
this.srv.closeRight(res.item.url, res.includeNonCloseable);
this.close.emit(null);
break;
case 'clear':
case 'closeOther':
this.srv.clear(res.includeNonCloseable);
this.close.emit(null);
break;
}
};
ReuseTabComponent.prototype.refStatus = function (dc) {
var _this = this;
if (dc === void 0) { dc = true; }
if (this.list.length) {
this.list[this.list.length - 1].last = true;
this.list.forEach(function (i, idx) { return (i.active = _this.pos === idx); });
}
if (dc)
this.cd.detectChanges();
};
ReuseTabComponent.prototype.to = function (e, index) {
var _this = this;
if (e) {
e.preventDefault();
e.stopPropagation();
}
index = Math.max(0, Math.min(index, this.list.length - 1));
var item = this.list[index];
this.router.navigateByUrl(item.url).then(function (res) {
if (!res)
return;
_this.pos = index;
_this.item = item;
_this.refStatus();
_this.change.emit(item);
});
};
ReuseTabComponent.prototype._close = function (e, idx, includeNonCloseable) {
if (e) {
e.preventDefault();
e.stopPropagation();
}
var item = this.list[idx];
this.srv.close(item.url, includeNonCloseable);
this.close.emit(item);
this.cd.detectChanges();
return false;
};
// endregion
ReuseTabComponent.prototype.ngOnInit = function () {
this.setClass();
this.genList();
};
ReuseTabComponent.prototype.setClass = function () {
var body = this.doc.querySelector('body');
var bodyCls = "has-ad-rt";
if (this.fixed) {
this.render.addClass(body, bodyCls);
}
else {
this.render.removeClass(body, bodyCls);
}
};
ReuseTabComponent.prototype.ngOnChanges = function (changes) {
if (changes.max)
this.srv.max = this.max;
if (changes.excludes)
this.srv.excludes = this.excludes;
if (changes.mode)
this.srv.mode = this.mode;
this.srv.debug = this.debug;
this.setClass();
this.cd.detectChanges();
};
ReuseTabComponent.prototype.ngOnDestroy = function () {
this.sub$.unsubscribe();
if (this.i18n$)
this.i18n$.unsubscribe();
};
ReuseTabComponent.prototype.l = function (key) {
var args = [];
for (var _i = 1; _i < arguments.length; _i++) {
args[_i - 1] = arguments[_i];
}
return this.localizationService.l(key, args);
};
/**
* 打开右键菜单
* @param $event 鼠标事件
* @param template 创建右键的模板内容
*/
ReuseTabComponent.prototype.openContextMenu = function ($event, template) {
this._contextMenuDropdown = this.nzDropdownService.create($event, template);
};
/**
* 右键菜单项点击事件
* @param $event 当前项点击事件
* @param closeType 关闭类型
* @param item 当前路由复用项
*/
ReuseTabComponent.prototype.contextMenuItemClick = function ($event, closeType, item) {
if (closeType === 'close' && !item.closable)
return;
if (closeType === 'closeRight' && item.last)
return;
var includeNonCloseable = $event.ctrlKey; //是否强制清除（按Ctrl键）
switch (closeType) {
case 'close':
this.srv.close(item.url, includeNonCloseable);
break;
case 'closeOther':
this.srv.closeOther(item.url, includeNonCloseable);
break;
case 'closeRight':
this.srv.closeRight(item.url, includeNonCloseable);
break;
case 'clear':
this.srv.clear(includeNonCloseable);
break;
default:
this.srv.refresh();
break;
}
//关闭右键菜单
this._contextMenuDropdown.close();
};
ReuseTabComponent.decorators = [
{ type: Component, args: [{
selector: 'reuse-tab',
template: "\n <nz-tabset [nzSelectedIndex]=\"pos\" [nzAnimated]=\"false\" nzType=\"line\">\n <nz-tab *ngFor=\"let i of list; let index = index\" [nzTitle]=\"titleTemplate\">\n <ng-template #titleTemplate>\n <span [context-menu]=\"i\" (click)=\"to($event, index)\" class=\"name\">\n <i *ngIf=\"i.icon\" [class]=\"i.icon\"></i>\n {{l(i.title)}}\n </span>\n <i *ngIf=\"i.closable\" class=\"anticon anticon-close op\" (click)=\"_close($event, index, false)\"></i>\n </ng-template>\n </nz-tab>\n</nz-tabset>\n<reuse-tab-context [i18n]=\"i18n\" (change)=\"cmChange($event)\"></reuse-tab-context>\n ",
// templateUrl: './reuse-tab.component.html',
changeDetection: ChangeDetectionStrategy.OnPush,
preserveWhitespaces: false,
providers: [ReuseTabContextService],
host: {
'[class.ad-rt]': 'true',
'[class.fixed]': 'fixed',
},
},] },
];
/** @nocollapse */
ReuseTabComponent.ctorParameters = function () { return [
{ type: ReuseTabService },
{ type: ChangeDetectorRef },
{ type: Router },
{ type: ActivatedRoute },
{ type: ElementRef },
{ type: Renderer2 },
{ type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] },
{ type: LocalizationService },
{ type: NzDropdownService }
]; };
ReuseTabComponent.propDecorators = {
mode: [{ type: Input }],
i18n: [{ type: Input }],
debug: [{ type: Input }],
max: [{ type: Input }],
excludes: [{ type: Input }],
allowClose: [{ type: Input }],
fixed: [{ type: Input }],
showCurrent: [{ type: Input }],
change: [{ type: Output }],
close: [{ type: Output }]
};
return ReuseTabComponent;
}());
export { ReuseTabComponent };
//# sourceMappingURL=reuse-tab.component.js.map