mirror of
https://github.com/twbs/bootstrap.git
synced 2024-11-29 11:24:18 +01:00
create a base component
This commit is contained in:
parent
c63aebc86b
commit
9f6b342dc7
@ -15,6 +15,7 @@ import {
|
|||||||
} from './util/index'
|
} from './util/index'
|
||||||
import Data from './dom/data'
|
import Data from './dom/data'
|
||||||
import EventHandler from './dom/event-handler'
|
import EventHandler from './dom/event-handler'
|
||||||
|
import BaseComponent from './base-component'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@ -44,21 +45,17 @@ const CLASSNAME_SHOW = 'show'
|
|||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
class Alert {
|
class Alert extends BaseComponent {
|
||||||
constructor(element) {
|
|
||||||
this._element = element
|
|
||||||
|
|
||||||
if (this._element) {
|
|
||||||
Data.setData(element, DATA_KEY, this)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Getters
|
// Getters
|
||||||
|
|
||||||
static get VERSION() {
|
static get VERSION() {
|
||||||
return VERSION
|
return VERSION
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static get DATA_KEY() {
|
||||||
|
return DATA_KEY
|
||||||
|
}
|
||||||
|
|
||||||
// Public
|
// Public
|
||||||
|
|
||||||
close(element) {
|
close(element) {
|
||||||
@ -134,10 +131,6 @@ class Alert {
|
|||||||
alertInstance.close(this)
|
alertInstance.close(this)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
static getInstance(element) {
|
|
||||||
return Data.getData(element, DATA_KEY)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
31
js/src/base-component.js
Normal file
31
js/src/base-component.js
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
/**
|
||||||
|
* --------------------------------------------------------------------------
|
||||||
|
* Bootstrap (v5.0.0-alpha3): base-component.js
|
||||||
|
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
|
||||||
|
* --------------------------------------------------------------------------
|
||||||
|
*/
|
||||||
|
|
||||||
|
import Data from './dom/data'
|
||||||
|
|
||||||
|
class BaseComponent {
|
||||||
|
constructor(element) {
|
||||||
|
if (!element) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this._element = element
|
||||||
|
Data.setData(element, this.constructor.DATA_KEY, this)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Static */
|
||||||
|
|
||||||
|
static getInstance(element) {
|
||||||
|
return Data.getData(element, this.DATA_KEY)
|
||||||
|
}
|
||||||
|
|
||||||
|
static get DATA_KEY() {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BaseComponent
|
@ -8,6 +8,7 @@
|
|||||||
import { getjQuery, onDOMContentLoaded } from './util/index'
|
import { getjQuery, onDOMContentLoaded } from './util/index'
|
||||||
import Data from './dom/data'
|
import Data from './dom/data'
|
||||||
import EventHandler from './dom/event-handler'
|
import EventHandler from './dom/event-handler'
|
||||||
|
import BaseComponent from './base-component'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@ -33,18 +34,17 @@ const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`
|
|||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
class Button {
|
class Button extends BaseComponent {
|
||||||
constructor(element) {
|
|
||||||
this._element = element
|
|
||||||
Data.setData(element, DATA_KEY, this)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Getters
|
// Getters
|
||||||
|
|
||||||
static get VERSION() {
|
static get VERSION() {
|
||||||
return VERSION
|
return VERSION
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static get DATA_KEY() {
|
||||||
|
return DATA_KEY
|
||||||
|
}
|
||||||
|
|
||||||
// Public
|
// Public
|
||||||
|
|
||||||
toggle() {
|
toggle() {
|
||||||
@ -72,10 +72,6 @@ class Button {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static getInstance(element) {
|
|
||||||
return Data.getData(element, DATA_KEY)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -21,6 +21,7 @@ import Data from './dom/data'
|
|||||||
import EventHandler from './dom/event-handler'
|
import EventHandler from './dom/event-handler'
|
||||||
import Manipulator from './dom/manipulator'
|
import Manipulator from './dom/manipulator'
|
||||||
import SelectorEngine from './dom/selector-engine'
|
import SelectorEngine from './dom/selector-engine'
|
||||||
|
import BaseComponent from './base-component'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@ -104,8 +105,10 @@ const PointerType = {
|
|||||||
* Class Definition
|
* Class Definition
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
class Carousel {
|
class Carousel extends BaseComponent {
|
||||||
constructor(element, config) {
|
constructor(element, config) {
|
||||||
|
super(element)
|
||||||
|
|
||||||
this._items = null
|
this._items = null
|
||||||
this._interval = null
|
this._interval = null
|
||||||
this._activeElement = null
|
this._activeElement = null
|
||||||
@ -116,7 +119,6 @@ class Carousel {
|
|||||||
this.touchDeltaX = 0
|
this.touchDeltaX = 0
|
||||||
|
|
||||||
this._config = this._getConfig(config)
|
this._config = this._getConfig(config)
|
||||||
this._element = element
|
|
||||||
this._indicatorsElement = SelectorEngine.findOne(SELECTOR_INDICATORS, this._element)
|
this._indicatorsElement = SelectorEngine.findOne(SELECTOR_INDICATORS, this._element)
|
||||||
this._touchSupported = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
|
this._touchSupported = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
|
||||||
this._pointerEvent = Boolean(window.PointerEvent)
|
this._pointerEvent = Boolean(window.PointerEvent)
|
||||||
@ -135,6 +137,10 @@ class Carousel {
|
|||||||
return Default
|
return Default
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static get DATA_KEY() {
|
||||||
|
return DATA_KEY
|
||||||
|
}
|
||||||
|
|
||||||
// Public
|
// Public
|
||||||
|
|
||||||
next() {
|
next() {
|
||||||
@ -590,10 +596,6 @@ class Carousel {
|
|||||||
|
|
||||||
event.preventDefault()
|
event.preventDefault()
|
||||||
}
|
}
|
||||||
|
|
||||||
static getInstance(element) {
|
|
||||||
return Data.getData(element, DATA_KEY)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -21,6 +21,7 @@ import Data from './dom/data'
|
|||||||
import EventHandler from './dom/event-handler'
|
import EventHandler from './dom/event-handler'
|
||||||
import Manipulator from './dom/manipulator'
|
import Manipulator from './dom/manipulator'
|
||||||
import SelectorEngine from './dom/selector-engine'
|
import SelectorEngine from './dom/selector-engine'
|
||||||
|
import BaseComponent from './base-component'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@ -67,10 +68,11 @@ const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]'
|
|||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
class Collapse {
|
class Collapse extends BaseComponent {
|
||||||
constructor(element, config) {
|
constructor(element, config) {
|
||||||
|
super(element)
|
||||||
|
|
||||||
this._isTransitioning = false
|
this._isTransitioning = false
|
||||||
this._element = element
|
|
||||||
this._config = this._getConfig(config)
|
this._config = this._getConfig(config)
|
||||||
this._triggerArray = SelectorEngine.find(
|
this._triggerArray = SelectorEngine.find(
|
||||||
`${SELECTOR_DATA_TOGGLE}[href="#${element.id}"],` +
|
`${SELECTOR_DATA_TOGGLE}[href="#${element.id}"],` +
|
||||||
@ -114,6 +116,10 @@ class Collapse {
|
|||||||
return Default
|
return Default
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static get DATA_KEY() {
|
||||||
|
return DATA_KEY
|
||||||
|
}
|
||||||
|
|
||||||
// Public
|
// Public
|
||||||
|
|
||||||
toggle() {
|
toggle() {
|
||||||
@ -368,10 +374,6 @@ class Collapse {
|
|||||||
Collapse.collapseInterface(this, config)
|
Collapse.collapseInterface(this, config)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static getInstance(element) {
|
|
||||||
return Data.getData(element, DATA_KEY)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -19,6 +19,7 @@ import EventHandler from './dom/event-handler'
|
|||||||
import Manipulator from './dom/manipulator'
|
import Manipulator from './dom/manipulator'
|
||||||
import Popper from 'popper.js'
|
import Popper from 'popper.js'
|
||||||
import SelectorEngine from './dom/selector-engine'
|
import SelectorEngine from './dom/selector-engine'
|
||||||
|
import BaseComponent from './base-component'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@ -96,9 +97,10 @@ const DefaultType = {
|
|||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
class Dropdown {
|
class Dropdown extends BaseComponent {
|
||||||
constructor(element, config) {
|
constructor(element, config) {
|
||||||
this._element = element
|
super(element)
|
||||||
|
|
||||||
this._popper = null
|
this._popper = null
|
||||||
this._config = this._getConfig(config)
|
this._config = this._getConfig(config)
|
||||||
this._menu = this._getMenuElement()
|
this._menu = this._getMenuElement()
|
||||||
@ -122,6 +124,10 @@ class Dropdown {
|
|||||||
return DefaultType
|
return DefaultType
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static get DATA_KEY() {
|
||||||
|
return DATA_KEY
|
||||||
|
}
|
||||||
|
|
||||||
// Public
|
// Public
|
||||||
|
|
||||||
toggle() {
|
toggle() {
|
||||||
@ -489,10 +495,6 @@ class Dropdown {
|
|||||||
|
|
||||||
items[index].focus()
|
items[index].focus()
|
||||||
}
|
}
|
||||||
|
|
||||||
static getInstance(element) {
|
|
||||||
return Data.getData(element, DATA_KEY)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -20,6 +20,7 @@ import Data from './dom/data'
|
|||||||
import EventHandler from './dom/event-handler'
|
import EventHandler from './dom/event-handler'
|
||||||
import Manipulator from './dom/manipulator'
|
import Manipulator from './dom/manipulator'
|
||||||
import SelectorEngine from './dom/selector-engine'
|
import SelectorEngine from './dom/selector-engine'
|
||||||
|
import BaseComponent from './base-component'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@ -81,10 +82,11 @@ const SELECTOR_STICKY_CONTENT = '.sticky-top'
|
|||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
class Modal {
|
class Modal extends BaseComponent {
|
||||||
constructor(element, config) {
|
constructor(element, config) {
|
||||||
|
super(element)
|
||||||
|
|
||||||
this._config = this._getConfig(config)
|
this._config = this._getConfig(config)
|
||||||
this._element = element
|
|
||||||
this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, element)
|
this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, element)
|
||||||
this._backdrop = null
|
this._backdrop = null
|
||||||
this._isShown = false
|
this._isShown = false
|
||||||
@ -105,6 +107,10 @@ class Modal {
|
|||||||
return Default
|
return Default
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static get DATA_KEY() {
|
||||||
|
return DATA_KEY
|
||||||
|
}
|
||||||
|
|
||||||
// Public
|
// Public
|
||||||
|
|
||||||
toggle(relatedTarget) {
|
toggle(relatedTarget) {
|
||||||
@ -563,10 +569,6 @@ class Modal {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static getInstance(element) {
|
|
||||||
return Data.getData(element, DATA_KEY)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -108,7 +108,7 @@ class Popover extends Tooltip {
|
|||||||
this.setElementContent(SelectorEngine.findOne(SELECTOR_TITLE, tip), this.getTitle())
|
this.setElementContent(SelectorEngine.findOne(SELECTOR_TITLE, tip), this.getTitle())
|
||||||
let content = this._getContent()
|
let content = this._getContent()
|
||||||
if (typeof content === 'function') {
|
if (typeof content === 'function') {
|
||||||
content = content.call(this.element)
|
content = content.call(this._element)
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setElementContent(SelectorEngine.findOne(SELECTOR_CONTENT, tip), content)
|
this.setElementContent(SelectorEngine.findOne(SELECTOR_CONTENT, tip), content)
|
||||||
@ -123,7 +123,7 @@ class Popover extends Tooltip {
|
|||||||
}
|
}
|
||||||
|
|
||||||
_getContent() {
|
_getContent() {
|
||||||
return this.element.getAttribute('data-bs-content') ||
|
return this._element.getAttribute('data-bs-content') ||
|
||||||
this.config.content
|
this.config.content
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -161,10 +161,6 @@ class Popover extends Tooltip {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static getInstance(element) {
|
|
||||||
return Data.getData(element, DATA_KEY)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -17,6 +17,7 @@ import Data from './dom/data'
|
|||||||
import EventHandler from './dom/event-handler'
|
import EventHandler from './dom/event-handler'
|
||||||
import Manipulator from './dom/manipulator'
|
import Manipulator from './dom/manipulator'
|
||||||
import SelectorEngine from './dom/selector-engine'
|
import SelectorEngine from './dom/selector-engine'
|
||||||
|
import BaseComponent from './base-component'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@ -66,9 +67,9 @@ const METHOD_POSITION = 'position'
|
|||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
class ScrollSpy {
|
class ScrollSpy extends BaseComponent {
|
||||||
constructor(element, config) {
|
constructor(element, config) {
|
||||||
this._element = element
|
super(element)
|
||||||
this._scrollElement = element.tagName === 'BODY' ? window : element
|
this._scrollElement = element.tagName === 'BODY' ? window : element
|
||||||
this._config = this._getConfig(config)
|
this._config = this._getConfig(config)
|
||||||
this._selector = `${this._config.target} ${SELECTOR_NAV_LINKS}, ${this._config.target} ${SELECTOR_LIST_ITEMS}, ${this._config.target} .${CLASS_NAME_DROPDOWN_ITEM}`
|
this._selector = `${this._config.target} ${SELECTOR_NAV_LINKS}, ${this._config.target} ${SELECTOR_LIST_ITEMS}, ${this._config.target} .${CLASS_NAME_DROPDOWN_ITEM}`
|
||||||
@ -95,6 +96,10 @@ class ScrollSpy {
|
|||||||
return Default
|
return Default
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static get DATA_KEY() {
|
||||||
|
return DATA_KEY
|
||||||
|
}
|
||||||
|
|
||||||
// Public
|
// Public
|
||||||
|
|
||||||
refresh() {
|
refresh() {
|
||||||
@ -301,10 +306,6 @@ class ScrollSpy {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static getInstance(element) {
|
|
||||||
return Data.getData(element, DATA_KEY)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -17,6 +17,7 @@ import {
|
|||||||
import Data from './dom/data'
|
import Data from './dom/data'
|
||||||
import EventHandler from './dom/event-handler'
|
import EventHandler from './dom/event-handler'
|
||||||
import SelectorEngine from './dom/selector-engine'
|
import SelectorEngine from './dom/selector-engine'
|
||||||
|
import BaseComponent from './base-component'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@ -56,19 +57,17 @@ const SELECTOR_DROPDOWN_ACTIVE_CHILD = ':scope > .dropdown-menu .active'
|
|||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
class Tab {
|
class Tab extends BaseComponent {
|
||||||
constructor(element) {
|
|
||||||
this._element = element
|
|
||||||
|
|
||||||
Data.setData(this._element, DATA_KEY, this)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Getters
|
// Getters
|
||||||
|
|
||||||
static get VERSION() {
|
static get VERSION() {
|
||||||
return VERSION
|
return VERSION
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static get DATA_KEY() {
|
||||||
|
return DATA_KEY
|
||||||
|
}
|
||||||
|
|
||||||
// Public
|
// Public
|
||||||
|
|
||||||
show() {
|
show() {
|
||||||
@ -217,10 +216,6 @@ class Tab {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static getInstance(element) {
|
|
||||||
return Data.getData(element, DATA_KEY)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -17,6 +17,7 @@ import {
|
|||||||
import Data from './dom/data'
|
import Data from './dom/data'
|
||||||
import EventHandler from './dom/event-handler'
|
import EventHandler from './dom/event-handler'
|
||||||
import Manipulator from './dom/manipulator'
|
import Manipulator from './dom/manipulator'
|
||||||
|
import BaseComponent from './base-component'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@ -60,9 +61,10 @@ const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="toast"]'
|
|||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
class Toast {
|
class Toast extends BaseComponent {
|
||||||
constructor(element, config) {
|
constructor(element, config) {
|
||||||
this._element = element
|
super(element)
|
||||||
|
|
||||||
this._config = this._getConfig(config)
|
this._config = this._getConfig(config)
|
||||||
this._timeout = null
|
this._timeout = null
|
||||||
this._setListeners()
|
this._setListeners()
|
||||||
@ -83,6 +85,10 @@ class Toast {
|
|||||||
return Default
|
return Default
|
||||||
}
|
}
|
||||||
|
|
||||||
|
static get DATA_KEY() {
|
||||||
|
return DATA_KEY
|
||||||
|
}
|
||||||
|
|
||||||
// Public
|
// Public
|
||||||
|
|
||||||
show() {
|
show() {
|
||||||
@ -208,10 +214,6 @@ class Toast {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static getInstance(element) {
|
|
||||||
return Data.getData(element, DATA_KEY)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -26,6 +26,7 @@ import EventHandler from './dom/event-handler'
|
|||||||
import Manipulator from './dom/manipulator'
|
import Manipulator from './dom/manipulator'
|
||||||
import Popper from 'popper.js'
|
import Popper from 'popper.js'
|
||||||
import SelectorEngine from './dom/selector-engine'
|
import SelectorEngine from './dom/selector-engine'
|
||||||
|
import BaseComponent from './base-component'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
@ -124,12 +125,14 @@ const TRIGGER_MANUAL = 'manual'
|
|||||||
* ------------------------------------------------------------------------
|
* ------------------------------------------------------------------------
|
||||||
*/
|
*/
|
||||||
|
|
||||||
class Tooltip {
|
class Tooltip extends BaseComponent {
|
||||||
constructor(element, config) {
|
constructor(element, config) {
|
||||||
if (typeof Popper === 'undefined') {
|
if (typeof Popper === 'undefined') {
|
||||||
throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)')
|
throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)')
|
||||||
}
|
}
|
||||||
|
|
||||||
|
super(element)
|
||||||
|
|
||||||
// private
|
// private
|
||||||
this._isEnabled = true
|
this._isEnabled = true
|
||||||
this._timeout = 0
|
this._timeout = 0
|
||||||
@ -138,7 +141,6 @@ class Tooltip {
|
|||||||
this._popper = null
|
this._popper = null
|
||||||
|
|
||||||
// Protected
|
// Protected
|
||||||
this.element = element
|
|
||||||
this.config = this._getConfig(config)
|
this.config = this._getConfig(config)
|
||||||
this.tip = null
|
this.tip = null
|
||||||
|
|
||||||
@ -227,10 +229,10 @@ class Tooltip {
|
|||||||
dispose() {
|
dispose() {
|
||||||
clearTimeout(this._timeout)
|
clearTimeout(this._timeout)
|
||||||
|
|
||||||
Data.removeData(this.element, this.constructor.DATA_KEY)
|
Data.removeData(this._element, this.constructor.DATA_KEY)
|
||||||
|
|
||||||
EventHandler.off(this.element, this.constructor.EVENT_KEY)
|
EventHandler.off(this._element, this.constructor.EVENT_KEY)
|
||||||
EventHandler.off(this.element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler)
|
EventHandler.off(this._element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler)
|
||||||
|
|
||||||
if (this.tip) {
|
if (this.tip) {
|
||||||
this.tip.parentNode.removeChild(this.tip)
|
this.tip.parentNode.removeChild(this.tip)
|
||||||
@ -245,22 +247,22 @@ class Tooltip {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this._popper = null
|
this._popper = null
|
||||||
this.element = null
|
this._element = null
|
||||||
this.config = null
|
this.config = null
|
||||||
this.tip = null
|
this.tip = null
|
||||||
}
|
}
|
||||||
|
|
||||||
show() {
|
show() {
|
||||||
if (this.element.style.display === 'none') {
|
if (this._element.style.display === 'none') {
|
||||||
throw new Error('Please use show on visible elements')
|
throw new Error('Please use show on visible elements')
|
||||||
}
|
}
|
||||||
|
|
||||||
if (this.isWithContent() && this._isEnabled) {
|
if (this.isWithContent() && this._isEnabled) {
|
||||||
const showEvent = EventHandler.trigger(this.element, this.constructor.Event.SHOW)
|
const showEvent = EventHandler.trigger(this._element, this.constructor.Event.SHOW)
|
||||||
const shadowRoot = findShadowRoot(this.element)
|
const shadowRoot = findShadowRoot(this._element)
|
||||||
const isInTheDom = shadowRoot === null ?
|
const isInTheDom = shadowRoot === null ?
|
||||||
this.element.ownerDocument.documentElement.contains(this.element) :
|
this._element.ownerDocument.documentElement.contains(this._element) :
|
||||||
shadowRoot.contains(this.element)
|
shadowRoot.contains(this._element)
|
||||||
|
|
||||||
if (showEvent.defaultPrevented || !isInTheDom) {
|
if (showEvent.defaultPrevented || !isInTheDom) {
|
||||||
return
|
return
|
||||||
@ -270,7 +272,7 @@ class Tooltip {
|
|||||||
const tipId = getUID(this.constructor.NAME)
|
const tipId = getUID(this.constructor.NAME)
|
||||||
|
|
||||||
tip.setAttribute('id', tipId)
|
tip.setAttribute('id', tipId)
|
||||||
this.element.setAttribute('aria-describedby', tipId)
|
this._element.setAttribute('aria-describedby', tipId)
|
||||||
|
|
||||||
this.setContent()
|
this.setContent()
|
||||||
|
|
||||||
@ -279,7 +281,7 @@ class Tooltip {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const placement = typeof this.config.placement === 'function' ?
|
const placement = typeof this.config.placement === 'function' ?
|
||||||
this.config.placement.call(this, tip, this.element) :
|
this.config.placement.call(this, tip, this._element) :
|
||||||
this.config.placement
|
this.config.placement
|
||||||
|
|
||||||
const attachment = this._getAttachment(placement)
|
const attachment = this._getAttachment(placement)
|
||||||
@ -288,13 +290,13 @@ class Tooltip {
|
|||||||
const container = this._getContainer()
|
const container = this._getContainer()
|
||||||
Data.setData(tip, this.constructor.DATA_KEY, this)
|
Data.setData(tip, this.constructor.DATA_KEY, this)
|
||||||
|
|
||||||
if (!this.element.ownerDocument.documentElement.contains(this.tip)) {
|
if (!this._element.ownerDocument.documentElement.contains(this.tip)) {
|
||||||
container.appendChild(tip)
|
container.appendChild(tip)
|
||||||
}
|
}
|
||||||
|
|
||||||
EventHandler.trigger(this.element, this.constructor.Event.INSERTED)
|
EventHandler.trigger(this._element, this.constructor.Event.INSERTED)
|
||||||
|
|
||||||
this._popper = new Popper(this.element, tip, this._getPopperConfig(attachment))
|
this._popper = new Popper(this._element, tip, this._getPopperConfig(attachment))
|
||||||
|
|
||||||
tip.classList.add(CLASS_NAME_SHOW)
|
tip.classList.add(CLASS_NAME_SHOW)
|
||||||
|
|
||||||
@ -321,7 +323,7 @@ class Tooltip {
|
|||||||
const prevHoverState = this._hoverState
|
const prevHoverState = this._hoverState
|
||||||
this._hoverState = null
|
this._hoverState = null
|
||||||
|
|
||||||
EventHandler.trigger(this.element, this.constructor.Event.SHOWN)
|
EventHandler.trigger(this._element, this.constructor.Event.SHOWN)
|
||||||
|
|
||||||
if (prevHoverState === HOVER_STATE_OUT) {
|
if (prevHoverState === HOVER_STATE_OUT) {
|
||||||
this._leave(null, this)
|
this._leave(null, this)
|
||||||
@ -350,12 +352,12 @@ class Tooltip {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this._cleanTipClass()
|
this._cleanTipClass()
|
||||||
this.element.removeAttribute('aria-describedby')
|
this._element.removeAttribute('aria-describedby')
|
||||||
EventHandler.trigger(this.element, this.constructor.Event.HIDDEN)
|
EventHandler.trigger(this._element, this.constructor.Event.HIDDEN)
|
||||||
this._popper.destroy()
|
this._popper.destroy()
|
||||||
}
|
}
|
||||||
|
|
||||||
const hideEvent = EventHandler.trigger(this.element, this.constructor.Event.HIDE)
|
const hideEvent = EventHandler.trigger(this._element, this.constructor.Event.HIDE)
|
||||||
if (hideEvent.defaultPrevented) {
|
if (hideEvent.defaultPrevented) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@ -450,11 +452,11 @@ class Tooltip {
|
|||||||
}
|
}
|
||||||
|
|
||||||
getTitle() {
|
getTitle() {
|
||||||
let title = this.element.getAttribute('data-bs-original-title')
|
let title = this._element.getAttribute('data-bs-original-title')
|
||||||
|
|
||||||
if (!title) {
|
if (!title) {
|
||||||
title = typeof this.config.title === 'function' ?
|
title = typeof this.config.title === 'function' ?
|
||||||
this.config.title.call(this.element) :
|
this.config.title.call(this._element) :
|
||||||
this.config.title
|
this.config.title
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -503,7 +505,7 @@ class Tooltip {
|
|||||||
offset.fn = data => {
|
offset.fn = data => {
|
||||||
data.offsets = {
|
data.offsets = {
|
||||||
...data.offsets,
|
...data.offsets,
|
||||||
...(this.config.offset(data.offsets, this.element) || {})
|
...(this.config.offset(data.offsets, this._element) || {})
|
||||||
}
|
}
|
||||||
|
|
||||||
return data
|
return data
|
||||||
@ -536,7 +538,7 @@ class Tooltip {
|
|||||||
|
|
||||||
triggers.forEach(trigger => {
|
triggers.forEach(trigger => {
|
||||||
if (trigger === 'click') {
|
if (trigger === 'click') {
|
||||||
EventHandler.on(this.element,
|
EventHandler.on(this._element,
|
||||||
this.constructor.Event.CLICK,
|
this.constructor.Event.CLICK,
|
||||||
this.config.selector,
|
this.config.selector,
|
||||||
event => this.toggle(event)
|
event => this.toggle(event)
|
||||||
@ -549,12 +551,12 @@ class Tooltip {
|
|||||||
this.constructor.Event.MOUSELEAVE :
|
this.constructor.Event.MOUSELEAVE :
|
||||||
this.constructor.Event.FOCUSOUT
|
this.constructor.Event.FOCUSOUT
|
||||||
|
|
||||||
EventHandler.on(this.element,
|
EventHandler.on(this._element,
|
||||||
eventIn,
|
eventIn,
|
||||||
this.config.selector,
|
this.config.selector,
|
||||||
event => this._enter(event)
|
event => this._enter(event)
|
||||||
)
|
)
|
||||||
EventHandler.on(this.element,
|
EventHandler.on(this._element,
|
||||||
eventOut,
|
eventOut,
|
||||||
this.config.selector,
|
this.config.selector,
|
||||||
event => this._leave(event)
|
event => this._leave(event)
|
||||||
@ -563,12 +565,12 @@ class Tooltip {
|
|||||||
})
|
})
|
||||||
|
|
||||||
this._hideModalHandler = () => {
|
this._hideModalHandler = () => {
|
||||||
if (this.element) {
|
if (this._element) {
|
||||||
this.hide()
|
this.hide()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
EventHandler.on(this.element.closest(`.${CLASS_NAME_MODAL}`),
|
EventHandler.on(this._element.closest(`.${CLASS_NAME_MODAL}`),
|
||||||
'hide.bs.modal',
|
'hide.bs.modal',
|
||||||
this._hideModalHandler
|
this._hideModalHandler
|
||||||
)
|
)
|
||||||
@ -585,12 +587,12 @@ class Tooltip {
|
|||||||
}
|
}
|
||||||
|
|
||||||
_fixTitle() {
|
_fixTitle() {
|
||||||
const title = this.element.getAttribute('title')
|
const title = this._element.getAttribute('title')
|
||||||
const originalTitleType = typeof this.element.getAttribute('data-bs-original-title')
|
const originalTitleType = typeof this._element.getAttribute('data-bs-original-title')
|
||||||
|
|
||||||
if (title || originalTitleType !== 'string') {
|
if (title || originalTitleType !== 'string') {
|
||||||
this.element.setAttribute('data-bs-original-title', title || '')
|
this._element.setAttribute('data-bs-original-title', title || '')
|
||||||
this.element.setAttribute('title', '')
|
this._element.setAttribute('title', '')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -683,7 +685,7 @@ class Tooltip {
|
|||||||
}
|
}
|
||||||
|
|
||||||
_getConfig(config) {
|
_getConfig(config) {
|
||||||
const dataAttributes = Manipulator.getDataAttributes(this.element)
|
const dataAttributes = Manipulator.getDataAttributes(this._element)
|
||||||
|
|
||||||
Object.keys(dataAttributes).forEach(dataAttr => {
|
Object.keys(dataAttributes).forEach(dataAttr => {
|
||||||
if (DISALLOWED_ATTRIBUTES.has(dataAttr)) {
|
if (DISALLOWED_ATTRIBUTES.has(dataAttr)) {
|
||||||
@ -792,10 +794,6 @@ class Tooltip {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
static getInstance(element) {
|
|
||||||
return Data.getData(element, DATA_KEY)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -170,4 +170,24 @@ describe('Alert', () => {
|
|||||||
expect(fixtureEl.querySelector('.alert')).not.toBeNull()
|
expect(fixtureEl.querySelector('.alert')).not.toBeNull()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
describe('getInstance', () => {
|
||||||
|
it('should return alert instance', () => {
|
||||||
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
|
||||||
|
const div = fixtureEl.querySelector('div')
|
||||||
|
const alert = new Alert(div)
|
||||||
|
|
||||||
|
expect(Alert.getInstance(div)).toEqual(alert)
|
||||||
|
expect(Alert.getInstance(div) instanceof Alert).toEqual(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should return null when there is no alert instance', () => {
|
||||||
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
|
||||||
|
const div = fixtureEl.querySelector('div')
|
||||||
|
|
||||||
|
expect(Alert.getInstance(div)).toEqual(null)
|
||||||
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
@ -128,4 +128,24 @@ describe('Button', () => {
|
|||||||
expect(btnEl.classList.contains('active')).toEqual(false)
|
expect(btnEl.classList.contains('active')).toEqual(false)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
describe('getInstance', () => {
|
||||||
|
it('should return button instance', () => {
|
||||||
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
|
||||||
|
const div = fixtureEl.querySelector('div')
|
||||||
|
const button = new Button(div)
|
||||||
|
|
||||||
|
expect(Button.getInstance(div)).toEqual(button)
|
||||||
|
expect(Button.getInstance(div) instanceof Button).toEqual(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should return null when there is no button instance', () => {
|
||||||
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
|
||||||
|
const div = fixtureEl.querySelector('div')
|
||||||
|
|
||||||
|
expect(Button.getInstance(div)).toEqual(null)
|
||||||
|
})
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
@ -1062,6 +1062,26 @@ describe('Carousel', () => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
describe('getInstance', () => {
|
||||||
|
it('should return carousel instance', () => {
|
||||||
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
|
||||||
|
const div = fixtureEl.querySelector('div')
|
||||||
|
const carousel = new Carousel(div)
|
||||||
|
|
||||||
|
expect(Carousel.getInstance(div)).toEqual(carousel)
|
||||||
|
expect(Carousel.getInstance(div) instanceof Carousel).toEqual(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should return null when there is no carousel instance', () => {
|
||||||
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
|
||||||
|
const div = fixtureEl.querySelector('div')
|
||||||
|
|
||||||
|
expect(Carousel.getInstance(div)).toEqual(null)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
describe('jQueryInterface', () => {
|
describe('jQueryInterface', () => {
|
||||||
it('should create a carousel', () => {
|
it('should create a carousel', () => {
|
||||||
fixtureEl.innerHTML = '<div></div>'
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
@ -812,6 +812,7 @@ describe('Collapse', () => {
|
|||||||
const collapse = new Collapse(div)
|
const collapse = new Collapse(div)
|
||||||
|
|
||||||
expect(Collapse.getInstance(div)).toEqual(collapse)
|
expect(Collapse.getInstance(div)).toEqual(collapse)
|
||||||
|
expect(Collapse.getInstance(div) instanceof Collapse).toEqual(true)
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should return null when there is no collapse instance', () => {
|
it('should return null when there is no collapse instance', () => {
|
||||||
|
@ -1612,6 +1612,7 @@ describe('Dropdown', () => {
|
|||||||
const dropdown = new Dropdown(div)
|
const dropdown = new Dropdown(div)
|
||||||
|
|
||||||
expect(Dropdown.getInstance(div)).toEqual(dropdown)
|
expect(Dropdown.getInstance(div)).toEqual(dropdown)
|
||||||
|
expect(Dropdown.getInstance(div) instanceof Dropdown).toEqual(true)
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should return null when there is no dropdown instance', () => {
|
it('should return null when there is no dropdown instance', () => {
|
||||||
|
@ -1108,6 +1108,7 @@ describe('Modal', () => {
|
|||||||
const modal = new Modal(div)
|
const modal = new Modal(div)
|
||||||
|
|
||||||
expect(Modal.getInstance(div)).toEqual(modal)
|
expect(Modal.getInstance(div)).toEqual(modal)
|
||||||
|
expect(Modal.getInstance(div) instanceof Modal).toEqual(true)
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should return null when there is no modal instance', () => {
|
it('should return null when there is no modal instance', () => {
|
||||||
|
@ -253,6 +253,7 @@ describe('Popover', () => {
|
|||||||
const popover = new Popover(popoverEl)
|
const popover = new Popover(popoverEl)
|
||||||
|
|
||||||
expect(Popover.getInstance(popoverEl)).toEqual(popover)
|
expect(Popover.getInstance(popoverEl)).toEqual(popover)
|
||||||
|
expect(Popover.getInstance(popoverEl) instanceof Popover).toEqual(true)
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should return null when there is no popover instance', () => {
|
it('should return null when there is no popover instance', () => {
|
||||||
|
@ -634,6 +634,16 @@ describe('ScrollSpy', () => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
describe('getInstance', () => {
|
describe('getInstance', () => {
|
||||||
|
it('should return scrollspy instance', () => {
|
||||||
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
|
||||||
|
const div = fixtureEl.querySelector('div')
|
||||||
|
const scrollSpy = new ScrollSpy(div)
|
||||||
|
|
||||||
|
expect(ScrollSpy.getInstance(div)).toEqual(scrollSpy)
|
||||||
|
expect(ScrollSpy.getInstance(div) instanceof ScrollSpy).toEqual(true)
|
||||||
|
})
|
||||||
|
|
||||||
it('should return null if there is no instance', () => {
|
it('should return null if there is no instance', () => {
|
||||||
expect(ScrollSpy.getInstance(fixtureEl)).toEqual(null)
|
expect(ScrollSpy.getInstance(fixtureEl)).toEqual(null)
|
||||||
})
|
})
|
||||||
|
@ -417,6 +417,7 @@ describe('Tab', () => {
|
|||||||
const tab = new Tab(divEl)
|
const tab = new Tab(divEl)
|
||||||
|
|
||||||
expect(Tab.getInstance(divEl)).toEqual(tab)
|
expect(Tab.getInstance(divEl)).toEqual(tab)
|
||||||
|
expect(Tab.getInstance(divEl) instanceof Tab).toEqual(true)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -384,6 +384,7 @@ describe('Toast', () => {
|
|||||||
const toast = new Toast(div)
|
const toast = new Toast(div)
|
||||||
|
|
||||||
expect(Toast.getInstance(div)).toEqual(toast)
|
expect(Toast.getInstance(div)).toEqual(toast)
|
||||||
|
expect(Toast.getInstance(div) instanceof Toast).toEqual(true)
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should return null when there is no toast instance', () => {
|
it('should return null when there is no toast instance', () => {
|
||||||
|
@ -1030,6 +1030,26 @@ describe('Tooltip', () => {
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
|
describe('getInstance', () => {
|
||||||
|
it('should return tooltip instance', () => {
|
||||||
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
|
||||||
|
const div = fixtureEl.querySelector('div')
|
||||||
|
const alert = new Tooltip(div)
|
||||||
|
|
||||||
|
expect(Tooltip.getInstance(div)).toEqual(alert)
|
||||||
|
expect(Tooltip.getInstance(div) instanceof Tooltip).toEqual(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should return null when there is no tooltip instance', () => {
|
||||||
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
|
||||||
|
const div = fixtureEl.querySelector('div')
|
||||||
|
|
||||||
|
expect(Tooltip.getInstance(div)).toEqual(null)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
describe('jQueryInterface', () => {
|
describe('jQueryInterface', () => {
|
||||||
it('should create a tooltip', () => {
|
it('should create a tooltip', () => {
|
||||||
fixtureEl.innerHTML = '<div></div>'
|
fixtureEl.innerHTML = '<div></div>'
|
||||||
|
Loading…
Reference in New Issue
Block a user