ng-cw-v12
Version:
Angular UI component library
192 lines (187 loc) • 10.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Directive, Input, NgModule } from '@angular/core';
class SpinDirective {
constructor(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).substr(2, 9)}`;
}
set ncLoading(value) {
setTimeout(() => {
if (value) {
this.createSpinContainer();
}
else {
this.removeSpinContainer();
}
});
}
ngOnInit() { }
createSpinContainer() {
const 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，用于显示文字
const 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);
}
createCircleSpinner() {
const 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`);
const keyframes = `
${this.animationName} {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
`;
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);
}
createDotSpinner() {
const dotSize = this.ncSize === 'small' ? 6 : this.ncSize === 'default' ? 10 : 14;
const containerSize = this.ncSize === 'small' ? 20 : this.ncSize === 'default' ? 40 : 60;
const 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 (let i = 0; i < 4; i++) {
const 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`);
// 设置点的位置
const angle = i * 90; // 每个点相差90度
const radian = (angle * Math.PI) / 180;
const radius = containerSize / 2 - dotSize / 2;
const x = radius * Math.cos(radian);
const 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);
}
const keyframes = `
${this.animationName}_rotate {
to { transform: rotate(360deg); }
}
${this.animationName}_move {
to { opacity: 1; }
}
`;
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);
}
removeSpinContainer() {
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;
}
}
}
SpinDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: SpinDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
SpinDirective.ɵdir = i0.ɵɵ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 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: SpinDirective, decorators: [{
type: Directive,
args: [{
selector: '[ncSpin]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { ncLoading: [{
type: Input
}], ncType: [{
type: Input
}], ncTip: [{
type: Input
}], ncSize: [{
type: Input
}], ncMaskColor: [{
type: Input
}], ncTipColor: [{
type: Input
}], ncTrackColor: [{
type: Input
}], ncIndicatorColor: [{
type: Input
}] } });
class NcSpinModule {
}
NcSpinModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcSpinModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcSpinModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcSpinModule, declarations: [SpinDirective], exports: [SpinDirective] });
NcSpinModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcSpinModule, imports: [[]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcSpinModule, decorators: [{
type: NgModule,
args: [{
declarations: [
SpinDirective
],
imports: [],
exports: [
SpinDirective
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { NcSpinModule, SpinDirective };
//# sourceMappingURL=ng-cw-v12-spin.js.map