ng-cw-v12
Version:
Angular UI Component Library
225 lines (216 loc) • 12.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/border-beam', ['exports', '@angular/core'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["border-beam"] = {}), 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 BorderBeamDirective = /** @class */ (function () {
function BorderBeamDirective(el, renderer) {
this.el = el;
this.renderer = renderer;
/** 光条大小 单位px */
this.ncSize = 50;
/** 动画时长，ms */
this.ncDuration = 6000;
/** 停止动画时间，ms，0表示不停止 */
this.ncStopTime = 0;
/** 光条颜色，可以是单色或颜色数组 */
this.ncBeamColor = ["#ffaa40", "#9c40ff"];
/** 是否反向动画 */
this._reverse = false;
/** 初始偏移位置 (0-100) 单位% */
this.ncInitialOffset = 0;
/** 边框宽度 单位px */
this.ncBorderWidth = 1;
/** 是否启用动画 */
this._enabled = true;
/** 双向绑定输出事件 */
this.ncEnabledChange = new i0.EventEmitter();
this.isInitialized = false;
// 为每个实例生成唯一的动画名称
this.animationName = "ncBorderBeam_" + Math.random().toString(36).substring(2, 11);
}
Object.defineProperty(BorderBeamDirective.prototype, "ncReverse", {
get: function () {
return this._reverse;
},
set: function (val) {
this._reverse = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
Object.defineProperty(BorderBeamDirective.prototype, "ncEnabled", {
get: function () {
return this._enabled;
},
set: function (val) {
this._enabled = val !== null && val !== undefined && val !== false && val !== 'false';
},
enumerable: false,
configurable: true
});
BorderBeamDirective.prototype.ngOnInit = function () {
this.createBorderBeamContainer();
this.isInitialized = true;
if (this.ncEnabled) {
this.startAnimation();
}
};
BorderBeamDirective.prototype.ngOnChanges = function (changes) {
if (this.isInitialized && changes['ncEnabled']) {
if (this.ncEnabled) {
this.startAnimation();
}
else {
this.stopAnimation();
}
}
};
BorderBeamDirective.prototype.ngOnDestroy = function () {
if (this.stopTimer) {
clearTimeout(this.stopTimer);
}
};
BorderBeamDirective.prototype.createBorderBeamContainer = function () {
// 创建边框容器
this.borderContainer = this.renderer.createElement('div');
this.renderer.addClass(this.borderContainer, 'border-beam-container');
// 设置边框容器样式
this.renderer.setStyle(this.borderContainer, 'position', 'absolute');
this.renderer.setStyle(this.borderContainer, 'inset', '0');
this.renderer.setStyle(this.borderContainer, 'borderRadius', 'inherit');
this.renderer.setStyle(this.borderContainer, 'pointerEvents', 'none');
this.renderer.setStyle(this.borderContainer, 'border', this.ncBorderWidth + "px solid transparent");
this.renderer.setStyle(this.borderContainer, 'maskClip', 'padding-box, border-box');
this.renderer.setStyle(this.borderContainer, 'maskComposite', 'intersect');
this.renderer.setStyle(this.borderContainer, 'maskImage', 'linear-gradient(transparent, transparent), linear-gradient(#000, #000)');
// 创建光条元素
this.beamElement = this.renderer.createElement('div');
this.renderer.addClass(this.beamElement, 'border-beam');
// 设置光条样式
this.renderer.setStyle(this.beamElement, 'position', 'absolute');
this.renderer.setStyle(this.beamElement, 'width', this.ncSize + "px");
this.renderer.setStyle(this.beamElement, 'aspectRatio', '1');
// 获取shine颜色
var beamColors = Array.isArray(this.ncBeamColor) ? this.ncBeamColor.join(',') : this.ncBeamColor;
this.renderer.setStyle(this.beamElement, 'background', "linear-gradient(to left, " + beamColors + ", transparent)");
this.renderer.setStyle(this.beamElement, 'offsetPath', "rect(0 auto auto 0 round " + this.ncSize + "px)");
// 初始状态下隐藏光条
this.renderer.setStyle(this.beamElement, 'opacity', '0');
var elementPosition = getComputedStyle(this.el.nativeElement).position;
if (!elementPosition || elementPosition === 'static') {
this.renderer.setStyle(this.el.nativeElement, 'position', 'relative');
}
// 添加关键帧动画样式
this.styleElement = this.renderer.createElement('style');
var startOffset = this.ncReverse ? 100 - this.ncInitialOffset + "%" : this.ncInitialOffset + "%";
var endOffset = this.ncReverse ? -this.ncInitialOffset + "%" : 100 + this.ncInitialOffset + "%";
var keyframes = "\n @keyframes " + this.animationName + " {\n 0% {\n offset-distance: " + startOffset + ";\n }\n 100% {\n offset-distance: " + endOffset + ";\n }\n }\n ";
this.renderer.appendChild(this.styleElement, this.renderer.createText(keyframes));
this.renderer.appendChild(this.el.nativeElement, this.styleElement);
// 将光条添加到边框容器中
this.renderer.appendChild(this.borderContainer, this.beamElement);
// 将边框容器添加到宿主元素中
this.renderer.appendChild(this.el.nativeElement, this.borderContainer);
};
BorderBeamDirective.prototype.startAnimation = function () {
var _this = this;
if (!this.beamElement)
return;
// 显示光条元素
this.renderer.setStyle(this.beamElement, 'opacity', '1');
this.renderer.setStyle(this.beamElement, 'animation', this.animationName + " " + this.ncDuration + "ms linear infinite");
// 如果设置了停止时间，则在指定时间后标记需要停止
if (this.ncStopTime > 0) {
this.stopTimer = setTimeout(function () {
_this.stopAnimation();
// 当因为 ncStopTime 停止动画时，更新 ncEnabled 值并发出事件
_this.ncEnabled = false;
_this.ncEnabledChange.emit(false);
}, this.ncStopTime);
}
};
BorderBeamDirective.prototype.stopAnimation = function () {
if (!this.beamElement)
return;
if (this.stopTimer) {
clearTimeout(this.stopTimer);
this.stopTimer = null;
}
this.renderer.setStyle(this.beamElement, 'animation', 'none');
this.renderer.setStyle(this.beamElement, 'opacity', '0');
};
return BorderBeamDirective;
}());
BorderBeamDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: BorderBeamDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
BorderBeamDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: BorderBeamDirective, selector: "[ncBorderBeam]", inputs: { ncSize: "ncSize", ncDuration: "ncDuration", ncStopTime: "ncStopTime", ncBeamColor: "ncBeamColor", ncReverse: "ncReverse", ncInitialOffset: "ncInitialOffset", ncBorderWidth: "ncBorderWidth", 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: BorderBeamDirective, decorators: [{
type: i0.Directive,
args: [{
selector: '[ncBorderBeam]'
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { ncSize: [{
type: i0.Input
}], ncDuration: [{
type: i0.Input
}], ncStopTime: [{
type: i0.Input
}], ncBeamColor: [{
type: i0.Input
}], ncReverse: [{
type: i0.Input
}], ncInitialOffset: [{
type: i0.Input
}], ncBorderWidth: [{
type: i0.Input
}], ncEnabled: [{
type: i0.Input
}], ncEnabledChange: [{
type: i0.Output
}] } });
var NcBorderBeamModule = /** @class */ (function () {
function NcBorderBeamModule() {
}
return NcBorderBeamModule;
}());
NcBorderBeamModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcBorderBeamModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcBorderBeamModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcBorderBeamModule, declarations: [BorderBeamDirective], exports: [BorderBeamDirective] });
NcBorderBeamModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcBorderBeamModule, imports: [[]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcBorderBeamModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
BorderBeamDirective
],
imports: [],
exports: [
BorderBeamDirective
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.BorderBeamDirective = BorderBeamDirective;
exports.NcBorderBeamModule = NcBorderBeamModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-border-beam.umd.js.map