} from './util/index'
import Data from './dom/data'
import EventHandler from './dom/event-handler'
+import BaseComponent from './base-component'
/**
* ------------------------------------------------------------------------
* ------------------------------------------------------------------------
*/
-class Alert {
- constructor(element) {
- this._element = element
-
- if (this._element) {
- Data.setData(element, DATA_KEY, this)
- }
- }
-
+class Alert extends BaseComponent {
// Getters
static get VERSION() {
return VERSION
}
+ static get DATA_KEY() {
+ return DATA_KEY
+ }
+
// Public
close(element) {
alertInstance.close(this)
}
}
-
- static getInstance(element) {
- return Data.getData(element, DATA_KEY)
- }
}
/**
--- /dev/null
+/**
+ * --------------------------------------------------------------------------
+ * 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
import { getjQuery, onDOMContentLoaded } from './util/index'
import Data from './dom/data'
import EventHandler from './dom/event-handler'
+import BaseComponent from './base-component'
/**
* ------------------------------------------------------------------------
* ------------------------------------------------------------------------
*/
-class Button {
- constructor(element) {
- this._element = element
- Data.setData(element, DATA_KEY, this)
- }
-
+class Button extends BaseComponent {
// Getters
static get VERSION() {
return VERSION
}
+ static get DATA_KEY() {
+ return DATA_KEY
+ }
+
// Public
toggle() {
}
})
}
-
- static getInstance(element) {
- return Data.getData(element, DATA_KEY)
- }
}
/**
import EventHandler from './dom/event-handler'
import Manipulator from './dom/manipulator'
import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
-class Carousel {
+class Carousel extends BaseComponent {
constructor(element, config) {
+ super(element)
+
this._items = null
this._interval = null
this._activeElement = null
this.touchDeltaX = 0
this._config = this._getConfig(config)
- this._element = element
this._indicatorsElement = SelectorEngine.findOne(SELECTOR_INDICATORS, this._element)
this._touchSupported = 'ontouchstart' in document.documentElement || navigator.maxTouchPoints > 0
this._pointerEvent = Boolean(window.PointerEvent)
return Default
}
+ static get DATA_KEY() {
+ return DATA_KEY
+ }
+
// Public
next() {
event.preventDefault()
}
-
- static getInstance(element) {
- return Data.getData(element, DATA_KEY)
- }
}
/**
import EventHandler from './dom/event-handler'
import Manipulator from './dom/manipulator'
import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
/**
* ------------------------------------------------------------------------
* ------------------------------------------------------------------------
*/
-class Collapse {
+class Collapse extends BaseComponent {
constructor(element, config) {
+ super(element)
+
this._isTransitioning = false
- this._element = element
this._config = this._getConfig(config)
this._triggerArray = SelectorEngine.find(
`${SELECTOR_DATA_TOGGLE}[href="#${element.id}"],` +
return Default
}
+ static get DATA_KEY() {
+ return DATA_KEY
+ }
+
// Public
toggle() {
Collapse.collapseInterface(this, config)
})
}
-
- static getInstance(element) {
- return Data.getData(element, DATA_KEY)
- }
}
/**
import Manipulator from './dom/manipulator'
import Popper from 'popper.js'
import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
/**
* ------------------------------------------------------------------------
* ------------------------------------------------------------------------
*/
-class Dropdown {
+class Dropdown extends BaseComponent {
constructor(element, config) {
- this._element = element
+ super(element)
+
this._popper = null
this._config = this._getConfig(config)
this._menu = this._getMenuElement()
return DefaultType
}
+ static get DATA_KEY() {
+ return DATA_KEY
+ }
+
// Public
toggle() {
items[index].focus()
}
-
- static getInstance(element) {
- return Data.getData(element, DATA_KEY)
- }
}
/**
import EventHandler from './dom/event-handler'
import Manipulator from './dom/manipulator'
import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
/**
* ------------------------------------------------------------------------
* ------------------------------------------------------------------------
*/
-class Modal {
+class Modal extends BaseComponent {
constructor(element, config) {
+ super(element)
+
this._config = this._getConfig(config)
- this._element = element
this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, element)
this._backdrop = null
this._isShown = false
return Default
}
+ static get DATA_KEY() {
+ return DATA_KEY
+ }
+
// Public
toggle(relatedTarget) {
}
})
}
-
- static getInstance(element) {
- return Data.getData(element, DATA_KEY)
- }
}
/**
this.setElementContent(SelectorEngine.findOne(SELECTOR_TITLE, tip), this.getTitle())
let content = this._getContent()
if (typeof content === 'function') {
- content = content.call(this.element)
+ content = content.call(this._element)
}
this.setElementContent(SelectorEngine.findOne(SELECTOR_CONTENT, tip), content)
}
_getContent() {
- return this.element.getAttribute('data-bs-content') ||
+ return this._element.getAttribute('data-bs-content') ||
this.config.content
}
}
})
}
-
- static getInstance(element) {
- return Data.getData(element, DATA_KEY)
- }
}
/**
import EventHandler from './dom/event-handler'
import Manipulator from './dom/manipulator'
import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
/**
* ------------------------------------------------------------------------
* ------------------------------------------------------------------------
*/
-class ScrollSpy {
+class ScrollSpy extends BaseComponent {
constructor(element, config) {
- this._element = element
+ super(element)
this._scrollElement = element.tagName === 'BODY' ? window : element
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}`
return Default
}
+ static get DATA_KEY() {
+ return DATA_KEY
+ }
+
// Public
refresh() {
}
})
}
-
- static getInstance(element) {
- return Data.getData(element, DATA_KEY)
- }
}
/**
import Data from './dom/data'
import EventHandler from './dom/event-handler'
import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
/**
* ------------------------------------------------------------------------
* ------------------------------------------------------------------------
*/
-class Tab {
- constructor(element) {
- this._element = element
-
- Data.setData(this._element, DATA_KEY, this)
- }
-
+class Tab extends BaseComponent {
// Getters
static get VERSION() {
return VERSION
}
+ static get DATA_KEY() {
+ return DATA_KEY
+ }
+
// Public
show() {
}
})
}
-
- static getInstance(element) {
- return Data.getData(element, DATA_KEY)
- }
}
/**
import Data from './dom/data'
import EventHandler from './dom/event-handler'
import Manipulator from './dom/manipulator'
+import BaseComponent from './base-component'
/**
* ------------------------------------------------------------------------
* ------------------------------------------------------------------------
*/
-class Toast {
+class Toast extends BaseComponent {
constructor(element, config) {
- this._element = element
+ super(element)
+
this._config = this._getConfig(config)
this._timeout = null
this._setListeners()
return Default
}
+ static get DATA_KEY() {
+ return DATA_KEY
+ }
+
// Public
show() {
}
})
}
-
- static getInstance(element) {
- return Data.getData(element, DATA_KEY)
- }
}
/**
import Manipulator from './dom/manipulator'
import Popper from 'popper.js'
import SelectorEngine from './dom/selector-engine'
+import BaseComponent from './base-component'
/**
* ------------------------------------------------------------------------
* ------------------------------------------------------------------------
*/
-class Tooltip {
+class Tooltip extends BaseComponent {
constructor(element, config) {
if (typeof Popper === 'undefined') {
throw new TypeError('Bootstrap\'s tooltips require Popper (https://popper.js.org)')
}
+ super(element)
+
// private
this._isEnabled = true
this._timeout = 0
this._popper = null
// Protected
- this.element = element
this.config = this._getConfig(config)
this.tip = null
dispose() {
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.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler)
+ EventHandler.off(this._element, this.constructor.EVENT_KEY)
+ EventHandler.off(this._element.closest(`.${CLASS_NAME_MODAL}`), 'hide.bs.modal', this._hideModalHandler)
if (this.tip) {
this.tip.parentNode.removeChild(this.tip)
}
this._popper = null
- this.element = null
+ this._element = null
this.config = null
this.tip = null
}
show() {
- if (this.element.style.display === 'none') {
+ if (this._element.style.display === 'none') {
throw new Error('Please use show on visible elements')
}
if (this.isWithContent() && this._isEnabled) {
- const showEvent = EventHandler.trigger(this.element, this.constructor.Event.SHOW)
- const shadowRoot = findShadowRoot(this.element)
+ const showEvent = EventHandler.trigger(this._element, this.constructor.Event.SHOW)
+ const shadowRoot = findShadowRoot(this._element)
const isInTheDom = shadowRoot === null ?
- this.element.ownerDocument.documentElement.contains(this.element) :
- shadowRoot.contains(this.element)
+ this._element.ownerDocument.documentElement.contains(this._element) :
+ shadowRoot.contains(this._element)
if (showEvent.defaultPrevented || !isInTheDom) {
return
const tipId = getUID(this.constructor.NAME)
tip.setAttribute('id', tipId)
- this.element.setAttribute('aria-describedby', tipId)
+ this._element.setAttribute('aria-describedby', tipId)
this.setContent()
}
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
const attachment = this._getAttachment(placement)
const container = this._getContainer()
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)
}
- 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)
const prevHoverState = this._hoverState
this._hoverState = null
- EventHandler.trigger(this.element, this.constructor.Event.SHOWN)
+ EventHandler.trigger(this._element, this.constructor.Event.SHOWN)
if (prevHoverState === HOVER_STATE_OUT) {
this._leave(null, this)
}
this._cleanTipClass()
- this.element.removeAttribute('aria-describedby')
- EventHandler.trigger(this.element, this.constructor.Event.HIDDEN)
+ this._element.removeAttribute('aria-describedby')
+ EventHandler.trigger(this._element, this.constructor.Event.HIDDEN)
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) {
return
}
}
getTitle() {
- let title = this.element.getAttribute('data-bs-original-title')
+ let title = this._element.getAttribute('data-bs-original-title')
if (!title) {
title = typeof this.config.title === 'function' ?
- this.config.title.call(this.element) :
+ this.config.title.call(this._element) :
this.config.title
}
offset.fn = data => {
data.offsets = {
...data.offsets,
- ...(this.config.offset(data.offsets, this.element) || {})
+ ...(this.config.offset(data.offsets, this._element) || {})
}
return data
triggers.forEach(trigger => {
if (trigger === 'click') {
- EventHandler.on(this.element,
+ EventHandler.on(this._element,
this.constructor.Event.CLICK,
this.config.selector,
event => this.toggle(event)
this.constructor.Event.MOUSELEAVE :
this.constructor.Event.FOCUSOUT
- EventHandler.on(this.element,
+ EventHandler.on(this._element,
eventIn,
this.config.selector,
event => this._enter(event)
)
- EventHandler.on(this.element,
+ EventHandler.on(this._element,
eventOut,
this.config.selector,
event => this._leave(event)
})
this._hideModalHandler = () => {
- if (this.element) {
+ if (this._element) {
this.hide()
}
}
- EventHandler.on(this.element.closest(`.${CLASS_NAME_MODAL}`),
+ EventHandler.on(this._element.closest(`.${CLASS_NAME_MODAL}`),
'hide.bs.modal',
this._hideModalHandler
)
}
_fixTitle() {
- const title = this.element.getAttribute('title')
- const originalTitleType = typeof this.element.getAttribute('data-bs-original-title')
+ const title = this._element.getAttribute('title')
+ const originalTitleType = typeof this._element.getAttribute('data-bs-original-title')
if (title || originalTitleType !== 'string') {
- this.element.setAttribute('data-bs-original-title', title || '')
- this.element.setAttribute('title', '')
+ this._element.setAttribute('data-bs-original-title', title || '')
+ this._element.setAttribute('title', '')
}
}
}
_getConfig(config) {
- const dataAttributes = Manipulator.getDataAttributes(this.element)
+ const dataAttributes = Manipulator.getDataAttributes(this._element)
Object.keys(dataAttributes).forEach(dataAttr => {
if (DISALLOWED_ATTRIBUTES.has(dataAttr)) {
}
})
}
-
- static getInstance(element) {
- return Data.getData(element, DATA_KEY)
- }
}
/**
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)
+ })
+ })
})
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)
+ })
+ })
})
})
})
+ 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', () => {
it('should create a carousel', () => {
fixtureEl.innerHTML = '<div></div>'
const collapse = new Collapse(div)
expect(Collapse.getInstance(div)).toEqual(collapse)
+ expect(Collapse.getInstance(div) instanceof Collapse).toEqual(true)
})
it('should return null when there is no collapse instance', () => {
const dropdown = new Dropdown(div)
expect(Dropdown.getInstance(div)).toEqual(dropdown)
+ expect(Dropdown.getInstance(div) instanceof Dropdown).toEqual(true)
})
it('should return null when there is no dropdown instance', () => {
const modal = new Modal(div)
expect(Modal.getInstance(div)).toEqual(modal)
+ expect(Modal.getInstance(div) instanceof Modal).toEqual(true)
})
it('should return null when there is no modal instance', () => {
const popover = new Popover(popoverEl)
expect(Popover.getInstance(popoverEl)).toEqual(popover)
+ expect(Popover.getInstance(popoverEl) instanceof Popover).toEqual(true)
})
it('should return null when there is no popover instance', () => {
})
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', () => {
expect(ScrollSpy.getInstance(fixtureEl)).toEqual(null)
})
const tab = new Tab(divEl)
expect(Tab.getInstance(divEl)).toEqual(tab)
+ expect(Tab.getInstance(divEl) instanceof Tab).toEqual(true)
})
})
const toast = new Toast(div)
expect(Toast.getInstance(div)).toEqual(toast)
+ expect(Toast.getInstance(div) instanceof Toast).toEqual(true)
})
it('should return null when there is no toast instance', () => {
})
})
+ 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', () => {
it('should create a tooltip', () => {
fixtureEl.innerHTML = '<div></div>'