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

Add bs in data attributes

Browse Source 
- Add `bs` in data APIs everywhere
- Update unit tests
This commit is contained in:
Rohit Sharma
2020-07-22 22:33:11 +03:00
committed by XhmikosR
parent fe961c192d
commit 418f17ee2b
76 changed files with 827 additions and 807 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
js/src/alert.js
View File

@@ -28,7 +28,7 @@ const DATA_KEY = 'bs.alert'
const EVENT_KEY = `.${DATA_KEY}`
const DATA_API_KEY = '.data-api'
const SELECTOR_DISMISS = '[data-dismiss="alert"]'
const SELECTOR_DISMISS = '[data-bs-dismiss="alert"]'
const EVENT_CLOSE = `close${EVENT_KEY}`
const EVENT_CLOSED = `closed${EVENT_KEY}`

2
js/src/button.js
View File

@@ -23,7 +23,7 @@ const DATA_API_KEY = '.data-api'
const CLASS_NAME_ACTIVE = 'active'
const SELECTOR_DATA_TOGGLE = '[data-toggle="button"]'
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="button"]'
const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}`

8
js/src/carousel.js
View File

@@ -91,8 +91,8 @@ const SELECTOR_ITEM = '.carousel-item'
const SELECTOR_ITEM_IMG = '.carousel-item img'
const SELECTOR_NEXT_PREV = '.carousel-item-next, .carousel-item-prev'
const SELECTOR_INDICATORS = '.carousel-indicators'
const SELECTOR_DATA_SLIDE = '[data-slide], [data-slide-to]'
const SELECTOR_DATA_RIDE = '[data-ride="carousel"]'
const SELECTOR_DATA_SLIDE = '[data-bs-slide], [data-bs-slide-to]'
const SELECTOR_DATA_RIDE = '[data-bs-ride="carousel"]'
const PointerType = {
TOUCH: 'touch',
@@ -419,7 +419,7 @@ class Carousel {
return
}
const elementInterval = parseInt(element.getAttribute('data-interval'), 10)
const elementInterval = parseInt(element.getAttribute('data-bs-interval'), 10)
if (elementInterval) {
this._config.defaultInterval = this._config.defaultInterval || this._config.interval
@@ -576,7 +576,7 @@ class Carousel {
...Manipulator.getDataAttributes(target),
...Manipulator.getDataAttributes(this)
}
const slideIndex = this.getAttribute('data-slide-to')
const slideIndex = this.getAttribute('data-bs-slide-to')
if (slideIndex) {
config.interval = false

8
js/src/collapse.js
View File

@@ -59,7 +59,7 @@ const WIDTH = 'width'
const HEIGHT = 'height'
const SELECTOR_ACTIVES = '.show, .collapsing'
const SELECTOR_DATA_TOGGLE = '[data-toggle="collapse"]'
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="collapse"]'
/**
* ------------------------------------------------------------------------
@@ -74,7 +74,7 @@ class Collapse {
this._config = this._getConfig(config)
this._triggerArray = SelectorEngine.find(
`${SELECTOR_DATA_TOGGLE}[href="#${element.id}"],` +
`${SELECTOR_DATA_TOGGLE}[data-target="#${element.id}"]`
`${SELECTOR_DATA_TOGGLE}[data-bs-target="#${element.id}"]`
)
const toggleList = SelectorEngine.find(SELECTOR_DATA_TOGGLE)
@@ -137,7 +137,7 @@ class Collapse {
actives = SelectorEngine.find(SELECTOR_ACTIVES, this._parent)
.filter(elem => {
if (typeof this._config.parent === 'string') {
return elem.getAttribute('data-parent') === this._config.parent
return elem.getAttribute('data-bs-parent') === this._config.parent
}
return elem.classList.contains(CLASS_NAME_COLLAPSE)
@@ -303,7 +303,7 @@ class Collapse {
parent = SelectorEngine.findOne(parent)
}
const selector = `${SELECTOR_DATA_TOGGLE}[data-parent="${parent}"]`
const selector = `${SELECTOR_DATA_TOGGLE}[data-bs-parent="${parent}"]`
SelectorEngine.find(selector, parent)
.forEach(element => {

10
js/src/dom/manipulator.js
View File

@@ -47,9 +47,13 @@ const Manipulator = {
...element.dataset
}
Object.keys(attributes).forEach(key => {
attributes[key] = normalizeData(attributes[key])
})
Object.keys(attributes)
.filter(key => key.startsWith('bs'))
.forEach(key => {
let pureKey = key.replace(/^bs/, '')
pureKey = pureKey.charAt(0).toLowerCase() + pureKey.slice(1, pureKey.length)
attributes[pureKey] = normalizeData(attributes[key])
})
return attributes
},

2
js/src/dropdown.js
View File

@@ -59,7 +59,7 @@ const CLASS_NAME_MENURIGHT = 'dropdown-menu-right'
const CLASS_NAME_NAVBAR = 'navbar'
const CLASS_NAME_POSITION_STATIC = 'position-static'
const SELECTOR_DATA_TOGGLE = '[data-toggle="dropdown"]'
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="dropdown"]'
const SELECTOR_FORM_CHILD = '.dropdown form'
const SELECTOR_MENU = '.dropdown-menu'
const SELECTOR_NAVBAR_NAV = '.navbar-nav'

22
js/src/modal.js
View File

@@ -70,8 +70,8 @@ const CLASS_NAME_STATIC = 'modal-static'
const SELECTOR_DIALOG = '.modal-dialog'
const SELECTOR_MODAL_BODY = '.modal-body'
const SELECTOR_DATA_TOGGLE = '[data-toggle="modal"]'
const SELECTOR_DATA_DISMISS = '[data-dismiss="modal"]'
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="modal"]'
const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="modal"]'
const SELECTOR_FIXED_CONTENT = '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top'
const SELECTOR_STICKY_CONTENT = '.sticky-top'
@@ -473,7 +473,7 @@ class Modal {
.forEach(element => {
const actualPadding = element.style.paddingRight
const calculatedPadding = window.getComputedStyle(element)['padding-right']
Manipulator.setDataAttribute(element, 'padding-right', actualPadding)
Manipulator.setDataAttribute(element, 'bs-padding-right', actualPadding)
element.style.paddingRight = `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`
})
@@ -482,7 +482,7 @@ class Modal {
.forEach(element => {
const actualMargin = element.style.marginRight
const calculatedMargin = window.getComputedStyle(element)['margin-right']
Manipulator.setDataAttribute(element, 'margin-right', actualMargin)
Manipulator.setDataAttribute(element, 'bs-margin-right', actualMargin)
element.style.marginRight = `${parseFloat(calculatedMargin) - this._scrollbarWidth}px`
})
@@ -490,7 +490,7 @@ class Modal {
const actualPadding = document.body.style.paddingRight
const calculatedPadding = window.getComputedStyle(document.body)['padding-right']
Manipulator.setDataAttribute(document.body, 'padding-right', actualPadding)
Manipulator.setDataAttribute(document.body, 'bs-padding-right', actualPadding)
document.body.style.paddingRight = `${parseFloat(calculatedPadding) + this._scrollbarWidth}px`
}
@@ -501,9 +501,9 @@ class Modal {
// Restore fixed content padding
SelectorEngine.find(SELECTOR_FIXED_CONTENT)
.forEach(element => {
const padding = Manipulator.getDataAttribute(element, 'padding-right')
const padding = Manipulator.getDataAttribute(element, 'bs-padding-right')
if (typeof padding !== 'undefined') {
Manipulator.removeDataAttribute(element, 'padding-right')
Manipulator.removeDataAttribute(element, 'bs-padding-right')
element.style.paddingRight = padding
}
})
@@ -511,19 +511,19 @@ class Modal {
// Restore sticky content and navbar-toggler margin
SelectorEngine.find(`${SELECTOR_STICKY_CONTENT}`)
.forEach(element => {
const margin = Manipulator.getDataAttribute(element, 'margin-right')
const margin = Manipulator.getDataAttribute(element, 'bs-margin-right')
if (typeof margin !== 'undefined') {
Manipulator.removeDataAttribute(element, 'margin-right')
Manipulator.removeDataAttribute(element, 'bs-margin-right')
element.style.marginRight = margin
}
})
// Restore body padding
const padding = Manipulator.getDataAttribute(document.body, 'padding-right')
const padding = Manipulator.getDataAttribute(document.body, 'bs-padding-right')
if (typeof padding === 'undefined') {
document.body.style.paddingRight = ''
} else {
Manipulator.removeDataAttribute(document.body, 'padding-right')
Manipulator.removeDataAttribute(document.body, 'bs-padding-right')
document.body.style.paddingRight = padding
}
}

2
js/src/popover.js
View File

@@ -123,7 +123,7 @@ class Popover extends Tooltip {
}
_getContent() {
return this.element.getAttribute('data-content') ||
return this.element.getAttribute('data-bs-content') ||
this.config.content
}

4
js/src/scrollspy.js
View File

@@ -49,7 +49,7 @@ const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}`
const CLASS_NAME_DROPDOWN_ITEM = 'dropdown-item'
const CLASS_NAME_ACTIVE = 'active'
const SELECTOR_DATA_SPY = '[data-spy="scroll"]'
const SELECTOR_DATA_SPY = '[data-bs-spy="scroll"]'
const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'
const SELECTOR_NAV_LINKS = '.nav-link'
const SELECTOR_NAV_ITEMS = '.nav-item'
@@ -241,7 +241,7 @@ class ScrollSpy {
this._clear()
const queries = this._selector.split(',')
.map(selector => `${selector}[data-target="${target}"],${selector}[href="${target}"]`)
.map(selector => `${selector}[data-bs-target="${target}"],${selector}[href="${target}"]`)
const link = SelectorEngine.findOne(queries.join(','))

2
js/src/tab.js
View File

@@ -46,7 +46,7 @@ const SELECTOR_DROPDOWN = '.dropdown'
const SELECTOR_NAV_LIST_GROUP = '.nav, .list-group'
const SELECTOR_ACTIVE = '.active'
const SELECTOR_ACTIVE_UL = ':scope > li > .active'
const SELECTOR_DATA_TOGGLE = '[data-toggle="tab"], [data-toggle="pill"], [data-toggle="list"]'
const SELECTOR_DATA_TOGGLE = '[data-bs-toggle="tab"], [data-bs-toggle="pill"], [data-bs-toggle="list"]'
const SELECTOR_DROPDOWN_TOGGLE = '.dropdown-toggle'
const SELECTOR_DROPDOWN_ACTIVE_CHILD = ':scope > .dropdown-menu .active'

2
js/src/toast.js
View File

@@ -52,7 +52,7 @@ const Default = {
delay: 5000
}
const SELECTOR_DATA_DISMISS = '[data-dismiss="toast"]'
const SELECTOR_DATA_DISMISS = '[data-bs-dismiss="toast"]'
/**
* ------------------------------------------------------------------------

6
js/src/tooltip.js
View File

@@ -443,7 +443,7 @@ class Tooltip {
}
getTitle() {
let title = this.element.getAttribute('data-original-title')
let title = this.element.getAttribute('data-bs-original-title')
if (!title) {
title = typeof this.config.title === 'function' ?
@@ -578,11 +578,11 @@ class Tooltip {
}
_fixTitle() {
const titleType = typeof this.element.getAttribute('data-original-title')
const titleType = typeof this.element.getAttribute('data-bs-original-title')
if (this.element.getAttribute('title') || titleType !== 'string') {
this.element.setAttribute(
'data-original-title',
'data-bs-original-title',
this.element.getAttribute('title') || ''
)

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

@@ -33,7 +33,7 @@ const getUID = prefix => {
}
const getSelector = element => {
let selector = element.getAttribute('data-target')
let selector = element.getAttribute('data-bs-target')
if (!selector || selector === '#') {
const hrefAttr = element.getAttribute('href')
@@ -173,7 +173,7 @@ const reflow = element => element.offsetHeight
const getjQuery = () => {
const { jQuery } = window
if (jQuery && !document.body.hasAttribute('data-no-jquery')) {
if (jQuery && !document.body.hasAttribute('data-bs-no-jquery')) {
return jQuery
}