From 514948d843095f0101a3ed11f6bcf9704358ed6b Mon Sep 17 00:00:00 2001
From: "Christian Sander (pbsc36)" <christian.sander1@phoenixcontact.com>
Date: Tue, 11 Apr 2023 11:53:18 +0200
Subject: [PATCH] Suspend notification fading when mouse is over any
 notification

---
 src/components/DefaultNotification.svelte |  2 ++
 src/components/Notification.svelte        | 37 ++++++++++++++++++++++-
 src/components/Notifications.svelte       |  3 ++
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/src/components/DefaultNotification.svelte b/src/components/DefaultNotification.svelte
index 8df76c0..d3928ab 100644
--- a/src/components/DefaultNotification.svelte
+++ b/src/components/DefaultNotification.svelte
@@ -99,6 +99,8 @@
     aria-live="polite"
     in:fade
     out:fade
+    on:mouseenter
+    on:mouseleave
   >
     <div class={getClass('content')}>
       <slot>{text}</slot>
diff --git a/src/components/Notification.svelte b/src/components/Notification.svelte
index 9cc7f27..a9f1512 100644
--- a/src/components/Notification.svelte
+++ b/src/components/Notification.svelte
@@ -6,6 +6,7 @@
   export let item;
   export let notification = {};
   export let withoutStyles = false;
+  export let fadeHalted;
 
   const { removeNotification } = getNotificationsContext();
   const {
@@ -17,12 +18,44 @@
 
   let timeout = null;
 
+  let expirationTime = null;
+  let leftTime = null;
+  let running = false;
+
+  $ : {
+    if(fadeHalted)
+      haltFade()
+    else
+      resumeFade()
+  }
+
+  const haltFade = () => {
+    if(removeAfter && timeout && running) {
+      running = false;
+      leftTime = expirationTime - Date.now();
+      clearTimeout(timeout);
+    }
+  };
+
+  const resumeFade = () => {
+    if(removeAfter && timeout && !running) {
+      expirationTime = new Date(Date.now() + leftTime);
+      running = true;
+      timeout = setTimeout(removeNotificationHandler, leftTime);
+    }
+  };
+
   if (removeAfter) {
+    expirationTime = new Date(Date.now() + removeAfter);
+    running = true;
     timeout = setTimeout(removeNotificationHandler, removeAfter);
   }
 
   onDestroy(() => {
-    if (removeAfter && timeout) clearTimeout(timeout);
+    if (removeAfter && timeout) {
+      clearTimeout(timeout);
+      fadeHalted = false;
+    } 
   });
 </script>
 
@@ -30,5 +63,7 @@
   this={item}
   {notification}
   {withoutStyles}
+  on:mouseenter={() => fadeHalted = true}
+  on:mouseleave={() => fadeHalted = false}
   onRemove={removeNotificationHandler}
 />
diff --git a/src/components/Notifications.svelte b/src/components/Notifications.svelte
index f08a8e4..c9cb337 100644
--- a/src/components/Notifications.svelte
+++ b/src/components/Notifications.svelte
@@ -55,6 +55,8 @@
   export let withoutStyles = false;
   export let zIndex = null;
 
+  let fadeHalted = false;
+
   const getClass = (position = '') => {
     const defaultPositionClass = ` default-position-style-${position}`;
 
@@ -76,6 +78,7 @@
           <Notification
             {notification}
             {withoutStyles}
+            bind:fadeHalted
             item={item || DefaultNotification}
           />
         {/if}