|
1 | | -import { ChangeDetectionStrategy, ModuleWithProviders, signal, inject } from '@angular/core'; |
2 | | -import { |
3 | | - ApplicationRef, |
4 | | - Component, |
5 | | - HostBinding, |
6 | | - HostListener, |
7 | | - NgModule, |
8 | | - OnDestroy, |
9 | | -} from '@angular/core'; |
10 | | - |
11 | | -import { Subscription } from 'rxjs'; |
12 | | - |
13 | | -import { |
14 | | - DefaultNoComponentGlobalConfig, |
15 | | - GlobalConfig, |
16 | | - IndividualConfig, |
17 | | - ToastPackage, |
18 | | - TOAST_CONFIG, |
19 | | -} from '../toastr-config'; |
20 | | -import { ToastrService } from '../toastr.service'; |
| 1 | +import { ChangeDetectionStrategy, ModuleWithProviders } from '@angular/core'; |
| 2 | +import { Component, HostBinding, NgModule } from '@angular/core'; |
| 3 | +import { DefaultNoComponentGlobalConfig, GlobalConfig, TOAST_CONFIG } from '../toastr-config'; |
| 4 | +import { ToastBase } from '../toast.abstract'; |
21 | 5 |
|
22 | 6 | @Component({ |
23 | 7 | selector: '[toast-component]', |
24 | 8 | templateUrl: './toast-noanimation.component.html', |
25 | 9 | standalone: true, |
26 | 10 | changeDetection: ChangeDetectionStrategy.OnPush, |
| 11 | + host: { |
| 12 | + '[class]': 'toastClasses()', |
| 13 | + '[style.display]': 'displayStyle()', |
| 14 | + '(mouseenter)': 'stickAround()', |
| 15 | + '(mouseleave)': 'delayedHideToast()', |
| 16 | + '(click)': 'tapToast()', |
| 17 | + }, |
27 | 18 | }) |
28 | | -export class ToastNoAnimation implements OnDestroy { |
29 | | - protected toastrService = inject(ToastrService); |
30 | | - toastPackage = inject(ToastPackage); |
31 | | - protected appRef = inject(ApplicationRef); |
32 | | - |
33 | | - message?: string | null; |
34 | | - title?: string; |
35 | | - options: IndividualConfig; |
36 | | - duplicatesCount!: number; |
37 | | - originalTimeout: number; |
38 | | - /** width of progress bar */ |
39 | | - width = signal(-1); |
40 | | - /** a combination of toast type and options.toastClass */ |
41 | | - @HostBinding('class') toastClasses = ''; |
42 | | - |
43 | | - /** hides component when waiting to be displayed */ |
44 | | - @HostBinding('style.display') |
45 | | - get displayStyle() { |
46 | | - if (this.state() === 'inactive') { |
47 | | - return 'none'; |
48 | | - } |
49 | | - |
50 | | - return null; |
51 | | - } |
52 | | - |
53 | | - /** controls animation */ |
54 | | - state = signal('inactive'); |
55 | | - private timeout: any; |
56 | | - private intervalId: any; |
57 | | - private hideTime!: number; |
58 | | - private sub: Subscription; |
59 | | - private sub1: Subscription; |
60 | | - private sub2: Subscription; |
61 | | - private sub3: Subscription; |
62 | | - |
63 | | - constructor() { |
64 | | - const toastPackage = this.toastPackage; |
65 | | - |
66 | | - this.message = toastPackage.message; |
67 | | - this.title = toastPackage.title; |
68 | | - this.options = toastPackage.config; |
69 | | - this.originalTimeout = toastPackage.config.timeOut; |
70 | | - this.toastClasses = `${toastPackage.toastType} ${toastPackage.config.toastClass}`; |
71 | | - this.sub = toastPackage.toastRef.afterActivate().subscribe(() => { |
72 | | - this.activateToast(); |
73 | | - }); |
74 | | - this.sub1 = toastPackage.toastRef.manualClosed().subscribe(() => { |
75 | | - this.remove(); |
76 | | - }); |
77 | | - this.sub2 = toastPackage.toastRef.timeoutReset().subscribe(() => { |
78 | | - this.resetTimeout(); |
79 | | - }); |
80 | | - this.sub3 = toastPackage.toastRef.countDuplicate().subscribe(count => { |
81 | | - this.duplicatesCount = count; |
82 | | - }); |
83 | | - } |
84 | | - ngOnDestroy() { |
85 | | - this.sub.unsubscribe(); |
86 | | - this.sub1.unsubscribe(); |
87 | | - this.sub2.unsubscribe(); |
88 | | - this.sub3.unsubscribe(); |
89 | | - clearInterval(this.intervalId); |
90 | | - clearTimeout(this.timeout); |
91 | | - } |
92 | | - /** |
93 | | - * activates toast and sets timeout |
94 | | - */ |
95 | | - activateToast() { |
96 | | - this.state.set('active'); |
97 | | - if ( |
98 | | - !(this.options.disableTimeOut === true || this.options.disableTimeOut === 'timeOut') && |
99 | | - this.options.timeOut |
100 | | - ) { |
101 | | - this.timeout = setTimeout(() => { |
102 | | - this.remove(); |
103 | | - }, this.options.timeOut); |
104 | | - this.hideTime = new Date().getTime() + this.options.timeOut; |
105 | | - if (this.options.progressBar) { |
106 | | - this.intervalId = setInterval(() => this.updateProgress(), 10); |
107 | | - } |
108 | | - } |
109 | | - if (this.options.onActivateTick) { |
110 | | - this.appRef.tick(); |
111 | | - } |
112 | | - } |
113 | | - /** |
114 | | - * updates progress bar width |
115 | | - */ |
116 | | - updateProgress() { |
117 | | - if (this.width() === 0 || this.width() === 100 || !this.options.timeOut) { |
118 | | - return; |
119 | | - } |
120 | | - const now = new Date().getTime(); |
121 | | - const remaining = this.hideTime - now; |
122 | | - this.width.set((remaining / this.options.timeOut) * 100); |
123 | | - if (this.options.progressAnimation === 'increasing') { |
124 | | - this.width.update(width => 100 - width); |
125 | | - } |
126 | | - if (this.width() <= 0) { |
127 | | - this.width.set(0); |
128 | | - } |
129 | | - if (this.width() >= 100) { |
130 | | - this.width.set(100); |
131 | | - } |
132 | | - } |
133 | | - |
134 | | - resetTimeout() { |
135 | | - clearTimeout(this.timeout); |
136 | | - clearInterval(this.intervalId); |
137 | | - this.state.set('active'); |
138 | | - |
139 | | - this.options.timeOut = this.originalTimeout; |
140 | | - this.timeout = setTimeout(() => this.remove(), this.originalTimeout); |
141 | | - this.hideTime = new Date().getTime() + (this.originalTimeout || 0); |
142 | | - this.width.set(-1); |
143 | | - if (this.options.progressBar) { |
144 | | - this.intervalId = setInterval(() => this.updateProgress(), 10); |
145 | | - } |
146 | | - } |
147 | | - |
148 | | - /** |
149 | | - * tells toastrService to remove this toast after animation time |
150 | | - */ |
151 | | - remove() { |
152 | | - if (this.state() === 'removed') { |
153 | | - return; |
154 | | - } |
155 | | - clearTimeout(this.timeout); |
156 | | - this.state.set('removed'); |
157 | | - this.timeout = setTimeout(() => this.toastrService.remove(this.toastPackage.toastId)); |
158 | | - } |
159 | | - @HostListener('click') |
160 | | - tapToast() { |
161 | | - if (this.state() === 'removed') { |
162 | | - return; |
163 | | - } |
164 | | - this.toastPackage.triggerTap(); |
165 | | - if (this.options.tapToDismiss) { |
166 | | - this.remove(); |
167 | | - } |
168 | | - } |
169 | | - @HostListener('mouseenter') |
170 | | - stickAround() { |
171 | | - if (this.state() === 'removed') { |
172 | | - return; |
173 | | - } |
174 | | - clearTimeout(this.timeout); |
175 | | - this.options.timeOut = 0; |
176 | | - this.hideTime = 0; |
177 | | - |
178 | | - // disable progressBar |
179 | | - clearInterval(this.intervalId); |
180 | | - this.width.set(0); |
181 | | - } |
182 | | - @HostListener('mouseleave') |
183 | | - delayedHideToast() { |
184 | | - if ( |
185 | | - this.options.disableTimeOut === true || |
186 | | - this.options.disableTimeOut === 'extendedTimeOut' || |
187 | | - this.options.extendedTimeOut === 0 || |
188 | | - this.state() === 'removed' |
189 | | - ) { |
190 | | - return; |
191 | | - } |
192 | | - this.timeout = setTimeout(() => this.remove(), this.options.extendedTimeOut); |
193 | | - this.options.timeOut = this.options.extendedTimeOut; |
194 | | - this.hideTime = new Date().getTime() + (this.options.timeOut || 0); |
195 | | - this.width.set(-1); |
196 | | - if (this.options.progressBar) { |
197 | | - this.intervalId = setInterval(() => this.updateProgress(), 10); |
198 | | - } |
| 19 | +export class ToastNoAnimation extends ToastBase { |
| 20 | + override remove() { |
| 21 | + super.remove(); |
| 22 | + this.timeout = this.timeoutsService.setTimeout(() => |
| 23 | + this.toastrService.remove(this.toastPackage.toastId), |
| 24 | + ); |
199 | 25 | } |
200 | 26 | } |
201 | 27 |
|
|
0 commit comments