ng-cw-v12
Version:
Angular UI component library
217 lines (208 loc) • 13.1 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core')) :
typeof define === 'function' && define.amd ? define('ng-cw-v12/spin', ['exports', '@angular/core'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"].spin = {}), global.ng.core));
})(this, (function (exports, i0) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n["default"] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var SpinDirective = /** @class */ (function () {
function SpinDirective(el, renderer) {
this.el = el;
this.renderer = renderer;
this.ncType = 'dot'; // 加载样式类型：圆形或点状
this.ncTip = '';
this.ncSize = 'default';
this.ncMaskColor = 'rgba(0, 0, 0, 0.1)';
this.ncTipColor = '#1890ff';
this.ncTrackColor = '#f3f3f3'; // 轨道颜色
this.ncIndicatorColor = '#1890ff'; // 指示器颜色
// 为每个实例生成唯一的动画名称
this.animationName = "ncSpin_" + Math.random().toString(36).substring(2, 11);
}
Object.defineProperty(SpinDirective.prototype, "ncLoading", {
set: function (value) {
var _this = this;
setTimeout(function () {
if (value) {
_this.createSpinContainer();
}
else {
_this.removeSpinContainer();
}
});
},
enumerable: false,
configurable: true
});
SpinDirective.prototype.ngOnInit = function () { };
SpinDirective.prototype.createSpinContainer = function () {
var elementPosition = this.el.nativeElement.style.position;
if (!elementPosition || elementPosition === 'static') {
this.renderer.setStyle(this.el.nativeElement, 'position', 'relative');
}
// 创建一个div，用于包裹加载指示器和文字
this.spinContainer = this.renderer.createElement('div');
this.renderer.addClass(this.spinContainer, 'spin-container');
this.renderer.setStyle(this.spinContainer, 'position', 'absolute');
this.renderer.setStyle(this.spinContainer, 'inset', '0');
this.renderer.setStyle(this.spinContainer, 'borderRadius', 'inherit');
this.renderer.setStyle(this.spinContainer, 'zIndex', '10001');
this.renderer.setStyle(this.spinContainer, 'background-color', this.ncMaskColor);
this.renderer.setStyle(this.spinContainer, 'display', 'flex');
this.renderer.setStyle(this.spinContainer, 'flex-direction', 'column');
this.renderer.setStyle(this.spinContainer, 'justify-content', 'center');
this.renderer.setStyle(this.spinContainer, 'align-items', 'center');
// 根据类型创建不同的加载指示器
if (this.ncType === 'circle') {
this.createCircleSpinner();
}
else if (this.ncType === 'dot') {
this.createDotSpinner();
}
// 创建一个div，用于显示文字
var loadingText = this.renderer.createElement('div');
this.renderer.addClass(loadingText, 'spin-text');
this.renderer.setStyle(loadingText, 'color', this.ncTipColor);
this.renderer.setStyle(loadingText, 'margin-top', "" + (this.ncSize === 'small' ? '5px' : this.ncSize === 'default' ? '10px' : '15px'));
this.renderer.setStyle(loadingText, 'font-size', "" + (this.ncSize === 'small' ? '12px' : this.ncSize === 'default' ? '16px' : '20px'));
this.renderer.setStyle(loadingText, 'letter-spacing', "" + (this.ncSize === 'small' ? '0.5px' : this.ncSize === 'default' ? '1px' : '2px'));
this.renderer.appendChild(loadingText, this.renderer.createText(this.ncTip));
// 如果存在文字，则添加到容器中
if (this.ncTip) {
this.renderer.appendChild(this.spinContainer, loadingText);
}
// 将容器添加到元素中
this.renderer.appendChild(this.el.nativeElement, this.spinContainer);
};
SpinDirective.prototype.createCircleSpinner = function () {
var spinner = this.renderer.createElement('div');
this.renderer.addClass(spinner, 'spin-spinner');
this.renderer.setStyle(spinner, 'border', (this.ncSize === 'small' ? '2px' : this.ncSize === 'default' ? '4px' : '6px') + " solid " + this.ncTrackColor);
this.renderer.setStyle(spinner, 'border-top', (this.ncSize === 'small' ? '2px' : this.ncSize === 'default' ? '4px' : '6px') + " solid " + this.ncIndicatorColor);
this.renderer.setStyle(spinner, 'border-radius', '50%');
this.renderer.setStyle(spinner, 'width', "" + (this.ncSize === 'small' ? '20px' : this.ncSize === 'default' ? '40px' : '60px'));
this.renderer.setStyle(spinner, 'height', "" + (this.ncSize === 'small' ? '20px' : this.ncSize === 'default' ? '40px' : '60px'));
this.renderer.setStyle(spinner, 'animation', this.animationName + " 1s linear infinite");
var keyframes = "\n @keyframes " + this.animationName + " {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n }\n ";
this.keyframesStyle = this.renderer.createElement('style');
this.renderer.appendChild(this.keyframesStyle, this.renderer.createText(keyframes));
this.renderer.appendChild(this.el.nativeElement, this.keyframesStyle);
this.renderer.appendChild(this.spinContainer, spinner);
};
SpinDirective.prototype.createDotSpinner = function () {
var dotSize = this.ncSize === 'small' ? 6 : this.ncSize === 'default' ? 10 : 14;
var containerSize = this.ncSize === 'small' ? 20 : this.ncSize === 'default' ? 40 : 60;
var dotContainer = this.renderer.createElement('div');
this.renderer.addClass(dotContainer, 'dot-spinner-container');
this.renderer.setStyle(dotContainer, 'position', 'relative');
this.renderer.setStyle(dotContainer, 'width', containerSize + "px");
this.renderer.setStyle(dotContainer, 'height', containerSize + "px");
this.renderer.setStyle(dotContainer, 'animation', this.animationName + "_rotate 1.2s infinite linear");
// 创建4个点
for (var i = 0; i < 4; i++) {
var dot = this.renderer.createElement('div');
this.renderer.addClass(dot, 'dot-spinner-item');
this.renderer.setStyle(dot, 'position', 'absolute');
this.renderer.setStyle(dot, 'width', dotSize + "px");
this.renderer.setStyle(dot, 'height', dotSize + "px");
this.renderer.setStyle(dot, 'background-color', this.ncIndicatorColor);
this.renderer.setStyle(dot, 'border-radius', '50%');
this.renderer.setStyle(dot, 'opacity', '0.3');
this.renderer.setStyle(dot, 'animation', this.animationName + "_move 1s infinite linear alternate");
this.renderer.setStyle(dot, 'animation-delay', i * 0.4 + "s");
// 设置点的位置
var angle = i * 90; // 每个点相差90度
var radian = (angle * Math.PI) / 180;
var radius = containerSize / 2 - dotSize / 2;
var x = radius * Math.cos(radian);
var y = radius * Math.sin(radian);
this.renderer.setStyle(dot, 'top', containerSize / 2 - dotSize / 2 + y + "px");
this.renderer.setStyle(dot, 'left', containerSize / 2 - dotSize / 2 + x + "px");
this.renderer.appendChild(dotContainer, dot);
}
var keyframes = "\n\t\t\t@keyframes " + this.animationName + "_rotate {\n\t\t\t\tto { transform: rotate(360deg); }\n\t\t\t}\n\t\t\t@keyframes " + this.animationName + "_move {\n\t\t\t\tto { opacity: 1; }\n\t\t\t}\n\t\t";
this.keyframesStyle = this.renderer.createElement('style');
this.renderer.appendChild(this.keyframesStyle, this.renderer.createText(keyframes));
this.renderer.appendChild(this.el.nativeElement, this.keyframesStyle);
this.renderer.appendChild(this.spinContainer, dotContainer);
};
SpinDirective.prototype.removeSpinContainer = function () {
if (this.spinContainer) {
this.renderer.removeChild(this.el.nativeElement, this.spinContainer);
this.spinContainer = null;
}
if (this.keyframesStyle) {
this.renderer.removeChild(this.el.nativeElement, this.keyframesStyle);
this.keyframesStyle = null;
}
};
return SpinDirective;
}());
SpinDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: SpinDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
SpinDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: SpinDirective, selector: "[ncSpin]", inputs: { ncLoading: "ncLoading", ncType: "ncType", ncTip: "ncTip", ncSize: "ncSize", ncMaskColor: "ncMaskColor", ncTipColor: "ncTipColor", ncTrackColor: "ncTrackColor", ncIndicatorColor: "ncIndicatorColor" }, ngImport: i0__namespace });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: SpinDirective, decorators: [{
type: i0.Directive,
args: [{
selector: '[ncSpin]'
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { ncLoading: [{
type: i0.Input
}], ncType: [{
type: i0.Input
}], ncTip: [{
type: i0.Input
}], ncSize: [{
type: i0.Input
}], ncMaskColor: [{
type: i0.Input
}], ncTipColor: [{
type: i0.Input
}], ncTrackColor: [{
type: i0.Input
}], ncIndicatorColor: [{
type: i0.Input
}] } });
var NcSpinModule = /** @class */ (function () {
function NcSpinModule() {
}
return NcSpinModule;
}());
NcSpinModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcSpinModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcSpinModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcSpinModule, declarations: [SpinDirective], exports: [SpinDirective] });
NcSpinModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcSpinModule, imports: [[]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcSpinModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
SpinDirective
],
imports: [],
exports: [
SpinDirective
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.NcSpinModule = NcSpinModule;
exports.SpinDirective = SpinDirective;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-spin.umd.js.map