From c98657b8303150bfda3bdea750055b83a29b27a3 Mon Sep 17 00:00:00 2001 From: GeoSot Date: Thu, 3 Jun 2021 18:53:27 +0300 Subject: [PATCH] Add `getOrCreateInstance` method in base-component (#33276) Co-authored-by: Rohit Sharma Co-authored-by: XhmikosR --- js/src/alert.js | 7 +- js/src/base-component.js | 4 + js/src/button.js | 13 +-- js/src/carousel.js | 26 ++---- js/src/collapse.js | 6 +- js/src/dropdown.js | 10 +-- js/src/modal.js | 6 +- js/src/offcanvas.js | 12 ++- js/src/popover.js | 9 +- js/src/scrollspy.js | 2 +- js/src/tab.js | 5 +- js/src/toast.js | 8 +- js/src/tooltip.js | 7 +- js/tests/unit/alert.spec.js | 22 +++++ js/tests/unit/base-component.spec.js | 17 ++++ js/tests/unit/button.spec.js | 22 +++++ js/tests/unit/carousel.spec.js | 54 ++++++++++++ js/tests/unit/collapse.spec.js | 54 ++++++++++++ js/tests/unit/dropdown.spec.js | 54 ++++++++++++ js/tests/unit/modal.spec.js | 54 ++++++++++++ js/tests/unit/offcanvas.spec.js | 88 ++++++++++++------- js/tests/unit/popover.spec.js | 54 ++++++++++++ js/tests/unit/scrollspy.spec.js | 54 ++++++++++++ js/tests/unit/tab.spec.js | 22 +++++ js/tests/unit/toast.spec.js | 54 ++++++++++++ js/tests/unit/tooltip.spec.js | 56 +++++++++++- site/content/docs/5.0/components/alerts.md | 9 ++ site/content/docs/5.0/components/buttons.md | 17 ++++ site/content/docs/5.0/components/carousel.md | 17 +++- site/content/docs/5.0/components/collapse.md | 17 +++- site/content/docs/5.0/components/dropdowns.md | 15 +++- .../content/docs/5.0/components/list-group.md | 9 ++ site/content/docs/5.0/components/modal.md | 9 ++ site/content/docs/5.0/components/navs-tabs.md | 9 ++ site/content/docs/5.0/components/offcanvas.md | 1 + site/content/docs/5.0/components/popovers.md | 9 ++ site/content/docs/5.0/components/scrollspy.md | 9 ++ site/content/docs/5.0/components/toasts.md | 18 ++++ site/content/docs/5.0/components/tooltips.md | 9 ++ 39 files changed, 744 insertions(+), 124 deletions(-) diff --git a/js/src/alert.js b/js/src/alert.js index 679a90cdb475..e5e5e2a5d24d 100644 --- a/js/src/alert.js +++ b/js/src/alert.js @@ -9,7 +9,6 @@ import { defineJQueryPlugin, getElementFromSelector } from './util/index' -import Data from './dom/data' import EventHandler from './dom/event-handler' import BaseComponent from './base-component' @@ -87,11 +86,7 @@ class Alert extends BaseComponent { static jQueryInterface(config) { return this.each(function () { - let data = Data.get(this, DATA_KEY) - - if (!data) { - data = new Alert(this) - } + const data = Alert.getOrCreateInstance(this) if (config === 'close') { data[config](this) diff --git a/js/src/base-component.js b/js/src/base-component.js index 368cc99c8888..cadd53d26a01 100644 --- a/js/src/base-component.js +++ b/js/src/base-component.js @@ -51,6 +51,10 @@ class BaseComponent { return Data.get(element, this.DATA_KEY) } + static getOrCreateInstance(element, config = {}) { + return this.getInstance(element) || new this(element, typeof config === 'object' ? config : null) + } + static get VERSION() { return VERSION } diff --git a/js/src/button.js b/js/src/button.js index 6ef753136705..c0e6b5d2b1da 100644 --- a/js/src/button.js +++ b/js/src/button.js @@ -6,7 +6,6 @@ */ import { defineJQueryPlugin } from './util/index' -import Data from './dom/data' import EventHandler from './dom/event-handler' import BaseComponent from './base-component' @@ -51,11 +50,7 @@ class Button extends BaseComponent { static jQueryInterface(config) { return this.each(function () { - let data = Data.get(this, DATA_KEY) - - if (!data) { - data = new Button(this) - } + const data = Button.getOrCreateInstance(this) if (config === 'toggle') { data[config]() @@ -74,11 +69,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, event => { event.preventDefault() const button = event.target.closest(SELECTOR_DATA_TOGGLE) - - let data = Data.get(button, DATA_KEY) - if (!data) { - data = new Button(button) - } + const data = Button.getOrCreateInstance(button) data.toggle() }) diff --git a/js/src/carousel.js b/js/src/carousel.js index 7d197ab1eef6..a956ebc8bbc1 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -15,7 +15,6 @@ import { triggerTransitionEnd, typeCheckConfig } from './util/index' -import Data from './dom/data' import EventHandler from './dom/event-handler' import Manipulator from './dom/manipulator' import SelectorEngine from './dom/selector-engine' @@ -219,7 +218,8 @@ class Carousel extends BaseComponent { _getConfig(config) { config = { ...Default, - ...config + ...Manipulator.getDataAttributes(this._element), + ...(typeof config === 'object' ? config : {}) } typeCheckConfig(NAME, config, DefaultType) return config @@ -496,25 +496,11 @@ class Carousel extends BaseComponent { // Static static carouselInterface(element, config) { - let data = Data.get(element, DATA_KEY) - let _config = { - ...Default, - ...Manipulator.getDataAttributes(element) - } - - if (typeof config === 'object') { - _config = { - ..._config, - ...config - } - } + const data = Carousel.getOrCreateInstance(element, config) + const { _config } = data const action = typeof config === 'string' ? config : _config.slide - if (!data) { - data = new Carousel(element, _config) - } - if (typeof config === 'number') { data.to(config) } else if (typeof action === 'string') { @@ -555,7 +541,7 @@ class Carousel extends BaseComponent { Carousel.carouselInterface(target, config) if (slideIndex) { - Data.get(target, DATA_KEY).to(slideIndex) + Carousel.getInstance(target).to(slideIndex) } event.preventDefault() @@ -574,7 +560,7 @@ EventHandler.on(window, EVENT_LOAD_DATA_API, () => { const carousels = SelectorEngine.find(SELECTOR_DATA_RIDE) for (let i = 0, len = carousels.length; i < len; i++) { - Carousel.carouselInterface(carousels[i], Data.get(carousels[i], DATA_KEY)) + Carousel.carouselInterface(carousels[i], Carousel.getInstance(carousels[i])) } }) diff --git a/js/src/collapse.js b/js/src/collapse.js index fd85fbde2d13..2d12ef57f039 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -145,7 +145,7 @@ class Collapse extends BaseComponent { const container = SelectorEngine.findOne(this._selector) if (actives) { const tempActiveData = actives.find(elem => container !== elem) - activesData = tempActiveData ? Data.get(tempActiveData, DATA_KEY) : null + activesData = tempActiveData ? Collapse.getInstance(tempActiveData) : null if (activesData && activesData._isTransitioning) { return @@ -310,7 +310,7 @@ class Collapse extends BaseComponent { // Static static collapseInterface(element, config) { - let data = Data.get(element, DATA_KEY) + let data = Collapse.getInstance(element) const _config = { ...Default, ...Manipulator.getDataAttributes(element), @@ -358,7 +358,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function ( const selectorElements = SelectorEngine.find(selector) selectorElements.forEach(element => { - const data = Data.get(element, DATA_KEY) + const data = Collapse.getInstance(element) let config if (data) { // update parent attribute diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 34beb6512916..e79ac4591021 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -19,7 +19,6 @@ import { getNextActiveElement, typeCheckConfig } from './util/index' -import Data from './dom/data' import EventHandler from './dom/event-handler' import Manipulator from './dom/manipulator' import SelectorEngine from './dom/selector-engine' @@ -369,12 +368,7 @@ class Dropdown extends BaseComponent { // Static static dropdownInterface(element, config) { - let data = Data.get(element, DATA_KEY) - const _config = typeof config === 'object' ? config : null - - if (!data) { - data = new Dropdown(element, _config) - } + const data = Dropdown.getOrCreateInstance(element, config) if (typeof config === 'string') { if (typeof data[config] === 'undefined') { @@ -399,7 +393,7 @@ class Dropdown extends BaseComponent { const toggles = SelectorEngine.find(SELECTOR_DATA_TOGGLE) for (let i = 0, len = toggles.length; i < len; i++) { - const context = Data.get(toggles[i], DATA_KEY) + const context = Dropdown.getInstance(toggles[i]) if (!context || context._config.autoClose === false) { continue } diff --git a/js/src/modal.js b/js/src/modal.js index e8eee3b4d00a..74b608303f9e 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -209,7 +209,7 @@ class Modal extends BaseComponent { config = { ...Default, ...Manipulator.getDataAttributes(this._element), - ...config + ...(typeof config === 'object' ? config : {}) } typeCheckConfig(NAME, config, DefaultType) return config @@ -389,7 +389,7 @@ class Modal extends BaseComponent { static jQueryInterface(config, relatedTarget) { return this.each(function () { - const data = Modal.getInstance(this) || new Modal(this, typeof config === 'object' ? config : {}) + const data = Modal.getOrCreateInstance(this, config) if (typeof config !== 'string') { return @@ -430,7 +430,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function ( }) }) - const data = Modal.getInstance(target) || new Modal(target) + const data = Modal.getOrCreateInstance(target) data.toggle(this) }) diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js index fed892f4c778..f990ff1998a0 100644 --- a/js/src/offcanvas.js +++ b/js/src/offcanvas.js @@ -13,7 +13,6 @@ import { typeCheckConfig } from './util/index' import { hide as scrollBarHide, reset as scrollBarReset } from './util/scrollbar' -import Data from './dom/data' import EventHandler from './dom/event-handler' import BaseComponent from './base-component' import SelectorEngine from './dom/selector-engine' @@ -211,7 +210,7 @@ class Offcanvas extends BaseComponent { static jQueryInterface(config) { return this.each(function () { - const data = Data.get(this, DATA_KEY) || new Offcanvas(this, typeof config === 'object' ? config : {}) + const data = Offcanvas.getOrCreateInstance(this, config) if (typeof config !== 'string') { return @@ -256,14 +255,13 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function ( Offcanvas.getInstance(allReadyOpen).hide() } - const data = Data.get(target, DATA_KEY) || new Offcanvas(target) - + const data = Offcanvas.getOrCreateInstance(target) data.toggle(this) }) -EventHandler.on(window, EVENT_LOAD_DATA_API, () => { - SelectorEngine.find(OPEN_SELECTOR).forEach(el => (Data.get(el, DATA_KEY) || new Offcanvas(el)).show()) -}) +EventHandler.on(window, EVENT_LOAD_DATA_API, () => + SelectorEngine.find(OPEN_SELECTOR).forEach(el => Offcanvas.getOrCreateInstance(el).show()) +) /** * ------------------------------------------------------------------------ diff --git a/js/src/popover.js b/js/src/popover.js index 929391392a50..457760c14ce0 100644 --- a/js/src/popover.js +++ b/js/src/popover.js @@ -6,7 +6,6 @@ */ import { defineJQueryPlugin } from './util/index' -import Data from './dom/data' import SelectorEngine from './dom/selector-engine' import Tooltip from './tooltip' @@ -146,13 +145,7 @@ class Popover extends Tooltip { static jQueryInterface(config) { return this.each(function () { - let data = Data.get(this, DATA_KEY) - const _config = typeof config === 'object' ? config : null - - if (!data) { - data = new Popover(this, _config) - Data.set(this, DATA_KEY, data) - } + const data = Popover.getOrCreateInstance(this, config) if (typeof config === 'string') { if (typeof data[config] === 'undefined') { diff --git a/js/src/scrollspy.js b/js/src/scrollspy.js index 3297c45c234d..b7ea2a4e5ffb 100644 --- a/js/src/scrollspy.js +++ b/js/src/scrollspy.js @@ -270,7 +270,7 @@ class ScrollSpy extends BaseComponent { static jQueryInterface(config) { return this.each(function () { - const data = ScrollSpy.getInstance(this) || new ScrollSpy(this, typeof config === 'object' ? config : {}) + const data = ScrollSpy.getOrCreateInstance(this, config) if (typeof config !== 'string') { return diff --git a/js/src/tab.js b/js/src/tab.js index 51deb170f89a..6de48e4cd0c2 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -11,7 +11,6 @@ import { isDisabled, reflow } from './util/index' -import Data from './dom/data' import EventHandler from './dom/event-handler' import SelectorEngine from './dom/selector-engine' import BaseComponent from './base-component' @@ -181,7 +180,7 @@ class Tab extends BaseComponent { static jQueryInterface(config) { return this.each(function () { - const data = Data.get(this, DATA_KEY) || new Tab(this) + const data = Tab.getOrCreateInstance(this) if (typeof config === 'string') { if (typeof data[config] === 'undefined') { @@ -209,7 +208,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function ( return } - const data = Data.get(this, DATA_KEY) || new Tab(this) + const data = Tab.getOrCreateInstance(this) data.show() }) diff --git a/js/src/toast.js b/js/src/toast.js index 40cd40d9a952..8aeaa0148334 100644 --- a/js/src/toast.js +++ b/js/src/toast.js @@ -10,7 +10,6 @@ import { reflow, typeCheckConfig } from './util/index' -import Data from './dom/data' import EventHandler from './dom/event-handler' import Manipulator from './dom/manipulator' import BaseComponent from './base-component' @@ -218,12 +217,7 @@ class Toast extends BaseComponent { static jQueryInterface(config) { return this.each(function () { - let data = Data.get(this, DATA_KEY) - const _config = typeof config === 'object' && config - - if (!data) { - data = new Toast(this, _config) - } + const data = Toast.getOrCreateInstance(this, config) if (typeof config === 'string') { if (typeof data[config] === 'undefined') { diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 2eb91965b259..78b7c478baf8 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -722,12 +722,7 @@ class Tooltip extends BaseComponent { static jQueryInterface(config) { return this.each(function () { - let data = Data.get(this, DATA_KEY) - const _config = typeof config === 'object' && config - - if (!data) { - data = new Tooltip(this, _config) - } + const data = Tooltip.getOrCreateInstance(this, config) if (typeof config === 'string') { if (typeof data[config] === 'undefined') { diff --git a/js/tests/unit/alert.spec.js b/js/tests/unit/alert.spec.js index 29b99d7921e9..53dc0700c90d 100644 --- a/js/tests/unit/alert.spec.js +++ b/js/tests/unit/alert.spec.js @@ -207,4 +207,26 @@ describe('Alert', () => { expect(Alert.getInstance(div)).toEqual(null) }) }) + + describe('getOrCreateInstance', () => { + it('should return alert instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const alert = new Alert(div) + + expect(Alert.getOrCreateInstance(div)).toEqual(alert) + expect(Alert.getInstance(div)).toEqual(Alert.getOrCreateInstance(div, {})) + expect(Alert.getOrCreateInstance(div)).toBeInstanceOf(Alert) + }) + + it('should return new instance when there is no alert instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(Alert.getInstance(div)).toEqual(null) + expect(Alert.getOrCreateInstance(div)).toBeInstanceOf(Alert) + }) + }) }) diff --git a/js/tests/unit/base-component.spec.js b/js/tests/unit/base-component.spec.js index 7a849be06274..1000f2841d7e 100644 --- a/js/tests/unit/base-component.spec.js +++ b/js/tests/unit/base-component.spec.js @@ -112,5 +112,22 @@ describe('Base Component', () => { expect(DummyClass.getInstance(div)).toEqual(null) }) }) + describe('getOrCreateInstance', () => { + it('should return an instance', () => { + createInstance() + + expect(DummyClass.getOrCreateInstance(element)).toEqual(instance) + expect(DummyClass.getInstance(element)).toEqual(DummyClass.getOrCreateInstance(element, {})) + expect(DummyClass.getOrCreateInstance(element)).toBeInstanceOf(DummyClass) + }) + + it('should return new instance when there is no alert instance', () => { + fixtureEl.innerHTML = '
' + element = fixtureEl.querySelector('#foo') + + expect(DummyClass.getInstance(element)).toEqual(null) + expect(DummyClass.getOrCreateInstance(element)).toBeInstanceOf(DummyClass) + }) + }) }) }) diff --git a/js/tests/unit/button.spec.js b/js/tests/unit/button.spec.js index 90cf76614466..be99177e8730 100644 --- a/js/tests/unit/button.spec.js +++ b/js/tests/unit/button.spec.js @@ -164,4 +164,26 @@ describe('Button', () => { expect(Button.getInstance(div)).toEqual(null) }) }) + + describe('getOrCreateInstance', () => { + it('should return button instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const button = new Button(div) + + expect(Button.getOrCreateInstance(div)).toEqual(button) + expect(Button.getInstance(div)).toEqual(Button.getOrCreateInstance(div, {})) + expect(Button.getOrCreateInstance(div)).toBeInstanceOf(Button) + }) + + it('should return new instance when there is no button instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(Button.getInstance(div)).toEqual(null) + expect(Button.getOrCreateInstance(div)).toBeInstanceOf(Button) + }) + }) }) diff --git a/js/tests/unit/carousel.spec.js b/js/tests/unit/carousel.spec.js index 324ff19a7074..5120cc601550 100644 --- a/js/tests/unit/carousel.spec.js +++ b/js/tests/unit/carousel.spec.js @@ -1202,6 +1202,60 @@ describe('Carousel', () => { }) }) + describe('getOrCreateInstance', () => { + it('should return carousel instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const carousel = new Carousel(div) + + expect(Carousel.getOrCreateInstance(div)).toEqual(carousel) + expect(Carousel.getInstance(div)).toEqual(Carousel.getOrCreateInstance(div, {})) + expect(Carousel.getOrCreateInstance(div)).toBeInstanceOf(Carousel) + }) + + it('should return new instance when there is no carousel instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(Carousel.getInstance(div)).toEqual(null) + expect(Carousel.getOrCreateInstance(div)).toBeInstanceOf(Carousel) + }) + + it('should return new instance when there is no carousel instance with given configuration', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(Carousel.getInstance(div)).toEqual(null) + const carousel = Carousel.getOrCreateInstance(div, { + interval: 1 + }) + expect(carousel).toBeInstanceOf(Carousel) + + expect(carousel._config.interval).toEqual(1) + }) + + it('should return the instance when exists without given configuration', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const carousel = new Carousel(div, { + interval: 1 + }) + expect(Carousel.getInstance(div)).toEqual(carousel) + + const carousel2 = Carousel.getOrCreateInstance(div, { + interval: 2 + }) + expect(carousel).toBeInstanceOf(Carousel) + expect(carousel2).toEqual(carousel) + + expect(carousel2._config.interval).toEqual(1) + }) + }) + describe('jQueryInterface', () => { it('should create a carousel', () => { fixtureEl.innerHTML = '
' diff --git a/js/tests/unit/collapse.spec.js b/js/tests/unit/collapse.spec.js index 0997ae7c205d..11d8d52bf5d0 100644 --- a/js/tests/unit/collapse.spec.js +++ b/js/tests/unit/collapse.spec.js @@ -862,4 +862,58 @@ describe('Collapse', () => { expect(Collapse.getInstance(div)).toEqual(null) }) }) + + describe('getOrCreateInstance', () => { + it('should return collapse instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const collapse = new Collapse(div) + + expect(Collapse.getOrCreateInstance(div)).toEqual(collapse) + expect(Collapse.getInstance(div)).toEqual(Collapse.getOrCreateInstance(div, {})) + expect(Collapse.getOrCreateInstance(div)).toBeInstanceOf(Collapse) + }) + + it('should return new instance when there is no collapse instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(Collapse.getInstance(div)).toEqual(null) + expect(Collapse.getOrCreateInstance(div)).toBeInstanceOf(Collapse) + }) + + it('should return new instance when there is no collapse instance with given configuration', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(Collapse.getInstance(div)).toEqual(null) + const collapse = Collapse.getOrCreateInstance(div, { + toggle: false + }) + expect(collapse).toBeInstanceOf(Collapse) + + expect(collapse._config.toggle).toEqual(false) + }) + + it('should return the instance when exists without given configuration', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const collapse = new Collapse(div, { + toggle: false + }) + expect(Collapse.getInstance(div)).toEqual(collapse) + + const collapse2 = Collapse.getOrCreateInstance(div, { + toggle: true + }) + expect(collapse).toBeInstanceOf(Collapse) + expect(collapse2).toEqual(collapse) + + expect(collapse2._config.toggle).toEqual(false) + }) + }) }) diff --git a/js/tests/unit/dropdown.spec.js b/js/tests/unit/dropdown.spec.js index 390cddfbfaee..9703eaab1962 100644 --- a/js/tests/unit/dropdown.spec.js +++ b/js/tests/unit/dropdown.spec.js @@ -1991,6 +1991,60 @@ describe('Dropdown', () => { }) }) + describe('getOrCreateInstance', () => { + it('should return dropdown instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const dropdown = new Dropdown(div) + + expect(Dropdown.getOrCreateInstance(div)).toEqual(dropdown) + expect(Dropdown.getInstance(div)).toEqual(Dropdown.getOrCreateInstance(div, {})) + expect(Dropdown.getOrCreateInstance(div)).toBeInstanceOf(Dropdown) + }) + + it('should return new instance when there is no dropdown instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(Dropdown.getInstance(div)).toEqual(null) + expect(Dropdown.getOrCreateInstance(div)).toBeInstanceOf(Dropdown) + }) + + it('should return new instance when there is no dropdown instance with given configuration', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(Dropdown.getInstance(div)).toEqual(null) + const dropdown = Dropdown.getOrCreateInstance(div, { + display: 'dynamic' + }) + expect(dropdown).toBeInstanceOf(Dropdown) + + expect(dropdown._config.display).toEqual('dynamic') + }) + + it('should return the instance when exists without given configuration', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const dropdown = new Dropdown(div, { + display: 'dynamic' + }) + expect(Dropdown.getInstance(div)).toEqual(dropdown) + + const dropdown2 = Dropdown.getOrCreateInstance(div, { + display: 'static' + }) + expect(dropdown).toBeInstanceOf(Dropdown) + expect(dropdown2).toEqual(dropdown) + + expect(dropdown2._config.display).toEqual('dynamic') + }) + }) + it('should open dropdown when pressing keydown or keyup', done => { fixtureEl.innerHTML = [ '
', diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js index 2974495cacc6..0056e82f63db 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -1058,4 +1058,58 @@ describe('Modal', () => { expect(Modal.getInstance(div)).toBeNull() }) }) + + describe('getOrCreateInstance', () => { + it('should return modal instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const modal = new Modal(div) + + expect(Modal.getOrCreateInstance(div)).toEqual(modal) + expect(Modal.getInstance(div)).toEqual(Modal.getOrCreateInstance(div, {})) + expect(Modal.getOrCreateInstance(div)).toBeInstanceOf(Modal) + }) + + it('should return new instance when there is no modal instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(Modal.getInstance(div)).toEqual(null) + expect(Modal.getOrCreateInstance(div)).toBeInstanceOf(Modal) + }) + + it('should return new instance when there is no modal instance with given configuration', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(Modal.getInstance(div)).toEqual(null) + const modal = Modal.getOrCreateInstance(div, { + backdrop: true + }) + expect(modal).toBeInstanceOf(Modal) + + expect(modal._config.backdrop).toEqual(true) + }) + + it('should return the instance when exists without given configuration', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const modal = new Modal(div, { + backdrop: true + }) + expect(Modal.getInstance(div)).toEqual(modal) + + const modal2 = Modal.getOrCreateInstance(div, { + backdrop: false + }) + expect(modal).toBeInstanceOf(Modal) + expect(modal2).toEqual(modal) + + expect(modal2._config.backdrop).toEqual(true) + }) + }) }) diff --git a/js/tests/unit/offcanvas.spec.js b/js/tests/unit/offcanvas.spec.js index dfb6c429e2e5..0f67fef9d1fa 100644 --- a/js/tests/unit/offcanvas.spec.js +++ b/js/tests/unit/offcanvas.spec.js @@ -620,38 +620,6 @@ describe('Offcanvas', () => { }).toThrowError(TypeError, `No method named "${action}"`) }) - it('should throw error on protected method', () => { - fixtureEl.innerHTML = '
' - - const div = fixtureEl.querySelector('div') - const action = '_getConfig' - - jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface - jQueryMock.elements = [div] - - try { - jQueryMock.fn.offcanvas.call(jQueryMock, action) - } catch (error) { - expect(error.message).toEqual(`No method named "${action}"`) - } - }) - - it('should throw error if method "constructor" is being called', () => { - fixtureEl.innerHTML = '
' - - const div = fixtureEl.querySelector('div') - const action = 'constructor' - - jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface - jQueryMock.elements = [div] - - try { - jQueryMock.fn.offcanvas.call(jQueryMock, action) - } catch (error) { - expect(error.message).toEqual(`No method named "${action}"`) - } - }) - it('should call offcanvas method', () => { fixtureEl.innerHTML = '
' @@ -675,8 +643,6 @@ describe('Offcanvas', () => { jQueryMock.elements = [div] jQueryMock.fn.offcanvas.call(jQueryMock, { scroll: true }) - spyOn(Offcanvas.prototype, 'constructor') - expect(Offcanvas.prototype.constructor).not.toHaveBeenCalledWith(div, { scroll: true }) const offcanvas = Offcanvas.getInstance(div) expect(offcanvas).not.toBeNull() @@ -703,4 +669,58 @@ describe('Offcanvas', () => { expect(Offcanvas.getInstance(div)).toBeNull() }) }) + + describe('getOrCreateInstance', () => { + it('should return offcanvas instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const offcanvas = new Offcanvas(div) + + expect(Offcanvas.getOrCreateInstance(div)).toEqual(offcanvas) + expect(Offcanvas.getInstance(div)).toEqual(Offcanvas.getOrCreateInstance(div, {})) + expect(Offcanvas.getOrCreateInstance(div)).toBeInstanceOf(Offcanvas) + }) + + it('should return new instance when there is no Offcanvas instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(Offcanvas.getInstance(div)).toEqual(null) + expect(Offcanvas.getOrCreateInstance(div)).toBeInstanceOf(Offcanvas) + }) + + it('should return new instance when there is no offcanvas instance with given configuration', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(Offcanvas.getInstance(div)).toEqual(null) + const offcanvas = Offcanvas.getOrCreateInstance(div, { + scroll: true + }) + expect(offcanvas).toBeInstanceOf(Offcanvas) + + expect(offcanvas._config.scroll).toEqual(true) + }) + + it('should return the instance when exists without given configuration', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const offcanvas = new Offcanvas(div, { + scroll: true + }) + expect(Offcanvas.getInstance(div)).toEqual(offcanvas) + + const offcanvas2 = Offcanvas.getOrCreateInstance(div, { + scroll: false + }) + expect(offcanvas).toBeInstanceOf(Offcanvas) + expect(offcanvas2).toEqual(offcanvas) + + expect(offcanvas2._config.scroll).toEqual(true) + }) + }) }) diff --git a/js/tests/unit/popover.spec.js b/js/tests/unit/popover.spec.js index def0f5f040ac..f5a163050e89 100644 --- a/js/tests/unit/popover.spec.js +++ b/js/tests/unit/popover.spec.js @@ -287,4 +287,58 @@ describe('Popover', () => { expect(Popover.getInstance(popoverEl)).toEqual(null) }) }) + + describe('getOrCreateInstance', () => { + it('should return popover instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const popover = new Popover(div) + + expect(Popover.getOrCreateInstance(div)).toEqual(popover) + expect(Popover.getInstance(div)).toEqual(Popover.getOrCreateInstance(div, {})) + expect(Popover.getOrCreateInstance(div)).toBeInstanceOf(Popover) + }) + + it('should return new instance when there is no popover instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(Popover.getInstance(div)).toEqual(null) + expect(Popover.getOrCreateInstance(div)).toBeInstanceOf(Popover) + }) + + it('should return new instance when there is no popover instance with given configuration', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(Popover.getInstance(div)).toEqual(null) + const popover = Popover.getOrCreateInstance(div, { + placement: 'top' + }) + expect(popover).toBeInstanceOf(Popover) + + expect(popover._config.placement).toEqual('top') + }) + + it('should return the instance when exists without given configuration', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const popover = new Popover(div, { + placement: 'top' + }) + expect(Popover.getInstance(div)).toEqual(popover) + + const popover2 = Popover.getOrCreateInstance(div, { + placement: 'bottom' + }) + expect(popover).toBeInstanceOf(Popover) + expect(popover2).toEqual(popover) + + expect(popover2._config.placement).toEqual('top') + }) + }) }) diff --git a/js/tests/unit/scrollspy.spec.js b/js/tests/unit/scrollspy.spec.js index 6b2a134302be..8724b83690b3 100644 --- a/js/tests/unit/scrollspy.spec.js +++ b/js/tests/unit/scrollspy.spec.js @@ -684,6 +684,60 @@ describe('ScrollSpy', () => { }) }) + describe('getOrCreateInstance', () => { + it('should return scrollspy instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const scrollspy = new ScrollSpy(div) + + expect(ScrollSpy.getOrCreateInstance(div)).toEqual(scrollspy) + expect(ScrollSpy.getInstance(div)).toEqual(ScrollSpy.getOrCreateInstance(div, {})) + expect(ScrollSpy.getOrCreateInstance(div)).toBeInstanceOf(ScrollSpy) + }) + + it('should return new instance when there is no scrollspy instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(ScrollSpy.getInstance(div)).toEqual(null) + expect(ScrollSpy.getOrCreateInstance(div)).toBeInstanceOf(ScrollSpy) + }) + + it('should return new instance when there is no scrollspy instance with given configuration', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(ScrollSpy.getInstance(div)).toEqual(null) + const scrollspy = ScrollSpy.getOrCreateInstance(div, { + offset: 1 + }) + expect(scrollspy).toBeInstanceOf(ScrollSpy) + + expect(scrollspy._config.offset).toEqual(1) + }) + + it('should return the instance when exists without given configuration', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const scrollspy = new ScrollSpy(div, { + offset: 1 + }) + expect(ScrollSpy.getInstance(div)).toEqual(scrollspy) + + const scrollspy2 = ScrollSpy.getOrCreateInstance(div, { + offset: 2 + }) + expect(scrollspy).toBeInstanceOf(ScrollSpy) + expect(scrollspy2).toEqual(scrollspy) + + expect(scrollspy2._config.offset).toEqual(1) + }) + }) + describe('event handler', () => { it('should create scrollspy on window load event', () => { fixtureEl.innerHTML = '
' diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 76d47652585b..621012c12e85 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -433,6 +433,28 @@ describe('Tab', () => { }) }) + describe('getOrCreateInstance', () => { + it('should return tab instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const tab = new Tab(div) + + expect(Tab.getOrCreateInstance(div)).toEqual(tab) + expect(Tab.getInstance(div)).toEqual(Tab.getOrCreateInstance(div, {})) + expect(Tab.getOrCreateInstance(div)).toBeInstanceOf(Tab) + }) + + it('should return new instance when there is no tab instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(Tab.getInstance(div)).toEqual(null) + expect(Tab.getOrCreateInstance(div)).toBeInstanceOf(Tab) + }) + }) + describe('data-api', () => { it('should create dynamically a tab', done => { fixtureEl.innerHTML = [ diff --git a/js/tests/unit/toast.spec.js b/js/tests/unit/toast.spec.js index 62cfc966defb..59d0247b28ca 100644 --- a/js/tests/unit/toast.spec.js +++ b/js/tests/unit/toast.spec.js @@ -591,4 +591,58 @@ describe('Toast', () => { expect(Toast.getInstance(div)).toEqual(null) }) }) + + describe('getOrCreateInstance', () => { + it('should return toast instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const toast = new Toast(div) + + expect(Toast.getOrCreateInstance(div)).toEqual(toast) + expect(Toast.getInstance(div)).toEqual(Toast.getOrCreateInstance(div, {})) + expect(Toast.getOrCreateInstance(div)).toBeInstanceOf(Toast) + }) + + it('should return new instance when there is no toast instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(Toast.getInstance(div)).toEqual(null) + expect(Toast.getOrCreateInstance(div)).toBeInstanceOf(Toast) + }) + + it('should return new instance when there is no toast instance with given configuration', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(Toast.getInstance(div)).toEqual(null) + const toast = Toast.getOrCreateInstance(div, { + delay: 1 + }) + expect(toast).toBeInstanceOf(Toast) + + expect(toast._config.delay).toEqual(1) + }) + + it('should return the instance when exists without given configuration', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const toast = new Toast(div, { + delay: 1 + }) + expect(Toast.getInstance(div)).toEqual(toast) + + const toast2 = Toast.getOrCreateInstance(div, { + delay: 2 + }) + expect(toast).toBeInstanceOf(Toast) + expect(toast2).toEqual(toast) + + expect(toast2._config.delay).toEqual(1) + }) + }) }) diff --git a/js/tests/unit/tooltip.spec.js b/js/tests/unit/tooltip.spec.js index b5a34bfe0a02..8f8524c8953f 100644 --- a/js/tests/unit/tooltip.spec.js +++ b/js/tests/unit/tooltip.spec.js @@ -3,7 +3,7 @@ import EventHandler from '../../src/dom/event-handler' import { noop } from '../../src/util/index' /** Test helpers */ -import { getFixture, clearFixture, jQueryMock, createEvent } from '../helpers/fixture' +import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture' describe('Tooltip', () => { let fixtureEl @@ -1306,6 +1306,60 @@ describe('Tooltip', () => { }) }) + describe('getOrCreateInstance', () => { + it('should return tooltip instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const tooltip = new Tooltip(div) + + expect(Tooltip.getOrCreateInstance(div)).toEqual(tooltip) + expect(Tooltip.getInstance(div)).toEqual(Tooltip.getOrCreateInstance(div, {})) + expect(Tooltip.getOrCreateInstance(div)).toBeInstanceOf(Tooltip) + }) + + it('should return new instance when there is no tooltip instance', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(Tooltip.getInstance(div)).toEqual(null) + expect(Tooltip.getOrCreateInstance(div)).toBeInstanceOf(Tooltip) + }) + + it('should return new instance when there is no tooltip instance with given configuration', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(Tooltip.getInstance(div)).toEqual(null) + const tooltip = Tooltip.getOrCreateInstance(div, { + title: () => 'test' + }) + expect(tooltip).toBeInstanceOf(Tooltip) + + expect(tooltip.getTitle()).toEqual('test') + }) + + it('should return the instance when exists without given configuration', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + const tooltip = new Tooltip(div, { + title: () => 'nothing' + }) + expect(Tooltip.getInstance(div)).toEqual(tooltip) + + const tooltip2 = Tooltip.getOrCreateInstance(div, { + title: () => 'test' + }) + expect(tooltip).toBeInstanceOf(Tooltip) + expect(tooltip2).toEqual(tooltip) + + expect(tooltip2.getTitle()).toEqual('nothing') + }) + }) + describe('jQueryInterface', () => { it('should create a tooltip', () => { fixtureEl.innerHTML = '
' diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md index d0c5685a09fb..a7e52f5f8937 100644 --- a/site/content/docs/5.0/components/alerts.md +++ b/site/content/docs/5.0/components/alerts.md @@ -209,6 +209,15 @@ This makes an alert listen for click events on descendant elements which have th Static method which allows you to get the alert instance associated to a DOM element, you can use it like this: bootstrap.Alert.getInstance(alert) + + + getOrCreateInstance + + + Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialised. + You can use it like this: bootstrap.Alert.getOrCreateInstance(element) + + diff --git a/site/content/docs/5.0/components/buttons.md b/site/content/docs/5.0/components/buttons.md index 063bae1c4190..d62d6e2b6506 100644 --- a/site/content/docs/5.0/components/buttons.md +++ b/site/content/docs/5.0/components/buttons.md @@ -193,6 +193,23 @@ var bsButton = new bootstrap.Button(button) Destroys an element's button. (Removes stored data on the DOM element) + + + getInstance + + + Static method which allows you to get the button instance associated to a DOM element, you can use it like this: bootstrap.Button.getInstance(element) + + + + + getOrCreateInstance + + + Static method which returns a button instance associated to a DOM element or create a new one in case it wasn't initialised. + You can use it like this: bootstrap.Button.getOrCreateInstance(element) + + diff --git a/site/content/docs/5.0/components/carousel.md b/site/content/docs/5.0/components/carousel.md index 9ad7294ecc72..e106e76c0ece 100644 --- a/site/content/docs/5.0/components/carousel.md +++ b/site/content/docs/5.0/components/carousel.md @@ -413,8 +413,21 @@ var carousel = new bootstrap.Carousel(myCarousel, { Destroys an element's carousel. (Removes stored data on the DOM element) - getInstance - Static method which allows you to get the carousel instance associated with a DOM element. + + getInstance + + + Static method which allows you to get the carousel instance associated to a DOM element, you can use it like this: bootstrap.Carousel.getInstance(element) + + + + + getOrCreateInstance + + + Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn't initialised. + You can use it like this: bootstrap.Carousel.getOrCreateInstance(element) + diff --git a/site/content/docs/5.0/components/collapse.md b/site/content/docs/5.0/components/collapse.md index fe26918c1f13..ac84ca96491a 100644 --- a/site/content/docs/5.0/components/collapse.md +++ b/site/content/docs/5.0/components/collapse.md @@ -187,8 +187,21 @@ var bsCollapse = new bootstrap.Collapse(myCollapse, { Destroys an element's collapse. (Removes stored data on the DOM element) - getInstance - Static method which allows you to get the collapse instance associated with a DOM element. + + getInstance + + + Static method which allows you to get the collapse instance associated to a DOM element, you can use it like this: bootstrap.Collapse.getInstance(element) + + + + + getOrCreateInstance + + + Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn't initialised. + You can use it like this: bootstrap.Collapse.getOrCreateInstance(element) + diff --git a/site/content/docs/5.0/components/dropdowns.md b/site/content/docs/5.0/components/dropdowns.md index 3ab91f807806..e15cc0fe6221 100644 --- a/site/content/docs/5.0/components/dropdowns.md +++ b/site/content/docs/5.0/components/dropdowns.md @@ -1136,9 +1136,20 @@ var dropdown = new bootstrap.Dropdown(element, { - getInstance - Static method which allows you to get the dropdown instance associated with a DOM element. + getInstance + + + Static method which allows you to get the dropdown instance associated to a DOM element, you can use it like this: bootstrap.Dropdown.getInstance(element) + + + + + getOrCreateInstance + + + Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn't initialised. + You can use it like this: bootstrap.Dropdown.getOrCreateInstance(element) diff --git a/site/content/docs/5.0/components/list-group.md b/site/content/docs/5.0/components/list-group.md index 4b450939efe2..76d0013e2167 100644 --- a/site/content/docs/5.0/components/list-group.md +++ b/site/content/docs/5.0/components/list-group.md @@ -484,6 +484,15 @@ var triggerEl = document.querySelector('#trigger') var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance ``` +#### getOrCreateInstance + +*Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialised + +```js +var triggerEl = document.querySelector('#trigger') +var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance +``` + ### Events When showing a new tab, the events fire in the following order: diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md index 9917656a57cb..d19957f3e73b 100644 --- a/site/content/docs/5.0/components/modal.md +++ b/site/content/docs/5.0/components/modal.md @@ -952,6 +952,15 @@ var myModalEl = document.getElementById('myModal') var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance ``` +#### getOrCreateInstance + +*Static* method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn't initialised + +```js +var myModalEl = document.querySelector('#myModal') +var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance +``` + ### Events Bootstrap's modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the `
`). diff --git a/site/content/docs/5.0/components/navs-tabs.md b/site/content/docs/5.0/components/navs-tabs.md index 830f71c2577b..b839f9754f62 100644 --- a/site/content/docs/5.0/components/navs-tabs.md +++ b/site/content/docs/5.0/components/navs-tabs.md @@ -624,6 +624,15 @@ var triggerEl = document.querySelector('#trigger') var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance ``` +#### getOrCreateInstance + +*Static* method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn't initialised + +```js +var triggerEl = document.querySelector('#trigger') +var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance +``` + ### Events When showing a new tab, the events fire in the following order: diff --git a/site/content/docs/5.0/components/offcanvas.md b/site/content/docs/5.0/components/offcanvas.md index b9dbd7ce8da2..d0c60db2b294 100644 --- a/site/content/docs/5.0/components/offcanvas.md +++ b/site/content/docs/5.0/components/offcanvas.md @@ -241,6 +241,7 @@ var bsOffcanvas = new bootstrap.Offcanvas(myOffcanvas) | `show` | Shows an offcanvas element. **Returns to the caller before the offcanvas element has actually been shown** (i.e. before the `shown.bs.offcanvas` event occurs).| | `hide` | Hides an offcanvas element. **Returns to the caller before the offcanvas element has actually been hidden** (i.e. before the `hidden.bs.offcanvas` event occurs).| | `getInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element | +| `getOrCreateInstance` | *Static* method which allows you to get the offcanvas instance associated with a DOM element, or create a new one in case it wasn't initialised | {{< /bs-table >}} ### Events diff --git a/site/content/docs/5.0/components/popovers.md b/site/content/docs/5.0/components/popovers.md index 039a47cc1fe4..06aa656d96a7 100644 --- a/site/content/docs/5.0/components/popovers.md +++ b/site/content/docs/5.0/components/popovers.md @@ -393,6 +393,15 @@ var exampleTriggerEl = document.getElementById('example') var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance ``` +#### getOrCreateInstance + +*Static* method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn't initialised + +```js +var exampleTriggerEl = document.getElementById('example') +var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance +``` + ### Events diff --git a/site/content/docs/5.0/components/scrollspy.md b/site/content/docs/5.0/components/scrollspy.md index e1d748bca0d0..580a1e2d55d5 100644 --- a/site/content/docs/5.0/components/scrollspy.md +++ b/site/content/docs/5.0/components/scrollspy.md @@ -298,6 +298,15 @@ var scrollSpyContentEl = document.getElementById('content') var scrollSpy = bootstrap.ScrollSpy.getInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance ``` +#### getOrCreateInstance + +*Static* method which allows you to get the scrollspy instance associated with a DOM element, or create a new one in case it wasn't initialised + +```js +var scrollSpyContentEl = document.getElementById('content') +var scrollSpy = bootstrap.ScrollSpy.getOrCreateInstance(scrollSpyContentEl) // Returns a Bootstrap scrollspy instance +``` + ### Options Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-offset=""`. diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md index 75713050c897..2dde09f5ba82 100644 --- a/site/content/docs/5.0/components/toasts.md +++ b/site/content/docs/5.0/components/toasts.md @@ -391,6 +391,24 @@ Hides an element's toast. Your toast will remain on the DOM but won't show anymo toast.dispose() ``` +#### getInstance + +*Static* method which allows you to get the scrollspy instance associated with a DOM element + +```js +var myToastEl = document.getElementById('myToastEl') +var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance +``` + +#### getOrCreateInstance + +*Static* method which allows you to get the scrollspy instance associated with a DOM element, or create a new one in case it wasn't initialised + +```js +var myToastEl = document.getElementById('myToastEl') +var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance +``` + ### Events
diff --git a/site/content/docs/5.0/components/tooltips.md b/site/content/docs/5.0/components/tooltips.md index 6af594ee34e1..386d3e9f1881 100644 --- a/site/content/docs/5.0/components/tooltips.md +++ b/site/content/docs/5.0/components/tooltips.md @@ -417,6 +417,15 @@ var exampleTriggerEl = document.getElementById('example') var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance ``` +#### getOrCreateInstance + +*Static* method which allows you to get the tooltip instance associated with a DOM element, or create a new one in case it wasn't initialised + +```js +var exampleTriggerEl = document.getElementById('example') +var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance +``` + ### Events