Modal | JS | Add page scrolling option

docs-site/src/components/pattern-lab-hacks/pattern-lab-hacks.scss

@@ -39,6 +39,10 @@
   max-height: 0px; // prevent background from showing up
 }
 
+.pl-c-pattern {
+  position: static;
+}
+
 .pl-c-category,
 .pl-c-category__title, 
 .pl-c-pattern[id*=-docs] > .pl-c-pattern__header, 

packages/components/bolt-modal/modal.schema.yml

@@ -58,7 +58,10 @@ properties:
   uuid:
     type: string
     description: Unique ID for modal, randomly generated if not provided.
-
+  prevent_body_scroll:
+    type: boolean
+    description: Prevent background page content from scrolling when modal is open
+    hidden: true
   # @todo: persistent and hide close button props are not ready.
   # persistent:
   #   type: boolean

packages/components/bolt-modal/src/modal.js

@@ -5,6 +5,10 @@ import {
   define,
   hasNativeShadowDomSupport,
   getTransitionDuration,
+  bodyHasScrollbar,
+  getScrollbarWidth,
+  setScrollbarPadding,
+  resetScrollbarPadding,
 } from '@bolt/core/utils';
 import { html, withLitHtml } from '@bolt/core/renderers/renderer-lit-html';
 import classNames from 'classnames/bind';
@@ -40,6 +44,7 @@ class BoltModal extends withLitHtml() {
       ...props.boolean,
       ...{ default: false },
     },
+    preventBodyScroll: props.boolean,
   };
 
   // https://github.com/WebReflection/document-register-element#upgrading-the-constructor-context
@@ -54,11 +59,16 @@ class BoltModal extends withLitHtml() {
     return self;
   }
 
+  static scrollbarWidth = getScrollbarWidth();
+
+  static get bodyHasScrollbar() {
+    return bodyHasScrollbar();
+  }
+
   connecting() {
     super.connecting && super.connecting();
     document.addEventListener('keydown', this._handleKeyPresseskeypress);
     this.setAttribute('ready', '');
-    this.scrollbarWidth = this._getScrollbarWidth();
   }
 
   // Initialise everything needed for the dialog to work properly
