mirror of
https://github.com/twbs/bootstrap.git
synced 2024-12-01 13:24:25 +01:00
Fix TypeError when Bootstrap is included in head
(#32024)
* extend jquery after domContentLoaded event is fired * add unittest for util onDOMContentLoaded * wait for trigger jquery event after domContentLoaded * remove domcontentready from eventHandler * move istanbul ignore statements to correct line Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
parent
3a5f9f5cf0
commit
c21506d499
@ -7,6 +7,7 @@
|
||||
|
||||
import {
|
||||
getjQuery,
|
||||
onDOMContentLoaded,
|
||||
TRANSITION_END,
|
||||
emulateTransitionEnd,
|
||||
getElementFromSelector,
|
||||
@ -146,8 +147,6 @@ class Alert {
|
||||
*/
|
||||
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DISMISS, Alert.handleDismiss(new Alert()))
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
@ -155,15 +154,18 @@ const $ = getjQuery()
|
||||
* add .alert to jQuery only if jQuery is present
|
||||
*/
|
||||
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Alert.jQueryInterface
|
||||
$.fn[NAME].Constructor = Alert
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Alert.jQueryInterface
|
||||
onDOMContentLoaded(() => {
|
||||
const $ = getjQuery()
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Alert.jQueryInterface
|
||||
$.fn[NAME].Constructor = Alert
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Alert.jQueryInterface
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default Alert
|
||||
|
@ -5,7 +5,7 @@
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
import { getjQuery } from './util/index'
|
||||
import { getjQuery, onDOMContentLoaded } from './util/index'
|
||||
import Data from './dom/data'
|
||||
import EventHandler from './dom/event-handler'
|
||||
|
||||
@ -97,24 +97,26 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => {
|
||||
data.toggle()
|
||||
})
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
* add .button to jQuery only if jQuery is present
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Button.jQueryInterface
|
||||
$.fn[NAME].Constructor = Button
|
||||
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Button.jQueryInterface
|
||||
onDOMContentLoaded(() => {
|
||||
const $ = getjQuery()
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Button.jQueryInterface
|
||||
$.fn[NAME].Constructor = Button
|
||||
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Button.jQueryInterface
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default Button
|
||||
|
@ -7,6 +7,7 @@
|
||||
|
||||
import {
|
||||
getjQuery,
|
||||
onDOMContentLoaded,
|
||||
TRANSITION_END,
|
||||
emulateTransitionEnd,
|
||||
getElementFromSelector,
|
||||
@ -611,23 +612,25 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
|
||||
}
|
||||
})
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
* add .carousel to jQuery only if jQuery is present
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Carousel.jQueryInterface
|
||||
$.fn[NAME].Constructor = Carousel
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Carousel.jQueryInterface
|
||||
|
||||
onDOMContentLoaded(() => {
|
||||
const $ = getjQuery()
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Carousel.jQueryInterface
|
||||
$.fn[NAME].Constructor = Carousel
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Carousel.jQueryInterface
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default Carousel
|
||||
|
@ -7,6 +7,7 @@
|
||||
|
||||
import {
|
||||
getjQuery,
|
||||
onDOMContentLoaded,
|
||||
TRANSITION_END,
|
||||
emulateTransitionEnd,
|
||||
getSelectorFromElement,
|
||||
@ -408,23 +409,25 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
|
||||
})
|
||||
})
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
* add .collapse to jQuery only if jQuery is present
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Collapse.jQueryInterface
|
||||
$.fn[NAME].Constructor = Collapse
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Collapse.jQueryInterface
|
||||
|
||||
onDOMContentLoaded(() => {
|
||||
const $ = getjQuery()
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Collapse.jQueryInterface
|
||||
$.fn[NAME].Constructor = Collapse
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Collapse.jQueryInterface
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default Collapse
|
||||
|
@ -14,7 +14,6 @@ import { defaultPreventedPreservedOnDispatch } from './polyfill'
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const $ = getjQuery()
|
||||
const namespaceRegex = /[^.]*(?=\..*)\.|.*/
|
||||
const stripNameRegex = /\..*/
|
||||
const stripUidRegex = /::\d+$/
|
||||
@ -272,6 +271,7 @@ const EventHandler = {
|
||||
return null
|
||||
}
|
||||
|
||||
const $ = getjQuery()
|
||||
const typeEvent = event.replace(stripNameRegex, '')
|
||||
const inNamespace = event !== typeEvent
|
||||
const isNative = nativeEvents.indexOf(typeEvent) > -1
|
||||
|
@ -7,6 +7,7 @@
|
||||
|
||||
import {
|
||||
getjQuery,
|
||||
onDOMContentLoaded,
|
||||
getElementFromSelector,
|
||||
isElement,
|
||||
isVisible,
|
||||
@ -512,23 +513,25 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
|
||||
})
|
||||
EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_FORM_CHILD, e => e.stopPropagation())
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
* add .dropdown to jQuery only if jQuery is present
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Dropdown.jQueryInterface
|
||||
$.fn[NAME].Constructor = Dropdown
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Dropdown.jQueryInterface
|
||||
|
||||
onDOMContentLoaded(() => {
|
||||
const $ = getjQuery()
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Dropdown.jQueryInterface
|
||||
$.fn[NAME].Constructor = Dropdown
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Dropdown.jQueryInterface
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default Dropdown
|
||||
|
@ -7,6 +7,7 @@
|
||||
|
||||
import {
|
||||
getjQuery,
|
||||
onDOMContentLoaded,
|
||||
TRANSITION_END,
|
||||
emulateTransitionEnd,
|
||||
getElementFromSelector,
|
||||
@ -607,23 +608,25 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
|
||||
data.show(this)
|
||||
})
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
* add .modal to jQuery only if jQuery is present
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Modal.jQueryInterface
|
||||
$.fn[NAME].Constructor = Modal
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Modal.jQueryInterface
|
||||
|
||||
onDOMContentLoaded(() => {
|
||||
const $ = getjQuery()
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Modal.jQueryInterface
|
||||
$.fn[NAME].Constructor = Modal
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Modal.jQueryInterface
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default Modal
|
||||
|
@ -5,7 +5,7 @@
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
import { getjQuery } from './util/index'
|
||||
import { getjQuery, onDOMContentLoaded } from './util/index'
|
||||
import Data from './dom/data'
|
||||
import SelectorEngine from './dom/selector-engine'
|
||||
import Tooltip from './tooltip'
|
||||
@ -167,22 +167,24 @@ class Popover extends Tooltip {
|
||||
}
|
||||
}
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Popover.jQueryInterface
|
||||
$.fn[NAME].Constructor = Popover
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Popover.jQueryInterface
|
||||
|
||||
onDOMContentLoaded(() => {
|
||||
const $ = getjQuery()
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Popover.jQueryInterface
|
||||
$.fn[NAME].Constructor = Popover
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Popover.jQueryInterface
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default Popover
|
||||
|
@ -7,6 +7,7 @@
|
||||
|
||||
import {
|
||||
getjQuery,
|
||||
onDOMContentLoaded,
|
||||
getSelectorFromElement,
|
||||
getUID,
|
||||
isElement,
|
||||
@ -317,22 +318,24 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => {
|
||||
.forEach(spy => new ScrollSpy(spy, Manipulator.getDataAttributes(spy)))
|
||||
})
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = ScrollSpy.jQueryInterface
|
||||
$.fn[NAME].Constructor = ScrollSpy
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return ScrollSpy.jQueryInterface
|
||||
|
||||
onDOMContentLoaded(() => {
|
||||
const $ = getjQuery()
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = ScrollSpy.jQueryInterface
|
||||
$.fn[NAME].Constructor = ScrollSpy
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return ScrollSpy.jQueryInterface
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default ScrollSpy
|
||||
|
@ -7,6 +7,7 @@
|
||||
|
||||
import {
|
||||
getjQuery,
|
||||
onDOMContentLoaded,
|
||||
TRANSITION_END,
|
||||
emulateTransitionEnd,
|
||||
getElementFromSelector,
|
||||
@ -235,23 +236,25 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
|
||||
data.show()
|
||||
})
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
* add .tab to jQuery only if jQuery is present
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Tab.jQueryInterface
|
||||
$.fn[NAME].Constructor = Tab
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Tab.jQueryInterface
|
||||
|
||||
onDOMContentLoaded(() => {
|
||||
const $ = getjQuery()
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Tab.jQueryInterface
|
||||
$.fn[NAME].Constructor = Tab
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Tab.jQueryInterface
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default Tab
|
||||
|
@ -7,6 +7,7 @@
|
||||
|
||||
import {
|
||||
getjQuery,
|
||||
onDOMContentLoaded,
|
||||
TRANSITION_END,
|
||||
emulateTransitionEnd,
|
||||
getTransitionDurationFromElement,
|
||||
@ -213,23 +214,25 @@ class Toast {
|
||||
}
|
||||
}
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
* add .toast to jQuery only if jQuery is present
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Toast.jQueryInterface
|
||||
$.fn[NAME].Constructor = Toast
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Toast.jQueryInterface
|
||||
|
||||
onDOMContentLoaded(() => {
|
||||
const $ = getjQuery()
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Toast.jQueryInterface
|
||||
$.fn[NAME].Constructor = Toast
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Toast.jQueryInterface
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default Toast
|
||||
|
@ -7,6 +7,7 @@
|
||||
|
||||
import {
|
||||
getjQuery,
|
||||
onDOMContentLoaded,
|
||||
TRANSITION_END,
|
||||
emulateTransitionEnd,
|
||||
findShadowRoot,
|
||||
@ -793,23 +794,25 @@ class Tooltip {
|
||||
}
|
||||
}
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
* add .tooltip to jQuery only if jQuery is present
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Tooltip.jQueryInterface
|
||||
$.fn[NAME].Constructor = Tooltip
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Tooltip.jQueryInterface
|
||||
|
||||
onDOMContentLoaded(() => {
|
||||
const $ = getjQuery()
|
||||
/* istanbul ignore if */
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Tooltip.jQueryInterface
|
||||
$.fn[NAME].Constructor = Tooltip
|
||||
$.fn[NAME].noConflict = () => {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT
|
||||
return Tooltip.jQueryInterface
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export default Tooltip
|
||||
|
@ -180,8 +180,15 @@ const getjQuery = () => {
|
||||
return null
|
||||
}
|
||||
|
||||
const onDOMContentLoaded = callback => {
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', callback)
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
export {
|
||||
getjQuery,
|
||||
TRANSITION_END,
|
||||
getUID,
|
||||
getSelectorFromElement,
|
||||
@ -194,5 +201,7 @@ export {
|
||||
isVisible,
|
||||
findShadowRoot,
|
||||
noop,
|
||||
reflow
|
||||
reflow,
|
||||
getjQuery,
|
||||
onDOMContentLoaded
|
||||
}
|
||||
|
@ -394,4 +394,23 @@ describe('Util', () => {
|
||||
expect(Util.getjQuery()).toEqual(null)
|
||||
})
|
||||
})
|
||||
|
||||
describe('onDOMContentLoaded', () => {
|
||||
it('should execute callback when DOMContentLoaded is fired', () => {
|
||||
const spy = jasmine.createSpy()
|
||||
spyOnProperty(document, 'readyState').and.returnValue('loading')
|
||||
Util.onDOMContentLoaded(spy)
|
||||
window.document.dispatchEvent(new Event('DOMContentLoaded', {
|
||||
bubbles: true,
|
||||
cancelable: true
|
||||
}))
|
||||
expect(spy).toHaveBeenCalled()
|
||||
})
|
||||
|
||||
it('should execute callback if readyState is not "loading"', () => {
|
||||
const spy = jasmine.createSpy()
|
||||
Util.onDOMContentLoaded(spy)
|
||||
expect(spy).toHaveBeenCalled()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user