*/
import Data from './dom/data'
-import {
- executeAfterTransition,
- getElement
-} from './util/index'
+import { executeAfterTransition, getElement } from './util/index'
import EventHandler from './dom/event-handler'
+import Config from './util/config'
/**
* Constants
* Class definition
*/
-class BaseComponent {
- constructor(element) {
- element = getElement(element)
+class BaseComponent extends Config {
+ constructor(element, config) {
+ super()
+ element = getElement(element)
if (!element) {
return
}
this._element = element
+ this._config = this._getConfig(config)
+
Data.set(this._element, this.constructor.DATA_KEY, this)
}
executeAfterTransition(callback, element, isAnimated)
}
+ _getConfig(config) {
+ config = this._mergeConfigObj(config, this._element)
+ config = this._configAfterMerge(config)
+ this._typeCheckConfig(config)
+ return config
+ }
+
// Static
static getInstance(element) {
return Data.get(getElement(element), this.DATA_KEY)
return VERSION
}
- static get NAME() {
- throw new Error('You have to implement the static method "NAME" for each component!')
- }
-
static get DATA_KEY() {
return `bs.${this.NAME}`
}
isRTL,
isVisible,
reflow,
- triggerTransitionEnd,
- typeCheckConfig
+ triggerTransitionEnd
} from './util/index'
import EventHandler from './dom/event-handler'
import Manipulator from './dom/manipulator'
class Carousel extends BaseComponent {
constructor(element, config) {
- super(element)
+ super(element, config)
this._items = null
this._interval = null
this.touchTimeout = null
this._swipeHelper = null
- this._config = this._getConfig(config)
this._indicatorsElement = SelectorEngine.findOne(SELECTOR_INDICATORS, this._element)
this._addEventListeners()
}
return Default
}
+ static get DefaultType() {
+ return DefaultType
+ }
+
static get NAME() {
return NAME
}
}
// Private
- _getConfig(config) {
- config = {
- ...Default,
- ...Manipulator.getDataAttributes(this._element),
- ...(typeof config === 'object' ? config : {})
- }
- typeCheckConfig(NAME, config, DefaultType)
- return config
- }
-
_addEventListeners() {
if (this._config.keyboard) {
EventHandler.on(this._element, EVENT_KEYDOWN, event => this._keydown(event))
getElement,
getElementFromSelector,
getSelectorFromElement,
- reflow,
- typeCheckConfig
+ reflow
} from './util/index'
import EventHandler from './dom/event-handler'
-import Manipulator from './dom/manipulator'
import SelectorEngine from './dom/selector-engine'
import BaseComponent from './base-component'
class Collapse extends BaseComponent {
constructor(element, config) {
- super(element)
+ super(element, config)
this._isTransitioning = false
- this._config = this._getConfig(config)
this._triggerArray = []
const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
return Default
}
+ static get DefaultType() {
+ return DefaultType
+ }
+
static get NAME() {
return NAME
}
}
// Private
- _getConfig(config) {
- config = {
- ...Default,
- ...Manipulator.getDataAttributes(this._element),
- ...config
- }
+ _configAfterMerge(config) {
config.toggle = Boolean(config.toggle) // Coerce string values
config.parent = getElement(config.parent)
- typeCheckConfig(NAME, config, DefaultType)
return config
}
isElement,
isRTL,
isVisible,
- noop,
- typeCheckConfig
+ noop
} from './util/index'
import EventHandler from './dom/event-handler'
import Manipulator from './dom/manipulator'
class Dropdown extends BaseComponent {
constructor(element, config) {
- super(element)
+ super(element, config)
this._popper = null
- this._config = this._getConfig(config)
this._menu = this._getMenuElement()
this._inNavbar = this._detectNavbar()
}
}
_getConfig(config) {
- config = {
- ...this.constructor.Default,
- ...Manipulator.getDataAttributes(this._element),
- ...config
- }
-
- typeCheckConfig(NAME, config, this.constructor.DefaultType)
+ config = super._getConfig(config)
if (typeof config.reference === 'object' && !isElement(config.reference) &&
typeof config.reference.getBoundingClientRect !== 'function'
* --------------------------------------------------------------------------
*/
-import {
- defineJQueryPlugin,
- getElementFromSelector,
- isRTL,
- isVisible,
- reflow,
- typeCheckConfig
-} from './util/index'
+import { defineJQueryPlugin, getElementFromSelector, isRTL, isVisible, reflow } from './util/index'
import EventHandler from './dom/event-handler'
-import Manipulator from './dom/manipulator'
import SelectorEngine from './dom/selector-engine'
import ScrollBarHelper from './util/scrollbar'
import BaseComponent from './base-component'
class Modal extends BaseComponent {
constructor(element, config) {
- super(element)
+ super(element, config)
- this._config = this._getConfig(config)
this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element)
this._backdrop = this._initializeBackDrop()
this._focustrap = this._initializeFocusTrap()
return Default
}
+ static get DefaultType() {
+ return DefaultType
+ }
+
static get NAME() {
return NAME
}
})
}
- _getConfig(config) {
- config = {
- ...Default,
- ...Manipulator.getDataAttributes(this._element),
- ...(typeof config === 'object' ? config : {})
- }
- typeCheckConfig(NAME, config, DefaultType)
- return config
- }
-
_showElement(relatedTarget) {
// try to append dynamic modal
if (!document.body.contains(this._element)) {
defineJQueryPlugin,
getElementFromSelector,
isDisabled,
- isVisible,
- typeCheckConfig
+ isVisible
} from './util/index'
import ScrollBarHelper from './util/scrollbar'
import EventHandler from './dom/event-handler'
import BaseComponent from './base-component'
import SelectorEngine from './dom/selector-engine'
-import Manipulator from './dom/manipulator'
import Backdrop from './util/backdrop'
import FocusTrap from './util/focustrap'
import { enableDismissTrigger } from './util/component-functions'
class Offcanvas extends BaseComponent {
constructor(element, config) {
- super(element)
+ super(element, config)
- this._config = this._getConfig(config)
this._isShown = false
this._backdrop = this._initializeBackDrop()
this._focustrap = this._initializeFocusTrap()
}
// Getters
- static get NAME() {
- return NAME
- }
-
static get Default() {
return Default
}
+ static get DefaultType() {
+ return DefaultType
+ }
+
+ static get NAME() {
+ return NAME
+ }
+
// Public
toggle(relatedTarget) {
return this._isShown ? this.hide() : this.show(relatedTarget)
}
// Private
- _getConfig(config) {
- config = {
- ...Default,
- ...Manipulator.getDataAttributes(this._element),
- ...(typeof config === 'object' ? config : {})
- }
- typeCheckConfig(NAME, config, DefaultType)
- return config
- }
-
_initializeBackDrop() {
return new Backdrop({
className: CLASS_NAME_BACKDROP,
return Default
}
+ static get DefaultType() {
+ return DefaultType
+ }
+
static get NAME() {
return NAME
}
return Event
}
- static get DefaultType() {
- return DefaultType
- }
-
// Overrides
_isWithContent() {
return this._getTitle() || this._getContent()
import {
defineJQueryPlugin,
getElement,
- getSelectorFromElement,
- typeCheckConfig
+ getSelectorFromElement
} from './util/index'
import EventHandler from './dom/event-handler'
import Manipulator from './dom/manipulator'
class ScrollSpy extends BaseComponent {
constructor(element, config) {
- super(element)
+ super(element, config)
this._scrollElement = this._element.tagName === 'BODY' ? window : this._element
- this._config = this._getConfig(config)
this._offsets = []
this._targets = []
this._activeTarget = null
return Default
}
+ static get DefaultType() {
+ return DefaultType
+ }
+
static get NAME() {
return NAME
}
}
// Private
- _getConfig(config) {
- config = {
- ...Default,
- ...Manipulator.getDataAttributes(this._element),
- ...(typeof config === 'object' && config ? config : {})
- }
+ _configAfterMerge(config) {
config.target = getElement(config.target) || document.documentElement
- typeCheckConfig(NAME, config, DefaultType)
-
return config
}
* --------------------------------------------------------------------------
*/
-import { defineJQueryPlugin, reflow, typeCheckConfig } from './util/index'
+import { defineJQueryPlugin, reflow } from './util/index'
import EventHandler from './dom/event-handler'
-import Manipulator from './dom/manipulator'
import BaseComponent from './base-component'
import { enableDismissTrigger } from './util/component-functions'
class Toast extends BaseComponent {
constructor(element, config) {
- super(element)
+ super(element, config)
- this._config = this._getConfig(config)
this._timeout = null
this._hasMouseInteraction = false
this._hasKeyboardInteraction = false
}
// Getters
- static get DefaultType() {
- return DefaultType
- }
-
static get Default() {
return Default
}
+ static get DefaultType() {
+ return DefaultType
+ }
+
static get NAME() {
return NAME
}
}
// Private
- _getConfig(config) {
- config = {
- ...Default,
- ...Manipulator.getDataAttributes(this._element),
- ...(typeof config === 'object' && config ? config : {})
- }
-
- typeCheckConfig(NAME, config, this.constructor.DefaultType)
-
- return config
- }
_maybeScheduleHide() {
if (!this._config.autohide) {
getElement,
getUID,
isRTL,
- noop,
- typeCheckConfig
+ noop
} from './util/index'
import { DefaultAllowlist } from './util/sanitizer'
import EventHandler from './dom/event-handler'
return Default
}
+ static get DefaultType() {
+ return DefaultType
+ }
+
static get NAME() {
return NAME
}
return Event
}
- static get DefaultType() {
- return DefaultType
- }
-
// Public
enable() {
this._isEnabled = true
}
config = {
- ...this.constructor.Default,
...dataAttributes,
...(typeof config === 'object' && config ? config : {})
}
+ config = this._mergeConfigObj(config)
+ config = this._configAfterMerge(config)
+ this._typeCheckConfig(config)
+ return config
+ }
+ _configAfterMerge(config) {
config.container = config.container === false ? document.body : getElement(config.container)
if (typeof config.delay === 'number') {
config.content = config.content.toString()
}
- typeCheckConfig(NAME, config, this.constructor.DefaultType)
return config
}
*/
import EventHandler from '../dom/event-handler'
-import { execute, executeAfterTransition, getElement, reflow, typeCheckConfig } from './index'
+import { execute, executeAfterTransition, getElement, reflow } from './index'
+import Config from './config'
/**
* Constants
* Class definition
*/
-class Backdrop {
+class Backdrop extends Config {
constructor(config) {
+ super()
this._config = this._getConfig(config)
this._isAppended = false
this._element = null
}
+ // Getters
+ static get Default() {
+ return Default
+ }
+
+ static get DefaultType() {
+ return DefaultType
+ }
+
+ static get NAME() {
+ return NAME
+ }
+
// Public
show(callback) {
if (!this._config.isVisible) {
return this._element
}
- _getConfig(config) {
- config = {
- ...Default,
- ...(typeof config === 'object' ? config : {})
- }
-
+ _configAfterMerge(config) {
// use getElement() with the default "body" to get a fresh Element on each instantiation
config.rootElement = getElement(config.rootElement)
- typeCheckConfig(NAME, config, DefaultType)
return config
}
--- /dev/null
+/**
+ * --------------------------------------------------------------------------
+ * Bootstrap (v5.1.3): util/config.js
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ * --------------------------------------------------------------------------
+ */
+
+import { isElement, toType } from './index'
+import Manipulator from '../dom/manipulator'
+
+/**
+ * Class definition
+ */
+
+class Config {
+ // Getters
+ static get Default() {
+ return {}
+ }
+
+ static get DefaultType() {
+ return {}
+ }
+
+ static get NAME() {
+ throw new Error('You have to implement the static method "NAME", for each component!')
+ }
+
+ _getConfig(config) {
+ config = this._mergeConfigObj(config)
+ config = this._configAfterMerge(config)
+ this._typeCheckConfig(config)
+ return config
+ }
+
+ _configAfterMerge(config) {
+ return config
+ }
+
+ _mergeConfigObj(config, element) {
+ return {
+ ...this.constructor.Default,
+ ...(isElement(element) ? Manipulator.getDataAttributes(element) : {}),
+ ...(typeof config === 'object' ? config : {})
+ }
+ }
+
+ _typeCheckConfig(config, configTypes = this.constructor.DefaultType) {
+ for (const property of Object.keys(configTypes)) {
+ const expectedTypes = configTypes[property]
+ const value = config[property]
+ const valueType = isElement(value) ? 'element' : toType(value)
+
+ if (!new RegExp(expectedTypes).test(valueType)) {
+ throw new TypeError(
+ `${this.constructor.NAME.toUpperCase()}: Option "${property}" provided type "${valueType}" but expected type "${expectedTypes}".`
+ )
+ }
+ }
+ }
+}
+
+export default Config
import EventHandler from '../dom/event-handler'
import SelectorEngine from '../dom/selector-engine'
-import { typeCheckConfig } from './index'
+import Config from './config'
/**
* Constants
* Class definition
*/
-class FocusTrap {
+class FocusTrap extends Config {
constructor(config) {
+ super()
this._config = this._getConfig(config)
this._isActive = false
this._lastTabNavDirection = null
}
+ // Getters
+ static get Default() {
+ return Default
+ }
+
+ static get DefaultType() {
+ return DefaultType
+ }
+
+ static get NAME() {
+ return NAME
+ }
+
// Public
activate() {
const { trapElement, autofocus } = this._config
this._lastTabNavDirection = event.shiftKey ? TAB_NAV_BACKWARD : TAB_NAV_FORWARD
}
-
- _getConfig(config) {
- config = {
- ...Default,
- ...(typeof config === 'object' ? config : {})
- }
- typeCheckConfig(NAME, config, DefaultType)
- return config
- }
}
export default FocusTrap
return null
}
-const typeCheckConfig = (componentName, config, configTypes) => {
- for (const property of Object.keys(configTypes)) {
- const expectedTypes = configTypes[property]
- const value = config[property]
- const valueType = value && isElement(value) ? 'element' : toType(value)
-
- if (!new RegExp(expectedTypes).test(valueType)) {
- throw new TypeError(
- `${componentName.toUpperCase()}: Option "${property}" provided type "${valueType}" but expected type "${expectedTypes}".`
- )
- }
- }
-}
-
const isVisible = element => {
if (!isElement(element) || element.getClientRects().length === 0) {
return false
onDOMContentLoaded,
reflow,
triggerTransitionEnd,
- typeCheckConfig
+ toType
}
* --------------------------------------------------------------------------
*/
+import Config from './config'
import EventHandler from '../dom/event-handler'
-import { execute, typeCheckConfig } from './index'
+import { execute } from './index'
/**
* Constants
* Class definition
*/
-class Swipe {
+class Swipe extends Config {
constructor(element, config) {
+ super()
this._element = element
if (!element || !Swipe.isSupported()) {
this._initEvents()
}
+ // Getters
+ static get Default() {
+ return Default
+ }
+
+ static get DefaultType() {
+ return DefaultType
+ }
+
+ static get NAME() {
+ return NAME
+ }
+
// Public
dispose() {
EventHandler.off(this._element, EVENT_KEY)
}
}
- _getConfig(config) {
- config = {
- ...Default,
- ...(typeof config === 'object' ? config : {})
- }
- typeCheckConfig(NAME, config, DefaultType)
- return config
- }
-
_eventIsPointerPenTouch(event) {
return this._supportPointerEvents && (event.pointerType === POINTER_TYPE_PEN || event.pointerType === POINTER_TYPE_TOUCH)
}
*/
import { DefaultAllowlist, sanitizeHtml } from './sanitizer'
-import { getElement, isElement, typeCheckConfig } from '../util/index'
+import { getElement, isElement } from '../util/index'
import SelectorEngine from '../dom/selector-engine'
+import Config from './config'
/**
* Constants
* Class definition
*/
-class TemplateFactory {
+class TemplateFactory extends Config {
constructor(config) {
+ super()
this._config = this._getConfig(config)
}
// Getters
- static get NAME() {
- return NAME
- }
-
static get Default() {
return Default
}
+ static get DefaultType() {
+ return DefaultType
+ }
+
+ static get NAME() {
+ return NAME
+ }
+
// Public
getContent() {
return Object.values(this._config.content)
}
// Private
- _getConfig(config) {
- config = {
- ...Default,
- ...(typeof config === 'object' ? config : {})
- }
-
- typeCheckConfig(NAME, config, DefaultType)
+ _typeCheckConfig(config) {
+ super._typeCheckConfig(config)
this._checkContent(config.content)
-
- return config
}
_checkContent(arg) {
for (const [selector, content] of Object.entries(arg)) {
- typeCheckConfig(NAME, { selector, entry: content }, DefaultContentType)
+ super._typeCheckConfig({ selector, entry: content }, DefaultContentType)
}
}
--- /dev/null
+import Config from '../../../src/util/config'
+
+class DummyConfigClass extends Config {
+ static get NAME() {
+ return 'dummy'
+ }
+}
+
+describe('Config', () => {
+ const name = 'dummy'
+ describe('NAME', () => {
+ it('should return plugin NAME', () => {
+ expect(DummyConfigClass.NAME).toEqual(name)
+ })
+ })
+
+ describe('DefaultType', () => {
+ it('should return plugin default type', () => {
+ expect(DummyConfigClass.DefaultType).toEqual(jasmine.any(Object))
+ })
+ })
+
+ describe('Default', () => {
+ it('should return plugin defaults', () => {
+ expect(DummyConfigClass.Default).toEqual(jasmine.any(Object))
+ })
+ })
+
+ describe('typeCheckConfig', () => {
+ it('should check type of the config object', () => {
+ spyOnProperty(DummyConfigClass, 'DefaultType', 'get').and.returnValue({
+ toggle: 'boolean',
+ parent: '(string|element)'
+ })
+ const config = {
+ toggle: true,
+ parent: 777
+ }
+
+ const obj = new DummyConfigClass()
+ expect(() => {
+ obj._typeCheckConfig(config)
+ }).toThrowError(TypeError, obj.constructor.NAME.toUpperCase() + ': Option "parent" provided type "number" but expected type "(string|element)".')
+ })
+
+ it('should return null stringified when null is passed', () => {
+ spyOnProperty(DummyConfigClass, 'DefaultType', 'get').and.returnValue({
+ toggle: 'boolean',
+ parent: '(null|element)'
+ })
+
+ const obj = new DummyConfigClass()
+ const config = {
+ toggle: true,
+ parent: null
+ }
+
+ obj._typeCheckConfig(config)
+ expect().nothing()
+ })
+
+ it('should return undefined stringified when undefined is passed', () => {
+ spyOnProperty(DummyConfigClass, 'DefaultType', 'get').and.returnValue({
+ toggle: 'boolean',
+ parent: '(undefined|element)'
+ })
+
+ const obj = new DummyConfigClass()
+ const config = {
+ toggle: true,
+ parent: undefined
+ }
+
+ obj._typeCheckConfig(config)
+ expect().nothing()
+ })
+ })
+})
})
})
- describe('typeCheckConfig', () => {
- const namePlugin = 'collapse'
-
- it('should check type of the config object', () => {
- const defaultType = {
- toggle: 'boolean',
- parent: '(string|element)'
- }
- const config = {
- toggle: true,
- parent: 777
- }
-
- expect(() => {
- Util.typeCheckConfig(namePlugin, config, defaultType)
- }).toThrowError(TypeError, 'COLLAPSE: Option "parent" provided type "number" but expected type "(string|element)".')
- })
-
- it('should return null stringified when null is passed', () => {
- const defaultType = {
- toggle: 'boolean',
- parent: '(null|element)'
- }
- const config = {
- toggle: true,
- parent: null
- }
-
- Util.typeCheckConfig(namePlugin, config, defaultType)
- expect().nothing()
- })
-
- it('should return undefined stringified when undefined is passed', () => {
- const defaultType = {
- toggle: 'boolean',
- parent: '(undefined|element)'
- }
- const config = {
- toggle: true,
- parent: undefined
- }
-
- Util.typeCheckConfig(namePlugin, config, defaultType)
- expect().nothing()
- })
- })
-
describe('isVisible', () => {
it('should return false if the element is not defined', () => {
expect(Util.isVisible(null)).toBeFalse()