Remove jQuery from Util.js

s

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) {

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)

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) {

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

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()
       }

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()
     }

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()
       }

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

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>