mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-26 06:44:35 +02:00
Code Issues Releases Wiki Activity

Accept data-bs-body option in the configuration object as well (#33248)

Browse Source 
* Accept data-bs-body option in the configuration object as well

Tweak jqueryInterface, add some more tests

* Fix Markdown table formatting and tweak the wording on backdrop

Co-authored-by: Mark Otto <markdotto@gmail.com>
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
GeoSot
2021-03-16 18:35:03 +02:00
committed by GitHub
parent 1e14a0e646
commit ddf72bc612
5 changed files with 338 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
js/src/offcanvas.js
View File

@@ -10,13 +10,16 @@ import {
getElementFromSelector,
getSelectorFromElement,
getTransitionDurationFromElement,
isVisible
isDisabled,
isVisible,
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'
import Manipulator from './dom/manipulator'
/**
* ------------------------------------------------------------------------
@@ -29,10 +32,20 @@ const DATA_KEY = 'bs.offcanvas'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const ESCAPE_KEY = 'Escape'
const DATA_BODY_ACTIONS = 'data-bs-body'
const Default = {
backdrop: true,
keyboard: true,
scroll: false
}
const DefaultType = {
backdrop: 'boolean',
keyboard: 'boolean',
scroll: 'boolean'
}
const CLASS_NAME_BACKDROP_BODY = 'offcanvas-backdrop'
const CLASS_NAME_DISABLED = 'disabled'
const CLASS_NAME_SHOW = 'show'
const CLASS_NAME_TOGGLING = 'offcanvas-toggling'
const ACTIVE_SELECTOR = `.offcanvas.show, .${CLASS_NAME_TOGGLING}`
@@ -55,14 +68,24 @@ const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="offcanvas"]'
*/
class Offcanvas extends BaseComponent {
constructor(element) {
constructor(element, config) {
super(element)
this._config = this._getConfig(config)
this._isShown = element.classList.contains(CLASS_NAME_SHOW)
this._bodyOptions = element.getAttribute(DATA_BODY_ACTIONS) || ''
this._addEventListeners()
}
// Getters
static get Default() {
return Default
}
static get DATA_KEY() {
return DATA_KEY
}
// Public
toggle(relatedTarget) {
@@ -83,11 +106,11 @@ class Offcanvas extends BaseComponent {
this._isShown = true
this._element.style.visibility = 'visible'
if (this._bodyOptionsHas('backdrop') || !this._bodyOptions.length) {
if (this._config.backdrop) {
document.body.classList.add(CLASS_NAME_BACKDROP_BODY)
}
if (!this._bodyOptionsHas('scroll')) {
if (!this._config.scroll) {
scrollBarHide()
}
@@ -129,11 +152,11 @@ class Offcanvas extends BaseComponent {
this._element.removeAttribute('role')
this._element.style.visibility = 'hidden'
if (this._bodyOptionsHas('backdrop') || !this._bodyOptions.length) {
if (this._config.backdrop) {
document.body.classList.remove(CLASS_NAME_BACKDROP_BODY)
}
if (!this._bodyOptionsHas('scroll')) {
if (!this._config.scroll) {
scrollBarReset()
}
@@ -144,6 +167,18 @@ class Offcanvas extends BaseComponent {
setTimeout(completeCallback, getTransitionDurationFromElement(this._element))
}
// Private
_getConfig(config) {
config = {
...Default,
...Manipulator.getDataAttributes(this._element),
...(typeof config === 'object' ? config : {})
}
typeCheckConfig(NAME, config, DefaultType)
return config
}
_enforceFocusOnElement(element) {
EventHandler.off(document, EVENT_FOCUSIN) // guard against infinite focus loop
EventHandler.on(document, EVENT_FOCUSIN, event => {
@@ -156,15 +191,11 @@ class Offcanvas extends BaseComponent {
element.focus()
}
_bodyOptionsHas(option) {
return this._bodyOptions.split(',').includes(option)
}
_addEventListeners() {
EventHandler.on(this._element, EVENT_CLICK_DISMISS, SELECTOR_DATA_DISMISS, () => this.hide())
EventHandler.on(document, 'keydown', event => {
if (event.key === ESCAPE_KEY) {
if (this._config.keyboard && event.key === ESCAPE_KEY) {
this.hide()
}
})
@@ -181,15 +212,17 @@ class Offcanvas extends BaseComponent {
static jQueryInterface(config) {
return this.each(function () {
const data = Data.get(this, DATA_KEY) || new Offcanvas(this)
const data = Data.get(this, DATA_KEY) || new Offcanvas(this, typeof config === 'object' ? config : {})
if (typeof config === 'string') {
if (typeof data[config] === 'undefined') {
throw new TypeError(`No method named "${config}"`)
}
data[config](this)
if (typeof config !== 'string') {
return
}
if (data[config] === undefined || config.startsWith('_') || config === 'constructor') {
throw new TypeError(`No method named "${config}"`)
}
data[config](this)
})
}
}
@@ -207,7 +240,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
event.preventDefault()
}
if (this.disabled || this.classList.contains(CLASS_NAME_DISABLED)) {
if (isDisabled(this)) {
return
}
@@ -225,6 +258,7 @@ EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_DATA_TOGGLE, function (
}
const data = Data.get(target, DATA_KEY) || new Offcanvas(target)
data.toggle(this)
})

17
js/src/util/index.js
View File

@@ -153,6 +153,22 @@ const isVisible = element => {
return false
}
const isDisabled = element => {
if (!element || element.nodeType !== Node.ELEMENT_NODE) {
return true
}
if (element.classList.contains('disabled')) {
return true
}
if (typeof element.disabled !== 'undefined') {
return element.disabled
}
return element.getAttribute('disabled') !== 'false'
}
const findShadowRoot = element => {
if (!document.documentElement.attachShadow) {
return null
@@ -226,6 +242,7 @@ export {
emulateTransitionEnd,
typeCheckConfig,
isVisible,
isDisabled,
findShadowRoot,
noop,
reflow,

134
js/tests/unit/offcanvas.spec.js
View File

@@ -2,7 +2,7 @@ import Offcanvas from '../../src/offcanvas'
import EventHandler from '../../src/dom/event-handler'
/** Test helpers */
import { clearFixture, getFixture, jQueryMock, createEvent } from '../helpers/fixture'
import { clearFixture, createEvent, getFixture, jQueryMock } from '../helpers/fixture'
describe('Offcanvas', () => {
let fixtureEl
@@ -22,6 +22,18 @@ describe('Offcanvas', () => {
})
})
describe('Default', () => {
it('should return plugin default config', () => {
expect(Offcanvas.Default).toEqual(jasmine.any(Object))
})
})
describe('DATA_KEY', () => {
it('should return plugin data key', () => {
expect(Offcanvas.DATA_KEY).toEqual('bs.offcanvas')
})
})
describe('constructor', () => {
it('should call hide when a element with data-bs-dismiss="offcanvas" is clicked', () => {
fixtureEl.innerHTML = [
@@ -70,6 +82,68 @@ describe('Offcanvas', () => {
expect(offCanvas.hide).not.toHaveBeenCalled()
})
it('should not hide if esc is pressed but with keyboard = false', () => {
fixtureEl.innerHTML = '<div class="offcanvas"></div>'
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
const offCanvas = new Offcanvas(offCanvasEl, { keyboard: false })
const keyDownEsc = createEvent('keydown')
keyDownEsc.key = 'Escape'
spyOn(offCanvas, 'hide')
document.dispatchEvent(keyDownEsc)
expect(offCanvas.hide).not.toHaveBeenCalled()
})
})
describe('config', () => {
it('should have default values', () => {
fixtureEl.innerHTML = [
'<div class="offcanvas">',
'</div>'
].join('')
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
const offCanvas = new Offcanvas(offCanvasEl)
expect(offCanvas._config.backdrop).toEqual(true)
expect(offCanvas._config.keyboard).toEqual(true)
expect(offCanvas._config.scroll).toEqual(false)
})
it('should read data attributes and override default config', () => {
fixtureEl.innerHTML = [
'<div class="offcanvas" data-bs-scroll="true" data-bs-backdrop="false" data-bs-keyboard="false">',
'</div>'
].join('')
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
const offCanvas = new Offcanvas(offCanvasEl)
expect(offCanvas._config.backdrop).toEqual(false)
expect(offCanvas._config.keyboard).toEqual(false)
expect(offCanvas._config.scroll).toEqual(true)
})
it('given a config object must override data attributes', () => {
fixtureEl.innerHTML = [
'<div class="offcanvas" data-bs-scroll="true" data-bs-backdrop="false" data-bs-keyboard="false">',
'</div>'
].join('')
const offCanvasEl = fixtureEl.querySelector('.offcanvas')
const offCanvas = new Offcanvas(offCanvasEl, {
backdrop: true,
keyboard: true,
scroll: false
})
expect(offCanvas._config.backdrop).toEqual(true)
expect(offCanvas._config.keyboard).toEqual(true)
expect(offCanvas._config.scroll).toEqual(false)
})
})
describe('toggle', () => {
@@ -280,6 +354,64 @@ describe('Offcanvas', () => {
jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface
jQueryMock.elements = [div]
expect(() => {
jQueryMock.fn.offcanvas.call(jQueryMock, action)
}).toThrowError(TypeError, `No method named "${action}"`)
})
it('should throw error on protected method', () => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
const action = '_getConfig'
jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface
jQueryMock.elements = [div]
expect(() => {
jQueryMock.fn.offcanvas.call(jQueryMock, action)
}).toThrowError(TypeError, `No method named "${action}"`)
})
it('should throw error if method "constructor" is being called', () => {
fixtureEl.innerHTML = '<div></div>'
const div = fixtureEl.querySelector('div')
const action = 'constructor'
jQueryMock.fn.offcanvas = Offcanvas.jQueryInterface
jQueryMock.elements = [div]
expect(() => {
jQueryMock.fn.offcanvas.call(jQueryMock, action)
}).toThrowError(TypeError, `No method named "${action}"`)
})
it('should throw error on protected method', () => {
fixtureEl.innerHTML = '<div></div>'
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 = '<div></div>'
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) {

105
js/tests/unit/util/index.spec.js
View File

@@ -317,6 +317,111 @@ describe('Util', () => {
})
})
describe('isDisabled', () => {
it('should return true if the element is not defined', () => {
expect(Util.isDisabled(null)).toEqual(true)
expect(Util.isDisabled(undefined)).toEqual(true)
expect(Util.isDisabled()).toEqual(true)
})
it('should return true if the element provided is not a dom element', () => {
expect(Util.isDisabled({})).toEqual(true)
expect(Util.isDisabled('test')).toEqual(true)
})
it('should return true if the element has disabled attribute', () => {
fixtureEl.innerHTML = [
'<div>',
' <div id="element" disabled="disabled"></div>',
' <div id="element1" disabled="true"></div>',
' <div id="element2" disabled></div>',
'</div>'
].join('')
const div = fixtureEl.querySelector('#element')
const div1 = fixtureEl.querySelector('#element1')
const div2 = fixtureEl.querySelector('#element2')
expect(Util.isDisabled(div)).toEqual(true)
expect(Util.isDisabled(div1)).toEqual(true)
expect(Util.isDisabled(div2)).toEqual(true)
})
it('should return false if the element has disabled attribute with "false" value', () => {
fixtureEl.innerHTML = [
'<div>',
' <div id="element" disabled="false"></div>',
'</div>'
].join('')
const div = fixtureEl.querySelector('#element')
expect(Util.isDisabled(div)).toEqual(false)
})
it('should return false if the element is not disabled ', () => {
fixtureEl.innerHTML = [
'<div>',
' <button id="button"></button>',
' <select id="select"></select>',
' <select id="input"></select>',
'</div>'
].join('')
const el = selector => fixtureEl.querySelector(selector)
expect(Util.isDisabled(el('#button'))).toEqual(false)
expect(Util.isDisabled(el('#select'))).toEqual(false)
expect(Util.isDisabled(el('#input'))).toEqual(false)
})
it('should return true if the element has disabled attribute', () => {
fixtureEl.innerHTML = [
'<div>',
' <input id="input" disabled="disabled"/>',
' <input id="input1" disabled="disabled"/>',
' <button id="button" disabled="true"></button>',
' <button id="button1" disabled="disabled"></button>',
' <button id="button2" disabled></button>',
' <select id="select" disabled></select>',
' <select id="input" disabled></select>',
'</div>'
].join('')
const el = selector => fixtureEl.querySelector(selector)
expect(Util.isDisabled(el('#input'))).toEqual(true)
expect(Util.isDisabled(el('#input1'))).toEqual(true)
expect(Util.isDisabled(el('#button'))).toEqual(true)
expect(Util.isDisabled(el('#button1'))).toEqual(true)
expect(Util.isDisabled(el('#button2'))).toEqual(true)
expect(Util.isDisabled(el('#input'))).toEqual(true)
})
it('should return true if the element has class "disabled"', () => {
fixtureEl.innerHTML = [
'<div>',
' <div id="element" class="disabled"></div>',
'</div>'
].join('')
const div = fixtureEl.querySelector('#element')
expect(Util.isDisabled(div)).toEqual(true)
})
it('should return true if the element has class "disabled" but disabled attribute is false', () => {
fixtureEl.innerHTML = [
'<div>',
' <input id="input" class="disabled" disabled="false"/>',
'</div>'
].join('')
const div = fixtureEl.querySelector('#input')
expect(Util.isDisabled(div)).toEqual(true)
})
})
describe('findShadowRoot', () => {
it('should return null if shadow dom is not available', () => {
// Only for newer browsers