ng-cw-v12
Version:
Angular UI component library
195 lines (190 loc) • 12.7 kB
JavaScript
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, ViewChild, HostListener, NgModule } from '@angular/core';
import * as i1 from '@angular/platform-browser';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
class DockComponent {
constructor(sanitizer) {
this.sanitizer = sanitizer;
// 图标尺寸
this.ncSize = 40;
// 鼠标到最远放大图标的距离
this.ncDistance = 140;
// 展示模式
this.ncMode = 'distance';
// 相对于ncSize放大或间隙的倍数
this.ncMultiple = 1.5;
// 主题
this.ncTheme = 'light';
// 方向
this.ncDirection = 'horizontal';
// 分割线
this.ncDividerIndex = [];
// 提示文本
this.ncTooltip = [];
// 提示文本位置
this.ncTooltipPosition = 'top';
// hover效果
this._hover = false;
// 图标列表
this._items = [];
// 图标点击事件
this.ncClick = new EventEmitter();
this.mouseXY = Infinity;
this.iconScales = [];
this.isAnimating = false;
this.animationFrameId = null;
}
set ncHover(val) {
this._hover = val !== null && val !== undefined && val !== false && val !== 'false';
}
get ncHover() {
return this._hover;
}
set ncItems(value) {
this._items = value;
setTimeout(() => {
this.resetIconScales();
});
}
get ncItems() {
return this._items;
}
ngOnInit() {
}
ngOnDestroy() {
if (this.animationFrameId !== null) {
cancelAnimationFrame(this.animationFrameId);
}
}
resetIconScales() {
this.iconScales = this.ncItems.map(() => this.ncSize);
}
onMouseMove(event) {
if (this.ncDirection === 'horizontal') {
this.mouseXY = event.clientX;
}
else {
this.mouseXY = event.clientY;
}
// 使用requestAnimationFrame优化性能
if (!this.isAnimating) {
this.isAnimating = true;
this.animationFrameId = requestAnimationFrame(() => {
this.updateIconScales();
this.isAnimating = false;
});
}
}
onMouseLeave() {
this.mouseXY = Infinity;
this.resetIconScales();
}
updateIconScales() {
const icons = this.dockContainer.nativeElement.querySelectorAll('.dock-icon');
icons.forEach((icon, index) => {
const iconRect = icon.getBoundingClientRect();
let iconCenter = 0;
if (this.ncDirection == 'horizontal') {
iconCenter = iconRect.left + iconRect.width / 2;
}
else {
iconCenter = iconRect.top + iconRect.height / 2;
}
const distance = Math.abs(this.mouseXY - iconCenter);
let scale = this.ncSize;
if (distance < this.ncDistance) {
const magnificationDelta = this.ncMultiple * this.ncSize - this.ncSize;
// 使用平滑的二次函数曲线使效果更自然
const distanceRatio = 1 - Math.pow(distance / this.ncDistance, 2);
scale = this.ncSize + (magnificationDelta * distanceRatio);
}
// 不再使用Angular动画API，改为直接设置样式值让CSS过渡处理
this.iconScales[index] = scale;
});
}
onIconClick(index) {
this.ncClick.emit(index);
}
/**
* 检查项目是否为SVG内容
*/
isSvgContent(item) {
return !!item && (typeof item === 'string') && (item.trim().startsWith('<svg') || item.trim().startsWith('<?xml'));
}
/**
* 返回安全处理后的SVG内容
*/
getSanitizedSvg(svg) {
return this.sanitizer.bypassSecurityTrustHtml(svg);
}
}
DockComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DockComponent, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component });
DockComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.1.5", type: DockComponent, selector: "nc-dock", inputs: { ncSize: "ncSize", ncDistance: "ncDistance", ncMode: "ncMode", ncMultiple: "ncMultiple", ncTheme: "ncTheme", ncDirection: "ncDirection", ncDividerIndex: "ncDividerIndex", ncTooltip: "ncTooltip", ncTooltipPosition: "ncTooltipPosition", ncHover: "ncHover", ncItems: "ncItems" }, outputs: { ncClick: "ncClick" }, host: { listeners: { "mousemove": "onMouseMove($event)", "mouseleave": "onMouseLeave()" } }, viewQueries: [{ propertyName: "dockContainer", first: true, predicate: ["dockContainer"], descendants: true }], ngImport: i0, template: "<div #dockContainer style=\"--size: {{ncSize}};\" class=\"dock-container\"\r\n [ngClass]=\"{'light-mode': ncTheme === 'light', 'dark-mode': ncTheme === 'dark', 'horizontal-mode': ncDirection === 'horizontal', 'vertical-mode': ncDirection === 'vertical'}\">\r\n <ng-container *ngFor=\"let item of ncItems; let i = index\">\r\n <div class=\"dock-icon\" [ngStyle]=\"{'width': iconScales[i] + 'px', 'height': iconScales[i] + 'px'}\">\r\n <div class=\"icon-image-container\"\r\n [ngClass]=\"{'magnification-mode': ncMode === 'magnification', 'distance-mode': ncMode === 'distance', 'hover-mode': ncHover}\"\r\n (click)=\"onIconClick(i)\">\r\n <ng-container *ngIf=\"isSvgContent(item); else imageTemplate\">\r\n <div class=\"dock-icon-image\" [innerHTML]=\"getSanitizedSvg(item)\"></div>\r\n </ng-container>\r\n <ng-template #imageTemplate>\r\n <img [src]=\"item\" class=\"dock-icon-image\">\r\n </ng-template>\r\n </div>\r\n <div *ngIf=\"ncTooltip && ncTooltip[i]\" class=\"dock-tooltip\" [ngClass]=\"'tooltip-' + ncTooltipPosition\">\r\n {{ ncTooltip[i] }}\r\n </div>\r\n </div>\r\n <div class=\"dock-divider\" *ngIf=\"ncDividerIndex.includes(i)\"></div>\r\n </ng-container>\r\n</div>", styles: [".dock-container{display:flex;align-items:center;justify-content:center;grid-gap:calc(var(--size) * .2px);gap:calc(var(--size) * .2px);border-radius:calc(var(--size) * .4px);padding:calc(var(--size) * .2px);-webkit-backdrop-filter:blur(calc(var(--size) * .3px));backdrop-filter:blur(calc(var(--size) * .3px));position:relative;will-change:contents}.dock-container.horizontal-mode{flex-direction:row;height:calc(var(--size) * 1.4px + 2px);width:max-content}.dock-container.horizontal-mode .dock-divider{width:1px;height:100%}.dock-container.vertical-mode{flex-direction:column;height:max-content;width:calc(var(--size) * 1.4px + 2px)}.dock-container.vertical-mode .dock-divider{width:100%;height:1px}.dock-container.light-mode{background-color:#ffffff1a;border:1px solid rgba(0,0,0,.1)}.dock-container.light-mode .icon-image-container.hover-mode:hover{background-color:#0000001a}.dock-container.light-mode .dock-divider{background-color:#0000001a}.dock-container.light-mode .dock-tooltip{background-color:#000000bf;color:#fff}.dock-container.dark-mode{background-color:#0000001a;border:1px solid rgba(255,255,255,.2)}.dock-container.dark-mode .icon-image-container.hover-mode:hover{background-color:#fff3}.dock-container.dark-mode .dock-divider{background-color:#fff3}.dock-container.dark-mode .dock-tooltip{background-color:#434343;color:#fff}.dock-container .dock-icon{display:flex;align-items:center;justify-content:center;aspect-ratio:1;transition:width .3s cubic-bezier(.34,1.56,.64,1),height .3s cubic-bezier(.34,1.56,.64,1);overflow:visible;position:relative;transform:translateZ(0)}.dock-container .dock-icon:hover .dock-tooltip{opacity:1}.dock-container .dock-icon .icon-image-container{display:flex;align-items:center;justify-content:center;padding:calc(var(--size) * .2px);border-radius:50%;cursor:pointer;transition:background-color .2s ease;position:relative}.dock-container .dock-icon .icon-image-container.distance-mode .dock-icon-image{width:calc(var(--size) * .6px);height:calc(var(--size) * .6px)}.dock-container .dock-icon .icon-image-container.magnification-mode{width:100%;height:100%}.dock-container .dock-icon .icon-image-container.magnification-mode .dock-icon-image{width:100%;height:100%}.dock-container .dock-icon .icon-image-container .dock-icon-image{object-fit:contain;pointer-events:none;transform:translateZ(0);display:flex;align-items:center;justify-content:center}.dock-container .dock-icon .dock-tooltip{position:absolute;padding:calc(var(--size) * .15px) calc(var(--size) * .3px);border-radius:calc(var(--size) * .15px);font-size:calc(var(--size) * .35px);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;z-index:100;box-shadow:0 calc(var(--size) * .05px) calc(var(--size) * .1px) #0003}.dock-container .dock-icon .dock-tooltip.tooltip-top{bottom:100%;left:50%;transform:translate(-50%) translateY(0)}.dock-container .dock-icon .dock-tooltip.tooltip-bottom{top:100%;left:50%;transform:translate(-50%) translateY(0)}.dock-container .dock-icon .dock-tooltip.tooltip-left{right:100%;top:50%;transform:translateY(-50%) translate(0)}.dock-container .dock-icon .dock-tooltip.tooltip-right{left:100%;top:50%;transform:translateY(-50%) translate(0)}\n"], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: DockComponent, decorators: [{
type: Component,
args: [{
selector: 'nc-dock',
templateUrl: './dock.component.html',
styleUrls: ['./dock.component.less'],
}]
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; }, propDecorators: { ncSize: [{
type: Input
}], ncDistance: [{
type: Input
}], ncMode: [{
type: Input
}], ncMultiple: [{
type: Input
}], ncTheme: [{
type: Input
}], ncDirection: [{
type: Input
}], ncDividerIndex: [{
type: Input
}], ncTooltip: [{
type: Input
}], ncTooltipPosition: [{
type: Input
}], ncHover: [{
type: Input
}], ncItems: [{
type: Input
}], ncClick: [{
type: Output
}], dockContainer: [{
type: ViewChild,
args: ['dockContainer']
}], onMouseMove: [{
type: HostListener,
args: ['mousemove', ['$event']]
}], onMouseLeave: [{
type: HostListener,
args: ['mouseleave']
}] } });
class NcDockModule {
}
NcDockModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcDockModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
NcDockModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcDockModule, declarations: [DockComponent], imports: [CommonModule], exports: [DockComponent] });
NcDockModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcDockModule, imports: [[
CommonModule
]] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.1.5", ngImport: i0, type: NcDockModule, decorators: [{
type: NgModule,
args: [{
declarations: [
DockComponent
],
imports: [
CommonModule
],
exports: [
DockComponent
]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { DockComponent, NcDockModule };
//# sourceMappingURL=ng-cw-v12-dock.js.map