tweak bundlewatch.config

.bundlewatch.config.json

@@ -38,7 +38,7 @@
     },
     {
       "path": "./dist/js/bootstrap.bundle.min.js",
-      "maxSize": "22.75 kB"
+      "maxSize": "23 kB"
     },
     {
       "path": "./dist/js/bootstrap.esm.js",

js/index.esm.js

@@ -5,6 +5,8 @@
  * --------------------------------------------------------------------------
  */
 
+import { enableMagicActions } from './src/dom/magic-actions'
+
 export { default as Alert } from './src/alert'
 export { default as Button } from './src/button'
 export { default as Carousel } from './src/carousel'
@@ -16,4 +18,7 @@ export { default as Popover } from './src/popover'
 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()

js/index.umd.js

@@ -16,7 +16,9 @@ import Popover from './src/popover'
 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'
 
 export default {
   Alert,
@@ -30,5 +32,8 @@ export default {
   ScrollSpy,
   Tab,
   Toast,
+  Toggler,
   Tooltip
 }
+
+enableMagicActions()

js/src/alert.js

@@ -8,7 +8,7 @@
 import { defineJQueryPlugin } from './util/index'
 import EventHandler from './dom/event-handler'
 import BaseComponent from './base-component'
-import { enableDismissTrigger } from './util/component-functions'
+import { enableDismissTrigger } from './dom/magic-actions'
 
 /**
  * Constants

js/src/dispose.js

@@ -0,0 +1,69 @@
+/**
+ * --------------------------------------------------------------------------
+ * 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

js/src/dom/magic-actions.js

@@ -0,0 +1,96 @@
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.1.3): util/component-functions.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import EventHandler from './event-handler'
+import { getElementFromSelector, isDisabled } from '../util/index'
+
+const parseAction = action => {
+  const split = action.split(':')
+  const pluginName = split[1]
+  return {
+    onEvent: split[0],
+    pluginName: pluginName.charAt(0).toUpperCase() + pluginName.slice(1),
+    method: split[2]
+  }
+}
+
+const supportedEvents = [
+  'keyup',
+  'keydown',
+  'mousedown',
+  'mouseup',
+  'click',
+  'mouseenter',
+  'mouseleave',
+  'click',
+  'focus'
+]
+
+const enableMagicActions = () => {
+  for (const eventName of supportedEvents) {
+    enableMagicActionForEvent(eventName)
+  }
+}
+
+const enableMagicActionForEvent = onEvent => {
+  eventAction(onEvent, `[data-bs-act^="${onEvent}:"]`, data => {
+    const action = parseAction(data.event.target.getAttribute('data-bs-act'))
+
+    const plugin = window.bootstrap[action.pluginName] || null
+    if (!plugin) {
+      throw new TypeError(`You are trying to use plugin "${action.pluginName}", which it doesn't exist in our library`)
+    }
+
+    const instance = plugin.getOrCreateInstance(data.target)
+    instance[action.method]()
+  })
+}
+
+const eventActionOnPlugin = (Plugin, onEvent, stringSelector, method, callback = null) => {
+  eventAction(`${onEvent}.${Plugin.NAME}`, stringSelector, data => {
+    const instance = Plugin.getOrCreateInstance(data.target)
+    if (typeof callback === 'function') {
+      callback({ ...data, instance })
+    }
+
+    instance[method]()
+  })
+}
+
+const eventAction = (onEvent, stringSelector, callback) => {
+  EventHandler.on(document, onEvent, stringSelector, event => {
+    const eventTarget = event.target
+
+    if (['A', 'AREA'].includes(eventTarget.tagName)) {
+      event.preventDefault()
+    }
+
+    if (isDisabled(eventTarget)) {
+      return
+    }
+
+    const target = getElementFromSelector(eventTarget) || eventTarget
+    callback({ target, event })
+  })
+}
+
+const enableDismissTrigger = (component, method = 'hide') => {
+  const name = component.NAME
+  eventAction(`click.${name}`, `[data-bs-dismiss="${name}"]`, event => {
+    const target = getElementFromSelector(event.target) || event.target.closest(`.${name}`)
+    const instance = component.getOrCreateInstance(target)
+
+    // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method
+    instance[method]()
+  })
+}
+
+export {
+  enableDismissTrigger,
+  enableMagicActions,
+  eventActionOnPlugin
+}

js/src/modal.js

@@ -5,14 +5,14 @@
  * --------------------------------------------------------------------------
  */
 
-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
@@ -21,7 +21,6 @@ import { enableDismissTrigger } from './util/component-functions'
 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}`
@@ -31,7 +30,6 @@ const EVENT_SHOW = `show${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'
@@ -341,35 +339,24 @@ class Modal extends BaseComponent {
  * 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)

js/src/offcanvas.js

@@ -7,8 +7,6 @@
 
 import {
   defineJQueryPlugin,
-  getElementFromSelector,
-  isDisabled,
   isVisible
 } from './util/index'
 import ScrollBarHelper from './util/scrollbar'
@@ -17,7 +15,7 @@ import BaseComponent from './base-component'
 import SelectorEngine from './dom/selector-engine'
 import Backdrop from './util/backdrop'
 import FocusTrap from './util/focustrap'
-import { enableDismissTrigger } from './util/component-functions'
+import { enableDismissTrigger, eventActionOnPlugin } from './dom/magic-actions'
 
 /**
  * Constants
@@ -40,7 +38,6 @@ const EVENT_SHOW = `show${EVENT_KEY}`
 const EVENT_SHOWN = `shown${EVENT_KEY}`
 const EVENT_HIDE = `hide${EVENT_KEY}`
 const EVENT_HIDDEN = `hidden${EVENT_KEY}`
-const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
 const EVENT_KEYDOWN_DISMISS = `keydown.dismiss${EVENT_KEY}`
 
 const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="offcanvas"]'
@@ -209,32 +206,19 @@ class Offcanvas extends BaseComponent {
  * 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()
-  }
-
-  if (isDisabled(this)) {
-    return
-  }
-
-  EventHandler.one(target, EVENT_HIDDEN, () => {
+eventActionOnPlugin(Offcanvas, 'click', SELECTOR_DATA_TOGGLE, 'toggle', data => {
+  EventHandler.one(data.target, EVENT_HIDDEN, () => {
     // focus on trigger when it is closed
-    if (isVisible(this)) {
-      this.focus()
+    if (isVisible(data.event.target)) {
+      data.event.target.focus()
     }
   })
 
   // avoid conflict when clicking a toggler of an offcanvas, while another is open
   const alreadyOpen = SelectorEngine.findOne(OPEN_SELECTOR)
-  if (alreadyOpen && alreadyOpen !== target) {
+  if (alreadyOpen && alreadyOpen !== data.target) {
     Offcanvas.getInstance(alreadyOpen).hide()
   }
-
-  const data = Offcanvas.getOrCreateInstance(target)
-  data.toggle(this)
 })
 
 EventHandler.on(window, EVENT_LOAD_DATA_API, () => {

js/src/toast.js

@@ -8,7 +8,7 @@
 import { defineJQueryPlugin, reflow } from './util/index'
 import EventHandler from './dom/event-handler'
 import BaseComponent from './base-component'
-import { enableDismissTrigger } from './util/component-functions'
+import { enableDismissTrigger } from './dom/magic-actions'
 
 /**
  * Constants

js/src/toggler.js

@@ -0,0 +1,105 @@
+/**
+ * --------------------------------------------------------------------------
+ * 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

js/src/util/component-functions.js

@@ -1,34 +0,0 @@
-/**
- * --------------------------------------------------------------------------
- * Bootstrap (v5.1.3): util/component-functions.js
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- * --------------------------------------------------------------------------
- */
-
-import EventHandler from '../dom/event-handler'
-import { getElementFromSelector, isDisabled } from './index'
-
-const enableDismissTrigger = (component, method = 'hide') => {
-  const clickEvent = `click.dismiss${component.EVENT_KEY}`
-  const name = component.NAME
-
-  EventHandler.on(document, clickEvent, `[data-bs-dismiss="${name}"]`, function (event) {
-    if (['A', 'AREA'].includes(this.tagName)) {
-      event.preventDefault()
-    }
-
-    if (isDisabled(this)) {
-      return
-    }
-
-    const target = getElementFromSelector(this) || this.closest(`.${name}`)
-    const instance = component.getOrCreateInstance(target)
-
-    // Method argument is left, for Alert and only, as it doesn't implement the 'hide' method
-    instance[method]()
-  })
-}
-
-export {
-  enableDismissTrigger
-}

js/tests/unit/util/component-functions.spec.js

@@ -1,8 +1,8 @@
 /* Test helpers */
 
 import { clearFixture, createEvent, getFixture } from '../../helpers/fixture'
-import { enableDismissTrigger } from '../../../src/util/component-functions'
 import BaseComponent from '../../../src/base-component'
+import { enableDismissTrigger } from '../../../src/dom/magic-actions'
 
 class DummyClass2 extends BaseComponent {
   static get NAME() {

site/content/docs/5.1/components/alerts.md

@@ -7,9 +7,15 @@ toc: true
 ---
 
 ## Examples
-
+<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") }}