feat: prevent dismiss toast on hover (#22)

abdmmar · Jun 25, 2023 · f43b728 · f43b728
1 parent 07dca02
commit f43b728
Showing 1 changed file with 18 additions and 4 deletions.
diff --git a/src/wc-toast-item.js b/src/wc-toast-item.js
@@ -37,13 +37,27 @@ export default class WCToastItem extends HTMLElement {
       this.style.setProperty('--wc-toast-color', '#f9f9fa');
     }
 
-    setTimeout(() => {
-      this.shadowRoot.querySelector('.wc-toast-bar').classList.add('dismiss');
-
+    const onClose = () => {
       setTimeout(() => {
         this.remove();
       }, this.EXIT_ANIMATION_DURATION);
-    }, this.duration);
+      this.shadowRoot.querySelector('.wc-toast-bar').classList.add('dismiss');
+    }
+    let isHover = false
+    this.addEventListener("mouseenter", () => {
+      isHover = true
+    })
+    this.addEventListener("mouseleave", () => {
+      isHover = false
+    })
+    const timer = setInterval(() => {
+      if(this.duration <= 0) {
+        clearInterval(timer)
+        onClose()
+        return
+      }
+      if(!isHover) this.duration -= 100
+    }, 100)
   }
 
   static get observedAttributes() {