Add feature pause on mouse hover

Author: zerodevx

cypress/integration/test.spec.js

@@ -172,7 +172,42 @@ describe('Integration Tests', () => {
       .get('[data-btn=default]').click()
       .get('[data-btn=dummyAccept').click()
       .get('._toastItem h1').should('not.exist')
-      .get('._toastBtn').click()
-      .get('._toastItem').should('not.exist')
+      .window().invoke('toast.pop', 0)
+  })
+
+  it('Pauses on hover', () => {
+    cy.get('[data-btn=pauseOnMouseHover]').click()
+      .get('._toastItem').trigger('mouseenter')
+      .get('._toastBar').then($bar => {
+        const old = parseFloat($bar.val())
+        cy.wait(50).then(() => {
+          expect(parseFloat($bar.val())).to.equal(old)
+        })
+      })
+      .get('._toastItem').trigger('mouseleave')
+      .get('._toastBar').then($bar => {
+        const old = parseFloat($bar.val())
+        cy.wait(50).then(() => {
+          expect(parseFloat($bar.val())).to.be.below(old)
+        }).get('._toastBtn').click()
+      })
+  })
+
+  it('Does not pause on hover if `pausable` is false', () => {
+    cy.get('[data-btn=default]').click()
+      .get('._toastItem').trigger('mouseenter', { force: true })
+      .get('._toastBar').then($bar => {
+        const old = parseFloat($bar.val())
+        cy.wait(50).then(() => {
+          expect(parseFloat($bar.val())).to.be.below(old)
+        })
+      })
+      .get('._toastItem').trigger('mouseleave', { force: true })
+      .get('._toastBar').then($bar => {
+        const old = parseFloat($bar.val())
+        cy.wait(50).then(() => {
+          expect(parseFloat($bar.val())).to.be.below(old)
+        }).get('._toastBtn').click()
+      })
   })
 })

src/SvelteToast.svelte

@@ -32,12 +32,7 @@ ul {
 
 <ul>
   {#each items as item (item.id)}
-  <li
-    in:fly={item.intro}
-    out:fade
-    animate:flip={{ duration: 200 }}
-    style={getCss(item.theme)}
-    >
+  <li in:fly={item.intro} out:fade animate:flip={{ duration: 200 }} style={getCss(item.theme)}>
     <ToastItem {item} />
   </li>
   {/each}

src/ToastItem.svelte

@@ -6,19 +6,34 @@ import { toast } from './stores.js'
 export let item
 
 const progress = tweened(item.initial, { duration: item.duration, easing: linear })
+const autoclose = () => {
+  if ($progress === 1 || $progress === 0) {
+    toast.pop(item.id)
+  }
+}
 let prev = item.initial
 
 $: if (prev !== item.next) {
-  if (item.next === 1 || item.next === 0) {
-    progress.set(item.next).then(() => toast.pop(item.id))
-  } else {
-    progress.set(item.next)
-  }
+  progress.set(item.next).then(autoclose)
   prev = item.next
 }
 
+const pause = () => {
+  if (item.pausable) {
+    progress.set($progress, { duration: 0 })
+  }
+}
+
+const play = () => {
+  if (item.pausable) {
+    const pct = ($progress - item.initial) / (item.next - item.initial)
+    const remaining = item.duration - (item.duration * pct)
+    progress.set(item.next, { duration: remaining }).then(autoclose)
+  }
+}
+
 const getProps = () => {
-  const { props, sendIdTo } = item.component
+  const { props = {}, sendIdTo } = item.component
   if (sendIdTo) {
     props[sendIdTo] = item.id
   }
@@ -88,7 +103,7 @@ $: if (typeof item.progress !== 'undefined') {
 }
 </style>
 
-<div class="_toastItem">
+<div class="_toastItem" class:pe={item.pausable} on:mouseenter={pause} on:mouseleave={play}>
   <div class="_toastMsg" class:pe={item.component}>
     {#if item.component}
     <svelte:component this={item.component.src} {...getProps()} />

src/index.d.ts

@@ -12,6 +12,7 @@ declare module '@zerodevx/svelte-toast'
  *  initial: 1,           // initial progress bar value
  *  next: 0,              // next progress value
  *  dismissable: true,    // allow dismiss with close button
+ *  pausable: false,      // allow pause on mouse hover
  *  reversed: false,      // insert new toast to bottom of stack
  *  intro: { x: 256 },    // toast intro fly animation settings
  *  theme: {}             // css var overrides
@@ -27,6 +28,7 @@ export interface SvelteToastOptions {
   next?: number
   progress?: number
   dismissable?: boolean
+  pausable?: boolean
   reversed?: boolean
   intro?: FlyParams
   theme?: { [key: string]: string }

src/stores.js

@@ -5,6 +5,7 @@ const defaults = {
   initial: 1,
   next: 0,
   dismissable: true,
+  pausable: false,
   reversed: false,
   intro: { x: 256 },
   theme: {}