Skip to content

Commit 5ad2121

Browse files
authored
Remove DOMContentLoaded. (#28337)
There's no reason for us to wait here.
1 parent 5328d0d commit 5ad2121

File tree

5 files changed

+213
-223
lines changed

5 files changed

+213
-223
lines changed

js/tests/visual/carousel.html

+11-12
Original file line numberDiff line numberDiff line change
@@ -54,19 +54,18 @@ <h1>Carousel <small>Bootstrap Visual Test</small></h1>
5454
<script src="../../dist/util.js"></script>
5555
<script src="../../dist/carousel.js"></script>
5656
<script>
57-
document.addEventListener('DOMContentLoaded', function () {
58-
var t0, t1;
59-
var carousel = document.getElementById('carousel-example-generic')
57+
var t0
58+
var t1
59+
var carousel = document.getElementById('carousel-example-generic')
6060

61-
// Test to show that the carousel doesn't slide when the current tab isn't visible
62-
// Test to show that transition-duration can be changed with css
63-
carousel.addEventListener('slid.bs.carousel', function (event) {
64-
t1 = performance.now()
65-
console.log('transition-duration took ' + (t1 - t0) + 'ms, slid at ', event.timeStamp)
66-
})
67-
carousel.addEventListener('slide.bs.carousel', function () {
68-
t0 = performance.now()
69-
})
61+
// Test to show that the carousel doesn't slide when the current tab isn't visible
62+
// Test to show that transition-duration can be changed with css
63+
carousel.addEventListener('slid.bs.carousel', function (event) {
64+
t1 = performance.now()
65+
console.log('transition-duration took ' + (t1 - t0) + 'ms, slid at ', event.timeStamp)
66+
})
67+
carousel.addEventListener('slide.bs.carousel', function () {
68+
t0 = performance.now()
7069
})
7170
</script>
7271
</body>

js/tests/visual/modal.html

+61-64
Original file line numberDiff line numberDiff line change
@@ -217,86 +217,83 @@ <h4 class="modal-title" id="slowModalLabel">Lorem slowly</h4>
217217
<script src="../../dist/tooltip.js"></script>
218218
<script src="../../dist/popover.js"></script>
219219
<script>
220+
var ffBugTestResult = document.getElementById('ff-bug-test-result')
220221
var firefoxTestDone = false
221-
document.addEventListener('DOMContentLoaded', function () {
222-
var ffBugTestResult = document.getElementById('ff-bug-test-result')
223222

224-
function reportFirefoxTestResult(result) {
225-
if (!firefoxTestDone) {
226-
ffBugTestResult.classList
227-
.add(result ? 'text-success' : 'text-danger')
228-
229-
ffBugTestResult.innerHTML = result ? 'PASS' : 'FAIL'
230-
}
223+
function reportFirefoxTestResult(result) {
224+
if (!firefoxTestDone) {
225+
ffBugTestResult.classList.add(result ? 'text-success' : 'text-danger')
226+
ffBugTestResult.innerHTML = result ? 'PASS' : 'FAIL'
231227
}
228+
}
232229

233-
[].slice.call(document.querySelectorAll('[data-toggle="popover"]'))
234-
.forEach(function (popover) {
235-
new Popover(popover)
236-
})
237-
238-
var tooltipList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
239-
tooltipList.forEach(function (tooltip) {
240-
new Tooltip(tooltip)
241-
})
242-
243-
var tallToggle = document.getElementById('tall-toggle')
244-
var tall = document.getElementById('tall')
245-
tallToggle.addEventListener('click', function () {
246-
if (tall.style.display === 'none') {
247-
tall.style.display = 'block'
248-
} else {
249-
tall.style.display = 'none'
250-
}
230+
[].slice.call(document.querySelectorAll('[data-toggle="popover"]'))
231+
.forEach(function (popover) {
232+
new Popover(popover)
251233
})
252234

253-
var ffBugInput = document.getElementById('ff-bug-input')
254-
var firefoxModal = document.getElementById('firefoxModal')
255-
function handlerClickFfBugInput() {
256-
firefoxModal.addEventListener('focus', reportFirefoxTestResult.bind(false))
257-
ffBugInput.addEventListener('focus', reportFirefoxTestResult.bind(true))
258-
ffBugInput.removeEventListener('focus', handlerClickFfBugInput)
235+
var tooltipList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
236+
tooltipList.forEach(function (tooltip) {
237+
new Tooltip(tooltip)
238+
})
239+
240+
var tallToggle = document.getElementById('tall-toggle')
241+
var tall = document.getElementById('tall')
242+
tallToggle.addEventListener('click', function () {
243+
if (tall.style.display === 'none') {
244+
tall.style.display = 'block'
245+
} else {
246+
tall.style.display = 'none'
259247
}
260-
ffBugInput.addEventListener('focus', handlerClickFfBugInput)
248+
})
261249

262-
var btnPreventModal = document.getElementById('btnPreventModal')
263-
var modalFf = new Modal(firefoxModal)
250+
var ffBugInput = document.getElementById('ff-bug-input')
251+
var firefoxModal = document.getElementById('firefoxModal')
252+
function handlerClickFfBugInput() {
253+
firefoxModal.addEventListener('focus', reportFirefoxTestResult.bind(false))
254+
ffBugInput.addEventListener('focus', reportFirefoxTestResult.bind(true))
255+
ffBugInput.removeEventListener('focus', handlerClickFfBugInput)
256+
}
257+
ffBugInput.addEventListener('focus', handlerClickFfBugInput)
264258

265-
btnPreventModal.addEventListener('click', function () {
266-
function shownFirefoxModal() {
267-
modalFf.hide()
268-
firefoxModal.removeEventListener('shown.bs.modal', hideFirefoxModal)
269-
}
259+
var btnPreventModal = document.getElementById('btnPreventModal')
260+
var modalFf = new Modal(firefoxModal)
270261

271-
function hideFirefoxModal(event) {
272-
event.preventDefault()
273-
firefoxModal.removeEventListener('hide.bs.modal', hideFirefoxModal)
262+
btnPreventModal.addEventListener('click', function () {
263+
function shownFirefoxModal() {
264+
modalFf.hide()
265+
firefoxModal.removeEventListener('shown.bs.modal', hideFirefoxModal)
266+
}
267+
268+
function hideFirefoxModal(event) {
269+
event.preventDefault()
270+
firefoxModal.removeEventListener('hide.bs.modal', hideFirefoxModal)
274271

275-
if (modalFf._isTransitioning) {
276-
console.error('Modal plugin should not set _isTransitioning when hide event is prevented')
277-
} else {
278-
console.log('Test passed')
279-
modalFf.hide() // work as expected
280-
}
272+
if (modalFf._isTransitioning) {
273+
console.error('Modal plugin should not set _isTransitioning when hide event is prevented')
274+
} else {
275+
console.log('Test passed')
276+
modalFf.hide() // work as expected
281277
}
278+
}
282279

283-
firefoxModal.addEventListener('shown.bs.modal', shownFirefoxModal)
284-
firefoxModal.addEventListener('hide.bs.modal', hideFirefoxModal)
285-
modalFf.show()
286-
})
280+
firefoxModal.addEventListener('shown.bs.modal', shownFirefoxModal)
281+
firefoxModal.addEventListener('hide.bs.modal', hideFirefoxModal)
282+
modalFf.show()
283+
})
287284

288-
// Test transition duration
289-
var t0, t1;
290-
var slowModal = document.getElementById('slowModal')
285+
// Test transition duration
286+
var t0
287+
var t1
288+
var slowModal = document.getElementById('slowModal')
291289

292-
slowModal.addEventListener('shown.bs.modal', function () {
293-
t1 = performance.now()
294-
console.log('transition-duration took ' + (t1 - t0) + 'ms.')
295-
})
290+
slowModal.addEventListener('shown.bs.modal', function () {
291+
t1 = performance.now()
292+
console.log('transition-duration took ' + (t1 - t0) + 'ms.')
293+
})
296294

297-
slowModal.addEventListener('show.bs.modal', function () {
298-
t0 = performance.now()
299-
})
295+
slowModal.addEventListener('show.bs.modal', function () {
296+
t0 = performance.now()
300297
})
301298
</script>
302299
</body>

js/tests/visual/popover.html

+4-6
Original file line numberDiff line numberDiff line change
@@ -41,12 +41,10 @@ <h1>Popover <small>Bootstrap Visual Test</small></h1>
4141
<script src="../../dist/tooltip.js"></script>
4242
<script src="../../dist/popover.js"></script>
4343
<script>
44-
document.addEventListener('DOMContentLoaded', function () {
45-
[].slice.call(document.querySelectorAll('[data-toggle="popover"]'))
46-
.forEach(function (popover) {
47-
new Popover(popover)
48-
})
49-
})
44+
[].slice.call(document.querySelectorAll('[data-toggle="popover"]'))
45+
.forEach(function (popover) {
46+
new Popover(popover)
47+
})
5048
</script>
5149
</body>
5250
</html>

js/tests/visual/tooltip.html

+27-29
Original file line numberDiff line numberDiff line change
@@ -80,40 +80,38 @@ <h1>Tooltip <small>Bootstrap Visual Test</small></h1>
8080
<script src="../../dist/dom/selectorEngine.js"></script>
8181
<script src="../../dist/tooltip.js"></script>
8282
<script>
83-
document.addEventListener('DOMContentLoaded', function () {
84-
if (typeof document.body.attachShadow === 'function') {
85-
var shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' })
86-
shadowRoot.innerHTML =
87-
'<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top in a shadow dom">' +
88-
' Tooltip on top in a shadow dom' +
89-
'</button>' +
90-
'<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">' +
91-
' Tooltip on top in a shadow dom' +
92-
'</button>'
83+
if (typeof document.body.attachShadow === 'function') {
84+
var shadowRoot = document.getElementById('shadow').attachShadow({ mode: 'open' })
85+
shadowRoot.innerHTML =
86+
'<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top in a shadow dom">' +
87+
' Tooltip on top in a shadow dom' +
88+
'</button>' +
89+
'<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">' +
90+
' Tooltip on top in a shadow dom' +
91+
'</button>'
9392

94-
var firstChildTooltip = new Tooltip(shadowRoot.firstChild)
95-
var secondChildTooltip = new Tooltip(shadowRoot.getElementById('secondTooltip'), {
96-
container: shadowRoot
97-
})
98-
}
99-
100-
[].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
101-
.forEach(function (tooltip) {
102-
new Tooltip(tooltip)
103-
})
104-
105-
var tooltipElement = document.getElementById('tooltipElement')
106-
var tooltipElementInstance = new Tooltip(tooltipElement, {
107-
container: document.getElementById('customContainer')
93+
var firstChildTooltip = new Tooltip(shadowRoot.firstChild)
94+
var secondChildTooltip = new Tooltip(shadowRoot.getElementById('secondTooltip'), {
95+
container: shadowRoot
10896
})
97+
}
10998

110-
var target = document.getElementById('target')
111-
var targetTooltip = new Tooltip(target, {
112-
placement : 'top',
113-
trigger : 'manual'
99+
[].slice.call(document.querySelectorAll('[data-toggle="tooltip"]'))
100+
.forEach(function (tooltip) {
101+
new Tooltip(tooltip)
114102
})
115-
targetTooltip.show()
103+
104+
var tooltipElement = document.getElementById('tooltipElement')
105+
var tooltipElementInstance = new Tooltip(tooltipElement, {
106+
container: document.getElementById('customContainer')
107+
})
108+
109+
var target = document.getElementById('target')
110+
var targetTooltip = new Tooltip(target, {
111+
placement : 'top',
112+
trigger : 'manual'
116113
})
114+
targetTooltip.show()
117115
</script>
118116
</body>
119117
</html>

0 commit comments

Comments
 (0)