ng-cw-v12
Version:
Angular UI component library
173 lines (164 loc) • 9.3 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/pulsating', ['exports', '@angular/core'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"].pulsating = {}), 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 PulsatingDirective = /** @class */ (function () {
function PulsatingDirective(el, renderer) {
this.el = el;
this.renderer = renderer;
this.ncDuration = 1500; // 一次动画时长，ms
this.ncColor = '#0096ff'; // 默认浅蓝色光晕
this.ncSize = '8px'; // 最大光晕宽度
this.ncStopTime = 0; // 停止动画时间，ms，0表示不停止
this.ncEnabled = true; // 是否启用脉冲动画
this.ncEnabledChange = new i0.EventEmitter(); // 双向绑定输出事件
this.shouldStop = false;
this.isInitialized = false;
// 为每个实例生成唯一的动画名称
this.animationName = "ncPulse_" + Math.random().toString(36).substring(2, 11);
}
PulsatingDirective.prototype.ngOnInit = function () {
this.createPulsatingContainer();
this.isInitialized = true;
if (this.ncEnabled) {
this.startAnimation();
}
};
PulsatingDirective.prototype.ngOnChanges = function (changes) {
if (this.isInitialized && changes['ncEnabled']) {
if (this.ncEnabled) {
this.startAnimation();
}
else {
this.stopAnimation();
}
}
};
PulsatingDirective.prototype.ngOnDestroy = function () {
if (this.stopTimer) {
clearTimeout(this.stopTimer);
}
};
PulsatingDirective.prototype.createPulsatingContainer = function () {
var _this = this;
this.pulsatingContainer = this.renderer.createElement('div');
this.renderer.addClass(this.pulsatingContainer, 'pulsating-container');
// 设置基础样式
this.renderer.setStyle(this.pulsatingContainer, 'position', 'absolute');
this.renderer.setStyle(this.pulsatingContainer, 'inset', '0');
this.renderer.setStyle(this.pulsatingContainer, 'borderRadius', 'inherit');
this.renderer.setStyle(this.pulsatingContainer, 'pointerEvents', 'none');
this.renderer.setStyle(this.pulsatingContainer, 'zIndex', '-1');
var elementPosition = this.el.nativeElement.style.position;
if (!elementPosition || elementPosition === 'static') {
this.renderer.setStyle(this.el.nativeElement, 'position', 'relative');
}
// 添加关键帧动画样式
this.styleElement = this.renderer.createElement('style');
var keyframes = "\n @keyframes " + this.animationName + " {\n 0% {\n box-shadow: 0 0 0 0 " + this.ncColor + ";\n }\n 50% {\n box-shadow: 0 0 0 " + this.ncSize + " " + this.ncColor + ";\n opacity: 0.5;\n }\n 100% {\n box-shadow: 0 0 0 0 " + this.ncColor + ";\n }\n }\n ";
this.renderer.appendChild(this.styleElement, this.renderer.createText(keyframes));
this.renderer.appendChild(this.el.nativeElement, this.styleElement);
// 将容器添加到宿主元素中
this.renderer.appendChild(this.el.nativeElement, this.pulsatingContainer);
// 监听动画迭代事件，用于平滑停止
this.renderer.listen(this.pulsatingContainer, 'animationiteration', function () {
if (_this.shouldStop) {
_this.renderer.setStyle(_this.pulsatingContainer, 'animation', 'none');
_this.shouldStop = false;
}
});
};
PulsatingDirective.prototype.startAnimation = function () {
var _this = this;
if (!this.pulsatingContainer)
return;
this.shouldStop = false;
this.renderer.setStyle(this.pulsatingContainer, 'animation', this.animationName + " " + this.ncDuration + "ms ease-in-out infinite");
// 如果设置了停止时间，则在指定时间后标记需要停止
if (this.ncStopTime > 0) {
this.stopTimer = setTimeout(function () {
_this.stopAnimation();
// 当因为 ncStopTime 停止动画时，更新 ncEnabled 值并发出事件
_this.ncEnabled = false;
_this.ncEnabledChange.emit(false);
}, this.ncStopTime);
}
};
PulsatingDirective.prototype.stopAnimation = function () {
if (!this.pulsatingContainer)
return;
if (this.stopTimer) {
clearTimeout(this.stopTimer);
this.stopTimer = null;
}
this.shouldStop = true;
};
return PulsatingDirective;
}());
PulsatingDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: PulsatingDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
PulsatingDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: PulsatingDirective, selector: "[ncPulsating]", inputs: { ncDuration: "ncDuration", ncColor: "ncColor", ncSize: "ncSize", ncStopTime: "ncStopTime", ncEnabled: "ncEnabled" }, outputs: { ncEnabledChange: "ncEnabledChange" }, usesOnChanges: true, ngImport: i0__namespace });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: PulsatingDirective, decorators: [{
type: i0.Directive,
args: [{
selector: '[ncPulsating]'
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { ncDuration: [{
type: i0.Input
}], ncColor: [{
type: i0.Input
}], ncSize: [{
type: i0.Input
}], ncStopTime: [{
type: i0.Input
}], ncEnabled: [{
type: i0.Input
}], ncEnabledChange: [{
type: i0.Output
}] } });
var NcPulsatingModule = /** @class */ (function () {
function NcPulsatingModule() {
}
return NcPulsatingModule;
}());
NcPulsatingModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcPulsatingModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcPulsatingModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcPulsatingModule, declarations: [PulsatingDirective], exports: [PulsatingDirective] });
NcPulsatingModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcPulsatingModule, imports: [[]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcPulsatingModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
PulsatingDirective
],
imports: [],
exports: [
PulsatingDirective
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.NcPulsatingModule = NcPulsatingModule;
exports.PulsatingDirective = PulsatingDirective;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-pulsating.umd.js.map