ng-cw-v12
Version:
Angular UI component library
197 lines (188 loc) • 11.8 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/magic-card', ['exports', '@angular/core'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"]["magic-card"] = {}), 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 MagicCardDirective = /** @class */ (function () {
function MagicCardDirective(el, renderer) {
var _this = this;
this.el = el;
this.renderer = renderer;
this.ncGradientSize = 200; // 渐变大小，单位px
this.ncGradientColor = '#D9D9D955'; // 内部渐变颜色
this.ncGradientOpacity = 0.8; // 内部渐变透明度
this.ncGradientFrom = '#9E7AFF'; // 边框渐变开始颜色
this.ncGradientTo = '#FE8BBB'; // 边框渐变结束颜色
this.ncCardBackground = 'white'; // 卡片背景颜色
this.mouseX = -200;
this.mouseY = -200;
this.handleMouseEnter = function () {
_this.renderer.setStyle(_this.borderElement, 'opacity', '1');
_this.renderer.setStyle(_this.gradientElement, 'opacity', _this.ncGradientOpacity.toString());
};
this.handleMouseMove = function (e) {
var rect = _this.el.nativeElement.getBoundingClientRect();
_this.mouseX = e.clientX - rect.left;
_this.mouseY = e.clientY - rect.top;
_this.updateGradients();
};
this.handleMouseLeave = function () {
_this.mouseX = -_this.ncGradientSize;
_this.mouseY = -_this.ncGradientSize;
_this.updateGradients();
_this.renderer.setStyle(_this.borderElement, 'opacity', '0');
_this.renderer.setStyle(_this.gradientElement, 'opacity', '0');
};
}
MagicCardDirective.prototype.ngOnInit = function () {
this.setupMagicCard();
this.addEventListeners();
this.initializeMousePosition();
};
MagicCardDirective.prototype.setupMagicCard = function () {
var _this = this;
var element = this.el.nativeElement;
// 设置主容器样式
var elementPosition = element.style.position;
if (!elementPosition || elementPosition === 'static') {
this.renderer.setStyle(element, 'position', 'relative');
}
this.renderer.addClass(element, 'nc-magic-card');
// 获取容器的边框宽度
var computedStyle = getComputedStyle(element);
var borderTopWidth = parseFloat(computedStyle.borderTopWidth) || 0;
var borderRightWidth = parseFloat(computedStyle.borderRightWidth) || 0;
var borderBottomWidth = parseFloat(computedStyle.borderBottomWidth) || 0;
var borderLeftWidth = parseFloat(computedStyle.borderLeftWidth) || 0;
// 如果没有边框，默认使用1px
var maxBorderWidth = Math.max(borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth);
var borderWidth = maxBorderWidth > 0 ? maxBorderWidth : 1;
// 创建边框元素 - 根据实际边框宽度向外扩展
this.borderElement = this.renderer.createElement('div');
this.renderer.addClass(this.borderElement, 'nc-magic-card-border');
this.renderer.setStyle(this.borderElement, 'pointer-events', 'none');
this.renderer.setStyle(this.borderElement, 'position', 'absolute');
this.renderer.setStyle(this.borderElement, 'inset', "-" + borderWidth + "px"); // 根据边框宽度动态设置
this.renderer.setStyle(this.borderElement, 'border-radius', 'inherit');
this.renderer.setStyle(this.borderElement, 'transition', 'opacity 300ms ease');
this.renderer.setStyle(this.borderElement, 'opacity', '0');
this.renderer.setStyle(this.borderElement, 'z-index', '1');
// 创建背景元素 - 隐藏边框层的内部区域
this.backgroundElement = this.renderer.createElement('div');
this.renderer.addClass(this.backgroundElement, 'nc-magic-card-background');
this.renderer.setStyle(this.backgroundElement, 'pointer-events', 'none');
this.renderer.setStyle(this.backgroundElement, 'position', 'absolute');
this.renderer.setStyle(this.backgroundElement, 'inset', '0');
this.renderer.setStyle(this.backgroundElement, 'border-radius', 'inherit');
this.renderer.setStyle(this.backgroundElement, 'background-color', this.ncCardBackground);
this.renderer.setStyle(this.backgroundElement, 'z-index', '2');
// 创建渐变元素
this.gradientElement = this.renderer.createElement('div');
this.renderer.addClass(this.gradientElement, 'nc-magic-card-gradient');
this.renderer.setStyle(this.gradientElement, 'pointer-events', 'none');
this.renderer.setStyle(this.gradientElement, 'position', 'absolute');
this.renderer.setStyle(this.gradientElement, 'inset', '0');
this.renderer.setStyle(this.gradientElement, 'border-radius', 'inherit');
this.renderer.setStyle(this.gradientElement, 'transition', 'opacity 300ms ease');
this.renderer.setStyle(this.gradientElement, 'opacity', '0');
this.renderer.setStyle(this.gradientElement, 'z-index', '4');
// 原始内容位于背景层之上，渐变层之下
var children = Array.from(element.children);
children.forEach(function (child) {
_this.renderer.setStyle(child, 'position', 'relative');
_this.renderer.setStyle(child, 'z-index', '3');
});
// 添加效果层到原始元素
this.renderer.appendChild(element, this.borderElement);
this.renderer.appendChild(element, this.backgroundElement);
this.renderer.appendChild(element, this.gradientElement);
};
MagicCardDirective.prototype.addEventListeners = function () {
var element = this.el.nativeElement;
this.renderer.listen(element, 'mousemove', this.handleMouseMove);
this.renderer.listen(element, 'mouseleave', this.handleMouseLeave);
this.renderer.listen(element, 'mouseenter', this.handleMouseEnter);
};
MagicCardDirective.prototype.initializeMousePosition = function () {
this.mouseX = -this.ncGradientSize;
this.mouseY = -this.ncGradientSize;
this.updateGradients();
};
MagicCardDirective.prototype.updateGradients = function () {
if (this.borderElement && this.gradientElement) {
// 更新边框渐变
var borderGradient = "radial-gradient(" + this.ncGradientSize + "px circle at " + this.mouseX + "px " + this.mouseY + "px, " + this.ncGradientFrom + ", " + this.ncGradientTo + ", transparent 100%)";
this.renderer.setStyle(this.borderElement, 'background', borderGradient);
// 更新内部渐变
var innerGradient = "radial-gradient(" + this.ncGradientSize + "px circle at " + this.mouseX + "px " + this.mouseY + "px, " + this.ncGradientColor + ", transparent 100%)";
this.renderer.setStyle(this.gradientElement, 'background', innerGradient);
}
};
return MagicCardDirective;
}());
MagicCardDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: MagicCardDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
MagicCardDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: MagicCardDirective, selector: "[ncMagicCard]", inputs: { ncGradientSize: "ncGradientSize", ncGradientColor: "ncGradientColor", ncGradientOpacity: "ncGradientOpacity", ncGradientFrom: "ncGradientFrom", ncGradientTo: "ncGradientTo", ncCardBackground: "ncCardBackground" }, ngImport: i0__namespace });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: MagicCardDirective, decorators: [{
type: i0.Directive,
args: [{
selector: '[ncMagicCard]'
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { ncGradientSize: [{
type: i0.Input
}], ncGradientColor: [{
type: i0.Input
}], ncGradientOpacity: [{
type: i0.Input
}], ncGradientFrom: [{
type: i0.Input
}], ncGradientTo: [{
type: i0.Input
}], ncCardBackground: [{
type: i0.Input
}] } });
var NcMagicCardModule = /** @class */ (function () {
function NcMagicCardModule() {
}
return NcMagicCardModule;
}());
NcMagicCardModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcMagicCardModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcMagicCardModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcMagicCardModule, declarations: [MagicCardDirective], exports: [MagicCardDirective] });
NcMagicCardModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcMagicCardModule, imports: [[]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcMagicCardModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
MagicCardDirective
],
imports: [],
exports: [
MagicCardDirective
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.MagicCardDirective = MagicCardDirective;
exports.NcMagicCardModule = NcMagicCardModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-magic-card.umd.js.map