From b22bc14ccb5f8c543c0c3edb86cb6b61fb694f11 Mon Sep 17 00:00:00 2001
From: GeoSot <geo.sotis@gmail.com>
Date: Fri, 16 Jul 2021 01:20:16 +0300
Subject: [PATCH] feat: Add progress bar to toast component

---
 js/src/toast.js                            | 22 +++++++++++++++
 scss/_toasts.scss                          | 32 ++++++++++++++++++++++
 site/content/docs/5.2/components/toasts.md |  1 +
 3 files changed, 55 insertions(+)

diff --git a/js/src/toast.js b/js/src/toast.js
index 5cadb85f83..ac7fe5b96b 100644
--- a/js/src/toast.js
+++ b/js/src/toast.js
@@ -9,6 +9,7 @@ import { defineJQueryPlugin, reflow } from './util/index.js'
 import EventHandler from './dom/event-handler.js'
 import BaseComponent from './base-component.js'
 import { enableDismissTrigger } from './util/component-functions.js'
+import SelectorEngine from './dom/selector-engine.js'
 
 /**
  * Constants
@@ -18,6 +19,8 @@ const NAME = 'toast'
 const DATA_KEY = 'bs.toast'
 const EVENT_KEY = `.${DATA_KEY}`
 
+const CLASS_PROGRESS_BAR = '.toast-progress'
+
 const EVENT_MOUSEOVER = `mouseover${EVENT_KEY}`
 const EVENT_MOUSEOUT = `mouseout${EVENT_KEY}`
 const EVENT_FOCUSIN = `focusin${EVENT_KEY}`
@@ -145,6 +148,7 @@ class Toast extends BaseComponent {
       return
     }
 
+    this._toggleProgressBar(this._config.delay)
     this._timeout = setTimeout(() => {
       this.hide()
     }, this._config.delay)
@@ -191,6 +195,7 @@ class Toast extends BaseComponent {
 
   _clearTimeout() {
     clearTimeout(this._timeout)
+    this._toggleProgressBar(null)
     this._timeout = null
   }
 
@@ -208,6 +213,23 @@ class Toast extends BaseComponent {
       }
     })
   }
+
+  _toggleProgressBar(time) {
+    const progressBarElement = SelectorEngine.findOne(CLASS_PROGRESS_BAR, this._element)
+    if (!progressBarElement) {
+      return
+    }
+
+    if (time) {
+      progressBarElement.classList.add('animated')
+      progressBarElement.style.animationDuration = `${time}ms`
+      // reflow(progressBarElement)
+      return
+    }
+
+    progressBarElement.classList.remove('animated')
+    reflow(progressBarElement)
+  }
 }
 
 /**
diff --git a/scss/_toasts.scss b/scss/_toasts.scss
index 2ce378d5bc..5d356d8766 100644
--- a/scss/_toasts.scss
+++ b/scss/_toasts.scss
@@ -1,3 +1,12 @@
+@keyframes scale-x-frames {
+  0% {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
+}
+
 .toast {
   // scss-docs-start toast-css-vars
   --#{$prefix}toast-zindex: #{$zindex-toast};
@@ -35,6 +44,29 @@
   &:not(.show) {
     display: none;
   }
+
+  $toast-progress-height: 5px;
+  $toast-progress-bg-color: #add555;
+  $toast-progress-elapsed-bg-color: rgba(255, 255, 255, .7);
+  $toast-progress-transform-origin: right;
+  .toast-progress {
+    position: relative;
+    height: $toast-progress-height;
+    background-color: $toast-progress-bg-color;
+
+    &.animated::after {
+      position: absolute;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      content: "";
+      background-color: $toast-progress-elapsed-bg-color;
+      transform-origin: $toast-progress-transform-origin;
+      animation: scale-x-frames linear 1 forwards;
+      animation-duration: inherit;
+    }
+  }
+
 }
 
 .toast-container {
diff --git a/site/content/docs/5.2/components/toasts.md b/site/content/docs/5.2/components/toasts.md
index e4e7c028bf..4813c1c66c 100644
--- a/site/content/docs/5.2/components/toasts.md
+++ b/site/content/docs/5.2/components/toasts.md
@@ -60,6 +60,7 @@ Click the button below to show a toast (positioned with our utilities in the low
     <div class="toast-body">
       Hello, world! This is a toast message.
     </div>
+  <div class="toast-progress"></div>
   </div>
 </div>