ng-cw-v12
Version:
Angular UI component library
186 lines (177 loc) • 10.6 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/shine-border', ['exports', '@angular/core'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["shine-border"] = {}), 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 ShineBorderDirective = /** @class */ (function () {
function ShineBorderDirective(el, renderer) {
this.el = el;
this.renderer = renderer;
this.ncBorderWidth = 1; // 边框宽度 单位px
this.ncDuration = 14000; // 动画时长，ms
this.ncStopTime = 0; // 停止动画时间，ms，0表示不停止
this.ncShineColor = ["#A07CFE", "#FE8FB5", "#FFBE7B"]; // 光效颜色，可以是单色或颜色数组
this.ncEnabled = true; // 是否启用动画
this.ncEnabledChange = new i0.EventEmitter(); // 双向绑定输出事件
this.isInitialized = false;
// 为每个实例生成唯一的动画名称
this.animationName = "ncShineBorder_" + Math.random().toString(36).substring(2, 11);
}
ShineBorderDirective.prototype.ngOnInit = function () {
this.createShineBorderContainer();
this.isInitialized = true;
if (this.ncEnabled) {
this.startAnimation();
}
};
ShineBorderDirective.prototype.ngOnChanges = function (changes) {
if (this.isInitialized && changes['ncEnabled']) {
if (this.ncEnabled) {
this.startAnimation();
}
else {
this.stopAnimation();
}
}
};
ShineBorderDirective.prototype.ngOnDestroy = function () {
if (this.stopTimer) {
clearTimeout(this.stopTimer);
}
};
ShineBorderDirective.prototype.createShineBorderContainer = function () {
// 创建shine边框元素
this.shineElement = this.renderer.createElement('div');
this.renderer.addClass(this.shineElement, 'shine-border');
// 确保宿主元素具有相对定位
var elementPosition = this.el.nativeElement.style.position;
if (!elementPosition || elementPosition === 'static') {
this.renderer.setStyle(this.el.nativeElement, 'position', 'relative');
}
// 获取shine颜色
var shineColors = Array.isArray(this.ncShineColor)
? this.ncShineColor.join(',')
: this.ncShineColor;
// 设置shine边框样式
this.renderer.setStyle(this.shineElement, 'position', 'absolute');
this.renderer.setStyle(this.shineElement, 'inset', '0');
this.renderer.setStyle(this.shineElement, 'width', '100%');
this.renderer.setStyle(this.shineElement, 'height', '100%');
this.renderer.setStyle(this.shineElement, 'borderRadius', 'inherit');
this.renderer.setStyle(this.shineElement, 'pointerEvents', 'none');
this.renderer.setStyle(this.shineElement, 'backgroundImage', "radial-gradient(transparent,transparent, " + shineColors + ",transparent,transparent)");
this.renderer.setStyle(this.shineElement, 'backgroundSize', '300% 300%');
this.renderer.setStyle(this.shineElement, 'padding', this.ncBorderWidth + "px");
// 设置mask属性
this.renderer.setStyle(this.shineElement, 'mask', 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)');
this.renderer.setStyle(this.shineElement, '-webkit-mask', 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)');
this.renderer.setStyle(this.shineElement, '-webkit-mask-composite', 'xor');
this.renderer.setStyle(this.shineElement, 'mask-composite', 'exclude');
this.renderer.setStyle(this.shineElement, 'will-change', 'background-position');
// 初始状态下隐藏边框
this.renderer.setStyle(this.shineElement, 'display', 'none');
// 添加关键帧动画样式
this.styleElement = this.renderer.createElement('style');
var keyframes = "\n @keyframes " + this.animationName + " {\n 0% {\n background-position: 0% 50%;\n }\n 50% {\n background-position: 100% 50%;\n }\n 100% {\n background-position: 0% 50%;\n }\n }\n ";
this.renderer.appendChild(this.styleElement, this.renderer.createText(keyframes));
this.renderer.appendChild(this.el.nativeElement, this.styleElement);
// 将shine元素添加到宿主元素中
this.renderer.appendChild(this.el.nativeElement, this.shineElement);
};
ShineBorderDirective.prototype.startAnimation = function () {
var _this = this;
if (!this.shineElement)
return;
// 启动动画时显示边框
this.renderer.setStyle(this.shineElement, 'display', 'block');
// 启动shine动画
this.renderer.setStyle(this.shineElement, '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);
}
};
ShineBorderDirective.prototype.stopAnimation = function () {
if (!this.shineElement)
return;
if (this.stopTimer) {
clearTimeout(this.stopTimer);
this.stopTimer = null;
}
this.renderer.setStyle(this.shineElement, 'animation', 'none');
// 停止动画时隐藏边框
this.renderer.setStyle(this.shineElement, 'display', 'none');
};
return ShineBorderDirective;
}());
ShineBorderDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: ShineBorderDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
ShineBorderDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: ShineBorderDirective, selector: "[ncShineBorder]", inputs: { ncBorderWidth: "ncBorderWidth", ncDuration: "ncDuration", ncStopTime: "ncStopTime", ncShineColor: "ncShineColor", 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: ShineBorderDirective, decorators: [{
type: i0.Directive,
args: [{
selector: '[ncShineBorder]'
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { ncBorderWidth: [{
type: i0.Input
}], ncDuration: [{
type: i0.Input
}], ncStopTime: [{
type: i0.Input
}], ncShineColor: [{
type: i0.Input
}], ncEnabled: [{
type: i0.Input
}], ncEnabledChange: [{
type: i0.Output
}] } });
var NcShineBorderModule = /** @class */ (function () {
function NcShineBorderModule() {
}
return NcShineBorderModule;
}());
NcShineBorderModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcShineBorderModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcShineBorderModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcShineBorderModule, declarations: [ShineBorderDirective], exports: [ShineBorderDirective] });
NcShineBorderModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcShineBorderModule, imports: [[]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcShineBorderModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
ShineBorderDirective
],
imports: [],
exports: [
ShineBorderDirective
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.NcShineBorderModule = NcShineBorderModule;
exports.ShineBorderDirective = ShineBorderDirective;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-shine-border.umd.js.map