From a8cf8c51cbbe93344927619b836c208fca4fe158 Mon Sep 17 00:00:00 2001
From: Limon Monte <limon.monte@gmail.com>
Date: Mon, 11 Nov 2019 13:41:30 +0200
Subject: [PATCH] fix: stop and resume timer progress bar (#1806)

---
 src/instanceMethods/_main.js |  3 +--
 src/staticMethods/timer.js   | 14 +++++++++++---
 src/utils/dom/domUtils.js    | 20 ++++++++++++++++++++
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/instanceMethods/_main.js b/src/instanceMethods/_main.js
index 686f62bda..ca054cca9 100644
--- a/src/instanceMethods/_main.js
+++ b/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)
       })
     }
   }
diff --git a/src/staticMethods/timer.js b/src/staticMethods/timer.js
index fb31f6374..095cd924b 100644
--- a/src/staticMethods/timer.js
+++ b/src/staticMethods/timer.js
@@ -1,3 +1,4 @@
+import { animateTimerProgressBar, stopTimerProgressBar } from '../utils/dom/domUtils.js'
 import globalState from '../globalState.js'
 
 /**
@@ -13,7 +14,10 @@ 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()
+  }
 }
 
 /**
@@ -21,7 +25,11 @@ export const stopTimer = () => {
  * 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())
 }
 
 /**
diff --git a/src/utils/dom/domUtils.js b/src/utils/dom/domUtils.js
index 8ab29957c..73c72fafb 100644
--- a/src/utils/dom/domUtils.js
+++ b/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}%`
+}