Remove DOMContentLoaded. (#28337)

There's no reason for us to wait here.

js/tests/visual/carousel.html

@@ -54,19 +54,18 @@
     <script src="../../dist/util.js"></script>
     <script src="../../dist/carousel.js"></script>
     <script>
-      document.addEventListener('DOMContentLoaded', function () {
+      var t0
-        var t0, t1;
+      var t1
-        var carousel = document.getElementById('carousel-example-generic')
+      var carousel = document.getElementById('carousel-example-generic')
 
-        // Test to show that the carousel doesn't slide when the current tab isn't visible
+      // Test to show that the carousel doesn't slide when the current tab isn't visible
-        // Test to show that transition-duration can be changed with css
+      // Test to show that transition-duration can be changed with css
-        carousel.addEventListener('slid.bs.carousel', function (event) {
+      carousel.addEventListener('slid.bs.carousel', function (event) {
-          t1 = performance.now()
+        t1 = performance.now()
-          console.log('transition-duration took ' + (t1 - t0) + 'ms, slid at ', event.timeStamp)
+        console.log('transition-duration took ' + (t1 - t0) + 'ms, slid at ', event.timeStamp)
-        })
+      })
-        carousel.addEventListener('slide.bs.carousel', function () {
+      carousel.addEventListener('slide.bs.carousel', function () {
-          t0 = performance.now()
+        t0 = performance.now()
-        })
       })
     </script>
   </body>

js/tests/visual/modal.html

@@ -217,86 +217,83 @@
     <script src="../../dist/tooltip.js"></script>
     <script src="../../dist/popover.js"></script>
     <script>
+      var ffBugTestResult = document.getElementById('ff-bug-test-result')
       var firefoxTestDone = false
-      document.addEventListener('DOMContentLoaded', function () {
-        var ffBugTestResult = document.getElementById('ff-bug-test-result')
 
-        function reportFirefoxTestResult(result) {
+      function reportFirefoxTestResult(result) {
-          if (!firefoxTestDone) {
+        if (!firefoxTestDone) {
-            ffBugTestResult.classList
+          ffBugTestResult.classList.add(result ? 'text-success' : 'text-danger')
-              .add(result ? 'text-success' : 'text-danger')
+          ffBugTestResult.innerHTML = result ? 'PASS' : 'FAIL'
+        }
+      }
 
-            ffBugTestResult.innerHTML = result ? 'PASS' : 'FAIL'
+      [].slice.call(document.querySelectorAll('[data-toggle="popover"]'))
-          }
+        .forEach(function (popover) {
+          new Popover(popover)
+        })
+
+      var tooltipList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
+      tooltipList.forEach(function (tooltip) {
+        new Tooltip(tooltip)
+      })
+
+      var tallToggle = document.getElementById('tall-toggle')
+      var tall = document.getElementById('tall')
+      tallToggle.addEventListener('click', function () {
+        if (tall.style.display === 'none') {
+          tall.style.display = 'block'
+        } else {
+          tall.style.display = 'none'
+        }
+      })
+
+      var ffBugInput = document.getElementById('ff-bug-input')
+      var firefoxModal = document.getElementById('firefoxModal')
+      function handlerClickFfBugInput() {
+        firefoxModal.addEventListener('focus', reportFirefoxTestResult.bind(false))
+        ffBugInput.addEventListener('focus', reportFirefoxTestResult.bind(true))
+        ffBugInput.removeEventListener('focus', handlerClickFfBugInput)
+      }
+      ffBugInput.addEventListener('focus', handlerClickFfBugInput)
+
+      var btnPreventModal = document.getElementById('btnPreventModal')
+      var modalFf = new Modal(firefoxModal)
+
+      btnPreventModal.addEventListener('click', function () {
+        function shownFirefoxModal() {
+          modalFf.hide()
+          firefoxModal.removeEventListener('shown.bs.modal', hideFirefoxModal)
         }
 
-        [].slice.call(document.querySelectorAll('[data-toggle="popover"]'))
+        function hideFirefoxModal(event) {
-          .forEach(function (popover) {
+          event.preventDefault()
-            new Popover(popover)
+          firefoxModal.removeEventListener('hide.bs.modal', hideFirefoxModal)
-          })
 
-        var tooltipList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
+          if (modalFf._isTransitioning) {
-        tooltipList.forEach(function (tooltip) {
+            console.error('Modal plugin should not set _isTransitioning when hide event is prevented')
-            new Tooltip(tooltip)
-          })
-
-        var tallToggle = document.getElementById('tall-toggle')
-        var tall = document.getElementById('tall')
-        tallToggle.addEventListener('click', function () {
-          if (tall.style.display === 'none') {
-            tall.style.display = 'block'
           } else {
-            tall.style.display = 'none'
+            console.log('Test passed')
+            modalFf.hide() // work as expected
           }
-        })
-
-        var ffBugInput = document.getElementById('ff-bug-input')
-        var firefoxModal = document.getElementById('firefoxModal')
-        function handlerClickFfBugInput() {
-          firefoxModal.addEventListener('focus', reportFirefoxTestResult.bind(false))
-          ffBugInput.addEventListener('focus', reportFirefoxTestResult.bind(true))
-          ffBugInput.removeEventListener('focus', handlerClickFfBugInput)
         }
-        ffBugInput.addEventListener('focus', handlerClickFfBugInput)
 
-        var btnPreventModal = document.getElementById('btnPreventModal')
+        firefoxModal.addEventListener('shown.bs.modal', shownFirefoxModal)
-        var modalFf = new Modal(firefoxModal)
+        firefoxModal.addEventListener('hide.bs.modal', hideFirefoxModal)
+        modalFf.show()
+      })
 
-        btnPreventModal.addEventListener('click', function () {
+      // Test transition duration
-          function shownFirefoxModal() {
+      var t0
-            modalFf.hide()
+      var t1
-            firefoxModal.removeEventListener('shown.bs.modal', hideFirefoxModal)
+      var slowModal = document.getElementById('slowModal')
-          }
 
-          function hideFirefoxModal(event) {
+      slowModal.addEventListener('shown.bs.modal', function () {
-            event.preventDefault()
+        t1 = performance.now()
-            firefoxModal.removeEventListener('hide.bs.modal', hideFirefoxModal)
+        console.log('transition-duration took ' + (t1 - t0) + 'ms.')
+      })
 
-            if (modalFf._isTransitioning) {
+      slowModal.addEventListener('show.bs.modal', function () {
-              console.error('Modal plugin should not set _isTransitioning when hide event is prevented')
+        t0 = performance.now()
-            } else {
-              console.log('Test passed')
-              modalFf.hide() // work as expected
-            }
-          }
-
-          firefoxModal.addEventListener('shown.bs.modal', shownFirefoxModal)
-          firefoxModal.addEventListener('hide.bs.modal', hideFirefoxModal)
-          modalFf.show()
-        })
-
-        // Test transition duration
-        var t0, t1;
-        var slowModal = document.getElementById('slowModal')
-
-        slowModal.addEventListener('shown.bs.modal', function () {
-          t1 = performance.now()
-          console.log('transition-duration took ' + (t1 - t0) + 'ms.')
-        })
-
-        slowModal.addEventListener('show.bs.modal', function () {
-          t0 = performance.now()
-        })
       })
     </script>
   </body>

js/tests/visual/popover.html

@@ -41,12 +41,10 @@
     <script src="../../dist/tooltip.js"></script>
     <script src="../../dist/popover.js"></script>
     <script>
-      document.addEventListener('DOMContentLoaded', function () {
+      [].slice.call(document.querySelectorAll('[data-toggle="popover"]'))
-        [].slice.call(document.querySelectorAll('[data-toggle="popover"]'))
+        .forEach(function (popover) {
-          .forEach(function (popover) {
+          new Popover(popover)
-            new Popover(popover)
+        })
-          })
-      })
     </script>
   </body>
 </html>

js/tests/visual/tooltip.html

@@ -80,40 +80,38 @@
     <script src="../../dist/dom/selectorEngine.js"></script>
     <script src="../../dist/tooltip.js"></script>
     <script>
-      document.addEventListener('DOMContentLoaded', function () {
+      if (typeof document.body.attachShadow === 'function') {
-        if (typeof document.body.attachShadow === 'function') {
+        var shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' })
-          var shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' })
+        shadowRoot.innerHTML =
-          shadowRoot.innerHTML =
+          '<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top in a shadow dom">' +
-            '<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top in a shadow dom">' +
+          '  Tooltip on top in a shadow dom' +
-            '  Tooltip on top in a shadow dom' +
+          '</button>' +
-            '</button>' +
+          '<button id="secondTooltip" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top in a shadow dom with container option">' +
-            '<button id="secondTooltip" type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top in a shadow dom with container option">' +
+          '  Tooltip on top in a shadow dom' +
-            '  Tooltip on top in a shadow dom' +
+          '</button>'
-            '</button>'
 
-          var firstChildTooltip = new Tooltip(shadowRoot.firstChild)
+        var firstChildTooltip = new Tooltip(shadowRoot.firstChild)
-          var secondChildTooltip = new Tooltip(shadowRoot.getElementById('secondTooltip'), {
+        var secondChildTooltip = new Tooltip(shadowRoot.getElementById('secondTooltip'), {
-            container: shadowRoot
+          container: shadowRoot
-          })
+        })
-        }
+      }
 
-        [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
+      [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
-          .forEach(function (tooltip) {
+        .forEach(function (tooltip) {
-            new Tooltip(tooltip)
+          new Tooltip(tooltip)
-          })
-
-        var tooltipElement = document.getElementById('tooltipElement')
-        var tooltipElementInstance = new Tooltip(tooltipElement, {
-          container: document.getElementById('customContainer')
         })
 
-        var target = document.getElementById('target')
+      var tooltipElement = document.getElementById('tooltipElement')
-        var targetTooltip = new Tooltip(target, {
+      var tooltipElementInstance = new Tooltip(tooltipElement, {
-          placement : 'top',
+        container: document.getElementById('customContainer')
-          trigger : 'manual'
-        })
-        targetTooltip.show()
       })
+
+      var target = document.getElementById('target')
+      var targetTooltip = new Tooltip(target, {
+        placement : 'top',
+        trigger : 'manual'
+      })
+      targetTooltip.show()
     </script>
   </body>
 </html>

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

@@ -15,143 +15,141 @@
 (function () {
   'use strict'
 
-  document.addEventListener('DOMContentLoaded', function () {
+  // Tooltip and popover demos
-    // Tooltip and popover demos
+  bootstrap.Util.makeArray(document.querySelectorAll('.tooltip-demo'))
-    bootstrap.Util.makeArray(document.querySelectorAll('.tooltip-demo'))
+    .forEach(function (tooltip) {
-      .forEach(function (tooltip) {
+      new bootstrap.Tooltip(tooltip, {
-        new bootstrap.Tooltip(tooltip, {
+        selector: '[data-toggle="tooltip"]'
-          selector: '[data-toggle="tooltip"]'
+      })
-        })
+    })
+
+  bootstrap.Util.makeArray(document.querySelectorAll('[data-toggle="popover"]'))
+    .forEach(function (popover) {
+      new bootstrap.Popover(popover)
+    })
+
+  bootstrap.Util.makeArray(document.querySelectorAll('.toast'))
+    .forEach(function (toastNode) {
+      var toast = new bootstrap.Toast(toastNode, {
+        autohide: false
       })
 
-    bootstrap.Util.makeArray(document.querySelectorAll('[data-toggle="popover"]'))
+      toast.show()
-      .forEach(function (popover) {
+    })
-        new bootstrap.Popover(popover)
+
+  // Demos within modals
+  bootstrap.Util.makeArray(document.querySelectorAll('.tooltip-test'))
+    .forEach(function (tooltip) {
+      new bootstrap.Tooltip(tooltip)
+    })
+
+  bootstrap.Util.makeArray(document.querySelectorAll('.popover-test'))
+    .forEach(function (popover) {
+      new bootstrap.Popover(popover)
+    })
+
+  // Indeterminate checkbox example
+  bootstrap.Util.makeArray(document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]'))
+    .forEach(function (checkbox) {
+      checkbox.indeterminate = true
+    })
+
+  // Disable empty links in docs examples
+  bootstrap.Util.makeArray(document.querySelectorAll('.bd-content [href="#"]'))
+    .forEach(function (link) {
+      link.addEventListener('click', function (e) {
+        e.preventDefault()
       })
+    })
 
-    bootstrap.Util.makeArray(document.querySelectorAll('.toast'))
+  // Modal relatedTarget demo
-      .forEach(function (toastNode) {
+  var exampleModal = document.getElementById('exampleModal')
-        var toast = new bootstrap.Toast(toastNode, {
+  if (exampleModal) {
-          autohide: false
+    exampleModal.addEventListener('show.bs.modal', function (event) {
-        })
+      var button = event.relatedTarget // Button that triggered the modal
+      var recipient = button.getAttribute('data-whatever') // Extract info from data-* attributes
 
-        toast.show()
+      // Update the modal's content.
+      var modalTitle = exampleModal.querySelector('.modal-title')
+      var modalBodyInput = exampleModal.querySelector('.modal-body input')
+
+      modalTitle.innerHTML = 'New message to ' + recipient
+      modalBodyInput.value = recipient
+    })
+  }
+
+  // Activate animated progress bar
+  bootstrap.Util.makeArray(document.querySelectorAll('.bd-toggle-animated-progress > .progress-bar-striped'))
+    .forEach(function (progressBar) {
+      progressBar.addEventListener('click', function () {
+        if (progressBar.classList.contains('progress-bar-animated')) {
+          progressBar.classList.remove('progress-bar-animated')
+        } else {
+          progressBar.classList.add('progress-bar-animated')
+        }
       })
+    })
 
-    // Demos within modals
+  // Insert copy to clipboard button before .highlight
-    bootstrap.Util.makeArray(document.querySelectorAll('.tooltip-test'))
+  var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard">Copy</button></div>'
-      .forEach(function (tooltip) {
+  bootstrap.Util.makeArray(document.querySelectorAll('figure.highlight, div.highlight'))
-        new bootstrap.Tooltip(tooltip)
+    .forEach(function (element) {
+      element.insertAdjacentHTML('beforebegin', btnHtml)
+    })
+
+  bootstrap.Util.makeArray(document.querySelectorAll('.btn-clipboard'))
+    .forEach(function (btn) {
+      var tooltipBtn = new bootstrap.Tooltip(btn)
+
+      btn.addEventListener('mouseleave', function () {
+        // Explicitly hide tooltip, since after clicking it remains
+        // focused (as it's a button), so tooltip would otherwise
+        // remain visible until focus is moved away
+        tooltipBtn.hide()
       })
+    })
 
-    bootstrap.Util.makeArray(document.querySelectorAll('.popover-test'))
+  var clipboard = new ClipboardJS('.btn-clipboard', {
-      .forEach(function (popover) {
+    target: function (trigger) {
-        new bootstrap.Popover(popover)
+      return trigger.parentNode.nextElementSibling
-      })
-
-    // Indeterminate checkbox example
-    bootstrap.Util.makeArray(document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]'))
-      .forEach(function (checkbox) {
-        checkbox.indeterminate = true
-      })
-
-    // Disable empty links in docs examples
-    bootstrap.Util.makeArray(document.querySelectorAll('.bd-content [href="#"]'))
-      .forEach(function (link) {
-        link.addEventListener('click', function (e) {
-          e.preventDefault()
-        })
-      })
-
-    // Modal relatedTarget demo
-    var exampleModal = document.getElementById('exampleModal')
-    if (exampleModal) {
-      exampleModal.addEventListener('show.bs.modal', function (event) {
-        var button = event.relatedTarget // Button that triggered the modal
-        var recipient = button.getAttribute('data-whatever') // Extract info from data-* attributes
-
-        // Update the modal's content.
-        var modalTitle = exampleModal.querySelector('.modal-title')
-        var modalBodyInput = exampleModal.querySelector('.modal-body input')
-
-        modalTitle.innerHTML = 'New message to ' + recipient
-        modalBodyInput.value = recipient
-      })
     }
-
-    // Activate animated progress bar
-    bootstrap.Util.makeArray(document.querySelectorAll('.bd-toggle-animated-progress > .progress-bar-striped'))
-      .forEach(function (progressBar) {
-        progressBar.addEventListener('click', function () {
-          if (progressBar.classList.contains('progress-bar-animated')) {
-            progressBar.classList.remove('progress-bar-animated')
-          } else {
-            progressBar.classList.add('progress-bar-animated')
-          }
-        })
-      })
-
-    // Insert copy to clipboard button before .highlight
-    var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard">Copy</button></div>'
-    bootstrap.Util.makeArray(document.querySelectorAll('figure.highlight, div.highlight'))
-      .forEach(function (element) {
-        element.insertAdjacentHTML('beforebegin', btnHtml)
-      })
-
-    bootstrap.Util.makeArray(document.querySelectorAll('.btn-clipboard'))
-      .forEach(function (btn) {
-        var tooltipBtn = new bootstrap.Tooltip(btn)
-
-        btn.addEventListener('mouseleave', function () {
-          // Explicitly hide tooltip, since after clicking it remains
-          // focused (as it's a button), so tooltip would otherwise
-          // remain visible until focus is moved away
-          tooltipBtn.hide()
-        })
-      })
-
-    var clipboard = new ClipboardJS('.btn-clipboard', {
-      target: function (trigger) {
-        return trigger.parentNode.nextElementSibling
-      }
-    })
-
-    clipboard.on('success', function (e) {
-      var tooltipBtn = bootstrap.Tooltip._getInstance(e.trigger)
-
-      e.trigger.setAttribute('title', 'Copied!')
-      tooltipBtn._fixTitle()
-      tooltipBtn.show()
-
-      e.trigger.setAttribute('title', 'Copy to clipboard')
-      tooltipBtn._fixTitle()
-      e.clearSelection()
-    })
-
-    clipboard.on('error', function (e) {
-      var modifierKey = /Mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
-      var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
-      var tooltipBtn = bootstrap.Tooltip._getInstance(e.trigger)
-
-      e.trigger.setAttribute('title', fallbackMsg)
-      tooltipBtn._fixTitle()
-      tooltipBtn.show()
-
-      e.trigger.setAttribute('title', 'Copy to clipboard')
-      tooltipBtn._fixTitle()
-    })
-
-    anchors.options = {
-      icon: '#'
-    }
-    anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
-
-    // Wrap inner
-    bootstrap.Util.makeArray(document.querySelectorAll('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5'))
-      .forEach(function (hEl) {
-        hEl.innerHTML = '<span class="bd-content-title">' + hEl.innerHTML + '</span>'
-      })
-
-    bsCustomFileInput.init()
   })
+
+  clipboard.on('success', function (e) {
+    var tooltipBtn = bootstrap.Tooltip._getInstance(e.trigger)
+
+    e.trigger.setAttribute('title', 'Copied!')
+    tooltipBtn._fixTitle()
+    tooltipBtn.show()
+
+    e.trigger.setAttribute('title', 'Copy to clipboard')
+    tooltipBtn._fixTitle()
+    e.clearSelection()
+  })
+
+  clipboard.on('error', function (e) {
+    var modifierKey = /Mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
+    var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
+    var tooltipBtn = bootstrap.Tooltip._getInstance(e.trigger)
+
+    e.trigger.setAttribute('title', fallbackMsg)
+    tooltipBtn._fixTitle()
+    tooltipBtn.show()
+
+    e.trigger.setAttribute('title', 'Copy to clipboard')
+    tooltipBtn._fixTitle()
+  })
+
+  anchors.options = {
+    icon: '#'
+  }
+  anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
+
+  // Wrap inner
+  bootstrap.Util.makeArray(document.querySelectorAll('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5'))
+    .forEach(function (hEl) {
+      hEl.innerHTML = '<span class="bd-content-title">' + hEl.innerHTML + '</span>'
+    })
+
+  bsCustomFileInput.init()
 }())