Remove jQuery from Util.js

s

diff --git a/js/src/alert.js b/js/src/alert.js
index 64e8e3843522ee6ec794950ac806d6a39742b3f9..ab36a8d36383a5e12eca883f469f4f32a2844411 100644 (file)
--- 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 36176dd9c029ddcc2a55eb7cfe164a944a6196c9..fa0ce331a1b6cd24a861881e107a6421c042d874 100644 (file)
--- 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 10df450d09b0d8ec8bf855c9f7265713f0c4f1b3..a6b540de9e846d2160846595ab93baf7367fef63 100644 (file)
--- 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 (file)
index 0000000..5968e62
--- /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 99fe1bf2d085caa62a780fd5388832f92eaed64a..0668907ecbb76bdf950fca28137eca39a44ee2f5 100644 (file)
--- 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 8421e0a43c630c0c4db3e49d2c43824853403992..cb80997afc8bf106ee7a8d9a1448dd27a317afe9 100644 (file)
--- 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 81a2dedc6c6bded43f0c78fa3393754a0dfa6eb3..64dcb0840164b0f2261072240a1eb4c8744f27c8 100644 (file)
--- 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 d459aa266b24b7e0ec40f41f109e881acfde05ef..989d9644fc7794ba2005f634641349922e8b54b8 100644 (file)
--- 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 99acd4ad4ee7bfc75e127dd65e7ff2c9ed5c38d7..a3fd937c2dbbdc0fd37eac8b55a25c527dc3b967 100644 (file)
--- 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 6eb7e9444c291a7f527a0b73b642b4911ab01336..d2befb8b8abe7d3dfb7c1ebf5babdf16d9fbe29c 100644 (file)
--- 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 b7ba7964d404a32feb5b1721e4c70736a796e8e6..ce900e471e80d589245f49fcf937f8d2ef5f7b3d 100644 (file)
--- 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 1907acf80c918c6742746e315293990c2db6e70b..895a6422c4b7824db803de1f4a58c0811959d342 100644 (file)
--- 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 4d449a426256a28972f05a2e28666761332d937b..2bc3c086ee5f703d9d63551ceb3d3af580111f8a 100644 (file)
--- 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 01cb34abccb403c750a1eea314c7d151670ef9ce..9e4a10cfb6eca9623018b4162efe267327d9f71c 100644 (file)
--- 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 1d3cd484b54f6df4a053f4a749a9b5baf774c658..53ad81a97ac9ecb9bd39cb58b29c34c74aaf1f98 100644 (file)
--- 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 d5c7cf205f321a9749d766dcaf46898025f72829..38ab65a1256a7294bb29a5128498dead6ec3ac62 100644 (file)
--- 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 b1f8cbcdaacacd91b1b8a0fcb0ee6b128c33a0b5..2fb4c1ac2bb14e14b771e174b03f87dfac0f2028 100644 (file)
--- 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 93ab2d6b434d8a7ac15e2c58a17d4b8ff798d02f..737679a7801876031980dbf5100c1317696fd3c6 100644 (file)
--- 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>