fix: stop and resume timer progress bar (#1806)

src/instanceMethods/_main.js

@@ -133,8 +133,7 @@ const setupTimer = (globalState, innerParams, dismissWith) => {
     if (innerParams.timerProgressBar) {
       dom.show(timerProgressBar)
       setTimeout(() => {
-        timerProgressBar.style.transition = `width ${innerParams.timer / 1000}s`
-        timerProgressBar.style.width = '0%'
+        dom.animateTimerProgressBar(innerParams.timer)
       })
     }
   }

src/staticMethods/timer.js

@@ -1,3 +1,4 @@
+import { animateTimerProgressBar, stopTimerProgressBar } from '../utils/dom/domUtils.js'
 import globalState from '../globalState.js'
 
 /**
@@ -13,15 +14,22 @@ export const getTimerLeft = () => {
  * If `timer` parameter isn't set, returns undefined.
  */
 export const stopTimer = () => {
-  return globalState.timeout && globalState.timeout.stop()
+  if (globalState.timeout) {
+    stopTimerProgressBar()
+    return globalState.timeout.stop()
+  }
 }
 
 /**
  * Resume timer. Returns number of milliseconds of timer remained.
  * If `timer` parameter isn't set, returns undefined.
  */
 export const resumeTimer = () => {
-  return globalState.timeout && globalState.timeout.start()
+  if (globalState.timeout) {
+    const remaining = globalState.timeout.start()
+    animateTimerProgressBar(remaining)
+    return remaining
+  }
 }
 
 /**
@@ -30,7 +38,7 @@ export const resumeTimer = () => {
  */
 export const toggleTimer = () => {
   const timer = globalState.timeout
-  return timer && (timer.running ? timer.stop() : timer.start())
+  return timer && (timer.running ? stopTimer() : resumeTimer())
 }
 
 /**

src/utils/dom/domUtils.js

@@ -1,3 +1,4 @@
+import { getTimerProgressBar } from './getters.js'
 import { swalClasses, iconTypes } from '../classes.js'
 import { toArray, objectValues, warn } from '../utils.js'
 
@@ -139,3 +140,22 @@ export const contains = (haystack, needle) => {
     return haystack.contains(needle)
   }
 }
+
+export const animateTimerProgressBar = (timer) => {
+  const timerProgressBar = getTimerProgressBar()
+  if (isVisible(timerProgressBar)) {
+    timerProgressBar.style.transition = `width ${timer / 1000}s linear`
+    timerProgressBar.style.width = '0%'
+  }
+}
+
+export const stopTimerProgressBar = () => {
+  const timerProgressBar = getTimerProgressBar()
+  const timerProgressBarWidth = parseInt(window.getComputedStyle(timerProgressBar).width)
+  timerProgressBar.style.removeProperty('transition')
+  timerProgressBar.style.width = '100%'
+  const timerProgressBarFullWidth = parseInt(window.getComputedStyle(timerProgressBar).width)
+  const timerProgressBarPercent = parseInt(timerProgressBarWidth / timerProgressBarFullWidth * 100)
+  timerProgressBar.style.removeProperty('transition')
+  timerProgressBar.style.width = `${timerProgressBarPercent}%`
+}