Adds modalOverlayOpeningElement option for specifying a separate element to draw overlay around

Added re-usable `parseElementOrSelector` function for new arg and `attachTo.element`

Author: wbobeirne

src/js/components/shepherd-modal.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { uuid } from '../utils/general.js';
+  import { uuid, parseElementOrSelector } from '../utils/general.js';
   import { makeOverlayPath } from '../utils/overlay-path.js';
 
   export let element, openingProperties;
@@ -128,11 +128,13 @@
    */
   function _styleForStep(step) {
     const {
+      modalOverlayOpeningElement,
       modalOverlayOpeningPadding,
       modalOverlayOpeningRadius
     } = step.options;
 
-    const scrollParent = _getScrollParent(step.target);
+    const target = parseElementOrSelector(modalOverlayOpeningElement) || step.target;
+    const scrollParent = _getScrollParent(target);
 
     // Setup recursive function to call requestAnimationFrame to update the modal opening position
     const rafLoop = () => {
@@ -141,7 +143,7 @@
         modalOverlayOpeningPadding,
         modalOverlayOpeningRadius,
         scrollParent,
-        step.target
+        target
       );
       rafId = requestAnimationFrame(rafLoop);
     };

src/js/step.js

@@ -82,6 +82,8 @@ export class Step extends Evented {
    * @param {string} options.highlightClass An extra class to apply to the `attachTo` element when it is
    * highlighted (that is, when its step is active). You can then target that selector in your CSS.
    * @param {string} options.id The string to use as the `id` for the step.
+   * @param {HTMLElement|string} options.modalOverlayOpeningElement An element selector string or a DOM element that the modal overlay
+   * opening should target. Defaults to using the same element as `attachTo` if unspecified.
    * @param {number} options.modalOverlayOpeningPadding An amount of padding to add around the modal overlay opening
    * @param {number} options.modalOverlayOpeningRadius An amount of border radius to add around the modal overlay opening
    * @param {object} options.popperOptions Extra options to pass to Popper

src/js/utils/general.js

@@ -26,22 +26,34 @@ export function parseAttachTo(step) {
   const options = step.options.attachTo || {};
   const returnOpts = Object.assign({}, options);
 
-  if (isString(options.element)) {
-    // Can't override the element in user opts reference because we can't
-    // guarantee that the element will exist in the future.
+  returnOpts.element = parseElementOrSelector(options.element);
+  if (!returnOpts.element) {
+    console.error(
+      `The element for this Shepherd step was not found ${options.element}`
+    );
+  }
+
+  return returnOpts;
+}
+
+/**
+ * Takes in an HTMLElement or string or nullish value, returns HTMLElement or null if not found
+ * @param {HTMLElement|string|void} element DOM element or string selector (or any falsy value)
+ * @returns {HTMLElement|null}
+ */
+export function parseElementOrSelector(element) {
+  if (!element) {
+    return null;
+  }
+  if (isString(element)) {
     try {
-      returnOpts.element = document.querySelector(options.element);
+      return document.querySelector(element);
     } catch (e) {
       // TODO
-    }
-    if (!returnOpts.element) {
-      console.error(
-        `The element for this Shepherd step was not found ${options.element}`
-      );
+      return null;
     }
   }
-
-  return returnOpts;
+  return element;
 }
 
 /**

src/types/step.d.ts

@@ -164,6 +164,13 @@ declare namespace Step {
      */
     id?: string;
 
+    /**
+     * An element selector string or a DOM element that the modal overlay
+     * opening should target. Defaults to using the same element as `attachTo`
+     * if unspecified.
+     */
+    modalOverlayOpeningElement?: HTMLElement | string;
+
     /**
      * An amount of padding to add around the modal overlay opening
      */