Option function for customizing modal dimensions

[wbobeirne]

Hey there, loving Sheperd.js so far. I've got an element I want to highlight that has an unusual height calculation due to being a list of unknown size. I'd love to be able to have my own custom function for determining modal size. Ideally it'd be called right after openingProperties is assigned and just let me modify the object directly, or return a new object. Something like:

const tour = new Shepherd.Tour({
  useModalOverlay: true,
  defaultStepOptions: {
    modalOverlayPosition: (props) => {
      // Set maximum overlay size to window height minus padding
      props.height = Math.min(props.height, window.innerHeight - 40);
    },
  }
});

Just an example, not my exact use case.

[RobbieTheWagner]

@wbobeirne glad to hear you are loving Shepherd! Perhaps there is something I am missing here, but couldn't you just target the parent of your list of unknown size? Then you wouldn't need to know the size at all.

[wbobeirne]

Made a quick diagram, hope this explains it:

And in my case, I want it to be a subset of the items. It can be tricky to do that wrapping though without totally mangling my flexbox styles. I could probably hack around this by making a special absolute positioned element for the area I want to cover, but it seemed like a not-that-unusual case to want to do some overriding of the dimensions of the cover, so I figured this might be a better route to go.

[RobbieTheWagner]

@wbobeirne thanks for the explanation! I think it is reasonable to support what you are asking about. Would you be interested in opening a PR?

[Steezli]

#1837