Flexible Target Selector Configuration for Modal Injection

[steampixel]

Previously, the modal was always inserted at the beforeend position of the target element. This is too restrictive, as some elements don't allow children, modals sometimes need to be inserted before or after elements, and many different DOM structures need to function correctly.

This change allows using the beforebegin, afterbegin, beforeend, and afterend positions and ensures that the allowed positions are spelled and validated correctly.

The new feature ensures that

1. the insert position is validated,
2. that there is a default position and
3. that non-existent positions do not lead to errors.

Additionally, the static selector approach required us to either know the exact selector at initialization time, or use shop-specific CSS classes/selectors

To ensure high compatibility with various themes, templates, and plugins, the targetSelectorResolve function was implemented. This allows the selector to be determined dynamically at runtime.

The new feature ensures that

1. the resolver is executed at modal insert time,
2. falsy target selectors always become "body" and
3. non-existent targets will also fallback to "body".

Examples can be found in the focus-trap demo.

#39

[steampixel]

@iljamobilemojo

Example 1 on use-cases/focus-trap demonstrates the usage of beforeend, afterbegin, beforebegin, afterend. Just uncomment the lines 557-660 inside demo/use-cases/focus-trap/index.html to test different insert positions. Default is set to beforeend as you can see in this screenshot:

Example 3 on use-cases/focus-trap demonstrates the usage of the new targetSelectorResolve(). The selector will be resolved short before the modal injection. In this case we search for the closest form tag. Refer to this screenshot for details:

[iljamobilemojo]

@steampixel thnx! ill try to review today or at latest thursday.