rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-11-29 11:24:18 +01:00
Code Issues Actions Packages Releases Activity

modal: move common code to reusable functions (#32511)

Browse Source 
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
GeoSot 2021-01-14 21:22:09 +02:00 committed by GitHub
parent 1d8bc95c92
commit b5bf3131fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
js/src/modal.js
View File

@ -456,67 +456,40 @@ class Modal extends BaseComponent {
_setScrollbar() {
if (this._isBodyOverflowing) {
// Note: DOMNode.style.paddingRight returns the actual value or '' if not set
// while $(DOMNode).css('padding-right') returns the calculated value or 0 if not set
// Adjust fixed content padding
SelectorEngine.find(SELECTOR_FIXED_CONTENT)
.forEach(element => {
const actualPadding = element.style.paddingRight
const calculatedPadding = window.getComputedStyle(element)['padding-right']
Manipulator.setDataAttribute(element, 'padding-right', actualPadding)
element.style.paddingRight = `${Number.parseFloat(calculatedPadding) + this._scrollbarWidth}px`
})
// Adjust sticky content margin
SelectorEngine.find(SELECTOR_STICKY_CONTENT)
.forEach(element => {
const actualMargin = element.style.marginRight
const calculatedMargin = window.getComputedStyle(element)['margin-right']
Manipulator.setDataAttribute(element, 'margin-right', actualMargin)
element.style.marginRight = `${Number.parseFloat(calculatedMargin) - this._scrollbarWidth}px`
})
// Adjust body padding
const actualPadding = document.body.style.paddingRight
const calculatedPadding = window.getComputedStyle(document.body)['padding-right']
Manipulator.setDataAttribute(document.body, 'padding-right', actualPadding)
document.body.style.paddingRight = `${Number.parseFloat(calculatedPadding) + this._scrollbarWidth}px`
this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + this._scrollbarWidth)
this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - this._scrollbarWidth)
this._setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + this._scrollbarWidth)
}
document.body.classList.add(CLASS_NAME_OPEN)
}
_setElementAttributes(selector, styleProp, callback) {
SelectorEngine.find(selector)
.forEach(element => {
const actualValue = element.style[styleProp]
const calculatedValue = window.getComputedStyle(element)[styleProp]
Manipulator.setDataAttribute(element, styleProp, actualValue)
element.style[styleProp] = callback(Number.parseFloat(calculatedValue)) + 'px'
})
}
_resetScrollbar() {
// Restore fixed content padding
SelectorEngine.find(SELECTOR_FIXED_CONTENT)
.forEach(element => {
const padding = Manipulator.getDataAttribute(element, 'padding-right')
if (typeof padding !== 'undefined') {
Manipulator.removeDataAttribute(element, 'padding-right')
element.style.paddingRight = padding
}
})
this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight')
this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight')
this._resetElementAttributes('body', 'paddingRight')
}
// Restore sticky content and navbar-toggler margin
SelectorEngine.find(`${SELECTOR_STICKY_CONTENT}`)
.forEach(element => {
const margin = Manipulator.getDataAttribute(element, 'margin-right')
if (typeof margin !== 'undefined') {
Manipulator.removeDataAttribute(element, 'margin-right')
element.style.marginRight = margin
}
})
// Restore body padding
const padding = Manipulator.getDataAttribute(document.body, 'padding-right')
if (typeof padding === 'undefined') {
document.body.style.paddingRight = ''
} else {
Manipulator.removeDataAttribute(document.body, 'padding-right')
document.body.style.paddingRight = padding
}
_resetElementAttributes(selector, styleProp) {
SelectorEngine.find(selector).forEach(element => {
const value = Manipulator.getDataAttribute(element, styleProp)
if (typeof value === 'undefined' && element === document.body) {
element.style[styleProp] = ''
} else {
Manipulator.removeDataAttribute(element, styleProp)
element.style[styleProp] = value
}
})
}
_getScrollbarWidth() { // thx d.walsh