ng-cw-v12
Version:
Angular UI component library
66 lines • 9.64 kB
JavaScript
import { Directive, Input } from '@angular/core';
import * as i0 from "@angular/core";
export class PulsatingDirective {
constructor(el, renderer) {
this.el = el;
this.renderer = renderer;
this.ncDuration = 1500; // ms
this.ncColor = '#0096ff'; // 默认浅蓝色光晕
this.ncSize = '8px'; // 最大光晕宽度
// 为每个实例生成唯一的动画名称
this.animationName = `ncPulse_${Math.random().toString(36).substr(2, 9)}`;
}
ngOnInit() {
this.createPulsatingContainer();
}
createPulsatingContainer() {
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');
this.renderer.setStyle(this.pulsatingContainer, 'animation', `${this.animationName} ${this.ncDuration}ms ease-in-out infinite`);
const elementPosition = this.el.nativeElement.style.position;
if (!elementPosition || elementPosition === 'static') {
this.renderer.setStyle(this.el.nativeElement, 'position', 'relative');
}
// 添加关键帧动画样式
const style = this.renderer.createElement('style');
const keyframes = `
${this.animationName} {
0% {
box-shadow: 0 0 0 0 ${this.ncColor};
}
50% {
box-shadow: 0 0 0 ${this.ncSize} ${this.ncColor};
opacity: 0.5;
}
100% {
box-shadow: 0 0 0 0 ${this.ncColor};
}
}
`;
this.renderer.appendChild(style, this.renderer.createText(keyframes));
this.renderer.appendChild(this.el.nativeElement, style);
// 将容器添加到宿主元素中
this.renderer.appendChild(this.el.nativeElement, this.pulsatingContainer);
}
}
PulsatingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: PulsatingDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
PulsatingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: PulsatingDirective, selector: "[ncPulsating]", inputs: { ncDuration: "ncDuration", ncColor: "ncColor", ncSize: "ncSize" }, ngImport: i0 });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: PulsatingDirective, decorators: [{
type: Directive,
args: [{
selector: '[ncPulsating]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { ncDuration: [{
type: Input
}], ncColor: [{
type: Input
}], ncSize: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVsc2F0aW5nLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL2NvbXBvbmVudHMvcHVsc2F0aW5nL3B1bHNhdGluZy5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBeUIsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDOztBQUtoRixNQUFNLE9BQU8sa0JBQWtCO0lBUTdCLFlBQW9CLEVBQWMsRUFBVSxRQUFtQjtRQUEzQyxPQUFFLEdBQUYsRUFBRSxDQUFZO1FBQVUsYUFBUSxHQUFSLFFBQVEsQ0FBVztRQVB0RCxlQUFVLEdBQUcsSUFBSSxDQUFDLENBQUMsS0FBSztRQUN4QixZQUFPLEdBQUcsU0FBUyxDQUFDLENBQUMsVUFBVTtRQUMvQixXQUFNLEdBQUcsS0FBSyxDQUFDLENBQUMsU0FBUztRQU1oQyxpQkFBaUI7UUFDakIsSUFBSSxDQUFDLGFBQWEsR0FBRyxXQUFXLElBQUksQ0FBQyxNQUFNLEVBQUUsQ0FBQyxRQUFRLENBQUMsRUFBRSxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsRUFBRSxDQUFDO0lBQzVFLENBQUM7SUFFRCxRQUFRO1FBQ04sSUFBSSxDQUFDLHdCQUF3QixFQUFFLENBQUM7SUFDbEMsQ0FBQztJQUVPLHdCQUF3QjtRQUM5QixJQUFJLENBQUMsa0JBQWtCLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDN0QsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLGtCQUFrQixFQUFFLHFCQUFxQixDQUFDLENBQUM7UUFDdkUsU0FBUztRQUNULElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxrQkFBa0IsRUFBRSxVQUFVLEVBQUUsVUFBVSxDQUFDLENBQUM7UUFDeEUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLGtCQUFrQixFQUFFLE9BQU8sRUFBRSxHQUFHLENBQUMsQ0FBQztRQUM5RCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsa0JBQWtCLEVBQUUsY0FBYyxFQUFFLFNBQVMsQ0FBQyxDQUFDO1FBQzNFLElBQUksQ0FBQyxRQUFRLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxrQkFBa0IsRUFBRSxlQUFlLEVBQUUsTUFBTSxDQUFDLENBQUM7UUFDekUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsSUFBSSxDQUFDLGtCQUFrQixFQUFFLFFBQVEsRUFBRSxJQUFJLENBQUMsQ0FBQztRQUNoRSxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsa0JBQWtCLEVBQUUsV0FBVyxFQUN6RCxHQUFHLElBQUksQ0FBQyxhQUFhLElBQUksSUFBSSxDQUFDLFVBQVUseUJBQXlCLENBQUMsQ0FBQztRQUVyRSxNQUFNLGVBQWUsR0FBRyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsQ0FBQyxLQUFLLENBQUMsUUFBUSxDQUFDO1FBQzdELElBQUksQ0FBQyxlQUFlLElBQUksZUFBZSxLQUFLLFFBQVEsRUFBRTtZQUNwRCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLGFBQWEsRUFBRSxVQUFVLEVBQUUsVUFBVSxDQUFDLENBQUM7U0FDdkU7UUFFRCxZQUFZO1FBQ1osTUFBTSxLQUFLLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDbkQsTUFBTSxTQUFTLEdBQUc7bUJBQ0gsSUFBSSxDQUFDLGFBQWE7O2dDQUVMLElBQUksQ0FBQyxPQUFPOzs7OEJBR2QsSUFBSSxDQUFDLE1BQU0sSUFBSSxJQUFJLENBQUMsT0FBTzs7OztnQ0FJekIsSUFBSSxDQUFDLE9BQU87OztLQUd2QyxDQUFDO1FBQ0YsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxRQUFRLENBQUMsVUFBVSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUM7UUFDdEUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLEVBQUUsS0FBSyxDQUFDLENBQUM7UUFFeEQsY0FBYztRQUNkLElBQUksQ0FBQyxRQUFRLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxFQUFFLElBQUksQ0FBQyxrQkFBa0IsQ0FBQyxDQUFDO0lBQzVFLENBQUM7OytHQXZEVSxrQkFBa0I7bUdBQWxCLGtCQUFrQjsyRkFBbEIsa0JBQWtCO2tCQUg5QixTQUFTO21CQUFDO29CQUNULFFBQVEsRUFBRSxlQUFlO2lCQUMxQjt5SEFFVSxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxNQUFNO3NCQUFkLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBEaXJlY3RpdmUsIEVsZW1lbnRSZWYsIFJlbmRlcmVyMiwgSW5wdXQsIE9uSW5pdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5cclxuQERpcmVjdGl2ZSh7XHJcbiAgc2VsZWN0b3I6ICdbbmNQdWxzYXRpbmddJ1xyXG59KVxyXG5leHBvcnQgY2xhc3MgUHVsc2F0aW5nRGlyZWN0aXZlIGltcGxlbWVudHMgT25Jbml0IHtcclxuICBASW5wdXQoKSBuY0R1cmF0aW9uID0gMTUwMDsgLy8gbXNcclxuICBASW5wdXQoKSBuY0NvbG9yID0gJyMwMDk2ZmYnOyAvLyDpu5jorqTmtYXok53oibLlhYnmmZVcclxuICBASW5wdXQoKSBuY1NpemUgPSAnOHB4JzsgLy8g5pyA5aSn5YWJ5pmV5a695bqmXHJcblxyXG4gIHByaXZhdGUgcHVsc2F0aW5nQ29udGFpbmVyITogSFRNTEVsZW1lbnQ7XHJcbiAgcHJpdmF0ZSByZWFkb25seSBhbmltYXRpb25OYW1lOiBzdHJpbmc7XHJcblxyXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZWw6IEVsZW1lbnRSZWYsIHByaXZhdGUgcmVuZGVyZXI6IFJlbmRlcmVyMikge1xyXG4gICAgLy8g5Li65q+P5Liq5a6e5L6L55Sf5oiQ5ZSv5LiA55qE5Yqo55S75ZCN56ewXHJcbiAgICB0aGlzLmFuaW1hdGlvbk5hbWUgPSBgbmNQdWxzZV8ke01hdGgucmFuZG9tKCkudG9TdHJpbmcoMzYpLnN1YnN0cigyLCA5KX1gO1xyXG4gIH1cclxuXHJcbiAgbmdPbkluaXQoKSB7XHJcbiAgICB0aGlzLmNyZWF0ZVB1bHNhdGluZ0NvbnRhaW5lcigpO1xyXG4gIH1cclxuXHJcbiAgcHJpdmF0ZSBjcmVhdGVQdWxzYXRpbmdDb250YWluZXIoKSB7XHJcbiAgICB0aGlzLnB1bHNhdGluZ0NvbnRhaW5lciA9IHRoaXMucmVuZGVyZXIuY3JlYXRlRWxlbWVudCgnZGl2Jyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLmFkZENsYXNzKHRoaXMucHVsc2F0aW5nQ29udGFpbmVyLCAncHVsc2F0aW5nLWNvbnRhaW5lcicpO1xyXG4gICAgLy8g6K6+572u5Z+656GA5qC35byPXHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMucHVsc2F0aW5nQ29udGFpbmVyLCAncG9zaXRpb24nLCAnYWJzb2x1dGUnKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5wdWxzYXRpbmdDb250YWluZXIsICdpbnNldCcsICcwJyk7XHJcbiAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMucHVsc2F0aW5nQ29udGFpbmVyLCAnYm9yZGVyUmFkaXVzJywgJ2luaGVyaXQnKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5wdWxzYXRpbmdDb250YWluZXIsICdwb2ludGVyRXZlbnRzJywgJ25vbmUnKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5wdWxzYXRpbmdDb250YWluZXIsICd6SW5kZXgnLCAnLTEnKTtcclxuICAgIHRoaXMucmVuZGVyZXIuc2V0U3R5bGUodGhpcy5wdWxzYXRpbmdDb250YWluZXIsICdhbmltYXRpb24nLFxyXG4gICAgICBgJHt0aGlzLmFuaW1hdGlvbk5hbWV9ICR7dGhpcy5uY0R1cmF0aW9ufW1zIGVhc2UtaW4tb3V0IGluZmluaXRlYCk7XHJcblxyXG4gICAgY29uc3QgZWxlbWVudFBvc2l0aW9uID0gdGhpcy5lbC5uYXRpdmVFbGVtZW50LnN0eWxlLnBvc2l0aW9uO1xyXG4gICAgaWYgKCFlbGVtZW50UG9zaXRpb24gfHwgZWxlbWVudFBvc2l0aW9uID09PSAnc3RhdGljJykge1xyXG4gICAgICB0aGlzLnJlbmRlcmVyLnNldFN0eWxlKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgJ3Bvc2l0aW9uJywgJ3JlbGF0aXZlJyk7XHJcbiAgICB9XHJcblxyXG4gICAgLy8g5re75Yqg5YWz6ZSu5bin5Yqo55S75qC35byPXHJcbiAgICBjb25zdCBzdHlsZSA9IHRoaXMucmVuZGVyZXIuY3JlYXRlRWxlbWVudCgnc3R5bGUnKTtcclxuICAgIGNvbnN0IGtleWZyYW1lcyA9IGBcclxuICAgICAgQGtleWZyYW1lcyAke3RoaXMuYW5pbWF0aW9uTmFtZX0ge1xyXG4gICAgICAgIDAlIHtcclxuICAgICAgICAgIGJveC1zaGFkb3c6IDAgMCAwIDAgJHt0aGlzLm5jQ29sb3J9O1xyXG4gICAgICAgIH1cclxuICAgICAgICA1MCUge1xyXG4gICAgICAgICAgYm94LXNoYWRvdzogMCAwIDAgJHt0aGlzLm5jU2l6ZX0gJHt0aGlzLm5jQ29sb3J9O1xyXG4gICAgICAgICAgb3BhY2l0eTogMC41O1xyXG4gICAgICAgIH1cclxuICAgICAgICAxMDAlIHtcclxuICAgICAgICAgIGJveC1zaGFkb3c6IDAgMCAwIDAgJHt0aGlzLm5jQ29sb3J9O1xyXG4gICAgICAgIH1cclxuICAgICAgfVxyXG4gICAgYDtcclxuICAgIHRoaXMucmVuZGVyZXIuYXBwZW5kQ2hpbGQoc3R5bGUsIHRoaXMucmVuZGVyZXIuY3JlYXRlVGV4dChrZXlmcmFtZXMpKTtcclxuICAgIHRoaXMucmVuZGVyZXIuYXBwZW5kQ2hpbGQodGhpcy5lbC5uYXRpdmVFbGVtZW50LCBzdHlsZSk7XHJcblxyXG4gICAgLy8g5bCG5a655Zmo5re75Yqg5Yiw5a6/5Li75YWD57Sg5LitXHJcbiAgICB0aGlzLnJlbmRlcmVyLmFwcGVuZENoaWxkKHRoaXMuZWwubmF0aXZlRWxlbWVudCwgdGhpcy5wdWxzYXRpbmdDb250YWluZXIpO1xyXG4gIH1cclxufSJdfQ==