From c56aa10a1b17fe3c31ab3ceefc2cbe47b862a073 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Henrik=20Ekelo=CC=88f?= Date: Thu, 12 Sep 2024 14:45:33 +0200 Subject: [PATCH] ENV-309 Do not move dialog to body by default --- .../src/pages/components/dialog.md | 7 +++++++ packages/envision/src/js/dialog.js | 19 +++++++++++++------ 2 files changed, 20 insertions(+), 6 deletions(-) diff --git a/packages/envision-docs/src/pages/components/dialog.md b/packages/envision-docs/src/pages/components/dialog.md index c78313650..79fc8e704 100644 --- 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'_ since Sitevision 2024.10.1 + + - Dialog window should be moved in the DOM and open as an immediate child of ``. + - 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 index 115fd8e7b..6bab836e9 100644 --- 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) => {