mirror of
https://github.com/twbs/bootstrap.git
synced 2025-02-22 15:39:59 +00:00
add a way to disable jQuery detection
This commit is contained in:
parent
1ebb8e7d9b
commit
8b2b490f9b
@ -6,7 +6,7 @@
|
||||
*/
|
||||
|
||||
import {
|
||||
jQuery as $,
|
||||
getjQuery,
|
||||
TRANSITION_END,
|
||||
emulateTransitionEnd,
|
||||
getElementFromSelector,
|
||||
@ -165,6 +165,8 @@ class Alert {
|
||||
EventHandler
|
||||
.on(document, Event.CLICK_DATA_API, Selector.DISMISS, Alert.handleDismiss(new Alert()))
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
@ -173,7 +175,7 @@ EventHandler
|
||||
*/
|
||||
|
||||
/* istanbul ignore if */
|
||||
if (typeof $ !== 'undefined') {
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Alert.jQueryInterface
|
||||
$.fn[NAME].Constructor = Alert
|
||||
|
@ -5,7 +5,7 @@
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
import { jQuery as $ } from '../util/index'
|
||||
import { getjQuery } from '../util/index'
|
||||
import Data from '../dom/data'
|
||||
import EventHandler from '../dom/event-handler'
|
||||
import SelectorEngine from '../dom/selector-engine'
|
||||
@ -179,6 +179,8 @@ EventHandler.on(document, Event.BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, even
|
||||
}
|
||||
})
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
@ -186,7 +188,7 @@ EventHandler.on(document, Event.BLUR_DATA_API, Selector.DATA_TOGGLE_CARROT, even
|
||||
* add .button to jQuery only if jQuery is present
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if (typeof $ !== 'undefined') {
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Button.jQueryInterface
|
||||
$.fn[NAME].Constructor = Button
|
||||
|
@ -6,7 +6,7 @@
|
||||
*/
|
||||
|
||||
import {
|
||||
jQuery as $,
|
||||
getjQuery,
|
||||
TRANSITION_END,
|
||||
emulateTransitionEnd,
|
||||
getElementFromSelector,
|
||||
@ -615,6 +615,8 @@ EventHandler.on(window, Event.LOAD_DATA_API, () => {
|
||||
}
|
||||
})
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
@ -622,7 +624,7 @@ EventHandler.on(window, Event.LOAD_DATA_API, () => {
|
||||
* add .carousel to jQuery only if jQuery is present
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if (typeof $ !== 'undefined') {
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Carousel.jQueryInterface
|
||||
$.fn[NAME].Constructor = Carousel
|
||||
|
@ -6,7 +6,7 @@
|
||||
*/
|
||||
|
||||
import {
|
||||
jQuery as $,
|
||||
getjQuery,
|
||||
TRANSITION_END,
|
||||
emulateTransitionEnd,
|
||||
getSelectorFromElement,
|
||||
@ -419,6 +419,8 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (
|
||||
})
|
||||
})
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
@ -426,7 +428,7 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (
|
||||
* add .collapse to jQuery only if jQuery is present
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if (typeof $ !== 'undefined') {
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Collapse.jQueryInterface
|
||||
$.fn[NAME].Constructor = Collapse
|
||||
|
@ -5,7 +5,7 @@
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
import { jQuery as $ } from '../util/index'
|
||||
import { getjQuery } from '../util/index'
|
||||
import { createCustomEvent, defaultPreventedPreservedOnDispatch } from './polyfill'
|
||||
|
||||
/**
|
||||
@ -14,6 +14,7 @@ import { createCustomEvent, defaultPreventedPreservedOnDispatch } from './polyfi
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
const $ = getjQuery()
|
||||
const namespaceRegex = /[^.]*(?=\..*)\.|.*/
|
||||
const stripNameRegex = /\..*/
|
||||
const keyEventRegex = /^key/
|
||||
@ -293,7 +294,7 @@ const EventHandler = {
|
||||
let defaultPrevented = false
|
||||
let evt = null
|
||||
|
||||
if (inNamespace && typeof $ !== 'undefined') {
|
||||
if (inNamespace && $) {
|
||||
jQueryEvent = $.Event(event, args)
|
||||
|
||||
$(element).trigger(jQueryEvent)
|
||||
|
@ -6,7 +6,7 @@
|
||||
*/
|
||||
|
||||
import {
|
||||
jQuery as $,
|
||||
getjQuery,
|
||||
getElementFromSelector,
|
||||
isElement,
|
||||
makeArray,
|
||||
@ -526,6 +526,8 @@ 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
|
||||
@ -533,7 +535,7 @@ EventHandler
|
||||
* add .dropdown to jQuery only if jQuery is present
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if (typeof $ !== 'undefined') {
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Dropdown.jQueryInterface
|
||||
$.fn[NAME].Constructor = Dropdown
|
||||
|
@ -6,7 +6,7 @@
|
||||
*/
|
||||
|
||||
import {
|
||||
jQuery as $,
|
||||
getjQuery,
|
||||
TRANSITION_END,
|
||||
emulateTransitionEnd,
|
||||
getElementFromSelector,
|
||||
@ -582,6 +582,8 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (
|
||||
data.show(this)
|
||||
})
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
@ -589,7 +591,7 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (
|
||||
* add .modal to jQuery only if jQuery is present
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if (typeof $ !== 'undefined') {
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Modal.jQueryInterface
|
||||
$.fn[NAME].Constructor = Modal
|
||||
|
@ -5,7 +5,7 @@
|
||||
* --------------------------------------------------------------------------
|
||||
*/
|
||||
|
||||
import { jQuery as $ } from '../util/index'
|
||||
import { getjQuery } from '../util/index'
|
||||
import Data from '../dom/data'
|
||||
import SelectorEngine from '../dom/selector-engine'
|
||||
import Tooltip from '../tooltip/tooltip'
|
||||
@ -173,13 +173,15 @@ class Popover extends Tooltip {
|
||||
}
|
||||
}
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if (typeof $ !== 'undefined') {
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Popover.jQueryInterface
|
||||
$.fn[NAME].Constructor = Popover
|
||||
|
@ -6,7 +6,7 @@
|
||||
*/
|
||||
|
||||
import {
|
||||
jQuery as $,
|
||||
getjQuery,
|
||||
getSelectorFromElement,
|
||||
getUID,
|
||||
makeArray,
|
||||
@ -336,13 +336,15 @@ EventHandler.on(window, Event.LOAD_DATA_API, () => {
|
||||
.forEach(spy => new ScrollSpy(spy, Manipulator.getDataAttributes(spy)))
|
||||
})
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
* ------------------------------------------------------------------------
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if (typeof $ !== 'undefined') {
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = ScrollSpy.jQueryInterface
|
||||
$.fn[NAME].Constructor = ScrollSpy
|
||||
|
@ -6,7 +6,7 @@
|
||||
*/
|
||||
|
||||
import {
|
||||
jQuery as $,
|
||||
getjQuery,
|
||||
TRANSITION_END,
|
||||
emulateTransitionEnd,
|
||||
getElementFromSelector,
|
||||
@ -242,6 +242,8 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (
|
||||
data.show()
|
||||
})
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
@ -249,7 +251,7 @@ EventHandler.on(document, Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (
|
||||
* add .tab to jQuery only if jQuery is present
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if (typeof $ !== 'undefined') {
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Tab.jQueryInterface
|
||||
$.fn[NAME].Constructor = Tab
|
||||
|
@ -6,7 +6,7 @@
|
||||
*/
|
||||
|
||||
import {
|
||||
jQuery as $,
|
||||
getjQuery,
|
||||
TRANSITION_END,
|
||||
emulateTransitionEnd,
|
||||
getTransitionDurationFromElement,
|
||||
@ -222,6 +222,8 @@ class Toast {
|
||||
}
|
||||
}
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
@ -229,7 +231,7 @@ class Toast {
|
||||
* add .toast to jQuery only if jQuery is present
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if (typeof $ !== 'undefined') {
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Toast.jQueryInterface
|
||||
$.fn[NAME].Constructor = Toast
|
||||
|
@ -6,7 +6,7 @@
|
||||
*/
|
||||
|
||||
import {
|
||||
jQuery as $,
|
||||
getjQuery,
|
||||
TRANSITION_END,
|
||||
emulateTransitionEnd,
|
||||
findShadowRoot,
|
||||
@ -798,6 +798,8 @@ class Tooltip {
|
||||
}
|
||||
}
|
||||
|
||||
const $ = getjQuery()
|
||||
|
||||
/**
|
||||
* ------------------------------------------------------------------------
|
||||
* jQuery
|
||||
@ -805,7 +807,7 @@ class Tooltip {
|
||||
* add .tooltip to jQuery only if jQuery is present
|
||||
*/
|
||||
/* istanbul ignore if */
|
||||
if (typeof $ !== 'undefined') {
|
||||
if ($) {
|
||||
const JQUERY_NO_CONFLICT = $.fn[NAME]
|
||||
$.fn[NAME] = Tooltip.jQueryInterface
|
||||
$.fn[NAME].Constructor = Tooltip
|
||||
|
@ -8,7 +8,6 @@
|
||||
const MAX_UID = 1000000
|
||||
const MILLISECONDS_MULTIPLIER = 1000
|
||||
const TRANSITION_END = 'transitionend'
|
||||
const { jQuery } = window
|
||||
|
||||
// Shoutout AngusCroll (https://goo.gl/pxwQGp)
|
||||
const toType = obj => ({}.toString.call(obj).match(/\s([a-z]+)/i)[1].toLowerCase())
|
||||
@ -176,8 +175,18 @@ const noop = () => function () {}
|
||||
|
||||
const reflow = element => element.offsetHeight
|
||||
|
||||
const getjQuery = () => {
|
||||
const { jQuery } = window
|
||||
|
||||
if (jQuery && !document.body.hasAttribute('data-no-jquery')) {
|
||||
return jQuery
|
||||
}
|
||||
|
||||
return null
|
||||
}
|
||||
|
||||
export {
|
||||
jQuery,
|
||||
getjQuery,
|
||||
TRANSITION_END,
|
||||
getUID,
|
||||
getSelectorFromElement,
|
||||
|
@ -346,4 +346,37 @@ describe('Util', () => {
|
||||
expect(Util.reflow(div)).toEqual(0)
|
||||
})
|
||||
})
|
||||
|
||||
describe('getjQuery', () => {
|
||||
const fakejQuery = { trigger() {} }
|
||||
|
||||
beforeEach(() => {
|
||||
Object.defineProperty(window, 'jQuery', {
|
||||
value: fakejQuery,
|
||||
writable: true
|
||||
})
|
||||
})
|
||||
|
||||
afterEach(() => {
|
||||
window.jQuery = undefined
|
||||
})
|
||||
|
||||
it('should return jQuery object when present', () => {
|
||||
expect(Util.getjQuery()).toEqual(fakejQuery)
|
||||
})
|
||||
|
||||
it('should not return jQuery object when present if data-no-jquery', () => {
|
||||
document.body.setAttribute('data-no-jquery', '')
|
||||
|
||||
expect(window.jQuery).toEqual(fakejQuery)
|
||||
expect(Util.getjQuery()).toEqual(null)
|
||||
|
||||
document.body.removeAttribute('data-no-jquery')
|
||||
})
|
||||
|
||||
it('should not return jQuery if not present', () => {
|
||||
window.jQuery = undefined
|
||||
expect(Util.getjQuery()).toEqual(null)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
@ -67,7 +67,7 @@ myModal.addEventListener('show.bs.modal', function (e) {
|
||||
{{< callout warning >}}
|
||||
## jQuery events
|
||||
|
||||
Bootstrap will detect jQuery only if `jQuery` is present in the `window` object. If jQuery is found, Bootstrap will emit events thanks to jQuery's event system. So if you want to listen to Bootstrap's events, you'll have to use the jQuery methods (`.on`, `.one`).
|
||||
Bootstrap will detect jQuery if `jQuery` is present in the `window` object and no `data-no-jquery` attribute on `<body>`. If jQuery is found, Bootstrap will emit events thanks to jQuery's event system. So if you want to listen to Bootstrap's events, you'll have to use the jQuery methods (`.on`, `.one`) instead of `addEventListener`.
|
||||
|
||||
{{< highlight js >}}
|
||||
$('#myTab a').on('shown.bs.tab', function () {
|
||||
|
Loading…
x
Reference in New Issue
Block a user