Refactor util plugin and some tests

build/rollup.config.js

@@ -8,7 +8,7 @@ const banner  = require('./banner.js')
 const BUNDLE  = process.env.BUNDLE === 'true'
 
 let fileDest  = 'bootstrap.js'
-const external = ['jquery', 'popper.js']
+const external = ['popper.js']
 const plugins = [
   babel({
     exclude: 'node_modules/**', // Only transpile our source code

js/src/collapse.js

@@ -311,8 +311,8 @@ class Collapse {
     const selector =
       `[data-toggle="collapse"][data-parent="${this._config.parent}"]`
 
-    const elements = Util.makeArray(SelectorEngine.find(selector, parent))
+    Util.makeArray(SelectorEngine.find(selector, parent))
-    elements.forEach((element) => {
+      .forEach((element) => {
         this._addAriaAndCollapsedClass(
           Collapse._getTargetFromElement(element),
           [element]

js/src/dom/data.js

@@ -5,7 +5,6 @@
  * --------------------------------------------------------------------------
  */
 
-const Data = (() => {
 /**
  * ------------------------------------------------------------------------
  * Constants
@@ -52,7 +51,7 @@ const Data = (() => {
   }
 })()
 
-  return {
+const Data = {
   setData(instance, key, data) {
     mapData.set(instance, key, data)
   },
@@ -63,6 +62,5 @@ const Data = (() => {
     mapData.delete(instance, key)
   }
 }
-})()
 
 export default Data

js/src/dom/eventHandler.js

@@ -8,7 +8,6 @@ import Util from '../util'
  * --------------------------------------------------------------------------
  */
 
-const EventHandler = (() => {
 /**
  * ------------------------------------------------------------------------
  * Constants
@@ -189,7 +188,7 @@ const EventHandler = (() => {
   }
 }
 
-  return {
+const EventHandler = {
   on(element, event, handler, delegationFn) {
     addHandler(element, event, handler, delegationFn, false)
   },
@@ -313,7 +312,6 @@ const EventHandler = (() => {
     return evt
   }
 }
-})()
 
 /* istanbul ignore next */
 // focusin and focusout polyfill

js/src/dom/polyfill.js

@@ -77,8 +77,9 @@ const Polyfill = (() => {
   }
 
   // matches polyfill (see: https://mzl.la/2ikXneG)
-  if (!Element.prototype.matches) {
+  let matches = Element.prototype.matches
-    Element.prototype.matches =
+  if (!matches) {
+    matches =
       Element.prototype.msMatchesSelector ||
       Element.prototype.webkitMatchesSelector
   }
@@ -86,15 +87,16 @@ const Polyfill = (() => {
   // closest polyfill (see: https://mzl.la/2vXggaI)
   let closest
   if (!Element.prototype.closest) {
+    const nodeText = 3
     closest = (element, selector) => {
       let ancestor = element
       do {
-        if (ancestor.matches(selector)) {
+        if (matches.call(ancestor, selector)) {
           return ancestor
         }
 
         ancestor = ancestor.parentElement
-      } while (ancestor !== null && ancestor.nodeType === Node.ELEMENT_NODE)
+      } while (ancestor !== null && ancestor.nodeType === Node.ELEMENT_NODE && ancestor.nodeType !== nodeText)
 
       return null
     }
@@ -186,6 +188,7 @@ const Polyfill = (() => {
     defaultPreventedPreservedOnDispatch,
     focusIn: typeof window.onfocusin === 'undefined',
     closest,
+    matches,
     find,
     findOne
   }

js/src/dom/selectorEngine.js

@@ -8,7 +8,6 @@ import Util from '../util'
  * --------------------------------------------------------------------------
  */
 
-const SelectorEngine = (() => {
 /**
  * ------------------------------------------------------------------------
  * Constants
@@ -16,12 +15,14 @@ const SelectorEngine = (() => {
  */
 
 const closest = Polyfill.closest
+const matchesFn = Polyfill.matches
 const find = Polyfill.find
 const findOne = Polyfill.findOne
+const nodeText = 3
 
-  return {
+const SelectorEngine = {
   matches(element, selector) {
-      return element.matches(selector)
+    return matchesFn.call(element, selector)
   },
 
   find(selector, element = document.documentElement) {
@@ -57,8 +58,8 @@ const SelectorEngine = (() => {
     const parents = []
 
     let ancestor = element.parentNode
-      while (ancestor && ancestor.nodeType === Node.ELEMENT_NODE) {
+    while (ancestor && ancestor.nodeType === Node.ELEMENT_NODE && ancestor.nodeType !== nodeText) {
-        if (ancestor.matches(selector)) {
+      if (this.matches(ancestor, selector)) {
         parents.push(ancestor)
       }
 
@@ -84,8 +85,8 @@ const SelectorEngine = (() => {
     const siblings = []
 
     let previous = element.previousSibling
-      while (previous) {
+    while (previous && previous.nodeType === Node.ELEMENT_NODE && previous.nodeType !== nodeText) {
-        if (previous.matches(selector)) {
+      if (this.matches(previous, selector)) {
         siblings.push(previous)
       }
 
@@ -95,6 +96,5 @@ const SelectorEngine = (() => {
     return siblings
   }
 }
-})()
 
 export default SelectorEngine

js/src/dropdown.js

@@ -313,7 +313,7 @@ class Dropdown {
   }
 
   _detectNavbar() {
-    return Util.makeArray(SelectorEngine.closest(this._element, '.navbar')).length > 0
+    return Boolean(SelectorEngine.closest(this._element, '.navbar'))
   }
 
   _getOffset() {
@@ -367,7 +367,6 @@ class Dropdown {
 
     if (!data) {
       data = new Dropdown(element, _config)
-      Data.setData(element, DATA_KEY, data)
     }
 
     if (typeof config === 'string') {

js/src/modal.js

@@ -394,9 +394,8 @@ class Modal {
 
       if (this._element.classList.contains(ClassName.FADE)) {
         const backdropTransitionDuration = Util.getTransitionDurationFromElement(this._backdrop)
-
         EventHandler.one(this._backdrop, Util.TRANSITION_END, callbackRemove)
-        Util.emulateTransitionEnd(backdropTransitionDuration)
+        Util.emulateTransitionEnd(this._backdrop, backdropTransitionDuration)
       } else {
         callbackRemove()
       }

js/src/tooltip.js

@@ -127,7 +127,7 @@ class Tooltip {
      * Popper - https://popper.js.org
      */
     if (typeof Popper === 'undefined') {
-      throw new TypeError('Bootstrap\'s tooltips require Popper.js (https://popper.js.org/)')
+      throw new TypeError('Bootstrap\'s tooltips require Popper.js (https://popper.js.org)')
     }
 
     // private
@@ -201,7 +201,7 @@ class Tooltip {
 
       if (!context) {
         context = new this.constructor(
-          event.currentTarget,
+          event.delegateTarget,
           this._getDelegateConfig()
         )
         Data.setData(event.delegateTarget, dataKey, context)
@@ -344,7 +344,6 @@ class Tooltip {
 
       if (this.tip.classList.contains(ClassName.FADE)) {
         const transitionDuration = Util.getTransitionDurationFromElement(this.tip)
-
         EventHandler.one(this.tip, Util.TRANSITION_END, complete)
         Util.emulateTransitionEnd(this.tip, transitionDuration)
       } else {
@@ -383,7 +382,7 @@ class Tooltip {
     // empty mouseover listeners we added for iOS support
     if ('ontouchstart' in document.documentElement) {
       Util.makeArray(document.body.children)
-        .forEach((element) => EventHandler.off(element, 'mouseover', Util.noop()))
+        .forEach((element) => EventHandler.off(element, 'mouseover', Util.noop))
     }
 
     this._activeTrigger[Trigger.CLICK] = false
@@ -392,7 +391,6 @@ class Tooltip {
 
     if (this.tip.classList.contains(ClassName.FADE)) {
       const transitionDuration = Util.getTransitionDurationFromElement(tip)
-
       EventHandler.one(tip, Util.TRANSITION_END, complete)
       Util.emulateTransitionEnd(tip, transitionDuration)
     } else {
@@ -754,11 +752,9 @@ class Tooltip {
   _fixTransition() {
     const tip = this.getTipElement()
     const initConfigAnimation = this.config.animation
-
     if (tip.getAttribute('x-placement') !== null) {
       return
     }
-
     tip.classList.remove(ClassName.FADE)
     this.config.animation = false
     this.hide()

js/src/util.js

@@ -11,7 +11,6 @@
  * ------------------------------------------------------------------------
  */
 
-const TRANSITION_END = 'transitionend'
 const MAX_UID = 1000000
 const MILLISECONDS_MULTIPLIER = 1000
 
@@ -20,9 +19,14 @@ function toType(obj) {
   return {}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase()
 }
 
-const Util = {
+/**
+ * --------------------------------------------------------------------------
+ * Public Util Api
+ * --------------------------------------------------------------------------
+ */
 
-  TRANSITION_END: 'bsTransitionEnd',
+const Util = {
+  TRANSITION_END: 'transitionend',
 
   getUID(prefix) {
     do {
@@ -79,19 +83,25 @@ const Util = {
     element.dispatchEvent(new Event(Util.TRANSITION_END))
   },
 
-  // TODO: Remove in v5
-  supportsTransitionEnd() {
-    return Boolean(TRANSITION_END)
-  },
-
   isElement(obj) {
     return (obj[0] || obj).nodeType
   },
 
   emulateTransitionEnd(element, duration) {
+    let called = false
+    const durationPadding = 5
+    const emulatedDuration = duration + durationPadding
+    function listener() {
+      called = true
+      element.removeEventListener(Util.TRANSITION_END, listener)
+    }
+
+    element.addEventListener(Util.TRANSITION_END, listener)
     setTimeout(() => {
+      if (!called) {
         Util.triggerTransitionEnd(element)
-    }, duration)
+      }
+    }, emulatedDuration)
   },
 
   typeCheckConfig(componentName, config, configTypes) {
@@ -117,13 +127,7 @@ const Util = {
       return []
     }
 
-    const strRepresentation = Object.prototype.toString.call(nodeList)
+    return [].slice.call(nodeList)
-    if (strRepresentation === '[object NodeList]' ||
-      strRepresentation === '[object HTMLCollection]' || strRepresentation === '[object Array]') {
-      return Array.prototype.slice.call(nodeList)
-    }
-
-    return [nodeList]
   },
 
   isVisible(element) {

js/tests/unit/util.js

@@ -119,11 +119,6 @@ $(function () {
     assert.ok(id !== id2, id + ' !== ' + id2)
   })
 
-  QUnit.test('Util.supportsTransitionEnd should return true', function (assert) {
-    assert.expect(1)
-    assert.ok(Util.supportsTransitionEnd())
-  })
-
   QUnit.test('Util.findShadowRoot should find the shadow DOM root', function (assert) {
     // Only for newer browsers
     if (!document.documentElement.attachShadow) {
@@ -178,4 +173,21 @@ $(function () {
 
     window.$ = jQuery
   })
+
+  QUnit.test('Util.emulateTransitionEnd should emulate transition end', function (assert) {
+    assert.expect(1)
+    var $div = $('<div></div>').appendTo($('#qunit-fixture'))
+
+    var spy = sinon.spy($div[0], 'removeEventListener')
+
+    Util.emulateTransitionEnd($div[0], 7)
+
+    assert.ok(spy.notCalled)
+  })
+
+  QUnit.test('Util.makeArray should return empty array on null', function (assert) {
+    assert.expect(1)
+
+    assert.ok(Util.makeArray(null).length === 0)
+  })
 })

site/docs/4.3/assets/js/src/application.js

@@ -17,13 +17,14 @@
 
   document.addEventListener('DOMContentLoaded', function () {
     // Tooltip and popover demos
-    var tooltipDemoList = document.querySelectorAll('.tooltip-demo')
+    var tooltipDemoList = [].slice.call(document.querySelectorAll('.tooltip-demo'))
     tooltipDemoList.forEach(function (tooltip) {
       new bootstrap.Tooltip(tooltip, {
         selector: '[data-toggle="tooltip"]'
       })
     })
-    var popoverList = document.querySelectorAll('[data-toggle="popover"]')
+
+    var popoverList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]'))
     popoverList.forEach(function (popover) {
       new bootstrap.Popover(popover)
     })
@@ -35,24 +36,24 @@
       .toast('show')
 
     // Demos within modals
-    var tooltipTestList = document.querySelectorAll('.tooltip-test')
+    var tooltipTestList = [].slice.call(document.querySelectorAll('.tooltip-test'))
     tooltipTestList.forEach(function (tooltip) {
       new bootstrap.Tooltip(tooltip)
     })
 
-    var popoverTestList = document.querySelectorAll('.popover-test')
+    var popoverTestList = [].slice.call(document.querySelectorAll('.popover-test'))
     popoverTestList.forEach(function (popover) {
       new bootstrap.Popover(popover)
     })
 
     // Indeterminate checkbox example
-    var indeterminateCheckboxList = document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]')
+    var indeterminateCheckboxList = [].slice.call(document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]'))
     indeterminateCheckboxList.forEach(function (checkbox) {
       checkbox.indeterminate = true
     })
 
     // Disable empty links in docs examples
-    var emptyLinkList = document.querySelectorAll('.bd-content [href="#"]')
+    var emptyLinkList = [].slice.call(document.querySelectorAll('.bd-content [href="#"]'))
     emptyLinkList.forEach(function (link) {
       link.addEventListener('click', function (e) {
         e.preventDefault()
@@ -77,7 +78,7 @@
     }
 
     // Activate animated progress bar
-    var animatedProgressBarList = document.querySelectorAll('.bd-toggle-animated-progress > .progress-bar-striped')
+    var animatedProgressBarList = [].slice.call(document.querySelectorAll('.bd-toggle-animated-progress > .progress-bar-striped'))
     animatedProgressBarList.forEach(function (progressBar) {
       progressBar.addEventListener('click', function () {
         if (progressBar.classList.contains('progress-bar-animated')) {
@@ -89,9 +90,9 @@
     })
 
     // Insert copy to clipboard button before .highlight
-    var hightList = [].slice.call(document.querySelectorAll('figure.highlight, div.highlight'))
     var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard">Copy</button></div>'
-    hightList.forEach(function (element) {
+    var highList = [].slice.call(document.querySelectorAll('figure.highlight, div.highlight'))
+    highList.forEach(function (element) {
       element.insertAdjacentHTML('beforebegin', btnHtml)
     })