export { default as ScrollSpy } from './src/scrollspy'
export { default as Tab } from './src/tab'
export { default as Toast } from './src/toast'
+export { default as Toggler } from './src/toggler'
export { default as Tooltip } from './src/tooltip'
enableMagicActions()
import ScrollSpy from './src/scrollspy'
import Tab from './src/tab'
import Toast from './src/toast'
+import Toggler from './src/toggler'
import Tooltip from './src/tooltip'
import { enableMagicActions } from './src/dom/magic-actions'
ScrollSpy,
Tab,
Toast,
+ Toggler,
Tooltip
}
--- /dev/null
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.1.3): dispose.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import { defineJQueryPlugin } from './util/index'
+import EventHandler from './dom/event-handler'
+import BaseComponent from './base-component'
+import { enableDismissTrigger } from './dom/magic-actions'
+
+/**
+ * Constants
+ */
+
+const NAME = 'dispose'
+const DATA_KEY = 'bs.dispose'
+const EVENT_KEY = `.${DATA_KEY}`
+
+const EVENT_DISPOSE = `dispose${EVENT_KEY}`
+const EVENT_DISPOSED = `disposed${EVENT_KEY}`
+const CLASS_NAME_FADE = 'fade'
+const CLASS_NAME_SHOW = 'show'
+
+/**
+ * Class definition
+ */
+
+class Dispose extends BaseComponent {
+ // Getters
+ static get NAME() {
+ return NAME
+ }
+
+ // Private
+ dispose() {
+ const closeEvent = EventHandler.trigger(this._element, EVENT_DISPOSE)
+
+ if (closeEvent.defaultPrevented) {
+ return
+ }
+
+ this._element.classList.remove(CLASS_NAME_SHOW)
+
+ const isAnimated = this._element.classList.contains(CLASS_NAME_FADE)
+ const completeCallback = () => {
+ this._element.remove()
+ EventHandler.trigger(this._element, EVENT_DISPOSED)
+ }
+
+ this._queueCallback(completeCallback, this._element, isAnimated)
+ super.dispose()
+ }
+}
+
+/**
+ * Data API implementation
+ */
+
+enableDismissTrigger(Dispose, 'dispose')
+
+/**
+ * jQuery
+ */
+
+defineJQueryPlugin(Dispose)
+
+export default Dispose
* --------------------------------------------------------------------------
*/
-import { defineJQueryPlugin, getElementFromSelector, isRTL, isVisible, reflow } from './util/index'
+import { defineJQueryPlugin, isRTL, isVisible, reflow } from './util/index'
import EventHandler from './dom/event-handler'
import SelectorEngine from './dom/selector-engine'
import ScrollBarHelper from './util/scrollbar'
import BaseComponent from './base-component'
import Backdrop from './util/backdrop'
import FocusTrap from './util/focustrap'
-import { enableDismissTrigger } from './util/component-functions'
+import { enableDismissTrigger, eventActionOnPlugin } from './dom/magic-actions'
/**
* Constants
const NAME = 'modal'
const DATA_KEY = 'bs.modal'
const EVENT_KEY = `.${DATA_KEY}`
-const DATA_API_KEY = '.data-api'
const ESCAPE_KEY = 'Escape'
const EVENT_HIDE = `hide${EVENT_KEY}`
const EVENT_SHOWN = `shown${EVENT_KEY}`
const EVENT_RESIZE = `resize${EVENT_KEY}`
const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
-const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
const CLASS_NAME_OPEN = 'modal-open'
const CLASS_NAME_FADE = 'fade'
* Data API implementation
*/
-EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (event) {
- const target = getElementFromSelector(this)
-
- if (['A', 'AREA'].includes(this.tagName)) {
- event.preventDefault()
- }
-
- EventHandler.one(target, EVENT_SHOW, showEvent => {
+eventActionOnPlugin(Modal, 'click', SELECTOR_DATA_TOGGLE, 'toggle', data => {
+ EventHandler.one(data.target, EVENT_SHOW, showEvent => {
if (showEvent.defaultPrevented) {
// only register focus restorer if modal will actually get shown
return
}
- EventHandler.one(target, EVENT_HIDDEN, () => {
- if (isVisible(this)) {
- this.focus()
+ EventHandler.one(data.target, EVENT_HIDDEN, () => {
+ if (isVisible(data.event.target)) {
+ data.event.target.focus()
}
})
})
-
- // avoid conflict when clicking modal toggler while another one is open
+ // avoid conflict when clicking a toggler of an offcanvas, while another is open
const alreadyOpen = SelectorEngine.findOne(OPEN_SELECTOR)
- if (alreadyOpen) {
+ if (alreadyOpen && alreadyOpen !== data.target) {
Modal.getInstance(alreadyOpen).hide()
}
-
- const data = Modal.getOrCreateInstance(target)
-
- data.toggle(this)
})
enableDismissTrigger(Modal)
--- /dev/null
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.1.3): toggle.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import { defineJQueryPlugin, getElement } from './util/index'
+import EventHandler from './dom/event-handler'
+import BaseComponent from './base-component'
+import { eventActionOnPlugin } from './dom/magic-actions'
+
+/**
+ * Constants
+ */
+
+const NAME = 'toggler'
+const DATA_KEY = 'bs.toggle'
+const EVENT_KEY = `.${DATA_KEY}`
+
+const EVENT_TOGGLE = `toggle${EVENT_KEY}`
+const EVENT_TOGGLED = `toggled${EVENT_KEY}`
+
+const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="toggler"]'
+/**
+ * Class definition
+ */
+
+const DefaultType = {
+ attribute: 'string',
+ target: 'element',
+ value: 'string'
+}
+
+const Default = {
+ attribute: 'class',
+ target: null,
+ value: null
+}
+
+class Toggler extends BaseComponent {
+ // Getters
+ static get Default() {
+ return Default
+ }
+
+ static get DefaultType() {
+ return DefaultType
+ }
+
+ static get NAME() {
+ return NAME
+ }
+
+ _configAfterMerge(config) {
+ config.target = getElement(config.target) || this._element
+ return config
+ }
+
+ // Private
+ toggle() {
+ const toggleEvent = EventHandler.trigger(this._element, EVENT_TOGGLE)
+
+ if (toggleEvent.defaultPrevented) {
+ return
+ }
+
+ this._execute()
+
+ EventHandler.trigger(this._element, EVENT_TOGGLED)
+ }
+
+ _execute() {
+ const { attribute, target, value } = this._config
+
+ if (attribute === 'id') {
+ return // You have to be kidding
+ }
+
+ if (attribute === 'class') {
+ target.classList.toggle(value)
+ return
+ }
+
+ if (target.getAttribute(attribute) === value) {
+ target.removeAttribute(attribute)
+ return
+ }
+
+ target.setAttribute(attribute, value)
+ }
+}
+
+/**
+ * Data API implementation
+ */
+eventActionOnPlugin(Toggler, 'click', SELECTOR_DATA_TOGGLE, 'toggle')
+
+/**
+ * jQuery
+ */
+
+defineJQueryPlugin(Toggler)
+
+export default Toggler
---
## Examples
-
-
-<div class="alert alert-primary" data-bs-act="click:alert:close">Working example. Click on it</div>
-<div class="alert alert-danger" data-bs-act="click:kalert:close">NOT working example. Click on it</div>
+<hr>
+<button class="btn btn-outline-dark" data-bs-toggle="toggler" data-bs-target="#anotherTarget"> Toggle next element class</button>
+<div id="anotherTarget" class="alert alert-secondary" data-bs-value="alert-danger" data-bs-attribute="class">Toggler: Toggle Class, using above button</div>
+<div class="alert alert-primary" data-bs-toggle="toggler" data-bs-value="alert-warning" data-bs-attribute="class">Toggler: Toggles Class</div>
+<div class="alert alert-primary" data-bs-toggle="toggler" data-bs-value="test" data-bs-attribute="data-tost">Toggler: Toggles attribute</div>
+<div class="alert alert-secondary" data-bs-act="click:alert:close"> Remover: Working example. Click on it and it will be removed</div>
+<div class="alert alert-danger" data-bs-act="click:kalert:close">Remover: NOT working example. Click on it</div>
+<hr>
Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts JavaScript plugin](#dismissing).
-
{{< example >}}
{{< alerts.inline >}}
{{- range (index $.Site.Data "theme-colors") }}
projects / thirdparty / bootstrap.git / commitdiff
