ng-cw-v12
Version:
Angular UI component library
280 lines (271 loc) • 15.7 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/ribbon', ['exports', '@angular/core'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["ng-cw-v12"] = global["ng-cw-v12"] || {}, global["ng-cw-v12"].ribbon = {}), 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 RibbonDirective = /** @class */ (function () {
function RibbonDirective(el, renderer) {
this.el = el;
this.renderer = renderer;
this.ncContent = '';
this.ncContentColor = '#fff';
this.ncSize = 0.3; // 修改为百分比值，默认为容器宽高较小值的30%
this.ncRibbonColor = '#ff6547';
this.ncPosition = 'top-left';
// 生成唯一ID
this.uniqueId = "ribbon_" + Math.random().toString(36).substr(2, 9);
}
RibbonDirective.prototype.ngOnInit = function () {
this.createRibbonContainer();
};
RibbonDirective.prototype.createRibbonContainer = function () {
var elementPosition = this.el.nativeElement.style.position;
if (!elementPosition || elementPosition === 'static') {
this.renderer.setStyle(this.el.nativeElement, 'position', 'relative');
}
// 创建丝带容器
this.ribbonContainer = this.renderer.createElement('div');
this.renderer.addClass(this.ribbonContainer, this.uniqueId);
this.renderer.setStyle(this.ribbonContainer, 'position', 'absolute');
this.renderer.setStyle(this.ribbonContainer, 'overflow', 'hidden');
this.renderer.setStyle(this.ribbonContainer, 'display', 'flex');
this.renderer.setStyle(this.ribbonContainer, 'justify-content', 'center');
this.renderer.setStyle(this.ribbonContainer, 'align-items', 'center');
// 添加到DOM
this.renderer.appendChild(this.el.nativeElement, this.ribbonContainer);
// 初始渲染
this.updateRibbonSize();
// 使用MutationObserver监听父容器尺寸变化
this.observeParentSize();
};
RibbonDirective.prototype.updateRibbonSize = function () {
var _this = this;
// 获取父容器的尺寸
var parentWidth = this.el.nativeElement.offsetWidth;
var parentHeight = this.el.nativeElement.offsetHeight;
// 如果父容器尺寸为0，延迟重试
if (parentWidth === 0 || parentHeight === 0) {
setTimeout(function () { return _this.updateRibbonSize(); }, 100);
return;
}
this.ribbonSize = Math.min(parentWidth, parentHeight) * this.ncSize;
// 更新丝带容器尺寸
this.renderer.setStyle(this.ribbonContainer, 'width', this.ribbonSize + "px");
this.renderer.setStyle(this.ribbonContainer, 'height', this.ribbonSize + "px");
// 更新位置
var offset = -(this.ribbonSize * 0.06);
switch (this.ncPosition) {
case 'top-right':
this.renderer.setStyle(this.ribbonContainer, 'top', offset + "px");
this.renderer.setStyle(this.ribbonContainer, 'right', offset + "px");
break;
case 'bottom-left':
this.renderer.setStyle(this.ribbonContainer, 'bottom', offset + "px");
this.renderer.setStyle(this.ribbonContainer, 'left', offset + "px");
break;
case 'bottom-right':
this.renderer.setStyle(this.ribbonContainer, 'bottom', offset + "px");
this.renderer.setStyle(this.ribbonContainer, 'right', offset + "px");
break;
default: //top-left
this.renderer.setStyle(this.ribbonContainer, 'top', offset + "px");
this.renderer.setStyle(this.ribbonContainer, 'left', offset + "px");
break;
}
// 更新CSS样式
this.updateRibbonStyles();
};
RibbonDirective.prototype.updateRibbonStyles = function () {
// 根据输入的颜色计算渐变色
var mainColor = this.ncRibbonColor;
var lighterColor = this.adjustColor(this.ncRibbonColor, 45);
var darkerColor = this.adjustColor(this.ncRibbonColor, -10);
var cssText = "\n\t\t\t." + this.uniqueId + "::before {\n\t\t\t\tcontent: '" + this.ncContent + "';\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: 150%;\n\t\t\t\theight: " + this.ribbonSize * 0.3 + "px;\n\t\t\t\tbackground: linear-gradient(45deg, " + mainColor + " 0%, " + lighterColor + " 51%, " + darkerColor + " 100%);\n\t\t\t\ttransform: rotate(" + this.getRotationDegree() + ") translateY(" + -this.ribbonSize * 0.16 + "px) " + this.getTextRotation() + ";\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\tcolor: " + this.ncContentColor + ";\n\t\t\t\tfont-weight: 600;\n\t\t\t\tfont-size: " + Math.ceil(this.ribbonSize * 0.18) + "px;\n\t\t\t\tletter-spacing: 0.1em;\n\t\t\t\tbox-shadow: " + this.getRibbonShadow() + ";\n\t\t\t}\n\n\t\t\t." + this.uniqueId + "::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\twidth: " + this.ribbonSize * 0.1 + "px;\n\t\t\t\theight: " + this.ribbonSize * 0.1 + "px;\n\t\t\t\tz-index: -1;\n\t\t\t\t" + this.getShadowPosition() + "\n\t\t\t\tbackground: linear-gradient(45deg, " + mainColor + " 0%, " + lighterColor + " 51%, " + mainColor + " 100%);\n\t\t\t}\n\t\t";
// 移除旧样式（如果存在）
var oldStyle = document.querySelector("style[data-ribbon-id=\"" + this.uniqueId + "\"]");
if (oldStyle) {
oldStyle.remove();
}
// 添加新样式
var styleElement = this.renderer.createElement('style');
this.renderer.setAttribute(styleElement, 'data-ribbon-id', this.uniqueId);
this.renderer.appendChild(styleElement, this.renderer.createText(cssText));
this.renderer.appendChild(document.head, styleElement);
};
// 添加颜色调整方法
RibbonDirective.prototype.adjustColor = function (color, percent) {
// 确保颜色值格式统一，移除可能存在的 # 号
var hex = color.replace(/^#/, '');
// 验证颜色值格式（6位或8位）
if (!/^[0-9A-Fa-f]{6}([0-9A-Fa-f]{2})?$/.test(hex)) {
console.warn('Invalid color format. Using default color.');
return '#ff6547';
}
// 分离颜色值和透明度
var colorHex = hex.slice(0, 6);
var alpha = hex.length === 8 ? hex.slice(6, 8) : '';
var r = parseInt(colorHex.substring(0, 2), 16);
var g = parseInt(colorHex.substring(2, 4), 16);
var b = parseInt(colorHex.substring(4, 6), 16);
var adjustValue = function (value) {
var newValue = value + (value * percent / 100);
return Math.min(255, Math.max(0, Math.round(newValue)));
};
var nr = adjustValue(r);
var ng = adjustValue(g);
var nb = adjustValue(b);
// 如果原始颜色包含透明度，则在结果中也包含透明度
return "#" + nr.toString(16).padStart(2, '0') + ng.toString(16).padStart(2, '0') + nb.toString(16).padStart(2, '0') + alpha;
};
// 添加获取旋转角度的方法
RibbonDirective.prototype.getRotationDegree = function () {
switch (this.ncPosition) {
case 'top-right':
return '45deg';
case 'bottom-left':
return '-135deg';
case 'bottom-right':
return '135deg';
default: // top-left
return '-45deg';
}
};
// 添加获取文字旋转的方法
RibbonDirective.prototype.getTextRotation = function () {
switch (this.ncPosition) {
case 'bottom-left':
case 'bottom-right':
return 'rotate(180deg)';
default:
return '';
}
};
// 添加获取丝带阴影的方法
RibbonDirective.prototype.getRibbonShadow = function () {
switch (this.ncPosition) {
case 'bottom-left':
case 'bottom-right':
return "0 -" + this.ribbonSize * 0.05 + "px " + this.ribbonSize * 0.1 + "px rgba(0, 0, 0, 0.23)";
default:
return "0 " + this.ribbonSize * 0.05 + "px " + this.ribbonSize * 0.1 + "px rgba(0, 0, 0, 0.23)";
}
};
// 添加获取阴影位置的方法
RibbonDirective.prototype.getShadowPosition = function () {
var shadowSize = this.ribbonSize * 0.9 + 'px';
var shadowColor = this.adjustColor(this.ncRibbonColor, -20);
switch (this.ncPosition) {
case 'top-right':
return "bottom: 0; right: 0; box-shadow: -" + shadowSize + " -" + shadowSize + " " + shadowColor + ";";
case 'bottom-left':
return "top: 0; left: 0; box-shadow: " + shadowSize + " " + shadowSize + " " + shadowColor + ";";
case 'bottom-right':
return "top: 0; right: 0; box-shadow: -" + shadowSize + " " + shadowSize + " " + shadowColor + ";";
default: // top-left
return "bottom: 0; left: 0; box-shadow: " + shadowSize + " -" + shadowSize + " " + shadowColor + ";";
}
};
// 监听父容器尺寸变化
RibbonDirective.prototype.observeParentSize = function () {
var _this = this;
// 使用ResizeObserver监听尺寸变化（现代浏览器支持）
if (typeof ResizeObserver !== 'undefined') {
var resizeObserver = new ResizeObserver(function () {
_this.updateRibbonSize();
});
resizeObserver.observe(this.el.nativeElement);
}
else {
// 降级方案：使用MutationObserver监听DOM变化
var observer = new MutationObserver(function () {
_this.updateRibbonSize();
});
observer.observe(this.el.nativeElement, {
childList: true,
subtree: true,
attributes: true
});
// 额外的安全措施：定期检查尺寸变化
var lastWidth_1 = this.el.nativeElement.offsetWidth;
var lastHeight_1 = this.el.nativeElement.offsetHeight;
var checkSizeInterval_1 = setInterval(function () {
var currentWidth = _this.el.nativeElement.offsetWidth;
var currentHeight = _this.el.nativeElement.offsetHeight;
if (currentWidth !== lastWidth_1 || currentHeight !== lastHeight_1) {
lastWidth_1 = currentWidth;
lastHeight_1 = currentHeight;
_this.updateRibbonSize();
}
}, 500);
// 组件销毁时清除定时器
this.el.nativeElement.addEventListener('DOMNodeRemoved', function () {
clearInterval(checkSizeInterval_1);
});
}
};
return RibbonDirective;
}());
RibbonDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: RibbonDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
RibbonDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.1.5", type: RibbonDirective, selector: "[ncRibbon]", inputs: { ncContent: "ncContent", ncContentColor: "ncContentColor", ncSize: "ncSize", ncRibbonColor: "ncRibbonColor", ncPosition: "ncPosition" }, ngImport: i0__namespace });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: RibbonDirective, decorators: [{
type: i0.Directive,
args: [{
selector: '[ncRibbon]'
}]
}], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { ncContent: [{
type: i0.Input
}], ncContentColor: [{
type: i0.Input
}], ncSize: [{
type: i0.Input
}], ncRibbonColor: [{
type: i0.Input
}], ncPosition: [{
type: i0.Input
}] } });
var NcRibbonModule = /** @class */ (function () {
function NcRibbonModule() {
}
return NcRibbonModule;
}());
NcRibbonModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcRibbonModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
NcRibbonModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcRibbonModule, declarations: [RibbonDirective], exports: [RibbonDirective] });
NcRibbonModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcRibbonModule, imports: [[]] });
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0__namespace, type: NcRibbonModule, decorators: [{
type: i0.NgModule,
args: [{
declarations: [
RibbonDirective
],
imports: [],
exports: [
RibbonDirective
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
exports.NcRibbonModule = NcRibbonModule;
exports.RibbonDirective = RibbonDirective;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ng-cw-v12-ribbon.umd.js.map