From 4e1a264145bc6c3c19145d4e8bad1acf31558090 Mon Sep 17 00:00:00 2001
From: GeoSot <geo.sotis@gmail.com>
Date: Thu, 11 Feb 2021 23:52:22 +0200
Subject: [PATCH 1/2] initial

---
 js/src/modal.js | 27 +++++++++++++--------------
 1 file changed, 13 insertions(+), 14 deletions(-)

diff --git a/js/src/modal.js b/js/src/modal.js
index 332d636d0f05..0e8e45f37594 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -113,7 +113,7 @@ class Modal extends BaseComponent {
       return
     }
 
-    if (this._element.classList.contains(CLASS_NAME_FADE)) {
+    if (this._isAnimated()) {
       this._isTransitioning = true
     }
 
@@ -164,7 +164,7 @@ class Modal extends BaseComponent {
     }
 
     this._isShown = false
-    const transition = this._element.classList.contains(CLASS_NAME_FADE)
+    const transition = this._isAnimated()
 
     if (transition) {
       this._isTransitioning = true
@@ -229,7 +229,6 @@ class Modal extends BaseComponent {
   }
 
   _showElement(relatedTarget) {
-    const transition = this._element.classList.contains(CLASS_NAME_FADE)
     const modalBody = SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog)
 
     if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
@@ -247,7 +246,7 @@ class Modal extends BaseComponent {
       modalBody.scrollTop = 0
     }
 
-    if (transition) {
+    if (this._isAnimated()) {
       reflow(this._element)
     }
 
@@ -268,7 +267,7 @@ class Modal extends BaseComponent {
       })
     }
 
-    if (transition) {
+    if (this._isAnimated()) {
       const transitionDuration = getTransitionDurationFromElement(this._dialog)
 
       EventHandler.one(this._dialog, 'transitionend', transitionComplete)
@@ -332,16 +331,12 @@ class Modal extends BaseComponent {
   }
 
   _showBackdrop(callback) {
-    const animate = this._element.classList.contains(CLASS_NAME_FADE) ?
-      CLASS_NAME_FADE :
-      ''
-
     if (this._isShown && this._config.backdrop) {
       this._backdrop = document.createElement('div')
       this._backdrop.className = CLASS_NAME_BACKDROP
 
-      if (animate) {
-        this._backdrop.classList.add(animate)
+      if (this._isAnimated()) {
+        this._backdrop.classList.add(CLASS_NAME_FADE)
       }
 
       document.body.appendChild(this._backdrop)
@@ -363,13 +358,13 @@ class Modal extends BaseComponent {
         }
       })
 
-      if (animate) {
+      if (this._isAnimated()) {
         reflow(this._backdrop)
       }
 
       this._backdrop.classList.add(CLASS_NAME_SHOW)
 
-      if (!animate) {
+      if (!this._isAnimated()) {
         callback()
         return
       }
@@ -386,7 +381,7 @@ class Modal extends BaseComponent {
         callback()
       }
 
-      if (this._element.classList.contains(CLASS_NAME_FADE)) {
+      if (this._isAnimated()) {
         const backdropTransitionDuration = getTransitionDurationFromElement(this._backdrop)
         EventHandler.one(this._backdrop, 'transitionend', callbackRemove)
         emulateTransitionEnd(this._backdrop, backdropTransitionDuration)
@@ -398,6 +393,10 @@ class Modal extends BaseComponent {
     }
   }
 
+  _isAnimated() {
+    return this._element.classList.contains(CLASS_NAME_FADE)
+  }
+
   _triggerBackdropTransition() {
     const hideEvent = EventHandler.trigger(this._element, EVENT_HIDE_PREVENTED)
     if (hideEvent.defaultPrevented) {

From 126157578fe512b5b7cd655eb13b3e2293867e3e Mon Sep 17 00:00:00 2001
From: GeoSot <geo.sotis@gmail.com>
Date: Fri, 5 Mar 2021 23:15:13 +0200
Subject: [PATCH 2/2] use dynamic check everywhere

---
 js/src/modal.js | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/js/src/modal.js b/js/src/modal.js
index 0e8e45f37594..40fd226bf66e 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -164,9 +164,9 @@ class Modal extends BaseComponent {
     }
 
     this._isShown = false
-    const transition = this._isAnimated()
+    const isAnimated = this._isAnimated()
 
-    if (transition) {
+    if (isAnimated) {
       this._isTransitioning = true
     }
 
@@ -180,7 +180,7 @@ class Modal extends BaseComponent {
     EventHandler.off(this._element, EVENT_CLICK_DISMISS)
     EventHandler.off(this._dialog, EVENT_MOUSEDOWN_DISMISS)
 
-    if (transition) {
+    if (isAnimated) {
       const transitionDuration = getTransitionDurationFromElement(this._element)
 
       EventHandler.one(this._element, 'transitionend', event => this._hideModal(event))
@@ -229,6 +229,7 @@ class Modal extends BaseComponent {
   }
 
   _showElement(relatedTarget) {
+    const isAnimated = this._isAnimated()
     const modalBody = SelectorEngine.findOne(SELECTOR_MODAL_BODY, this._dialog)
 
     if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
@@ -246,7 +247,7 @@ class Modal extends BaseComponent {
       modalBody.scrollTop = 0
     }
 
-    if (this._isAnimated()) {
+    if (isAnimated) {
       reflow(this._element)
     }
 
@@ -267,7 +268,7 @@ class Modal extends BaseComponent {
       })
     }
 
-    if (this._isAnimated()) {
+    if (isAnimated) {
       const transitionDuration = getTransitionDurationFromElement(this._dialog)
 
       EventHandler.one(this._dialog, 'transitionend', transitionComplete)
@@ -331,11 +332,12 @@ class Modal extends BaseComponent {
   }
 
   _showBackdrop(callback) {
+    const isAnimated = this._isAnimated()
     if (this._isShown && this._config.backdrop) {
       this._backdrop = document.createElement('div')
       this._backdrop.className = CLASS_NAME_BACKDROP
 
-      if (this._isAnimated()) {
+      if (isAnimated) {
         this._backdrop.classList.add(CLASS_NAME_FADE)
       }
 
@@ -358,13 +360,13 @@ class Modal extends BaseComponent {
         }
       })
 
-      if (this._isAnimated()) {
+      if (isAnimated) {
         reflow(this._backdrop)
       }
 
       this._backdrop.classList.add(CLASS_NAME_SHOW)
 
-      if (!this._isAnimated()) {
+      if (!isAnimated) {
         callback()
         return
       }
@@ -381,7 +383,7 @@ class Modal extends BaseComponent {
         callback()
       }
 
-      if (this._isAnimated()) {
+      if (isAnimated) {
         const backdropTransitionDuration = getTransitionDurationFromElement(this._backdrop)
         EventHandler.one(this._backdrop, 'transitionend', callbackRemove)
         emulateTransitionEnd(this._backdrop, backdropTransitionDuration)