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

Co-authored-by: XhmikosR <[email protected]>

1 files changed, 25 insertions, 52 deletions

diff --git a/js/src/modal.js b/js/src/modal.js
index fe1b5a4c6..551d9a821 100644
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -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)
   }
 
-  _resetScrollbar() {
-    // Restore fixed content padding
-    SelectorEngine.find(SELECTOR_FIXED_CONTENT)
+  _setElementAttributes(selector, styleProp, callback) {
+    SelectorEngine.find(selector)
       .forEach(element => {
-        const padding = Manipulator.getDataAttribute(element, 'padding-right')
-        if (typeof padding !== 'undefined') {
-          Manipulator.removeDataAttribute(element, 'padding-right')
-          element.style.paddingRight = padding
-        }
+        const actualValue = element.style[styleProp]
+        const calculatedValue = window.getComputedStyle(element)[styleProp]
+        Manipulator.setDataAttribute(element, styleProp, actualValue)
+        element.style[styleProp] = callback(Number.parseFloat(calculatedValue)) + 'px'
       })
+  }
 
-    // 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
-        }
-      })
+  _resetScrollbar() {
+    this._resetElementAttributes(SELECTOR_FIXED_CONTENT, 'paddingRight')
+    this._resetElementAttributes(SELECTOR_STICKY_CONTENT, 'marginRight')
+    this._resetElementAttributes('body', 'paddingRight')
+  }
 
-    // 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