cmat 0.0.72 → 0.0.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { inject, ViewContainerRef, TemplateRef, ContentChild, Input, Directive } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
class CmatSeamlessAutoScrollDirective {
|
|
5
|
+
constructor() {
|
|
6
|
+
this.data = []; // 输入的数据数组
|
|
7
|
+
this.speed = 10; // 滚动速度（每秒动画）
|
|
8
|
+
this.direction = 'up'; // 滚动方向
|
|
9
|
+
this._viewContainer = inject(ViewContainerRef);
|
|
10
|
+
this._containerElement = null;
|
|
11
|
+
this._contentElement = null;
|
|
12
|
+
this._resizeObserver = null;
|
|
13
|
+
this._isScrollEnabled = false;
|
|
14
|
+
this._dataCopies = 1;
|
|
15
|
+
}
|
|
16
|
+
ngOnInit() {
|
|
17
|
+
this._renderContent();
|
|
18
|
+
}
|
|
19
|
+
ngAfterViewInit() {
|
|
20
|
+
setTimeout(() => {
|
|
21
|
+
this._checkScrollCondition();
|
|
22
|
+
this._listenResize();
|
|
23
|
+
}, 0);
|
|
24
|
+
}
|
|
25
|
+
ngOnDestroy() {
|
|
26
|
+
this._resizeObserver?.disconnect();
|
|
27
|
+
}
|
|
28
|
+
// 渲染内容
|
|
29
|
+
_renderContent() {
|
|
30
|
+
this._viewContainer.clear(); // 清空原有内容
|
|
31
|
+
for (let i = 0; i < this._dataCopies; i++) {
|
|
32
|
+
this.data.forEach((item) => {
|
|
33
|
+
this._viewContainer.createEmbeddedView(this.itemTemplate, { $implicit: item });
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
_checkScrollCondition() {
|
|
38
|
+
this._containerElement = this._viewContainer.element.nativeElement.parentElement?.parentElement;
|
|
39
|
+
this._contentElement = this._viewContainer.element.nativeElement.parentElement;
|
|
40
|
+
if (!this._containerElement || !this._contentElement)
|
|
41
|
+
return;
|
|
42
|
+
const containerSize = this.direction === 'up' || this.direction === 'down'
|
|
43
|
+
? this._containerElement.offsetHeight
|
|
44
|
+
: this._containerElement.offsetWidth;
|
|
45
|
+
const contentSize = this.direction === 'up' || this.direction === 'down'
|
|
46
|
+
? this._contentElement.offsetHeight
|
|
47
|
+
: this._contentElement.offsetWidth;
|
|
48
|
+
// 判断内容是否大于容器
|
|
49
|
+
this._isScrollEnabled = contentSize > containerSize;
|
|
50
|
+
if (this._isScrollEnabled) {
|
|
51
|
+
// 需要滚动时，复制数据确保内容高度 >= 容器高度 × 2
|
|
52
|
+
const copiesNeeded = Math.ceil(containerSize / contentSize) + 1;
|
|
53
|
+
if (copiesNeeded > this._dataCopies) {
|
|
54
|
+
this._dataCopies = copiesNeeded;
|
|
55
|
+
this._renderContent();
|
|
56
|
+
// 重新测量
|
|
57
|
+
setTimeout(() => {
|
|
58
|
+
this._initAnimation();
|
|
59
|
+
}, 0);
|
|
60
|
+
}
|
|
61
|
+
else {
|
|
62
|
+
this._initAnimation();
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
else {
|
|
66
|
+
// 不需要滚动，清除动画
|
|
67
|
+
this._disableAnimation();
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
_initAnimation() {
|
|
71
|
+
if (!this._containerElement || !this._contentElement)
|
|
72
|
+
return;
|
|
73
|
+
this._updateAnimationParams();
|
|
74
|
+
this._contentElement.style.animation = `${this._getDirection()} var(--animation-duration) linear infinite`;
|
|
75
|
+
this._contentElement.style.willChange = 'transform';
|
|
76
|
+
this._contentElement.style.transform = 'translateZ(0)';
|
|
77
|
+
}
|
|
78
|
+
_disableAnimation() {
|
|
79
|
+
if (!this._contentElement)
|
|
80
|
+
return;
|
|
81
|
+
this._contentElement.style.animation = 'none';
|
|
82
|
+
this._contentElement.style.transform = 'none';
|
|
83
|
+
}
|
|
84
|
+
_updateAnimationParams() {
|
|
85
|
+
if (!this._containerElement || !this._contentElement)
|
|
86
|
+
return;
|
|
87
|
+
const contentSize = this.direction === 'up' || this.direction === 'down'
|
|
88
|
+
? this._contentElement.offsetHeight
|
|
89
|
+
: this._contentElement.offsetWidth;
|
|
90
|
+
// 原始内容高度（总高度 / 复制份数）
|
|
91
|
+
const originalContentSize = contentSize / this._dataCopies;
|
|
92
|
+
// 设置 CSS 变量
|
|
93
|
+
this._containerElement.style.setProperty('--scroll-distance', `${originalContentSize}px`);
|
|
94
|
+
this._containerElement.style.setProperty('--animation-duration', `${originalContentSize / this.speed}s`);
|
|
95
|
+
}
|
|
96
|
+
_listenResize() {
|
|
97
|
+
this._resizeObserver = new ResizeObserver(() => {
|
|
98
|
+
this._updateAnimationParams();
|
|
99
|
+
});
|
|
100
|
+
if (this._containerElement) {
|
|
101
|
+
this._resizeObserver.observe(this._containerElement);
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
_getDirection() {
|
|
105
|
+
const map = {
|
|
106
|
+
'up': 'scroll-up',
|
|
107
|
+
'down': 'scroll-down',
|
|
108
|
+
'left': 'scroll-left',
|
|
109
|
+
'right': 'scroll-right'
|
|
110
|
+
};
|
|
111
|
+
return map[this.direction];
|
|
112
|
+
}
|
|
113
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CmatSeamlessAutoScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
114
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.0", type: CmatSeamlessAutoScrollDirective, isStandalone: true, selector: "[cmatSeamlessAutoScroll]", inputs: { data: "data", speed: "speed", direction: "direction" }, queries: [{ propertyName: "itemTemplate", first: true, predicate: TemplateRef, descendants: true, static: true }], ngImport: i0 }); }
|
|
115
|
+
}
|
|
116
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: CmatSeamlessAutoScrollDirective, decorators: [{
|
|
117
|
+
type: Directive,
|
|
118
|
+
args: [{
|
|
119
|
+
selector: '[cmatSeamlessAutoScroll]'
|
|
120
|
+
}]
|
|
121
|
+
}], propDecorators: { data: [{
|
|
122
|
+
type: Input
|
|
123
|
+
}], speed: [{
|
|
124
|
+
type: Input
|
|
125
|
+
}], direction: [{
|
|
126
|
+
type: Input
|
|
127
|
+
}], itemTemplate: [{
|
|
128
|
+
type: ContentChild,
|
|
129
|
+
args: [TemplateRef, { static: true }]
|
|
130
|
+
}] } });
|
|
131
|
+
|
|
132
|
+
/**
|
|
133
|
+
* Generated bundle index. Do not edit.
|
|
134
|
+
*/
|
|
135
|
+
|
|
136
|
+
export { CmatSeamlessAutoScrollDirective };
|
|
137
|
+
//# sourceMappingURL=cmat-directives-seamless-auto-scroll.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"cmat-directives-seamless-auto-scroll.mjs","sources":["../../../projects/cmat/directives/seamless-auto-scroll/seamless-auto-scroll.directive.ts","../../../projects/cmat/directives/seamless-auto-scroll/cmat-directives-seamless-auto-scroll.ts"],"sourcesContent":["import {\r\n Directive,\r\n Input,\r\n OnInit,\r\n OnDestroy,\r\n TemplateRef,\r\n ViewContainerRef,\r\n inject,\r\n ContentChild,\r\n AfterViewInit,\r\n} from '@angular/core';\r\n\r\n@Directive({\r\n selector: '[cmatSeamlessAutoScroll]'\r\n})\r\nexport class CmatSeamlessAutoScrollDirective implements OnInit, AfterViewInit, OnDestroy {\r\n @Input() data: any[] = []; // 输入的数据数组\r\n @Input() speed: number = 10; // 滚动速度（每秒动画）\r\n @Input() direction: 'up' | 'down' | 'left' | 'right' = 'up'; // 滚动方向\r\n\r\n @ContentChild(TemplateRef, { static: true }) itemTemplate!: TemplateRef<any>;\r\n\r\n private _viewContainer = inject(ViewContainerRef);\r\n private _containerElement: HTMLElement | null = null;\r\n private _contentElement: HTMLElement | null = null;\r\n private _resizeObserver: ResizeObserver | null = null;\r\n private _isScrollEnabled = false;\r\n private _dataCopies = 1;\r\n\r\n ngOnInit(): void {\r\n this._renderContent();\r\n }\r\n\r\n ngAfterViewInit(): void {\r\n setTimeout(() => {\r\n this._checkScrollCondition();\r\n this._listenResize();\r\n\r\n\r\n }, 0);\r\n }\r\n\r\n ngOnDestroy(): void {\r\n this._resizeObserver?.disconnect();\r\n }\r\n\r\n // 渲染内容\r\n private _renderContent(): void {\r\n this._viewContainer.clear(); // 清空原有内容\r\n\r\n for (let i = 0; i < this._dataCopies; i++) {\r\n this.data.forEach((item) => {\r\n this._viewContainer.createEmbeddedView(this.itemTemplate, { $implicit: item });\r\n });\r\n }\r\n }\r\n\r\n private _checkScrollCondition(): void {\r\n this._containerElement = this._viewContainer.element.nativeElement.parentElement?.parentElement;\r\n this._contentElement = this._viewContainer.element.nativeElement.parentElement;\r\n\r\n if (!this._containerElement || !this._contentElement) return;\r\n\r\n const containerSize = this.direction === 'up' || this.direction === 'down'\r\n ? this._containerElement.offsetHeight\r\n : this._containerElement.offsetWidth;\r\n\r\n const contentSize = this.direction === 'up' || this.direction === 'down'\r\n ? this._contentElement.offsetHeight\r\n : this._contentElement.offsetWidth;\r\n\r\n // 判断内容是否大于容器\r\n this._isScrollEnabled = contentSize > containerSize;\r\n\r\n if (this._isScrollEnabled) {\r\n // 需要滚动时，复制数据确保内容高度 >= 容器高度 × 2\r\n const copiesNeeded = Math.ceil(containerSize / contentSize) + 1;\r\n\r\n if (copiesNeeded > this._dataCopies) {\r\n this._dataCopies = copiesNeeded;\r\n this._renderContent();\r\n\r\n // 重新测量\r\n setTimeout(() => {\r\n this._initAnimation();\r\n }, 0);\r\n } else {\r\n this._initAnimation();\r\n }\r\n } else {\r\n // 不需要滚动，清除动画\r\n this._disableAnimation();\r\n }\r\n }\r\n\r\n private _initAnimation(): void {\r\n if (!this._containerElement || !this._contentElement) return;\r\n\r\n this._updateAnimationParams();\r\n\r\n this._contentElement.style.animation = `${this._getDirection()} var(--animation-duration) linear infinite`;\r\n this._contentElement.style.willChange = 'transform';\r\n this._contentElement.style.transform = 'translateZ(0)';\r\n }\r\n\r\n private _disableAnimation(): void {\r\n if (!this._contentElement) return;\r\n\r\n this._contentElement.style.animation = 'none';\r\n this._contentElement.style.transform = 'none';\r\n }\r\n\r\n private _updateAnimationParams(): void {\r\n if (!this._containerElement || !this._contentElement) return;\r\n\r\n const contentSize = this.direction === 'up' || this.direction === 'down'\r\n ? this._contentElement.offsetHeight\r\n : this._contentElement.offsetWidth;\r\n\r\n // 原始内容高度（总高度 / 复制份数）\r\n const originalContentSize = contentSize / this._dataCopies;\r\n\r\n // 设置 CSS 变量\r\n this._containerElement.style.setProperty('--scroll-distance', `${originalContentSize}px`);\r\n this._containerElement.style.setProperty('--animation-duration', `${originalContentSize / this.speed}s`);\r\n }\r\n\r\n private _listenResize(): void {\r\n this._resizeObserver = new ResizeObserver(() => {\r\n this._updateAnimationParams();\r\n });\r\n\r\n if (this._containerElement) {\r\n this._resizeObserver.observe(this._containerElement);\r\n }\r\n }\r\n\r\n private _getDirection(): string {\r\n const map = {\r\n 'up': 'scroll-up',\r\n 'down': 'scroll-down',\r\n 'left': 'scroll-left',\r\n 'right': 'scroll-right'\r\n };\r\n return map[this.direction];\r\n }\r\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cmat",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.73",
|
|
4
4
|
"author": {
|
|
5
5
|
"name": "Yu Tao",
|
|
6
6
|
"email": "916426364@qq.com"
|
|
@@ -217,6 +217,10 @@
|
|
|
217
217
|
"types": "./types/cmat-directives-equal-validator.d.ts",
|
|
218
218
|
"default": "./fesm2022/cmat-directives-equal-validator.mjs"
|
|
219
219
|
},
|
|
220
|
+
"./directives/seamless-auto-scroll": {
|
|
221
|
+
"types": "./types/cmat-directives-seamless-auto-scroll.d.ts",
|
|
222
|
+
"default": "./fesm2022/cmat-directives-seamless-auto-scroll.mjs"
|
|
223
|
+
},
|
|
220
224
|
"./lib/mock-api": {
|
|
221
225
|
"types": "./types/cmat-lib-mock-api.d.ts",
|
|
222
226
|
"default": "./fesm2022/cmat-lib-mock-api.mjs"
|
|
@@ -557,6 +557,73 @@ cmat-transfer-picker {
|
|
|
557
557
|
@apply print:hidden;
|
|
558
558
|
}
|
|
559
559
|
|
|
560
|
+
.seamless-auto-scroll-container {
|
|
561
|
+
overflow: hidden;
|
|
562
|
+
position: relative;
|
|
563
|
+
--scroll-distance: 0px;
|
|
564
|
+
--animation-duration: 10s;
|
|
565
|
+
}
|
|
566
|
+
|
|
567
|
+
.seamless-auto-scroll-vertical-content {
|
|
568
|
+
display: flex;
|
|
569
|
+
flex-direction: column;
|
|
570
|
+
position: absolute;
|
|
571
|
+
top: 0;
|
|
572
|
+
left: 0;
|
|
573
|
+
width: 100%;
|
|
574
|
+
will-change: transform;
|
|
575
|
+
transform: translateZ(0);
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
.seamless-auto-scroll-horizontal-content {
|
|
579
|
+
display: flex;
|
|
580
|
+
flex-direction: row;
|
|
581
|
+
position: absolute;
|
|
582
|
+
top: 0;
|
|
583
|
+
left: 0;
|
|
584
|
+
height: 100%;
|
|
585
|
+
will-change: transform;
|
|
586
|
+
transform: translateZ(0);
|
|
587
|
+
}
|
|
588
|
+
|
|
589
|
+
/* 滚动动画 */
|
|
590
|
+
@keyframes scroll-up {
|
|
591
|
+
0% {
|
|
592
|
+
transform: translateY(0);
|
|
593
|
+
}
|
|
594
|
+
100% {
|
|
595
|
+
transform: translateY(calc(-1 * var(--scroll-distance)));
|
|
596
|
+
}
|
|
597
|
+
}
|
|
598
|
+
|
|
599
|
+
@keyframes scroll-down {
|
|
600
|
+
0% {
|
|
601
|
+
transform: translateY(calc(-1 * var(--scroll-distance)));
|
|
602
|
+
}
|
|
603
|
+
100% {
|
|
604
|
+
transform: translateY(0);
|
|
605
|
+
}
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
@keyframes scroll-left {
|
|
609
|
+
0% {
|
|
610
|
+
transform: translateX(0);
|
|
611
|
+
}
|
|
612
|
+
100% {
|
|
613
|
+
transform: translateX(calc(-1 * var(--scroll-distance)));
|
|
614
|
+
}
|
|
615
|
+
}
|
|
616
|
+
|
|
617
|
+
@keyframes scroll-right {
|
|
618
|
+
0% {
|
|
619
|
+
transform: translateX(calc(-1 * var(--scroll-distance)));
|
|
620
|
+
}
|
|
621
|
+
100% {
|
|
622
|
+
transform: translateX(0);
|
|
623
|
+
}
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
|
|
560
627
|
|
|
561
628
|
|
|
562
629
|
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as i0 from '@angular/core';
|
|
2
|
+
import { OnInit, AfterViewInit, OnDestroy, TemplateRef } from '@angular/core';
|
|
3
|
+
|
|
4
|
+
declare class CmatSeamlessAutoScrollDirective implements OnInit, AfterViewInit, OnDestroy {
|
|
5
|
+
data: any[];
|
|
6
|
+
speed: number;
|
|
7
|
+
direction: 'up' | 'down' | 'left' | 'right';
|
|
8
|
+
itemTemplate: TemplateRef<any>;
|
|
9
|
+
private _viewContainer;
|
|
10
|
+
private _containerElement;
|
|
11
|
+
private _contentElement;
|
|
12
|
+
private _resizeObserver;
|
|
13
|
+
private _isScrollEnabled;
|
|
14
|
+
private _dataCopies;
|
|
15
|
+
ngOnInit(): void;
|
|
16
|
+
ngAfterViewInit(): void;
|
|
17
|
+
ngOnDestroy(): void;
|
|
18
|
+
private _renderContent;
|
|
19
|
+
private _checkScrollCondition;
|
|
20
|
+
private _initAnimation;
|
|
21
|
+
private _disableAnimation;
|
|
22
|
+
private _updateAnimationParams;
|
|
23
|
+
private _listenResize;
|
|
24
|
+
private _getDirection;
|
|
25
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<CmatSeamlessAutoScrollDirective, never>;
|
|
26
|
+
static ɵdir: i0.ɵɵDirectiveDeclaration<CmatSeamlessAutoScrollDirective, "[cmatSeamlessAutoScroll]", never, { "data": { "alias": "data"; "required": false; }; "speed": { "alias": "speed"; "required": false; }; "direction": { "alias": "direction"; "required": false; }; }, {}, ["itemTemplate"], never, true, never>;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export { CmatSeamlessAutoScrollDirective };
|