From: GeoSot Date: Sat, 11 Dec 2021 22:56:43 +0000 (+0200) Subject: Add dispose and toggler X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=8df3e6385cf92bd8bb82799b6178281939639627;p=thirdparty%2Fbootstrap.git Add dispose and toggler --- diff --git a/js/index.esm.js b/js/index.esm.js index b94eaba403..7e18d38981 100644 --- a/js/index.esm.js +++ b/js/index.esm.js @@ -18,6 +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() diff --git a/js/index.umd.js b/js/index.umd.js index a78b91743c..c40652d79a 100644 --- a/js/index.umd.js +++ b/js/index.umd.js @@ -16,6 +16,7 @@ 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' @@ -31,6 +32,7 @@ export default { ScrollSpy, Tab, Toast, + Toggler, Tooltip } diff --git a/js/src/dispose.js b/js/src/dispose.js new file mode 100644 index 0000000000..22a9900611 --- /dev/null +++ b/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 diff --git a/js/src/modal.js b/js/src/modal.js index 054750c5f7..9f8cced1d0 100644 --- a/js/src/modal.js +++ b/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) diff --git a/js/src/toggler.js b/js/src/toggler.js new file mode 100644 index 0000000000..af7acf536e --- /dev/null +++ b/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 diff --git a/site/content/docs/5.1/components/alerts.md b/site/content/docs/5.1/components/alerts.md index fbc95dd253..e47259fd21 100644 --- a/site/content/docs/5.1/components/alerts.md +++ b/site/content/docs/5.1/components/alerts.md @@ -7,12 +7,15 @@ toc: true --- ## Examples - - -
Working example. Click on it
-
NOT working example. Click on it
+
+ +
Toggler: Toggle Class, using above button
+
Toggler: Toggles Class
+
Toggler: Toggles attribute
+
Remover: Working example. Click on it and it will be removed
+
Remover: NOT working example. Click on it
+
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") }}