hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-07 18:14:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Pause notification countdown on hover

Browse Source
This commit is contained in:
Yura
2021-10-04 19:00:15 +02:00
parent b29b87d0f6
commit 25ea75cf54
2 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/shared/notifications/notification/notification.component.html
View File

@@ -1,4 +1,6 @@
<div class="alert {{notification.type}} alert-dismissible m-3 shadow" role="alert" <div class="alert {{notification.type}} alert-dismissible m-3 shadow" role="alert"
(mouseenter)="isPaused$.next(true)"
(mouseleave)="isPaused$.next(false)"
[@enterLeave]="animate"> [@enterLeave]="animate">
<div class="notification-progress-loader position-absolute w-100" *ngIf="showProgressBar"> <div class="notification-progress-loader position-absolute w-100" *ngIf="showProgressBar">

29
src/app/shared/notifications/notification/notification.component.ts
View File

@@ -1,4 +1,4 @@
import {of as observableOf, Observable } from 'rxjs'; import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
import { import {
ChangeDetectionStrategy, ChangeDetectionStrategy,
ChangeDetectorRef, ChangeDetectorRef,
@@ -23,6 +23,7 @@ import { fadeInEnter, fadeInState, fadeOutLeave, fadeOutState } from '../../anim
import { NotificationAnimationsStatus } from '../models/notification-animations-type'; import { NotificationAnimationsStatus } from '../models/notification-animations-type';
import { isNotEmpty } from '../../empty.util'; import { isNotEmpty } from '../../empty.util';
import { INotification } from '../models/notification.model'; import { INotification } from '../models/notification.model';
import { filter, first } from 'rxjs/operators';
@Component({ @Component({
selector: 'ds-notification', selector: 'ds-notification',
@@ -65,6 +66,7 @@ export class NotificationComponent implements OnInit, OnDestroy {
private count = 0; private count = 0;
private start: any; private start: any;
private diff: any; private diff: any;
public isPaused$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public animate: string; public animate: string;
constructor(private notificationService: NotificationsService, constructor(private notificationService: NotificationsService,
@@ -99,17 +101,22 @@ export class NotificationComponent implements OnInit, OnDestroy {
private instance = () => { private instance = () => {
this.diff = (new Date().getTime() - this.start) - (this.count * this.speed); this.diff = (new Date().getTime() - this.start) - (this.count * this.speed);
if (this.count++ === this.steps) { this.isPaused$.pipe(
this.remove(); filter(paused => !paused),
// this.item.timeoutEnd!.emit(); first(),
} else if (!this.stopTime) { ).subscribe(() => {
if (this.showProgressBar) { if (this.count++ === this.steps) {
this.progressWidth += 100 / this.steps; this.remove();
} // this.item.timeoutEnd!.emit();
} else if (!this.stopTime) {
if (this.showProgressBar) {
this.progressWidth += 100 / this.steps;
}
this.timer = setTimeout(this.instance, (this.speed - this.diff)); this.timer = setTimeout(this.instance, (this.speed - this.diff));
} }
this.zone.run(() => this.cdr.detectChanges()); this.zone.run(() => this.cdr.detectChanges());
});
} }
public remove() { public remove() {