kotovalexarian-likes-github/twbs--bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00
Code 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() { _setScrollbar() {
if (this._isBodyOverflowing) { if (this._isBodyOverflowing) {
// Note: DOMNode.style.paddingRight returns the actual value or '' if not set this._setElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight', calculatedValue => calculatedValue + this._scrollbarWidth)
// while $(DOMNode).css('padding-right') returns the calculated value or 0 if not set this._setElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight', calculatedValue => calculatedValue - this._scrollbarWidth)
this._setElementAttributes('body', 'paddingRight', calculatedValue => calculatedValue + this._scrollbarWidth)
// 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`
} }
document.body.classList.add(CLASS_NAME_OPEN) 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() { _resetScrollbar() {
// Restore fixed content padding this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight')
SelectorEngine.find(SELECTOR_FIXED_CONTENT) this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight')
.forEach(element => { this._resetElementAttributes('body', 'paddingRight')
const padding = Manipulator.getDataAttribute(element, 'padding-right') }
if (typeof padding !== 'undefined') {
Manipulator.removeDataAttribute(element, 'padding-right')
element.style.paddingRight = padding
}
})
// Restore sticky content and navbar-toggler margin _resetElementAttributes(selector, styleProp) {
SelectorEngine.find(`${SELECTOR_STICKY_CONTENT}`) SelectorEngine.find(selector).forEach(element => {
.forEach(element => { const value = Manipulator.getDataAttribute(element, styleProp)
const margin = Manipulator.getDataAttribute(element, 'margin-right') if (typeof value === 'undefined' && element === document.body) {
if (typeof margin !== 'undefined') { element.style[styleProp] = ''
Manipulator.removeDataAttribute(element, 'margin-right') } else {
element.style.marginRight = margin Manipulator.removeDataAttribute(element, styleProp)
} element.style[styleProp] = value
}) }
})
// 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
}
} }
_getScrollbarWidth() { // thx d.walsh _getScrollbarWidth() { // thx d.walsh