Remove jQuery from Util.js

s

18 files changed, 75 insertions, 14 deletions

diff --git a/js/src/alert.js b/js/src/alert.js
index 64e8e3843..ab36a8d36 100644
--- a/js/src/alert.js
+++ b/js/src/alert.js
@@ -112,7 +112,8 @@ class Alert {
 
     $(element)
       .one(Util.TRANSITION_END, (event) => this._destroyElement(element, event))
-      .emulateTransitionEnd(transitionDuration)
+
+    Util.emulateTransitionEnd(transitionDuration)
   }
 
   _destroyElement(element) {
diff --git a/js/src/carousel.js b/js/src/carousel.js
index 36176dd9c..fa0ce331a 100644
--- a/js/src/carousel.js
+++ b/js/src/carousel.js
@@ -488,7 +488,8 @@ class Carousel {
 
           setTimeout(() => $(this._element).trigger(slidEvent), 0)
         })
-        .emulateTransitionEnd(transitionDuration)
+
+      Util.emulateTransitionEnd(transitionDuration)
     } else {
       $(activeElement).removeClass(ClassName.ACTIVE)
       $(nextElement).addClass(ClassName.ACTIVE)
diff --git a/js/src/collapse.js b/js/src/collapse.js
index 10df450d0..a6b540de9 100644
--- a/js/src/collapse.js
+++ b/js/src/collapse.js
@@ -195,8 +195,8 @@ class Collapse {
 
     $(this._element)
       .one(Util.TRANSITION_END, complete)
-      .emulateTransitionEnd(transitionDuration)
 
+    Util.emulateTransitionEnd(transitionDuration)
     this._element.style[dimension] = `${this._element[scrollSize]}px`
   }
 
@@ -254,7 +254,8 @@ class Collapse {
 
     $(this._element)
       .one(Util.TRANSITION_END, complete)
-      .emulateTransitionEnd(transitionDuration)
+
+    Util.emulateTransitionEnd(transitionDuration)
   }
 
   setTransitioning(isTransitioning) {
diff --git a/js/src/dom/event.js b/js/src/dom/event.js
new file mode 100644
index 000000000..5968e62e0
--- /dev/null
+++ b/js/src/dom/event.js
@@ -0,0 +1,38 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v4.0.0-beta): dom/event.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+const Event = {
+  on(element, event, handler) {
+    if (typeof event !== 'string') {
+      return
+    }
+    element.addEventListener(event, handler, false)
+  },
+
+  one(element, event, handler) {
+    const complete = () => {
+      /* eslint func-style: off */
+      handler()
+      element.removeEventListener(event, complete, false)
+    }
+    Event.on(element, event, complete)
+  },
+
+  trigger(element, event) {
+    if (typeof event !== 'string') {
+      return
+    }
+
+    const eventToDispatch = new CustomEvent(event, {
+      bubbles: true,
+      cancelable: true
+    })
+    element.dispatchEvent(eventToDispatch)
+  }
+}
+
+export default Event
diff --git a/js/src/modal.js b/js/src/modal.js
index 99fe1bf2d..0668907ec 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -189,7 +189,8 @@ class Modal {
 
       $(this._element)
         .one(Util.TRANSITION_END, (event) => this._hideModal(event))
-        .emulateTransitionEnd(transitionDuration)
+
+      Util.emulateTransitionEnd(this._element, transitionDuration)
     } else {
       this._hideModal()
     }
@@ -280,7 +281,8 @@ class Modal {
 
       $(this._dialog)
         .one(Util.TRANSITION_END, transitionComplete)
-        .emulateTransitionEnd(transitionDuration)
+
+      Util.emulateTransitionEnd(transitionDuration)
     } else {
       transitionComplete()
     }
@@ -387,7 +389,8 @@ class Modal {
 
       $(this._backdrop)
         .one(Util.TRANSITION_END, callback)
-        .emulateTransitionEnd(backdropTransitionDuration)
+
+      Util.emulateTransitionEnd(backdropTransitionDuration)
     } else if (!this._isShown && this._backdrop) {
       $(this._backdrop).removeClass(ClassName.SHOW)
 
@@ -403,7 +406,8 @@ class Modal {
 
         $(this._backdrop)
           .one(Util.TRANSITION_END, callbackRemove)
-          .emulateTransitionEnd(backdropTransitionDuration)
+
+        Util.emulateTransitionEnd(backdropTransitionDuration)
       } else {
         callbackRemove()
       }
diff --git a/js/src/tab.js b/js/src/tab.js
index 8421e0a43..cb80997af 100644
--- a/js/src/tab.js
+++ b/js/src/tab.js
@@ -159,7 +159,7 @@ class Tab {
       $(active)
         .removeClass(ClassName.SHOW)
         .one(Util.TRANSITION_END, complete)
-        .emulateTransitionEnd(transitionDuration)
+      Util.emulateTransitionEnd(active, transitionDuration)
     } else {
       complete()
     }
diff --git a/js/src/tooltip.js b/js/src/tooltip.js
index 81a2dedc6..64dcb0840 100644
--- a/js/src/tooltip.js
+++ b/js/src/tooltip.js
@@ -344,7 +344,8 @@ class Tooltip {
 
         $(this.tip)
           .one(Util.TRANSITION_END, complete)
-          .emulateTransitionEnd(transitionDuration)
+
+        Util.emulateTransitionEnd(tip, transitionDuration)
       } else {
         complete()
       }
diff --git a/js/src/util.js b/js/src/util.js
index d459aa266..989d9644f 100644
--- a/js/src/util.js
+++ b/js/src/util.js
@@ -5,7 +5,7 @@
  * --------------------------------------------------------------------------
  */
 
-import $ from 'jquery'
+import Event from './dom/event'
 
 /**
  * ------------------------------------------------------------------------
@@ -118,7 +118,7 @@ const Util = {
   },
 
   triggerTransitionEnd(element) {
-    $(element).trigger(TRANSITION_END)
+    Event.trigger(element, Util.TRANSITION_END)
   },
 
   // TODO: Remove in v5
@@ -130,6 +130,12 @@ const Util = {
     return (obj[0] || obj).nodeType
   },
 
+  emulateTransitionEnd(element, duration) {
+    setTimeout(() => {
+      Util.triggerTransitionEnd(element)
+    }, duration)
+  },
+
   typeCheckConfig(componentName, config, configTypes) {
     for (const property in configTypes) {
       if (Object.prototype.hasOwnProperty.call(configTypes, property)) {
@@ -172,6 +178,4 @@ const Util = {
   }
 }
 
-setTransitionEndSupport()
-
 export default Util
diff --git a/js/tests/index.html b/js/tests/index.html
index 99acd4ad4..a3fd937c2 100644
--- a/js/tests/index.html
+++ b/js/tests/index.html
@@ -97,6 +97,7 @@
     </script>
 
     <!-- Transpiled Plugins -->
+    <script src="../dist/dom/event.js"></script>
     <script src="../dist/util.js"></script>
     <script src="../dist/alert.js"></script>
     <script src="../dist/button.js"></script>
diff --git a/js/tests/visual/alert.html b/js/tests/visual/alert.html
index 6eb7e9444..d2befb8b8 100644
--- a/js/tests/visual/alert.html
+++ b/js/tests/visual/alert.html
@@ -52,6 +52,7 @@
     </div>
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
+    <script src="../../dist/dom/event.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/alert.js"></script>
   </body>
diff --git a/js/tests/visual/button.html b/js/tests/visual/button.html
index b7ba7964d..ce900e471 100644
--- a/js/tests/visual/button.html
+++ b/js/tests/visual/button.html
@@ -45,6 +45,7 @@
     </div>
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
+    <script src="../../dist/dom/event.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/button.js"></script>
   </body>
diff --git a/js/tests/visual/carousel.html b/js/tests/visual/carousel.html
index 1907acf80..895a6422c 100644
--- a/js/tests/visual/carousel.html
+++ b/js/tests/visual/carousel.html
@@ -46,6 +46,7 @@
     </div>
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
+    <script src="../../dist/dom/event.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/carousel.js"></script>
     <script>
diff --git a/js/tests/visual/collapse.html b/js/tests/visual/collapse.html
index 4d449a426..2bc3c086e 100644
--- a/js/tests/visual/collapse.html
+++ b/js/tests/visual/collapse.html
@@ -72,6 +72,7 @@
     </div>
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
+    <script src="../../dist/dom/event.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/collapse.js"></script>
   </body>
diff --git a/js/tests/visual/dropdown.html b/js/tests/visual/dropdown.html
index 01cb34abc..9e4a10cfb 100644
--- a/js/tests/visual/dropdown.html
+++ b/js/tests/visual/dropdown.html
@@ -205,6 +205,7 @@
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
+    <script src="../../dist/dom/event.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/dropdown.js"></script>
     <script src="../../dist/collapse.js"></script>
diff --git a/js/tests/visual/modal.html b/js/tests/visual/modal.html
index 1d3cd484b..53ad81a97 100644
--- a/js/tests/visual/modal.html
+++ b/js/tests/visual/modal.html
@@ -207,6 +207,7 @@
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
+    <script src="../../dist/dom/event.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/modal.js"></script>
     <script src="../../dist/collapse.js"></script>
diff --git a/js/tests/visual/popover.html b/js/tests/visual/popover.html
index d5c7cf205..38ab65a12 100644
--- a/js/tests/visual/popover.html
+++ b/js/tests/visual/popover.html
@@ -33,6 +33,7 @@
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
+    <script src="../../dist/dom/event.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/tooltip.js"></script>
     <script src="../../dist/popover.js"></script>
diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html
index b1f8cbcda..2fb4c1ac2 100644
--- a/js/tests/visual/scrollspy.html
+++ b/js/tests/visual/scrollspy.html
@@ -87,6 +87,8 @@
     </div>
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
+    <script src="../../../site/docs/4.2/assets/js/vendor/popper.min.js"></script>
+    <script src="../../dist/dom/event.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/scrollspy.js"></script>
     <script src="../../dist/dropdown.js"></script>
diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html
index 93ab2d6b4..737679a78 100644
--- a/js/tests/visual/tab.html
+++ b/js/tests/visual/tab.html
@@ -227,6 +227,7 @@
 
     <script src="../../../node_modules/jquery/dist/jquery.slim.min.js"></script>
     <script src="../../../node_modules/popper.js/dist/umd/popper.min.js"></script>
+    <script src="../../dist/dom/event.js"></script>
     <script src="../../dist/util.js"></script>
     <script src="../../dist/tab.js"></script>
     <script src="../../dist/dropdown.js"></script>