import BaseComponent from './base-component.js'
import EventHandler from './dom/event-handler.js'
import { enableDismissTrigger } from './util/component-functions.js'
-import { defineJQueryPlugin } from './util/index.js'
/**
* Constants
EventHandler.trigger(this._element, EVENT_CLOSED)
this.dispose()
}
-
- // Static
- static jQueryInterface(config) {
- return this.each(function () {
- const data = Alert.getOrCreateInstance(this)
-
- if (typeof config !== 'string') {
- return
- }
-
- if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
- throw new TypeError(`No method named "${config}"`)
- }
-
- data[config](this)
- })
- }
}
/**
enableDismissTrigger(Alert, 'close')
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Alert)
-
export default Alert
import BaseComponent from './base-component.js'
import EventHandler from './dom/event-handler.js'
-import { defineJQueryPlugin } from './util/index.js'
/**
* Constants
// Toggle class and sync the `aria-pressed` attribute with the return value of the `.toggle()` method
this._element.setAttribute('aria-pressed', this._element.classList.toggle(CLASS_NAME_ACTIVE))
}
-
- // Static
- static jQueryInterface(config) {
- return this.each(function () {
- const data = Button.getOrCreateInstance(this)
-
- if (config === 'toggle') {
- data[config]()
- }
- })
- }
}
/**
data.toggle()
})
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Button)
-
export default Button
import Manipulator from './dom/manipulator.js'
import SelectorEngine from './dom/selector-engine.js'
import {
- defineJQueryPlugin,
getNextActiveElement,
isRTL,
isVisible,
return order === ORDER_PREV ? DIRECTION_RIGHT : DIRECTION_LEFT
}
- // Static
- static jQueryInterface(config) {
- return this.each(function () {
- const data = Carousel.getOrCreateInstance(this, config)
-
- if (typeof config === 'number') {
- data.to(config)
- return
- }
-
- if (typeof config === 'string') {
- if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
- throw new TypeError(`No method named "${config}"`)
- }
-
- data[config]()
- }
- })
- }
}
/**
}
})
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Carousel)
-
export default Carousel
import EventHandler from './dom/event-handler.js'
import SelectorEngine from './dom/selector-engine.js'
import {
- defineJQueryPlugin,
getElement,
reflow
} from './util/index.js'
element.setAttribute('aria-expanded', isOpen)
}
}
-
- // Static
- static jQueryInterface(config) {
- const _config = {}
- if (typeof config === 'string' && /show|hide/.test(config)) {
- _config.toggle = false
- }
-
- return this.each(function () {
- const data = Collapse.getOrCreateInstance(this, _config)
-
- if (typeof config === 'string') {
- if (typeof data[config] === 'undefined') {
- throw new TypeError(`No method named "${config}"`)
- }
-
- data[config]()
- }
- })
- }
}
/**
}
})
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Collapse)
-
export default Collapse
* --------------------------------------------------------------------------
*/
-import { getjQuery } from '../util/index.js'
-
/**
* Constants
*/
return null
}
- const $ = getjQuery()
- const typeEvent = getTypeEvent(event)
- const inNamespace = event !== typeEvent
-
- let jQueryEvent = null
- let bubbles = true
- let nativeDispatch = true
- let defaultPrevented = false
-
- if (inNamespace && $) {
- jQueryEvent = $.Event(event, args)
-
- $(element).trigger(jQueryEvent)
- bubbles = !jQueryEvent.isPropagationStopped()
- nativeDispatch = !jQueryEvent.isImmediatePropagationStopped()
- defaultPrevented = jQueryEvent.isDefaultPrevented()
- }
-
- const evt = hydrateObj(new Event(event, { bubbles, cancelable: true }), args)
-
- if (defaultPrevented) {
- evt.preventDefault()
- }
-
- if (nativeDispatch) {
- element.dispatchEvent(evt)
- }
-
- if (evt.defaultPrevented && jQueryEvent) {
- jQueryEvent.preventDefault()
- }
-
+ const evt = hydrateObj(new Event(event, { bubbles: true, cancelable: true }), args)
+ element.dispatchEvent(evt)
return evt
}
}
import Manipulator from './dom/manipulator.js'
import SelectorEngine from './dom/selector-engine.js'
import {
- defineJQueryPlugin,
execute,
getElement,
getNextActiveElement,
getNextActiveElement(items, target, key === ARROW_DOWN_KEY, !items.includes(target)).focus()
}
- // Static
- static jQueryInterface(config) {
- return this.each(function () {
- const data = Dropdown.getOrCreateInstance(this, config)
-
- if (typeof config !== 'string') {
- return
- }
-
- if (typeof data[config] === 'undefined') {
- throw new TypeError(`No method named "${config}"`)
- }
-
- data[config]()
- })
- }
-
static clearMenus(event) {
if (event.button === RIGHT_MOUSE_BUTTON || (event.type === 'keyup' && event.key !== TAB_KEY)) {
return
Dropdown.getOrCreateInstance(this).toggle()
})
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Dropdown)
-
export default Dropdown
import { enableDismissTrigger } from './util/component-functions.js'
import FocusTrap from './util/focustrap.js'
import {
- defineJQueryPlugin, isRTL, isVisible, reflow
+ isRTL, isVisible, reflow
} from './util/index.js'
import ScrollBarHelper from './util/scrollbar.js'
this._element.style.paddingLeft = ''
this._element.style.paddingRight = ''
}
-
- // Static
- static jQueryInterface(config, relatedTarget) {
- return this.each(function () {
- const data = Modal.getOrCreateInstance(this, config)
-
- if (typeof config !== 'string') {
- return
- }
-
- if (typeof data[config] === 'undefined') {
- throw new TypeError(`No method named "${config}"`)
- }
-
- data[config](relatedTarget)
- })
- }
}
/**
enableDismissTrigger(Modal)
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Modal)
-
export default Modal
import { enableDismissTrigger } from './util/component-functions.js'
import FocusTrap from './util/focustrap.js'
import {
- defineJQueryPlugin,
isDisabled,
isVisible
} from './util/index.js'
})
}
- // Static
- static jQueryInterface(config) {
- return this.each(function () {
- const data = Offcanvas.getOrCreateInstance(this, config)
-
- if (typeof config !== 'string') {
- return
- }
-
- if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
- throw new TypeError(`No method named "${config}"`)
- }
-
- data[config](this)
- })
- }
}
/**
enableDismissTrigger(Offcanvas)
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Offcanvas)
-
export default Offcanvas
*/
import Tooltip from './tooltip.js'
-import { defineJQueryPlugin } from './util/index.js'
/**
* Constants
_getContent() {
return this._resolvePossibleFunction(this._config.content)
}
-
- // Static
- static jQueryInterface(config) {
- return this.each(function () {
- const data = Popover.getOrCreateInstance(this, config)
-
- if (typeof config !== 'string') {
- return
- }
-
- if (typeof data[config] === 'undefined') {
- throw new TypeError(`No method named "${config}"`)
- }
-
- data[config]()
- })
- }
}
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Popover)
-
export default Popover
import EventHandler from './dom/event-handler.js'
import SelectorEngine from './dom/selector-engine.js'
import {
- defineJQueryPlugin, getElement, isDisabled, isVisible
+ getElement, isDisabled, isVisible
} from './util/index.js'
/**
}
}
- // Static
- static jQueryInterface(config) {
- return this.each(function () {
- const data = ScrollSpy.getOrCreateInstance(this, config)
-
- if (typeof config !== 'string') {
- return
- }
-
- if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
- throw new TypeError(`No method named "${config}"`)
- }
-
- data[config]()
- })
- }
}
/**
}
})
-/**
- * jQuery
- */
-
-defineJQueryPlugin(ScrollSpy)
-
export default ScrollSpy
import BaseComponent from './base-component.js'
import EventHandler from './dom/event-handler.js'
import SelectorEngine from './dom/selector-engine.js'
-import { defineJQueryPlugin, getNextActiveElement, isDisabled } from './util/index.js'
+import { getNextActiveElement, isDisabled } from './util/index.js'
/**
* Constants
_getOuterElement(elem) {
return elem.closest(SELECTOR_OUTER) || elem
}
-
- // Static
- static jQueryInterface(config) {
- return this.each(function () {
- const data = Tab.getOrCreateInstance(this)
-
- if (typeof config !== 'string') {
- return
- }
-
- if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
- throw new TypeError(`No method named "${config}"`)
- }
-
- data[config]()
- })
- }
}
/**
Tab.getOrCreateInstance(element)
}
})
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Tab)
export default Tab
import BaseComponent from './base-component.js'
import EventHandler from './dom/event-handler.js'
import { enableDismissTrigger } from './util/component-functions.js'
-import { defineJQueryPlugin, reflow } from './util/index.js'
+import { reflow } from './util/index.js'
/**
* Constants
clearTimeout(this._timeout)
this._timeout = null
}
-
- // Static
- static jQueryInterface(config) {
- return this.each(function () {
- const data = Toast.getOrCreateInstance(this, config)
-
- if (typeof config === 'string') {
- if (typeof data[config] === 'undefined') {
- throw new TypeError(`No method named "${config}"`)
- }
-
- data[config](this)
- }
- })
- }
}
/**
enableDismissTrigger(Toast)
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Toast)
-
export default Toast
import EventHandler from './dom/event-handler.js'
import Manipulator from './dom/manipulator.js'
import {
- defineJQueryPlugin, execute, findShadowRoot, getElement, getUID, isRTL, noop
+ execute, findShadowRoot, getElement, getUID, isRTL, noop
} from './util/index.js'
import { DefaultAllowlist } from './util/sanitizer.js'
import TemplateFactory from './util/template-factory.js'
this.tip = null
}
}
-
- // Static
- static jQueryInterface(config) {
- return this.each(function () {
- const data = Tooltip.getOrCreateInstance(this, config)
-
- if (typeof config !== 'string') {
- return
- }
-
- if (typeof data[config] === 'undefined') {
- throw new TypeError(`No method named "${config}"`)
- }
-
- data[config]()
- })
- }
}
-
-/**
- * jQuery
- */
-
-defineJQueryPlugin(Tooltip)
-
export default Tooltip
element.offsetHeight // eslint-disable-line no-unused-expressions
}
-const getjQuery = () => {
- if (window.jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
- return window.jQuery
- }
-
- return null
-}
-
const DOMContentLoadedCallbacks = []
const onDOMContentLoaded = callback => {
const isRTL = () => document.documentElement.dir === 'rtl'
-const defineJQueryPlugin = plugin => {
- onDOMContentLoaded(() => {
- const $ = getjQuery()
- /* istanbul ignore if */
- if ($) {
- const name = plugin.NAME
- const JQUERY_NO_CONFLICT = $.fn[name]
- $.fn[name] = plugin.jQueryInterface
- $.fn[name].Constructor = plugin
- $.fn[name].noConflict = () => {
- $.fn[name] = JQUERY_NO_CONFLICT
- return plugin.jQueryInterface
- }
- }
- })
-}
-
const execute = (possibleCallback, args = [], defaultValue = possibleCallback) => {
return typeof possibleCallback === 'function' ? possibleCallback.call(...args) : defaultValue
}
}
export {
- defineJQueryPlugin,
execute,
executeAfterTransition,
findShadowRoot,
getElement,
- getjQuery,
getNextActiveElement,
getTransitionDurationFromElement,
getUID,
})
```
-## Optionally using jQuery
-
-**You don’t need jQuery in Bootstrap 5**, but it’s still possible to use our components with jQuery. If Bootstrap detects `jQuery` in the `window` object, it'll add all of our components in jQuery’s plugin system. This allows you to do the following:
-
-```js
-// to enable tooltips with the default configuration
-$('[data-bs-toggle="tooltip"]').tooltip()
-
-// to initialize tooltips with given configuration
-$('[data-bs-toggle="tooltip"]').tooltip({
- boundary: 'clippingParents',
- customClass: 'myClass'
-})
-
-// to trigger the `show` method
-$('#myTooltip').tooltip('show')
-```
-
-The same goes for our other components.
-
-### No conflict
-
-Sometimes it is necessary to use Bootstrap plugins with other UI frameworks. In these circumstances, namespace collisions can occasionally occur. If this happens, you may call `.noConflict` on the plugin you wish to revert the value of.
-
-```js
-const bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
-$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
-```
-
-Bootstrap does not officially support third-party JavaScript libraries like Prototype or jQuery UI. Despite `.noConflict` and namespaced events, there may be compatibility problems that you need to fix on your own.
-
-### jQuery events
-
-Bootstrap will detect jQuery if `jQuery` is present in the `window` object and there is no `data-bs-no-jquery` attribute set 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`.
-
-```js
-$('#myTab a').on('shown.bs.tab', () => {
- // do something...
-})
-```
-
## Disabled JavaScript
Bootstrap’s plugins have no special fallback when JavaScript is disabled. If you care about the user experience in this case, use [`<noscript>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/noscript) to explain the situation (and how to re-enable JavaScript) to your users, and/or add your own custom fallbacks.