((resolve: () => void) => {
230 | // Calculate new position (position after the shift)
231 | let newElementShift: number;
232 | if (
233 | (this.config.position.vertical.position === 'top' && shiftToMakePlace) ||
234 | (this.config.position.vertical.position === 'bottom' && !shiftToMakePlace)
235 | ) {
236 | newElementShift = this.elementShift + distance + this.config.position.vertical.gap;
237 | } else {
238 | newElementShift = this.elementShift - distance - this.config.position.vertical.gap;
239 | }
240 | const horizontalPosition: string = this.config.position.horizontal.position === 'middle' ? '-50%' : '0';
241 |
242 | // Are animations enabled?
243 | if (this.config.animations.enabled && this.config.animations.shift.speed > 0) {
244 | const animationData: NotifierAnimationData = {
245 | // TODO: Extract into animation service
246 | keyframes: [
247 | {
248 | transform: `translate3d( ${horizontalPosition}, ${this.elementShift}px, 0 )`,
249 | },
250 | {
251 | transform: `translate3d( ${horizontalPosition}, ${newElementShift}px, 0 )`,
252 | },
253 | ],
254 | options: {
255 | duration: this.config.animations.shift.speed,
256 | easing: this.config.animations.shift.easing,
257 | fill: 'forwards',
258 | },
259 | };
260 | this.elementShift = newElementShift;
261 | const animation: Animation = this.element.animate(animationData.keyframes, animationData.options);
262 | animation.onfinish = () => {
263 | resolve(); // Done
264 | };
265 | } else {
266 | this.renderer.setStyle(this.element, 'transform', `translate3d( ${horizontalPosition}, ${newElementShift}px, 0 )`);
267 | this.elementShift = newElementShift;
268 | resolve(); // Done
269 | }
270 | });
271 | }
272 |
273 | /**
274 | * Handle click on dismiss button
275 | */
276 | public onClickDismiss(): void {
277 | this.dismiss.emit(this.notification.id);
278 | }
279 |
280 | /**
281 | * Handle mouseover over notification area
282 | */
283 | public onNotificationMouseover(): void {
284 | if (this.config.behaviour.onMouseover === 'pauseAutoHide') {
285 | this.pauseAutoHideTimer();
286 | } else if (this.config.behaviour.onMouseover === 'resetAutoHide') {
287 | this.stopAutoHideTimer();
288 | }
289 | }
290 |
291 | /**
292 | * Handle mouseout from notification area
293 | */
294 | public onNotificationMouseout(): void {
295 | if (this.config.behaviour.onMouseover === 'pauseAutoHide') {
296 | this.continueAutoHideTimer();
297 | } else if (this.config.behaviour.onMouseover === 'resetAutoHide') {
298 | this.startAutoHideTimer();
299 | }
300 | }
301 |
302 | /**
303 | * Handle click on notification area
304 | */
305 | public onNotificationClick(): void {
306 | if (this.config.behaviour.onClick === 'hide') {
307 | this.onClickDismiss();
308 | }
309 | }
310 |
311 | /**
312 | * Start the auto hide timer (if enabled)
313 | */
314 | private startAutoHideTimer(): void {
315 | if (this.config.behaviour.autoHide !== false && this.config.behaviour.autoHide > 0) {
316 | this.timerService.start(this.config.behaviour.autoHide).then(() => {
317 | this.onClickDismiss();
318 | });
319 | }
320 | }
321 |
322 | /**
323 | * Pause the auto hide timer (if enabled)
324 | */
325 | private pauseAutoHideTimer(): void {
326 | if (this.config.behaviour.autoHide !== false && this.config.behaviour.autoHide > 0) {
327 | this.timerService.pause();
328 | }
329 | }
330 |
331 | /**
332 | * Continue the auto hide timer (if enabled)
333 | */
334 | private continueAutoHideTimer(): void {
335 | if (this.config.behaviour.autoHide !== false && this.config.behaviour.autoHide > 0) {
336 | this.timerService.continue();
337 | }
338 | }
339 |
340 | /**
341 | * Stop the auto hide timer (if enabled)
342 | */
343 | private stopAutoHideTimer(): void {
344 | if (this.config.behaviour.autoHide !== false && this.config.behaviour.autoHide > 0) {
345 | this.timerService.stop();
346 | }
347 | }
348 |
349 | /**
350 | * Initial notification setup
351 | */
352 | private setup(): void {
353 | // Set start position (initially the exact same for every new notification)
354 | if (this.config.position.horizontal.position === 'left') {
355 | this.renderer.setStyle(this.element, 'left', `${this.config.position.horizontal.distance}px`);
356 | } else if (this.config.position.horizontal.position === 'right') {
357 | this.renderer.setStyle(this.element, 'right', `${this.config.position.horizontal.distance}px`);
358 | } else {
359 | this.renderer.setStyle(this.element, 'left', '50%');
360 | // Let's get the GPU handle some work as well (#perfmatters)
361 | this.renderer.setStyle(this.element, 'transform', 'translate3d( -50%, 0, 0 )');
362 | }
363 | if (this.config.position.vertical.position === 'top') {
364 | this.renderer.setStyle(this.element, 'top', `${this.config.position.vertical.distance}px`);
365 | } else {
366 | this.renderer.setStyle(this.element, 'bottom', `${this.config.position.vertical.distance}px`);
367 | }
368 |
369 | // Add classes (responsible for visual design)
370 | this.renderer.addClass(this.element, `notifier__notification--${this.notification.type}`);
371 | this.renderer.addClass(this.element, `notifier__notification--${this.config.theme}`);
372 | }
373 | }
374 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 |
3 | # angular-notifier
4 |
5 | **A well designed, fully animated, highly customizable, and easy-to-use notification library for your **Angular 2+** application.**
6 |
7 |
8 |
9 |
10 |
11 | ## Demo
12 |
13 | You can play around with this library with **[this Stackblitz right here](https://stackblitz.com/edit/angular-notifier-demo)**.
14 |
15 | 
16 |
17 |
18 |
19 | ## How to install
20 |
21 | You can get **angular-notifier** via **npm** by either adding it as a new _dependency_ to your `package.json` file and running npm install,
22 | or running the following command:
23 |
24 | ```bash
25 | npm install angular-notifier
26 | ```
27 |
28 |
29 |
30 | ### Angular versions
31 |
32 | The following list describes the compatibility with Angular:
33 |
34 | | Angular Notifier | Angular | Compilation |
35 | | ---------------- | ------- | ------------------ |
36 | | `1.x` | `2.x` | View Engine |
37 | | `2.x` | `4.x` | View Engine |
38 | | `3.x` | `5.x` | View Engine |
39 | | `4.x` | `6.x` | View Engine |
40 | | `5.x` | `7.x` | View Engine |
41 | | `6.x` | `8.x` | View Engine |
42 | | `7.x` | `9.x` | View Engine |
43 | | `8.x` | `10.x` | View Engine |
44 | | `9.x` | `11.x` | View Engine |
45 | | `10.x` | `12.x` | View Engine |
46 | | `11.x` | `13.x` | Ivy (partial mode) |
47 | | `12.x` | `14.x` | Ivy (partial mode) |
48 | | `13.x` | `15.x` | Ivy (partial mode) |
49 | | `14.x` | `16.x` | Ivy (partial mode) |
50 |
51 |
52 |
53 | ## How to setup
54 |
55 | Before actually being able to use the **angular-notifier** library within our code, we have to first set it up within Angular, and also
56 | bring the styles into our project.
57 |
58 |
59 |
60 | ### 1. Import the `NotifierModule`
61 |
62 | First of all, make **angular-notifier** globally available to your Angular application by importing (and optionally also configuring) the
63 | `NotifierModule` the your root Angular module. For example:
64 |
65 | ```typescript
66 | import { NotifierModule } from 'angular-notifier';
67 |
68 | @NgModule({
69 | imports: [NotifierModule],
70 | })
71 | export class AppModule {}
72 | ```
73 |
74 | But wait -- your probably might want to customize your notifications' look and behaviour according to your requirements and needs. To do so,
75 | call the `withConfig` method on the `NotifierModule`, and pass in the options. For example:
76 |
77 | ```typescript
78 | import { NotifierModule } from 'angular-notifier';
79 |
80 | @NgModule({
81 | imports: [
82 | NotifierModule.withConfig({
83 | // Custom options in here
84 | }),
85 | ],
86 | })
87 | export class AppModule {}
88 | ```
89 |
90 |
91 |
92 | ### 2. Use the `notifier-container` component
93 |
94 | In addition, you have to place the `notifier-container` component somewhere in your application, best at the last element of your
95 | root (app) component. For example:
96 |
97 | ```typescript
98 | @Component({
99 | selector: 'my-app',
100 | template: `
101 | Hello World
102 |
103 | `,
104 | })
105 | export class AppComponent {}
106 | ```
107 |
108 | > Later on, this component will contain and manage all your applications' notifications.
109 |
110 |
111 |
112 | ### 3. Import the styles
113 |
114 | Of course we also need to import the **angular-notifier** styles into our application. Depending on the architecture of your Angular
115 | application, you want to either import the original SASS files, or the already compiled CSS files instead - or none of them if you wish to
116 | write your own styles from scratch.
117 |
118 | #### The easy way: Import all the styles
119 |
120 | To import all the styles, simple include either the `~/angular-notifier/styles.(scss|css)` file. It contains the core styles as well as all
121 | the themes and notification types.
122 |
123 | #### The advanced way: Only import the styles actually needed
124 |
125 | To keep the size if your styles as small as possible (improving performance for the perfect UX), your might instead decide to only import
126 | the styles actually needed by our application. The **angular-notifier** styles are modular:
127 |
128 | - The `~/angular-notifier/styles/core.(scss|css)` file is always required, it defines the basic styles (such as the layout)
129 | - Themes can be imported from the `~/angular-notifier/styles/theme` folder
130 | - The different notification types, then, can be imported from the `~/angular-notifier/styles/types` folder
131 |
132 |
133 |
134 | ## How to use
135 |
136 | Using **angular-notifier** is as simple as it can get -- simple import and inject the `NotifierService` into every component (directive,
137 | service, ...) you want to use in. For example:
138 |
139 | ```typescript
140 | import { NotifierService } from 'angular-notifier';
141 |
142 | @Component({
143 | // ...
144 | })
145 | export class MyAwesomeComponent {
146 | private readonly notifier: NotifierService;
147 |
148 | constructor(notifierService: NotifierService) {
149 | this.notifier = notifierService;
150 | }
151 | }
152 | ```
153 |
154 |
155 |
156 | ### Show notifications
157 |
158 | Showing a notification is simple - all your need is a type, and a message to be displayed. For example:
159 |
160 | ```typescript
161 | this.notifier.notify('success', 'You are awesome! I mean it!');
162 | ```
163 |
164 | You can further pass in a _notification ID_ as the third (optional) argument. Essentially, such a _notification ID_ is nothing more but a
165 | unique string tha can be used later on to gain access (and thus control) to this specific notification. For example:
166 |
167 | ```typescript
168 | this.notifier.notify('success', 'You are awesome! I mean it!', 'THAT_NOTIFICATION_ID');
169 | ```
170 |
171 | > For example, you might want to define a _notification ID_ if you know that, at some point in the future, you will need to remove _this
172 | > exact_ notification.
173 |
174 | **The syntax above is actually just a shorthand version of the following:**
175 |
176 | ```typescript
177 | this.notifier.show({
178 | type: 'success',
179 | message: 'You are awesome! I mean it!',
180 | id: 'THAT_NOTIFICATION_ID', // Again, this is optional
181 | });
182 | ```
183 |
184 |
185 |
186 | ### Hide notifications
187 |
188 | You can also hide notifications. To hide a specific notification - assuming you've defined a _notification ID_ when creating it, simply
189 | call:
190 |
191 | ```typescript
192 | this.notifier.hide('THAT_NOTIFICATION_ID');
193 | ```
194 |
195 | Furthermore, your can hide the newest notification by calling:
196 |
197 | ```typescript
198 | this.notifier.hideNewest();
199 | ```
200 |
201 | Or, your could hide the oldest notification:
202 |
203 | ```typescript
204 | this.notifier.hideOldest();
205 | ```
206 |
207 | And, of course, it's also possible to hide all visible notifications at once:
208 |
209 | ```typescript
210 | this.notifier.hideAll();
211 | ```
212 |
213 |
214 |
215 | ## How to customize
216 |
217 | From the beginning, the **angular-notifier** library has been written with customizability in mind. The idea is that **angular-notifier**
218 | works the way your want it to, so that you can make it blend perfectly into the rest of your application. Still, the default configuration
219 | should already provide a great User Experience.
220 |
221 | > Keep in mind that **angular-notifier** can be configured only once - which is at the time you import the `NotifierModule` into your root
222 | > (app) module.
223 |
224 |
225 |
226 | ### Position
227 |
228 | With the `position` property you can define where exactly notifications will appear on the screen:
229 |
230 | ```typescript
231 | position: {
232 |
233 | horizontal: {
234 |
235 | /**
236 | * Defines the horizontal position on the screen
237 | * @type {'left' | 'middle' | 'right'}
238 | */
239 | position: 'left',
240 |
241 | /**
242 | * Defines the horizontal distance to the screen edge (in px)
243 | * @type {number}
244 | */
245 | distance: 12
246 |
247 | },
248 |
249 | vertical: {
250 |
251 | /**
252 | * Defines the vertical position on the screen
253 | * @type {'top' | 'bottom'}
254 | */
255 | position: 'bottom',
256 |
257 | /**
258 | * Defines the vertical distance to the screen edge (in px)
259 | * @type {number}
260 | */
261 | distance: 12
262 |
263 | /**
264 | * Defines the vertical gap, existing between multiple notifications (in px)
265 | * @type {number}
266 | */
267 | gap: 10
268 |
269 | }
270 |
271 | }
272 | ```
273 |
274 |
275 |
276 | ### Theme
277 |
278 | With the `theme` property you can change the overall look and feel of your notifications:
279 |
280 | ```typescript
281 | /**
282 | * Defines the notification theme, responsible for the Visual Design of notifications
283 | * @type {string}
284 | */
285 | theme: 'material';
286 | ```
287 |
288 | #### Theming in detail
289 |
290 | Well, how does theming actually work? In the end, the value set for the `theme` property will be part of a class added to each notification
291 | when being created. For example, using `material` as the theme results in all notifications getting a class assigned named `x-notifier__notification--material`.
292 |
293 | > Everyone - yes, I'm looking at you - can use this mechanism to write custom notification themes and apply them via the `theme` property.
294 | > For example on how to create a theme from scratch, just take a look at the themes coming along with this library (as for now only the
295 | > `material` theme).
296 |
297 |
298 |
299 | ### Behaviour
300 |
301 | With the `behaviour` property you can define how notifications will behave in different situations:
302 |
303 | ```typescript
304 | behaviour: {
305 |
306 | /**
307 | * Defines whether each notification will hide itself automatically after a timeout passes
308 | * @type {number | false}
309 | */
310 | autoHide: 5000,
311 |
312 | /**
313 | * Defines what happens when someone clicks on a notification
314 | * @type {'hide' | false}
315 | */
316 | onClick: false,
317 |
318 | /**
319 | * Defines what happens when someone hovers over a notification
320 | * @type {'pauseAutoHide' | 'resetAutoHide' | false}
321 | */
322 | onMouseover: 'pauseAutoHide',
323 |
324 | /**
325 | * Defines whether the dismiss button is visible or not
326 | * @type {boolean}
327 | */
328 | showDismissButton: true,
329 |
330 | /**
331 | * Defines whether multiple notification will be stacked, and how high the stack limit is
332 | * @type {number | false}
333 | */
334 | stacking: 4
335 |
336 | }
337 | ```
338 |
339 |
340 |
341 | ### Custom Templates
342 |
343 | If you need more control over how the inner HTML part of the notification looks like, either because your style-guide requires it, or for being able to add icons etc, then you can **define a custom ``** which you pass to the `NotifierService`.
344 |
345 | You can define a custom `ng-template` as follows:
346 |
347 | ```html
348 |
349 | {{ notificationData.message }}
350 |
351 | ```
352 |
353 | In this case you could wrap your own HTML, even a `` component which you might use in your application. The notification data is passed in as a `notification` object, which you can reference inside the `` using the `let-` syntax.
354 |
355 | Inside your component, you can then reference the `` by its template variable `#customNotification` using Angular's `ViewChild`:
356 |
357 | ```typescript
358 | import { ViewChild } from '@angular/core';
359 |
360 | @Component({
361 | // ...
362 | })
363 | export class SomeComponent {
364 | @ViewChild('customNotification', { static: true }) customNotificationTmpl;
365 |
366 | constructor(private notifierService: NotifierService) {}
367 |
368 | showNotification() {
369 | this.notifier.show({
370 | message: 'Hi there!',
371 | type: 'info',
372 | template: this.customNotificationTmpl,
373 | });
374 | }
375 | }
376 | ```
377 |
378 |
379 |
380 | ### Animations
381 |
382 | With the `animations` property your can define whether and how exactly notification will be animated:
383 |
384 | ```typescript
385 | animations: {
386 |
387 | /**
388 | * Defines whether all (!) animations are enabled or disabled
389 | * @type {boolean}
390 | */
391 | enabled: true,
392 |
393 | show: {
394 |
395 | /**
396 | * Defines the animation preset that will be used to animate a new notification in
397 | * @type {'fade' | 'slide'}
398 | */
399 | preset: 'slide',
400 |
401 | /**
402 | * Defines how long it will take to animate a new notification in (in ms)
403 | * @type {number}
404 | */
405 | speed: 300,
406 |
407 | /**
408 | * Defines which easing method will be used when animating a new notification in
409 | * @type {'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out'}
410 | */
411 | easing: 'ease'
412 |
413 | },
414 |
415 | hide: {
416 |
417 | /**
418 | * Defines the animation preset that will be used to animate a new notification out
419 | * @type {'fade' | 'slide'}
420 | */
421 | preset: 'fade',
422 |
423 | /**
424 | * Defines how long it will take to animate a new notification out (in ms)
425 | * @type {number}
426 | */
427 | speed: 300,
428 |
429 | /**
430 | * Defines which easing method will be used when animating a new notification out
431 | * @type {'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out'}
432 | */
433 | easing: 'ease',
434 |
435 | /**
436 | * Defines the animation offset used when hiding multiple notifications at once (in ms)
437 | * @type {number | false}
438 | */
439 | offset: 50
440 |
441 | },
442 |
443 | shift: {
444 |
445 | /**
446 | * Defines how long it will take to shift a notification around (in ms)
447 | * @type {number}
448 | */
449 | speed: 300,
450 |
451 | /**
452 | * Defines which easing method will be used when shifting a notification around
453 | * @type {string}
454 | */
455 | easing: 'ease' // All standard CSS easing methods work
456 |
457 | },
458 |
459 | /**
460 | * Defines the overall animation overlap, allowing for much smoother looking animations (in ms)
461 | * @type {number | false}
462 | */
463 | overlap: 150
464 |
465 | }
466 | ```
467 |
468 |
469 |
470 | ### In short -- the default configuration
471 |
472 | To sum it up, the following is the default configuration _(copy-paste-friendly)_:
473 |
474 | ```typescript
475 | const notifierDefaultOptions: NotifierOptions = {
476 | position: {
477 | horizontal: {
478 | position: 'left',
479 | distance: 12,
480 | },
481 | vertical: {
482 | position: 'bottom',
483 | distance: 12,
484 | gap: 10,
485 | },
486 | },
487 | theme: 'material',
488 | behaviour: {
489 | autoHide: 5000,
490 | onClick: false,
491 | onMouseover: 'pauseAutoHide',
492 | showDismissButton: true,
493 | stacking: 4,
494 | },
495 | animations: {
496 | enabled: true,
497 | show: {
498 | preset: 'slide',
499 | speed: 300,
500 | easing: 'ease',
501 | },
502 | hide: {
503 | preset: 'fade',
504 | speed: 300,
505 | easing: 'ease',
506 | offset: 50,
507 | },
508 | shift: {
509 | speed: 300,
510 | easing: 'ease',
511 | },
512 | overlap: 150,
513 | },
514 | };
515 | ```
516 |
--------------------------------------------------------------------------------
/projects/angular-notifier/src/lib/components/notifier-container.component.ts:
--------------------------------------------------------------------------------
1 | import { ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy } from '@angular/core';
2 | import { Subscription } from 'rxjs';
3 |
4 | import { NotifierAction } from '../models/notifier-action.model';
5 | import { NotifierConfig } from '../models/notifier-config.model';
6 | import { NotifierNotification } from '../models/notifier-notification.model';
7 | import { NotifierService } from '../services/notifier.service';
8 | import { NotifierQueueService } from '../services/notifier-queue.service';
9 | import { NotifierNotificationComponent } from './notifier-notification.component';
10 |
11 | /**
12 | * Notifier container component
13 | * ----------------------------
14 | * This component acts as a wrapper for all notification components; consequently, it is responsible for creating a new notification
15 | * component and removing an existing notification component. Being more precicely, it also handles side effects of those actions, such as
16 | * shifting or even completely removing other notifications as well. Overall, this components handles actions coming from the queue service
17 | * by subscribing to its action stream.
18 | *
19 | * Technical sidenote:
20 | * This component has to be used somewhere in an application to work; it will not inject and create itself automatically, primarily in order
21 | * to not break the Angular AoT compilation. Moreover, this component (and also the notification components) set their change detection
22 | * strategy onPush, which means that we handle change detection manually in order to get the best performance. (#perfmatters)
23 | */
24 | @Component({
25 | changeDetection: ChangeDetectionStrategy.OnPush, // (#perfmatters)
26 | host: {
27 | class: 'notifier__container',
28 | },
29 | selector: 'notifier-container',
30 | templateUrl: './notifier-container.component.html',
31 | })
32 | export class NotifierContainerComponent implements OnDestroy {
33 | /**
34 | * List of currently somewhat active notifications
35 | */
36 | public notifications: Array;
37 |
38 | /**
39 | * Change detector
40 | */
41 | private readonly changeDetector: ChangeDetectorRef;
42 |
43 | /**
44 | * Notifier queue service
45 | */
46 | private readonly queueService: NotifierQueueService;
47 |
48 | /**
49 | * Notifier configuration
50 | */
51 | private readonly config: NotifierConfig;
52 |
53 | /**
54 | * Queue service observable subscription (saved for cleanup)
55 | */
56 | private queueServiceSubscription: Subscription;
57 |
58 | /**
59 | * Promise resolve function reference, temporarily used while the notification child component gets created
60 | */
61 | private tempPromiseResolver: () => void;
62 |
63 | /**
64 | * Constructor
65 | *
66 | * @param changeDetector Change detector, used for manually triggering change detection runs
67 | * @param notifierQueueService Notifier queue service
68 | * @param notifierService Notifier service
69 | */
70 | public constructor(changeDetector: ChangeDetectorRef, notifierQueueService: NotifierQueueService, notifierService: NotifierService) {
71 | this.changeDetector = changeDetector;
72 | this.queueService = notifierQueueService;
73 | this.config = notifierService.getConfig();
74 | this.notifications = [];
75 |
76 | // Connects this component up to the action queue, then handle incoming actions
77 | this.queueServiceSubscription = this.queueService.actionStream.subscribe((action: NotifierAction) => {
78 | this.handleAction(action).then(() => {
79 | this.queueService.continue();
80 | });
81 | });
82 | }
83 |
84 | /**
85 | * Component destroyment lifecycle hook, cleans up the observable subsciption
86 | */
87 | public ngOnDestroy(): void {
88 | if (this.queueServiceSubscription) {
89 | this.queueServiceSubscription.unsubscribe();
90 | }
91 | }
92 |
93 | /**
94 | * Notification identifier, used as the ngFor trackby function
95 | *
96 | * @param index Index
97 | * @param notification Notifier notification
98 | * @returns Notification ID as the unique identnfier
99 | */
100 | public identifyNotification(index: number, notification: NotifierNotification): string {
101 | return notification.id;
102 | }
103 |
104 | /**
105 | * Event handler, handles clicks on notification dismiss buttons
106 | *
107 | * @param notificationId ID of the notification to dismiss
108 | */
109 | public onNotificationDismiss(notificationId: string): void {
110 | this.queueService.push({
111 | payload: notificationId,
112 | type: 'HIDE',
113 | });
114 | }
115 |
116 | /**
117 | * Event handler, handles notification ready events
118 | *
119 | * @param notificationComponent Notification component reference
120 | */
121 | public onNotificationReady(notificationComponent: NotifierNotificationComponent): void {
122 | const currentNotification: NotifierNotification = this.notifications[this.notifications.length - 1]; // Get the latest notification
123 | currentNotification.component = notificationComponent; // Save the new omponent reference
124 | this.continueHandleShowAction(currentNotification); // Continue with handling the show action
125 | }
126 |
127 | /**
128 | * Handle incoming actions by mapping action types to methods, and then running them
129 | *
130 | * @param action Action object
131 | * @returns Promise, resolved when done
132 | */
133 | private handleAction(action: NotifierAction): Promise {
134 | switch (
135 | action.type // TODO: Maybe a map (actionType -> class method) is a cleaner solution here?
136 | ) {
137 | case 'SHOW':
138 | return this.handleShowAction(action);
139 | case 'HIDE':
140 | return this.handleHideAction(action);
141 | case 'HIDE_OLDEST':
142 | return this.handleHideOldestAction(action);
143 | case 'HIDE_NEWEST':
144 | return this.handleHideNewestAction(action);
145 | case 'HIDE_ALL':
146 | return this.handleHideAllAction();
147 | default:
148 | return new Promise((resolve: () => void) => {
149 | resolve(); // Ignore unknown action types
150 | });
151 | }
152 | }
153 |
154 | /**
155 | * Show a new notification
156 | *
157 | * We simply add the notification to the list, and then wait until its properly initialized / created / rendered.
158 | *
159 | * @param action Action object
160 | * @returns Promise, resolved when done
161 | */
162 | private handleShowAction(action: NotifierAction): Promise {
163 | return new Promise((resolve: () => void) => {
164 | this.tempPromiseResolver = resolve; // Save the promise resolve function so that it can be called later on by another method
165 | this.addNotificationToList(new NotifierNotification(action.payload));
166 | });
167 | }
168 |
169 | /**
170 | * Continue to show a new notification (after the notification components is initialized / created / rendered).
171 | *
172 | * If this is the first (and thus only) notification, we can simply show it. Otherwhise, if stacking is disabled (or a low value), we
173 | * switch out notifications, in particular we hide the existing one, and then show our new one. Yet, if stacking is enabled, we first
174 | * shift all older notifications, and then show our new notification. In addition, if there are too many notification on the screen,
175 | * we hide the oldest one first. Furthermore, if configured, animation overlapping is applied.
176 | *
177 | * @param notification New notification to show
178 | */
179 | private continueHandleShowAction(notification: NotifierNotification): void {
180 | // First (which means only one) notification in the list?
181 | const numberOfNotifications: number = this.notifications.length;
182 | if (numberOfNotifications === 1) {
183 | notification.component.show().then(this.tempPromiseResolver); // Done
184 | } else {
185 | const implicitStackingLimit = 2;
186 |
187 | // Stacking enabled? (stacking value below 2 means stacking is disabled)
188 | if (this.config.behaviour.stacking === false || this.config.behaviour.stacking < implicitStackingLimit) {
189 | this.notifications[0].component.hide().then(() => {
190 | this.removeNotificationFromList(this.notifications[0]);
191 | notification.component.show().then(this.tempPromiseResolver); // Done
192 | });
193 | } else {
194 | const stepPromises: Array> = [];
195 |
196 | // Are there now too many notifications?
197 | if (numberOfNotifications > this.config.behaviour.stacking) {
198 | const oldNotifications: Array = this.notifications.slice(1, numberOfNotifications - 1);
199 |
200 | // Are animations enabled?
201 | if (this.config.animations.enabled) {
202 | // Is animation overlap enabled?
203 | if (this.config.animations.overlap !== false && this.config.animations.overlap > 0) {
204 | stepPromises.push(this.notifications[0].component.hide());
205 | setTimeout(() => {
206 | stepPromises.push(this.shiftNotifications(oldNotifications, notification.component.getHeight(), true));
207 | }, this.config.animations.hide.speed - this.config.animations.overlap);
208 | setTimeout(() => {
209 | stepPromises.push(notification.component.show());
210 | }, this.config.animations.hide.speed + this.config.animations.shift.speed - this.config.animations.overlap);
211 | } else {
212 | stepPromises.push(
213 | new Promise((resolve: () => void) => {
214 | this.notifications[0].component.hide().then(() => {
215 | this.shiftNotifications(oldNotifications, notification.component.getHeight(), true).then(() => {
216 | notification.component.show().then(resolve);
217 | });
218 | });
219 | }),
220 | );
221 | }
222 | } else {
223 | stepPromises.push(this.notifications[0].component.hide());
224 | stepPromises.push(this.shiftNotifications(oldNotifications, notification.component.getHeight(), true));
225 | stepPromises.push(notification.component.show());
226 | }
227 | } else {
228 | const oldNotifications: Array = this.notifications.slice(0, numberOfNotifications - 1);
229 |
230 | // Are animations enabled?
231 | if (this.config.animations.enabled) {
232 | // Is animation overlap enabled?
233 | if (this.config.animations.overlap !== false && this.config.animations.overlap > 0) {
234 | stepPromises.push(this.shiftNotifications(oldNotifications, notification.component.getHeight(), true));
235 | setTimeout(() => {
236 | stepPromises.push(notification.component.show());
237 | }, this.config.animations.shift.speed - this.config.animations.overlap);
238 | } else {
239 | stepPromises.push(
240 | new Promise((resolve: () => void) => {
241 | this.shiftNotifications(oldNotifications, notification.component.getHeight(), true).then(() => {
242 | notification.component.show().then(resolve);
243 | });
244 | }),
245 | );
246 | }
247 | } else {
248 | stepPromises.push(this.shiftNotifications(oldNotifications, notification.component.getHeight(), true));
249 | stepPromises.push(notification.component.show());
250 | }
251 | }
252 |
253 | Promise.all(stepPromises).then(() => {
254 | if (numberOfNotifications > this.config.behaviour.stacking) {
255 | this.removeNotificationFromList(this.notifications[0]);
256 | }
257 | this.tempPromiseResolver();
258 | }); // Done
259 | }
260 | }
261 | }
262 |
263 | /**
264 | * Hide an existing notification
265 | *
266 | * Fist, we skip everything if there are no notifications at all, or the given notification does not exist. Then, we hide the given
267 | * notification. If there exist older notifications, we then shift them around to fill the gap. Once both hiding the given notification
268 | * and shifting the older notificaitons is done, the given notification gets finally removed (from the DOM).
269 | *
270 | * @param action Action object, payload contains the notification ID
271 | * @returns Promise, resolved when done
272 | */
273 | private handleHideAction(action: NotifierAction): Promise {
274 | return new Promise((resolve: () => void) => {
275 | const stepPromises: Array> = [];
276 |
277 | // Does the notification exist / are there even any notifications? (let's prevent accidential errors)
278 | const notification: NotifierNotification | undefined = this.findNotificationById(action.payload);
279 | if (notification === undefined) {
280 | resolve();
281 | return;
282 | }
283 |
284 | // Get older notifications
285 | const notificationIndex: number | undefined = this.findNotificationIndexById(action.payload);
286 | if (notificationIndex === undefined) {
287 | resolve();
288 | return;
289 | }
290 | const oldNotifications: Array = this.notifications.slice(0, notificationIndex);
291 |
292 | // Do older notifications exist, and thus do we need to shift other notifications as a consequence?
293 | if (oldNotifications.length > 0) {
294 | // Are animations enabled?
295 | if (this.config.animations.enabled && this.config.animations.hide.speed > 0) {
296 | // Is animation overlap enabled?
297 | if (this.config.animations.overlap !== false && this.config.animations.overlap > 0) {
298 | stepPromises.push(notification.component.hide());
299 | setTimeout(() => {
300 | stepPromises.push(this.shiftNotifications(oldNotifications, notification.component.getHeight(), false));
301 | }, this.config.animations.hide.speed - this.config.animations.overlap);
302 | } else {
303 | notification.component.hide().then(() => {
304 | stepPromises.push(this.shiftNotifications(oldNotifications, notification.component.getHeight(), false));
305 | });
306 | }
307 | } else {
308 | stepPromises.push(notification.component.hide());
309 | stepPromises.push(this.shiftNotifications(oldNotifications, notification.component.getHeight(), false));
310 | }
311 | } else {
312 | stepPromises.push(notification.component.hide());
313 | }
314 |
315 | // Wait until both hiding and shifting is done, then remove the notification from the list
316 | Promise.all(stepPromises).then(() => {
317 | this.removeNotificationFromList(notification);
318 | resolve(); // Done
319 | });
320 | });
321 | }
322 |
323 | /**
324 | * Hide the oldest notification (bridge to handleHideAction)
325 | *
326 | * @param action Action object
327 | * @returns Promise, resolved when done
328 | */
329 | private handleHideOldestAction(action: NotifierAction): Promise {
330 | // Are there any notifications? (prevent accidential errors)
331 | if (this.notifications.length === 0) {
332 | return new Promise((resolve: () => void) => {
333 | resolve();
334 | }); // Done
335 | } else {
336 | action.payload = this.notifications[0].id;
337 | return this.handleHideAction(action);
338 | }
339 | }
340 |
341 | /**
342 | * Hide the newest notification (bridge to handleHideAction)
343 | *
344 | * @param action Action object
345 | * @returns Promise, resolved when done
346 | */
347 | private handleHideNewestAction(action: NotifierAction): Promise {
348 | // Are there any notifications? (prevent accidential errors)
349 | if (this.notifications.length === 0) {
350 | return new Promise((resolve: () => void) => {
351 | resolve();
352 | }); // Done
353 | } else {
354 | action.payload = this.notifications[this.notifications.length - 1].id;
355 | return this.handleHideAction(action);
356 | }
357 | }
358 |
359 | /**
360 | * Hide all notifications at once
361 | *
362 | * @returns Promise, resolved when done
363 | */
364 | private handleHideAllAction(): Promise {
365 | return new Promise((resolve: () => void) => {
366 | // Are there any notifications? (prevent accidential errors)
367 | const numberOfNotifications: number = this.notifications.length;
368 | if (numberOfNotifications === 0) {
369 | resolve(); // Done
370 | return;
371 | }
372 |
373 | // Are animations enabled?
374 | if (
375 | this.config.animations.enabled &&
376 | this.config.animations.hide.speed > 0 &&
377 | this.config.animations.hide.offset !== false &&
378 | this.config.animations.hide.offset > 0
379 | ) {
380 | for (let i: number = numberOfNotifications - 1; i >= 0; i--) {
381 | const animationOffset: number = this.config.position.vertical.position === 'top' ? numberOfNotifications - 1 : i;
382 | setTimeout(() => {
383 | this.notifications[i].component.hide().then(() => {
384 | // Are we done here, was this the last notification to be hidden?
385 | if (
386 | (this.config.position.vertical.position === 'top' && i === 0) ||
387 | (this.config.position.vertical.position === 'bottom' && i === numberOfNotifications - 1)
388 | ) {
389 | this.removeAllNotificationsFromList();
390 | resolve(); // Done
391 | }
392 | });
393 | }, this.config.animations.hide.offset * animationOffset);
394 | }
395 | } else {
396 | const stepPromises: Array> = [];
397 | for (let i: number = numberOfNotifications - 1; i >= 0; i--) {
398 | stepPromises.push(this.notifications[i].component.hide());
399 | }
400 | Promise.all(stepPromises).then(() => {
401 | this.removeAllNotificationsFromList();
402 | resolve(); // Done
403 | });
404 | }
405 | });
406 | }
407 |
408 | /**
409 | * Shift multiple notifications at once
410 | *
411 | * @param notifications List containing the notifications to be shifted
412 | * @param distance Distance to shift (in px)
413 | * @param toMakePlace Flag, defining in which direciton to shift
414 | * @returns Promise, resolved when done
415 | */
416 | private shiftNotifications(notifications: Array, distance: number, toMakePlace: boolean): Promise {
417 | return new Promise((resolve: () => void) => {
418 | // Are there any notifications to shift?
419 | if (notifications.length === 0) {
420 | resolve();
421 | return;
422 | }
423 |
424 | const notificationPromises: Array> = [];
425 | for (let i: number = notifications.length - 1; i >= 0; i--) {
426 | notificationPromises.push(notifications[i].component.shift(distance, toMakePlace));
427 | }
428 | Promise.all(notificationPromises).then(resolve); // Done
429 | });
430 | }
431 |
432 | /**
433 | * Add a new notification to the list of notifications (triggers change detection)
434 | *
435 | * @param notification Notification to add to the list of notifications
436 | */
437 | private addNotificationToList(notification: NotifierNotification): void {
438 | this.notifications.push(notification);
439 | this.changeDetector.markForCheck(); // Run change detection because the notification list changed
440 | }
441 |
442 | /**
443 | * Remove an existing notification from the list of notifications (triggers change detection)
444 | *
445 | * @param notification Notification to be removed from the list of notifications
446 | */
447 | private removeNotificationFromList(notification: NotifierNotification): void {
448 | this.notifications = this.notifications.filter((item: NotifierNotification) => item.component !== notification.component);
449 | this.changeDetector.markForCheck(); // Run change detection because the notification list changed
450 | }
451 |
452 | /**
453 | * Remove all notifications from the list (triggers change detection)
454 | */
455 | private removeAllNotificationsFromList(): void {
456 | this.notifications = [];
457 | this.changeDetector.markForCheck(); // Run change detection because the notification list changed
458 | }
459 |
460 | /**
461 | * Helper: Find a notification in the notification list by a given notification ID
462 | *
463 | * @param notificationId Notification ID, used for finding notification
464 | * @returns Notification, undefined if not found
465 | */
466 | private findNotificationById(notificationId: string): NotifierNotification | undefined {
467 | return this.notifications.find((currentNotification: NotifierNotification) => currentNotification.id === notificationId);
468 | }
469 |
470 | /**
471 | * Helper: Find a notification's index by a given notification ID
472 | *
473 | * @param notificationId Notification ID, used for finding a notification's index
474 | * @returns Notification index, undefined if not found
475 | */
476 | private findNotificationIndexById(notificationId: string): number | undefined {
477 | const notificationIndex: number = this.notifications.findIndex(
478 | (currentNotification: NotifierNotification) => currentNotification.id === notificationId,
479 | );
480 | return notificationIndex !== -1 ? notificationIndex : undefined;
481 | }
482 | }
483 |
--------------------------------------------------------------------------------
/projects/angular-notifier/src/lib/components/notifier-notification.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { Component, DebugElement, Injectable, NO_ERRORS_SCHEMA, TemplateRef, ViewChild } from '@angular/core';
2 | import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
3 | import { By } from '@angular/platform-browser';
4 |
5 | import { NotifierAnimationData } from '../models/notifier-animation.model';
6 | import { NotifierConfig } from '../models/notifier-config.model';
7 | import { NotifierNotification } from '../models/notifier-notification.model';
8 | import { NotifierConfigToken } from '../notifier.tokens';
9 | import { NotifierService } from '../services/notifier.service';
10 | import { NotifierAnimationService } from '../services/notifier-animation.service';
11 | import { NotifierTimerService } from '../services/notifier-timer.service';
12 | import { NotifierNotificationComponent } from './notifier-notification.component';
13 |
14 | /**
15 | * Notifier Notification Component - Unit Test
16 | */
17 | describe('Notifier Notification Component', () => {
18 | const fakeAnimation: any = {
19 | onfinish: () => null, // We only need this property to be actually mocked away
20 | };
21 |
22 | const testNotification: NotifierNotification = new NotifierNotification({
23 | id: 'ID_FAKE',
24 | message: 'Lorem ipsum dolor sit amet.',
25 | type: 'SUCCESS',
26 | });
27 |
28 | let componentFixture: ComponentFixture;
29 | let componentInstance: NotifierNotificationComponent;
30 |
31 | let timerService: MockNotifierTimerService;
32 |
33 | it('should instantiate', () => {
34 | // Setup test module
35 | beforeEachWithConfig(new NotifierConfig());
36 |
37 | expect(componentInstance).toBeDefined();
38 | });
39 |
40 | describe('(render)', () => {
41 | it('should render', () => {
42 | // Setup test module
43 | beforeEachWithConfig(new NotifierConfig());
44 |
45 | componentInstance.notification = testNotification;
46 | componentFixture.detectChanges();
47 |
48 | // Check the calculated values
49 | expect(componentInstance.getConfig()).toEqual(new NotifierConfig());
50 | expect(componentInstance.getHeight()).toBe(componentFixture.nativeElement.offsetHeight);
51 | expect(componentInstance.getWidth()).toBe(componentFixture.nativeElement.offsetWidth);
52 | expect(componentInstance.getShift()).toBe(0);
53 |
54 | // Check the template
55 | const messageElement: DebugElement = componentFixture.debugElement.query(By.css('.notifier__notification-message'));
56 | expect(messageElement.nativeElement.textContent).toContain(componentInstance.notification.message);
57 | const dismissButtonElement: DebugElement = componentFixture.debugElement.query(By.css('.notifier__notification-button'));
58 | expect(dismissButtonElement).not.toBeNull();
59 |
60 | // Check the class names
61 | const classNameType = `notifier__notification--${componentInstance.notification.type}`;
62 | expect(componentFixture.nativeElement.classList.contains(classNameType)).toBeTruthy();
63 | const classNameTheme = `notifier__notification--${componentInstance.getConfig().theme}`;
64 | expect(componentFixture.nativeElement.classList.contains(classNameTheme)).toBeTruthy();
65 | });
66 |
67 | it('should render the custom template if provided by the user', async(() => {
68 | // Setup test module
69 | const testNotifierConfig: NotifierConfig = new NotifierConfig({
70 | position: {
71 | horizontal: {
72 | distance: 10,
73 | position: 'left',
74 | },
75 | vertical: {
76 | distance: 10,
77 | gap: 4,
78 | position: 'top',
79 | },
80 | },
81 | });
82 | beforeEachWithConfig(testNotifierConfig, false);
83 |
84 | const template = `{{notificationData.message}}
`;
85 |
86 | const testcmp = createTestComponent(template);
87 |
88 | // associate the templateref
89 | const myTestNotification = {
90 | ...testNotification,
91 | template: testcmp.componentInstance.currentTplRef,
92 | };
93 | expect(testcmp.componentInstance.currentTplRef).toBeDefined();
94 |
95 | componentFixture = TestBed.createComponent(NotifierNotificationComponent);
96 | componentInstance = componentFixture.componentInstance;
97 |
98 | componentInstance.notification = myTestNotification;
99 | componentFixture.detectChanges();
100 |
101 | // // assert
102 | expect(componentFixture.debugElement.query(By.css('div.custom-notification-body'))).not.toBeNull();
103 | expect(componentFixture.debugElement.query(By.css('div.custom-notification-body')).nativeElement.innerHTML).toBe(
104 | myTestNotification.message,
105 | );
106 | }));
107 |
108 | it('should render on the left', () => {
109 | // Setup test module
110 | const testNotifierConfig: NotifierConfig = new NotifierConfig({
111 | position: {
112 | horizontal: {
113 | distance: 10,
114 | position: 'left',
115 | },
116 | vertical: {
117 | distance: 10,
118 | gap: 4,
119 | position: 'top',
120 | },
121 | },
122 | });
123 | beforeEachWithConfig(testNotifierConfig);
124 |
125 | componentInstance.notification = testNotification;
126 | componentFixture.detectChanges();
127 |
128 | // Check position
129 | expect(componentFixture.debugElement.styles['left']).toBe(`${testNotifierConfig.position.horizontal.distance}px`);
130 | });
131 |
132 | it('should render on the right', () => {
133 | // Setup test module
134 | const testNotifierConfig: NotifierConfig = new NotifierConfig({
135 | position: {
136 | horizontal: {
137 | distance: 10,
138 | position: 'right',
139 | },
140 | vertical: {
141 | distance: 10,
142 | gap: 4,
143 | position: 'top',
144 | },
145 | },
146 | });
147 | beforeEachWithConfig(testNotifierConfig);
148 |
149 | componentInstance.notification = testNotification;
150 | componentFixture.detectChanges();
151 |
152 | // Check position
153 | expect(componentFixture.debugElement.styles['right']).toBe(`${testNotifierConfig.position.horizontal.distance}px`);
154 | });
155 |
156 | it('should render in the middle', () => {
157 | // Setup test module
158 | const testNotifierConfig: NotifierConfig = new NotifierConfig({
159 | position: {
160 | horizontal: {
161 | distance: 10,
162 | position: 'middle',
163 | },
164 | vertical: {
165 | distance: 10,
166 | gap: 4,
167 | position: 'top',
168 | },
169 | },
170 | });
171 | beforeEachWithConfig(testNotifierConfig);
172 |
173 | componentInstance.notification = testNotification;
174 | componentFixture.detectChanges();
175 |
176 | // Check position
177 | expect(componentFixture.debugElement.styles['left']).toBe('50%');
178 | expect(componentFixture.debugElement.styles['transform']).toBe('translate3d( -50%, 0, 0 )');
179 | });
180 |
181 | it('should render on the top', () => {
182 | // Setup test module
183 | const testNotifierConfig: NotifierConfig = new NotifierConfig({
184 | position: {
185 | horizontal: {
186 | distance: 10,
187 | position: 'left',
188 | },
189 | vertical: {
190 | distance: 10,
191 | gap: 4,
192 | position: 'top',
193 | },
194 | },
195 | });
196 | beforeEachWithConfig(testNotifierConfig);
197 |
198 | componentInstance.notification = testNotification;
199 | componentFixture.detectChanges();
200 |
201 | // Check position
202 | expect(componentFixture.debugElement.styles['top']).toBe(`${testNotifierConfig.position.vertical.distance}px`);
203 | });
204 |
205 | it('should render on the bottom', () => {
206 | // Setup test module
207 | const testNotifierConfig: NotifierConfig = new NotifierConfig({
208 | position: {
209 | horizontal: {
210 | distance: 10,
211 | position: 'left',
212 | },
213 | vertical: {
214 | distance: 10,
215 | gap: 4,
216 | position: 'bottom',
217 | },
218 | },
219 | });
220 | beforeEachWithConfig(testNotifierConfig);
221 |
222 | componentInstance.notification = testNotification;
223 | componentFixture.detectChanges();
224 |
225 | // Check position
226 | expect(componentFixture.debugElement.styles['bottom']).toBe(`${testNotifierConfig.position.vertical.distance}px`);
227 | });
228 | });
229 |
230 | describe('(show)', () => {
231 | it('should show', fakeAsync(() => {
232 | // Setup test module
233 | beforeEachWithConfig(
234 | new NotifierConfig({
235 | animations: {
236 | enabled: false,
237 | },
238 | behaviour: {
239 | autoHide: false,
240 | },
241 | }),
242 | );
243 |
244 | componentInstance.notification = testNotification;
245 | componentFixture.detectChanges();
246 |
247 | const showCallback = jest.fn();
248 | componentInstance.show().then(showCallback);
249 | tick();
250 |
251 | expect(componentFixture.debugElement.styles['visibility']).toBe('visible');
252 | expect(showCallback).toHaveBeenCalled();
253 | }));
254 |
255 | it('should show (with animations)', fakeAsync(() => {
256 | // Setup test module
257 | beforeEachWithConfig(
258 | new NotifierConfig({
259 | behaviour: {
260 | autoHide: false,
261 | },
262 | }),
263 | );
264 |
265 | componentInstance.notification = testNotification;
266 | componentFixture.detectChanges();
267 |
268 | // Mock away the Web Animations API
269 | jest.spyOn(componentFixture.nativeElement, 'animate').mockImplementation(() => {
270 | componentFixture.debugElement.styles['opacity'] = '1'; // Fake animation result
271 | return fakeAnimation;
272 | });
273 |
274 | const showCallback = jest.fn();
275 | componentInstance.show().then(showCallback);
276 | fakeAnimation.onfinish();
277 | tick();
278 |
279 | expect(componentFixture.debugElement.styles['visibility']).toBe('visible');
280 | expect(componentFixture.debugElement.styles['opacity']).toBe('1');
281 | expect(showCallback).toHaveBeenCalled();
282 | }));
283 | });
284 |
285 | describe('(hide)', () => {
286 | it('should hide', fakeAsync(() => {
287 | // Setup test module
288 | beforeEachWithConfig(
289 | new NotifierConfig({
290 | animations: {
291 | enabled: false,
292 | },
293 | behaviour: {
294 | autoHide: false,
295 | },
296 | }),
297 | );
298 |
299 | componentInstance.notification = testNotification;
300 | componentFixture.detectChanges();
301 |
302 | const hideCallback = jest.fn();
303 | componentInstance.hide().then(hideCallback);
304 | tick();
305 |
306 | expect(hideCallback).toHaveBeenCalled();
307 | }));
308 |
309 | it('should hide (with animations)', fakeAsync(() => {
310 | // Setup test module
311 | beforeEachWithConfig(
312 | new NotifierConfig({
313 | behaviour: {
314 | autoHide: false,
315 | },
316 | }),
317 | );
318 |
319 | componentInstance.notification = testNotification;
320 | componentFixture.detectChanges();
321 |
322 | // Mock away the Web Animations API
323 | jest.spyOn(componentFixture.nativeElement, 'animate').mockImplementation(() => {
324 | componentFixture.debugElement.styles['opacity'] = '0'; // Fake animation result
325 | return fakeAnimation;
326 | });
327 |
328 | const hideCallback = jest.fn();
329 | componentInstance.hide().then(hideCallback);
330 | fakeAnimation.onfinish();
331 | tick();
332 |
333 | expect(componentFixture.debugElement.styles['opacity']).toBe('0');
334 | expect(hideCallback).toHaveBeenCalled();
335 | }));
336 | });
337 |
338 | describe('(shift)', () => {
339 | it('should shift to make place on top', fakeAsync(() => {
340 | // Setup test module
341 | const testNotifierConfig: NotifierConfig = new NotifierConfig({
342 | animations: {
343 | enabled: false,
344 | },
345 | behaviour: {
346 | autoHide: false,
347 | },
348 | position: {
349 | horizontal: {
350 | distance: 12,
351 | position: 'left',
352 | },
353 | vertical: {
354 | distance: 12,
355 | gap: 10,
356 | position: 'top',
357 | },
358 | },
359 | });
360 | beforeEachWithConfig(testNotifierConfig);
361 |
362 | componentInstance.notification = testNotification;
363 | componentFixture.detectChanges();
364 |
365 | const shiftCallback = jest.fn();
366 | const shiftDistance = 100;
367 | componentInstance.shift(shiftDistance, true).then(shiftCallback);
368 | tick();
369 |
370 | expect(componentFixture.debugElement.styles['transform']).toBe(
371 | `translate3d( 0, ${shiftDistance + testNotifierConfig.position.vertical.gap}px, 0 )`,
372 | );
373 | expect(shiftCallback).toHaveBeenCalled();
374 | }));
375 |
376 | it('should shift to make place on top (with animations)', fakeAsync(() => {
377 | // Setup test module
378 | const testNotifierConfig: NotifierConfig = new NotifierConfig({
379 | behaviour: {
380 | autoHide: false,
381 | },
382 | position: {
383 | horizontal: {
384 | distance: 12,
385 | position: 'left',
386 | },
387 | vertical: {
388 | distance: 12,
389 | gap: 10,
390 | position: 'top',
391 | },
392 | },
393 | });
394 | beforeEachWithConfig(testNotifierConfig);
395 |
396 | componentInstance.notification = testNotification;
397 | componentFixture.detectChanges();
398 |
399 | const shiftDistance = 100;
400 |
401 | // Mock away the Web Animations API
402 | jest.spyOn(componentFixture.nativeElement, 'animate').mockImplementation(() => {
403 | componentFixture.debugElement.styles['transform'] = `translate3d( 0, ${
404 | shiftDistance + testNotifierConfig.position.vertical.gap
405 | }px, 0 )`; // Fake animation result
406 | return fakeAnimation;
407 | });
408 |
409 | const shiftCallback = jest.fn();
410 | componentInstance.shift(shiftDistance, true).then(shiftCallback);
411 | fakeAnimation.onfinish();
412 | tick();
413 |
414 | expect(componentFixture.debugElement.styles['transform']).toBe(
415 | `translate3d( 0, ${shiftDistance + testNotifierConfig.position.vertical.gap}px, 0 )`,
416 | );
417 | expect(shiftCallback).toHaveBeenCalled();
418 | }));
419 |
420 | it('should shift to make place on bottom', fakeAsync(() => {
421 | // Setup test module
422 | const testNotifierConfig: NotifierConfig = new NotifierConfig({
423 | animations: {
424 | enabled: false,
425 | },
426 | behaviour: {
427 | autoHide: false,
428 | },
429 | position: {
430 | horizontal: {
431 | distance: 12,
432 | position: 'left',
433 | },
434 | vertical: {
435 | distance: 12,
436 | gap: 10,
437 | position: 'bottom',
438 | },
439 | },
440 | });
441 | beforeEachWithConfig(testNotifierConfig);
442 |
443 | componentInstance.notification = testNotification;
444 | componentFixture.detectChanges();
445 |
446 | const shiftCallback = jest.fn();
447 | const shiftDistance = 100;
448 | componentInstance.shift(shiftDistance, true).then(shiftCallback);
449 | tick();
450 |
451 | expect(componentFixture.debugElement.styles['transform']).toBe(
452 | `translate3d( 0, ${-shiftDistance - testNotifierConfig.position.vertical.gap}px, 0 )`,
453 | );
454 | expect(shiftCallback).toHaveBeenCalled();
455 | }));
456 |
457 | it('should shift to make place on bottom (with animations)', fakeAsync(() => {
458 | // Setup test module
459 | const testNotifierConfig: NotifierConfig = new NotifierConfig({
460 | behaviour: {
461 | autoHide: false,
462 | },
463 | position: {
464 | horizontal: {
465 | distance: 12,
466 | position: 'left',
467 | },
468 | vertical: {
469 | distance: 12,
470 | gap: 10,
471 | position: 'bottom',
472 | },
473 | },
474 | });
475 | beforeEachWithConfig(testNotifierConfig);
476 |
477 | componentInstance.notification = testNotification;
478 | componentFixture.detectChanges();
479 |
480 | // Mock away the Web Animations API
481 | const shiftDistance = 100;
482 | jest.spyOn(componentFixture.nativeElement, 'animate').mockImplementation(() => {
483 | componentFixture.debugElement.styles['transform'] = `translate3d( 0, ${
484 | -shiftDistance - testNotifierConfig.position.vertical.gap
485 | }px, 0 )`; // Fake animation result
486 | return fakeAnimation;
487 | });
488 |
489 | const shiftCallback = jest.fn();
490 | componentInstance.shift(shiftDistance, true).then(shiftCallback);
491 | fakeAnimation.onfinish();
492 | tick();
493 |
494 | expect(componentFixture.debugElement.styles['transform']).toBe(
495 | `translate3d( 0, ${-shiftDistance - testNotifierConfig.position.vertical.gap}px, 0 )`,
496 | );
497 | expect(shiftCallback).toHaveBeenCalled();
498 | }));
499 |
500 | it('should shift to fill place on top', fakeAsync(() => {
501 | // Setup test module
502 | const testNotifierConfig: NotifierConfig = new NotifierConfig({
503 | animations: {
504 | enabled: false,
505 | },
506 | behaviour: {
507 | autoHide: false,
508 | },
509 | position: {
510 | horizontal: {
511 | distance: 12,
512 | position: 'left',
513 | },
514 | vertical: {
515 | distance: 12,
516 | gap: 10,
517 | position: 'top',
518 | },
519 | },
520 | });
521 | beforeEachWithConfig(testNotifierConfig);
522 |
523 | componentInstance.notification = testNotification;
524 | componentFixture.detectChanges();
525 |
526 | const shiftCallback = jest.fn();
527 | const shiftDistance = 100;
528 | componentInstance.shift(shiftDistance, false).then(shiftCallback);
529 | tick();
530 |
531 | expect(componentFixture.debugElement.styles['transform']).toBe(
532 | `translate3d( 0, ${-shiftDistance - testNotifierConfig.position.vertical.gap}px, 0 )`,
533 | );
534 | expect(shiftCallback).toHaveBeenCalled();
535 | }));
536 |
537 | it('should shift to fill place on top (with animations)', fakeAsync(() => {
538 | // Setup test module
539 | const testNotifierConfig: NotifierConfig = new NotifierConfig({
540 | behaviour: {
541 | autoHide: false,
542 | },
543 | position: {
544 | horizontal: {
545 | distance: 12,
546 | position: 'left',
547 | },
548 | vertical: {
549 | distance: 12,
550 | gap: 10,
551 | position: 'top',
552 | },
553 | },
554 | });
555 | beforeEachWithConfig(testNotifierConfig);
556 |
557 | componentInstance.notification = testNotification;
558 | componentFixture.detectChanges();
559 |
560 | // Mock away the Web Animations API
561 | const shiftDistance = 100;
562 | jest.spyOn(componentFixture.nativeElement, 'animate').mockImplementation(() => {
563 | componentFixture.debugElement.styles['transform'] = `translate3d( 0, ${
564 | -shiftDistance - testNotifierConfig.position.vertical.gap
565 | }px, 0 )`; // Fake animation result
566 | return fakeAnimation;
567 | });
568 |
569 | const shiftCallback = jest.fn();
570 | componentInstance.shift(shiftDistance, false).then(shiftCallback);
571 | fakeAnimation.onfinish();
572 | tick();
573 |
574 | expect(componentFixture.debugElement.styles['transform']).toBe(
575 | `translate3d( 0, ${0 - shiftDistance - testNotifierConfig.position.vertical.gap}px, 0 )`,
576 | );
577 | expect(shiftCallback).toHaveBeenCalled();
578 | }));
579 |
580 | it('should shift to fill place on bottom', fakeAsync(() => {
581 | // Setup test module
582 | const testNotifierConfig: NotifierConfig = new NotifierConfig({
583 | animations: {
584 | enabled: false,
585 | },
586 | behaviour: {
587 | autoHide: false,
588 | },
589 | position: {
590 | horizontal: {
591 | distance: 12,
592 | position: 'left',
593 | },
594 | vertical: {
595 | distance: 12,
596 | gap: 10,
597 | position: 'bottom',
598 | },
599 | },
600 | });
601 | beforeEachWithConfig(testNotifierConfig);
602 |
603 | componentInstance.notification = testNotification;
604 | componentFixture.detectChanges();
605 |
606 | const shiftCallback = jest.fn();
607 | const shiftDistance = 100;
608 | componentInstance.shift(shiftDistance, false).then(shiftCallback);
609 | tick();
610 |
611 | expect(componentFixture.debugElement.styles['transform']).toBe(
612 | `translate3d( 0, ${shiftDistance + testNotifierConfig.position.vertical.gap}px, 0 )`,
613 | );
614 | expect(shiftCallback).toHaveBeenCalled();
615 | }));
616 |
617 | it('should shift to fill place on bottom (with animations)', fakeAsync(() => {
618 | // Setup test module
619 | const testNotifierConfig: NotifierConfig = new NotifierConfig({
620 | behaviour: {
621 | autoHide: false,
622 | },
623 | position: {
624 | horizontal: {
625 | distance: 12,
626 | position: 'left',
627 | },
628 | vertical: {
629 | distance: 12,
630 | gap: 10,
631 | position: 'bottom',
632 | },
633 | },
634 | });
635 | beforeEachWithConfig(testNotifierConfig);
636 |
637 | componentInstance.notification = testNotification;
638 | componentFixture.detectChanges();
639 |
640 | // Mock away the Web Animations API
641 | const shiftDistance = 100;
642 | jest.spyOn(componentFixture.nativeElement, 'animate').mockImplementation(() => {
643 | componentFixture.debugElement.styles['transform'] = `translate3d( 0, ${
644 | shiftDistance + testNotifierConfig.position.vertical.gap
645 | }px, 0 )`; // Fake animation result
646 | return fakeAnimation;
647 | });
648 |
649 | const shiftCallback = jest.fn();
650 | componentInstance.shift(shiftDistance, false).then(shiftCallback);
651 | fakeAnimation.onfinish();
652 | tick();
653 |
654 | expect(componentFixture.debugElement.styles['transform']).toBe(
655 | `translate3d( 0, ${shiftDistance + testNotifierConfig.position.vertical.gap}px, 0 )`,
656 | );
657 | expect(shiftCallback).toHaveBeenCalled();
658 | }));
659 |
660 | it('should shift to make place in the middle', fakeAsync(() => {
661 | // Setup test module
662 | const testNotifierConfig: NotifierConfig = new NotifierConfig({
663 | animations: {
664 | enabled: false,
665 | },
666 | behaviour: {
667 | autoHide: false,
668 | },
669 | position: {
670 | horizontal: {
671 | distance: 12,
672 | position: 'middle',
673 | },
674 | vertical: {
675 | distance: 12,
676 | gap: 10,
677 | position: 'top',
678 | },
679 | },
680 | });
681 | beforeEachWithConfig(testNotifierConfig);
682 |
683 | componentInstance.notification = testNotification;
684 | componentFixture.detectChanges();
685 |
686 | const shiftCallback = jest.fn();
687 | const shiftDistance = 100;
688 | componentInstance.shift(shiftDistance, true).then(shiftCallback);
689 | tick();
690 |
691 | expect(componentFixture.debugElement.styles['transform']).toBe(
692 | `translate3d( -50%, ${shiftDistance + testNotifierConfig.position.vertical.gap}px, 0 )`,
693 | );
694 | expect(shiftCallback).toHaveBeenCalled();
695 | }));
696 |
697 | it('should shift to make place in the middle (with animations)', fakeAsync(() => {
698 | // Setup test module
699 | const testNotifierConfig: NotifierConfig = new NotifierConfig({
700 | animations: {
701 | enabled: false,
702 | },
703 | behaviour: {
704 | autoHide: false,
705 | },
706 | position: {
707 | horizontal: {
708 | distance: 12,
709 | position: 'middle',
710 | },
711 | vertical: {
712 | distance: 12,
713 | gap: 10,
714 | position: 'top',
715 | },
716 | },
717 | });
718 | beforeEachWithConfig(testNotifierConfig);
719 |
720 | componentInstance.notification = testNotification;
721 | componentFixture.detectChanges();
722 |
723 | // Mock away the Web Animations API
724 | const shiftDistance = 100;
725 | jest.spyOn(componentFixture.nativeElement, 'animate').mockImplementation(() => {
726 | componentFixture.debugElement.styles['transform'] = `translate3d( -50%, ${
727 | shiftDistance + testNotifierConfig.position.vertical.gap
728 | }px, 0 )`; // Fake animation result
729 | return fakeAnimation;
730 | });
731 |
732 | const shiftCallback = jest.fn();
733 | componentInstance.shift(shiftDistance, true).then(shiftCallback);
734 | fakeAnimation.onfinish();
735 | tick();
736 |
737 | expect(componentFixture.debugElement.styles['transform']).toBe(
738 | `translate3d( -50%, ${shiftDistance + testNotifierConfig.position.vertical.gap}px, 0 )`,
739 | );
740 | expect(shiftCallback).toHaveBeenCalled();
741 | }));
742 | });
743 |
744 | describe('(behaviour)', () => {
745 | it('should hide automatically after timeout', fakeAsync(() => {
746 | // Setup test module
747 | beforeEachWithConfig(
748 | new NotifierConfig({
749 | animations: {
750 | enabled: false,
751 | },
752 | behaviour: {
753 | autoHide: 5000,
754 | },
755 | }),
756 | );
757 |
758 | componentInstance.notification = testNotification;
759 | componentFixture.detectChanges();
760 |
761 | componentInstance.show();
762 | jest.spyOn(componentInstance, 'onClickDismiss');
763 | tick();
764 |
765 | timerService.finishManually();
766 | tick();
767 |
768 | expect(componentInstance.onClickDismiss).toHaveBeenCalled();
769 | }));
770 |
771 | it('should hide after clicking the dismiss button', fakeAsync(() => {
772 | // Setup test module
773 | beforeEachWithConfig(
774 | new NotifierConfig({
775 | animations: {
776 | enabled: false,
777 | },
778 | behaviour: {
779 | autoHide: false,
780 | showDismissButton: true,
781 | },
782 | }),
783 | );
784 |
785 | componentInstance.notification = testNotification;
786 | componentFixture.detectChanges();
787 |
788 | componentInstance.show();
789 | jest.spyOn(componentInstance, 'onClickDismiss');
790 |
791 | const dismissButtonElement: DebugElement = componentFixture.debugElement.query(By.css('.notifier__notification-button'));
792 | dismissButtonElement.nativeElement.click(); // Emulate click event
793 | componentFixture.detectChanges();
794 |
795 | expect(componentInstance.onClickDismiss).toHaveBeenCalled();
796 | }));
797 |
798 | it('should hide after clicking on the notification', fakeAsync(() => {
799 | // Setup test module
800 | beforeEachWithConfig(
801 | new NotifierConfig({
802 | animations: {
803 | enabled: false,
804 | },
805 | behaviour: {
806 | autoHide: false,
807 | onClick: 'hide',
808 | },
809 | }),
810 | );
811 |
812 | componentInstance.notification = testNotification;
813 | componentFixture.detectChanges();
814 |
815 | componentInstance.show();
816 | jest.spyOn(componentInstance, 'onClickDismiss');
817 |
818 | componentFixture.nativeElement.click(); // Emulate click event
819 | componentFixture.detectChanges();
820 |
821 | expect(componentInstance.onClickDismiss).toHaveBeenCalled();
822 | }));
823 |
824 | it('should not hide after clicking on the notification', fakeAsync(() => {
825 | // Setup test module
826 | beforeEachWithConfig(
827 | new NotifierConfig({
828 | animations: {
829 | enabled: false,
830 | },
831 | behaviour: {
832 | autoHide: false,
833 | onClick: false,
834 | },
835 | }),
836 | );
837 |
838 | componentInstance.notification = testNotification;
839 | componentFixture.detectChanges();
840 |
841 | componentInstance.show();
842 | jest.spyOn(componentInstance, 'onClickDismiss');
843 |
844 | componentFixture.nativeElement.click(); // Emulate click event
845 | componentFixture.detectChanges();
846 |
847 | expect(componentInstance.onClickDismiss).not.toHaveBeenCalled();
848 | }));
849 |
850 | it('should pause the autoHide timer on mouseover, and resume again on mouseout', fakeAsync(() => {
851 | // Setup test module
852 | beforeEachWithConfig(
853 | new NotifierConfig({
854 | animations: {
855 | enabled: false,
856 | },
857 | behaviour: {
858 | autoHide: 5000,
859 | onMouseover: 'pauseAutoHide',
860 | },
861 | }),
862 | );
863 |
864 | componentInstance.notification = testNotification;
865 | componentFixture.detectChanges();
866 |
867 | componentInstance.show();
868 | jest.spyOn(componentInstance, 'onClickDismiss');
869 | jest.spyOn(timerService, 'pause');
870 | jest.spyOn(timerService, 'continue');
871 |
872 | componentInstance.onNotificationMouseover();
873 |
874 | expect(timerService.pause).toHaveBeenCalled();
875 |
876 | componentInstance.onNotificationMouseout();
877 |
878 | expect(timerService.continue).toHaveBeenCalled();
879 |
880 | timerService.finishManually();
881 | tick();
882 |
883 | expect(componentInstance.onClickDismiss).toHaveBeenCalled();
884 | }));
885 |
886 | it('should restart the autoHide timer on mouseover', fakeAsync(() => {
887 | // Setup test module
888 | beforeEachWithConfig(
889 | new NotifierConfig({
890 | animations: {
891 | enabled: false,
892 | },
893 | behaviour: {
894 | autoHide: 5000,
895 | onMouseover: 'resetAutoHide',
896 | },
897 | }),
898 | );
899 |
900 | componentInstance.notification = testNotification;
901 | componentFixture.detectChanges();
902 |
903 | componentInstance.show();
904 | jest.spyOn(componentInstance, 'onClickDismiss');
905 | jest.spyOn(timerService, 'stop');
906 | jest.spyOn(timerService, 'start');
907 |
908 | componentInstance.onNotificationMouseover();
909 |
910 | expect(timerService.stop).toHaveBeenCalled();
911 |
912 | componentInstance.onNotificationMouseout();
913 |
914 | expect(timerService.start).toHaveBeenCalled();
915 |
916 | timerService.finishManually();
917 | tick();
918 |
919 | expect(componentInstance.onClickDismiss).toHaveBeenCalled();
920 | }));
921 | });
922 |
923 | /**
924 | * Helper for upfront configuration
925 | */
926 | function beforeEachWithConfig(testNotifierConfig: NotifierConfig, extractServices = true): void {
927 | TestBed.configureTestingModule({
928 | declarations: [NotifierNotificationComponent, TestComponent],
929 | providers: [
930 | {
931 | provide: NotifierService,
932 | useValue: {
933 | getConfig: () => testNotifierConfig,
934 | },
935 | },
936 | {
937 | // No idea why this is *actually* necessary -- it shouldn't be ...
938 | provide: NotifierConfigToken,
939 | useValue: {},
940 | },
941 | {
942 | provide: NotifierAnimationService,
943 | useClass: MockNotifierAnimationService,
944 | },
945 | ],
946 | }).overrideComponent(NotifierNotificationComponent, {
947 | set: {
948 | providers: [
949 | // Override component-specific providers
950 | {
951 | provide: NotifierTimerService,
952 | useClass: MockNotifierTimerService,
953 | },
954 | ],
955 | },
956 | });
957 |
958 | if (extractServices) {
959 | componentFixture = TestBed.createComponent(NotifierNotificationComponent);
960 | componentInstance = componentFixture.componentInstance;
961 |
962 | // Get the service from the component's local injector
963 | timerService = componentFixture.debugElement.injector.get(NotifierTimerService);
964 | }
965 | }
966 | });
967 |
968 | /**
969 | * Mock notifier animation service, always returning the animation
970 | */
971 | @Injectable()
972 | class MockNotifierAnimationService extends NotifierAnimationService {
973 | /**
974 | * Get animation data
975 | *
976 | * @param {'show' | 'hide'} direction Animation direction, either in or out
977 | * @returns {NotifierAnimationData} Animation information
978 | *
979 | * @override
980 | */
981 | public getAnimationData(direction: 'show' | 'hide'): NotifierAnimationData {
982 | if (direction === 'show') {
983 | return {
984 | keyframes: [
985 | {
986 | opacity: '0',
987 | },
988 | {
989 | opacity: '1',
990 | },
991 | ],
992 | options: {
993 | duration: 300,
994 | easing: 'ease',
995 | fill: 'forwards',
996 | },
997 | };
998 | } else {
999 | return {
1000 | keyframes: [
1001 | {
1002 | opacity: '1',
1003 | },
1004 | {
1005 | opacity: '0',
1006 | },
1007 | ],
1008 | options: {
1009 | duration: 300,
1010 | easing: 'ease',
1011 | fill: 'forwards',
1012 | },
1013 | };
1014 | }
1015 | }
1016 | }
1017 |
1018 | /**
1019 | * Mock Notifier Timer Service
1020 | */
1021 | @Injectable()
1022 | class MockNotifierTimerService extends NotifierTimerService {
1023 | /**
1024 | * Temp resolve function
1025 | *
1026 | * @override
1027 | */
1028 | private resolveFunction: () => void;
1029 |
1030 | /**
1031 | * Start (or resume) the timer - doing nothing here
1032 | *
1033 | * @param {number} duration Timer duration, in ms
1034 | * @returns {Promise} Promise, resolved once the timer finishes
1035 | *
1036 | * @override
1037 | */
1038 | public start(): Promise {
1039 | return new Promise((resolve: () => void) => {
1040 | this.resolveFunction = resolve;
1041 | });
1042 | }
1043 |
1044 | /**
1045 | * Pause the timer - doing nothing here
1046 | */
1047 | public pause(): void {
1048 | // Do nothing
1049 | }
1050 |
1051 | /**
1052 | * Continue the timer - doing nothing here
1053 | */
1054 | public continue(): void {
1055 | // Do nothing
1056 | }
1057 |
1058 | /**
1059 | * Stop the timer - doing nothing here
1060 | */
1061 | public stop(): void {
1062 | // Do nothing
1063 | }
1064 |
1065 | /**
1066 | * Finish the timer manually, from outside
1067 | */
1068 | public finishManually(): void {
1069 | this.resolveFunction();
1070 | }
1071 | }
1072 |
1073 | @Component({ selector: 'test-cmp', template: '' })
1074 | class TestComponent {
1075 | @ViewChild('tpl', { static: true })
1076 | currentTplRef: TemplateRef;
1077 | }
1078 |
1079 | function createTestComponent(template: string): ComponentFixture {
1080 | return TestBed.overrideComponent(TestComponent, { set: { template: template } })
1081 | .configureTestingModule({ schemas: [NO_ERRORS_SCHEMA] })
1082 | .createComponent(TestComponent);
1083 | }
1084 |
--------------------------------------------------------------------------------