@@ -84,13 +94,15 @@ class BoltModal extends withLitHtml() {
   }
 
   get _toggleEventOptions() {
-    return {
-      detail: {
-        hasScrollbar: this._bodyHasScrollbar,
-        scrollbarWidth: this.scrollbarWidth,
-      },
-      bubbles: true,
-    };
+    return this.props.preventBodyScroll
+      ? {
+          detail: {
+            hasScrollbar: BoltModal.bodyHasScrollbar,
+            scrollbarWidth: BoltModal.scrollbarWidth,
+          },
+          bubbles: true,
+        }
+      : {};
   }
 
   /**
@@ -113,7 +125,7 @@ class BoltModal extends withLitHtml() {
 
     this.dispatchEvent(new CustomEvent('modal:show', this._toggleEventOptions));
 
-    this._setScrollbar();
+    this.props.preventBodyScroll && this._setScrollbar();
 
     // @todo: re-evaluate if the trigger element used needs to have it's tabindex messed with
     // this.querySelector('[slot="trigger"]').setAttribute('tabindex', '-1');
@@ -156,7 +168,7 @@ class BoltModal extends withLitHtml() {
 
     // Wait until after transition or modal will shift
     setTimeout(() => {
-      this._resetScrollbar();
+      this.props.preventBodyScroll && this._resetScrollbar();
       this.dispatchEvent(
         new CustomEvent('modal:hidden', this._toggleEventOptions),
       );
@@ -192,11 +204,6 @@ class BoltModal extends withLitHtml() {
     }
   }
 
-  get _bodyHasScrollbar() {
-    const bodyRect = document.body.getBoundingClientRect();
-    return bodyRect.left + bodyRect.right < window.innerWidth;
-  }
-
   /**
    * Private event handler used when listening to some specific key presses
    * (namely ESCAPE and TAB)
@@ -241,51 +248,18 @@ class BoltModal extends withLitHtml() {
   }
 
   _setScrollbar() {
-    // Technique inspired by Bootstrap Modal: https://github.com/twbs/bootstrap/blob/master/js/src/modal/modal.js
-
-    if (this._bodyHasScrollbar) {
-      const originalPadding = document.body.style.paddingRight;
-      const calculatedPadding = window.getComputedStyle(document.body)[
-        'padding-right'
-      ];
-
-      // Save original padding value for later
-      document.body.setAttribute('data-padding-right', originalPadding);
-      document.body.style.paddingRight = `${parseFloat(calculatedPadding) +
-        this.scrollbarWidth}px`;
-    }
+    BoltModal.bodyHasScrollbar &&
+      setScrollbarPadding(document.body, BoltModal.scrollbarWidth);
 
     document.body.classList.add('u-bolt-overflow-hidden');
   }
 
   _resetScrollbar() {
-    const padding = document.body.getAttribute('data-padding-right');
-
-    document.body.style.paddingRight = '';
-
-    if (typeof padding === 'undefined') {
-      document.body.style.paddingRight = '';
-    } else {
-      document.body.removeAttribute('data-padding-right');
-      // Restore original padding value
-      document.body.style.paddingRight = padding;
-    }
+    resetScrollbarPadding(document.body);
 
     document.body.classList.remove('u-bolt-overflow-hidden');
   }
 
-  // @todo: refactor into core JS/CSS
-  _getScrollbarWidth() {
-    // https://davidwalsh.name/detect-scrollbar-width
-    const scrollDiv = document.createElement('div');
-    scrollDiv.className = 'c-bolt-modal__scrollbar-measure';
-    document.body.appendChild(scrollDiv);
-    const scrollbarWidth =
-      scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth;
-    document.body.removeChild(scrollDiv);
-    return scrollbarWidth;
-  }
-
   /**
    * Set the focus to the first element with `autofocus` or the first focusable
    * child of the given element

packages/components/bolt-modal/src/modal.scss

@@ -52,7 +52,7 @@ bolt-modal:not([ready]) {
   position: fixed;
   top: 0;
   left: 0;
-  width: 100vw;
+  width: 100%; // Use % instead of vh or modal scrollbar is hidden behind bold scrollbar in IE11
   height: 100vh;
   pointer-events: none;
   transition: opacity $bolt-modal-transition;
@@ -419,13 +419,3 @@ bolt-modal:not([ready]) {
 .c-bolt-modal__dialog-title {
   @include bolt-visuallyhidden;
 }
-
-// https://davidwalsh.name/detect-scrollbar-width
-// @todo: refactor into core JS/CSS
-.c-bolt-modal__scrollbar-measure {
-  position: absolute;
-  top: -9999px;
-  width: 100px;
-  height: 100px;
-  overflow: scroll;
-}

packages/core/utils/index.js

@@ -11,6 +11,7 @@ export * from './is-valid-selector';
 export * from './rgb2hex';
 export * from './rename-key';
 export * from './sanitize-classes';
+export * from './scrollbar';
 export * from './supports-css-vars';
 export * from './supports-passive-event-listener';
 export * from './which-transition-event';

packages/core/utils/scrollbar.js

@@ -0,0 +1,62 @@
+/**
+ * Determine whether or not the BODY has a visible scrollbar
+ * @returns {Boolean} - Returns true if element has scrollbar
+ */
+export const bodyHasScrollbar = () => {
+  const bodyRect = document.body.getBoundingClientRect();
+  return bodyRect.left + bodyRect.right < window.innerWidth;
+};
+
+// https://davidwalsh.name/detect-scrollbar-width
+/**
+ * Get scrollbar width by temporarily adding element with scrollbar to page then removing it
+ * @returns {number} - Width of the scrollbar in pixels, without unit, e.g 15
+ */
+export const getScrollbarWidth = () => {
+  const scrollDiv = document.createElement('div');
+  scrollDiv.className = 'c-bolt-modal__scrollbar-measure';
+  scrollDiv.style.cssText =
+    'position: absolute; top: -9999px; width: 100px; height: 100px; overflow: scroll;';
+  document.body.appendChild(scrollDiv);
+  const scrollbarWidth =
+    scrollDiv.getBoundingClientRect().width - scrollDiv.clientWidth;
+  document.body.removeChild(scrollDiv);
+
+  return scrollbarWidth;
+};
+
+// Technique inspired by Bootstrap Modal: https://github.com/twbs/bootstrap/blob/master/js/src/modal/modal.js
+/**
+ * Set padding on a given element equal to the browser's scrollbar width, used to prevent content shifting when scrollbars are turned off, e.g. when a modal opens
+ * @param {HTMLElement} element - The target element
+ * @param {(string\|number)} scrollbarWidth - The scrollbar width, with or without unit, e.g. 15 or 15px
+ */
+export const setScrollbarPadding = (element, scrollbarWidth) => {
+  if (!element) {
+    return;
+  }
+
+  const originalPaddingRight = element.style.paddingRight;
+  const calculatedPadding = window.getComputedStyle(element)['padding-right'];
+
+  // Save original padding value for later
+  element.originalPaddingRight = originalPaddingRight;
+  element.style.paddingRight =
+    parseFloat(calculatedPadding) + scrollbarWidth + 'px';
+};
+
+/**
+ * Reset padding on a given element, will remove current padding style and restore original padding style if necessary, used after modal closes
+ * @param {HTMLElement} element - The target element
+ */
+export const resetScrollbarPadding = element => {
+  if (!element) {
+    return;
+  }
+
+  if (typeof element.originalPaddingRight === 'undefined') {
+    element.style.paddingRight = '';
+  } else {
+    element.style.paddingRight = element.originalPaddingRight; // Restore original padding value
+  }
+};