ENV-309 Do not move dialog to body by default

sitevision · Sep 12, 2024 · c56aa10 · c56aa10
1 parent 5401620
commit c56aa10
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/packages/envision-docs/src/pages/components/dialog.md b/packages/envision-docs/src/pages/components/dialog.md
@@ -456,6 +456,7 @@ Available alertdialog variations: `env-dialog--'error', 'success', 'warning', 'i
 {
  opener: null,
  backdropClick: true,
+ placement: null,
 }
 ```
 
@@ -469,6 +470,12 @@ Available alertdialog variations: `env-dialog--'error', 'success', 'warning', 'i
  - Click on backdrop (outside dialog) should close the dialog (not available for alertdialog).
  - Default value: `true`
 
+- `placement` _'string'_ <span class="env-badge env-badge--info">since Sitevision 2024.10.1</span>
+
+ - Dialog window should be moved in the DOM and open as an immediate child of `<body>`.
+ - Allowed values: `'body'`
+ - Default value: `null`
+
 ## API
 
 Instances of Dialog may be controlled by the methods described below.

diff --git a/packages/envision/src/js/dialog.js b/packages/envision/src/js/dialog.js
@@ -26,8 +26,10 @@ export default class Dialog {
  this.el = element;
  this.el.classList.add(CLASSNAME.USE_ANIMATION);
  this.el.classList.remove(CLASSNAME.ANIMATION);
- this.#elementPlaceholder = document.createElement('span');
- this.#elementPlaceholder.dataset.envDialogPlaceholder = '';
+ if (this.options.placement === 'body') {
+ this.#elementPlaceholder = document.createElement('span');
+ this.#elementPlaceholder.dataset.envDialogPlaceholder = '';
+ }
  if (options.opener) {
  this.#opener = getNodes(options.opener);
  this._bindOpenEvent();
@@ -102,8 +104,10 @@ export default class Dialog {
  if (e) {
  e.preventDefault();
  }
- this.el.after(this.#elementPlaceholder);
- document.body.append(this.el);
+ if (this.options.placement === 'body') {
+ this.el.after(this.#elementPlaceholder);
+ document.body.append(this.el);
+ }
  lockScroll();
  this.el.showModal();
  this._fadeIn();
@@ -116,8 +120,10 @@ export default class Dialog {
  if (this.el.classList.contains(CLASSNAME.ANIMATION)) {
  this.el.classList.remove(CLASSNAME.ANIMATION);
  this.el.close();
- this.#elementPlaceholder.after(this.el);
- this.#elementPlaceholder.remove();
+ if (this.options.placement === 'body') {
+ this.#elementPlaceholder.after(this.el);
+ this.#elementPlaceholder.remove();
+ }
  unlockScroll();
  }
  }
@@ -126,6 +132,7 @@ export default class Dialog {
 const dialogDefaults = {
  opener: null,
  backdropClick: true,
+ placement: null,
 };
 
 export const getDialogSettings = (options) => {