Function createShepherdModal

shepherd.js/src/components/shepherd-modal.ts:48–302

(container: HTMLElement)

}

export function createShepherdModal(container: HTMLElement): ShepherdModalAPI {
  let rafId: number | undefined;
  let openingProperties: OpeningProperty[] = [
    { width: 0, height: 0, x: 0, y: 0, r: 0 }
  ];

  // Build SVG elements
  const pathEl = svgEl('path');
  const element = svgEl(
    'svg',
    { class: 'shepherd-modal-overlay-container' },
    pathEl
  );

  element.addEventListener('touchmove', _preventModalOverlayTouch);

  // Initial render
  _updatePath();

  container.append(element);

  function _updatePath() {
    pathEl.setAttribute('d', makeOverlayPath(openingProperties));
  }

  function closeModalOpening() {
    openingProperties = [{ width: 0, height: 0, x: 0, y: 0, r: 0 }];
    _updatePath();
  }

  function hide() {
    element.classList.remove('shepherd-modal-is-visible');
    _cleanupStepEventListeners();
  }

  function show() {
    element.classList.add('shepherd-modal-is-visible');
  }

  function positionModal(
    modalOverlayOpeningPadding = 0,
    modalOverlayOpeningRadius: ModalRadiusType = 0,
    modalOverlayOpeningXOffset = 0,
    modalOverlayOpeningYOffset = 0,
    scrollParent?: HTMLElement | null,
    targetElement?: HTMLElement | null,
    extraHighlights?: HTMLElement[]
  ) {
    if (targetElement) {
      const elementsToHighlight = [targetElement, ...(extraHighlights || [])];
      const newOpenings: OpeningProperty[] = [];

      for (const el of elementsToHighlight) {
        if (!el) continue;

        // Skip duplicate elements
        if (
          elementsToHighlight.indexOf(el) !==