From c2341e8523a379811028d29ee3ae0509beea781a Mon Sep 17 00:00:00 2001 From: gmkv Date: Tue, 7 Jun 2022 15:04:01 +0300 Subject: [PATCH] fix(ui5-dialog): reposition on screen resize (#5283) A recent change in scroll blocking for the block layer added `overflow: hidden` on the body element, and resizing the browser window in height would not trigger a resize event on the body, and the dialog will not be repositioned. To solve this case, the dialog has been changed to listen to the resize event on the window. --- packages/main/src/Dialog.js | 31 ++++---- packages/main/src/Popup.js | 2 +- packages/main/test/pages/modules/Popups.js | 84 +++++++++++----------- packages/main/test/specs/Dialog.spec.js | 32 ++++++++- 4 files changed, 89 insertions(+), 60 deletions(-) diff --git a/packages/main/src/Dialog.js b/packages/main/src/Dialog.js index a3d1c119d319..57677d0a8da3 100644 --- a/packages/main/src/Dialog.js +++ b/packages/main/src/Dialog.js @@ -1,6 +1,5 @@ import { isPhone, isDesktop } from "@ui5/webcomponents-base/dist/Device.js"; import clamp from "@ui5/webcomponents-base/dist/util/clamp.js"; -import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js"; import { isUp, isDown, isLeft, isRight, isUpShift, isDownShift, isLeftShift, isRightShift, @@ -253,7 +252,7 @@ class Dialog extends Popup { } /** - * Determines if the header of the dialog should be shown. + * Determines if the header should be shown. */ get _displayHeader() { return this.header.length || this.headerText || this.draggable || this.resizable; @@ -308,12 +307,12 @@ class Dialog extends Popup { onEnterDOM() { super.onEnterDOM(); - this._attachResizeHandlers(); + this._attachScreenResizeHandler(); } onExitDOM() { super.onExitDOM(); - this._detachResizeHandlers(); + this._detachScreenResizeHandler(); } /** @@ -322,22 +321,22 @@ class Dialog extends Popup { _resize() { super._resize(); - if (this._resizeHandlersAttached) { + if (this._screenResizeHandlerAttached) { this._center(); } } - _attachResizeHandlers() { - if (!this._resizeHandlersAttached) { - ResizeHandler.register(document.body, this._screenResizeHandler); - this._resizeHandlersAttached = true; + _attachScreenResizeHandler() { + if (!this._screenResizeHandlerAttached) { + window.addEventListener("resize", this._screenResizeHandler); + this._screenResizeHandlerAttached = true; } } - _detachResizeHandlers() { - if (this._resizeHandlersAttached) { - ResizeHandler.deregister(document.body, this._screenResizeHandler); - this._resizeHandlersAttached = false; + _detachScreenResizeHandler() { + if (this._screenResizeHandlerAttached) { + window.removeEventListener("resize", this._screenResizeHandler); + this._screenResizeHandlerAttached = false; // prevent dialog from repositioning during resizing } } @@ -475,7 +474,7 @@ class Dialog extends Popup { } _resizeWithEvent(event) { - this._detachResizeHandlers(); + this._detachScreenResizeHandler(); this.addEventListener("ui5-before-close", this._revertSize); const { top, left } = this.getBoundingClientRect(), @@ -512,7 +511,7 @@ class Dialog extends Popup { } _attachMouseDragHandlers() { - this._detachResizeHandlers(); + this._detachScreenResizeHandler(); window.addEventListener("mousemove", this._dragMouseMoveHandler); window.addEventListener("mouseup", this._dragMouseUpHandler); @@ -610,7 +609,7 @@ class Dialog extends Popup { } _attachMouseResizeHandlers() { - this._detachResizeHandlers(); + this._detachScreenResizeHandler(); window.addEventListener("mousemove", this._resizeMouseMoveHandler); window.addEventListener("mouseup", this._resizeMouseUpHandler); diff --git a/packages/main/src/Popup.js b/packages/main/src/Popup.js index 69c6d06d4a9b..9d97bd1e3aff 100644 --- a/packages/main/src/Popup.js +++ b/packages/main/src/Popup.js @@ -114,7 +114,7 @@ const metadata = { * @type {string} * @private */ - mediaRange: { + mediaRange: { type: String, }, diff --git a/packages/main/test/pages/modules/Popups.js b/packages/main/test/pages/modules/Popups.js index 462967421b99..9c8614e4d280 100644 --- a/packages/main/test/pages/modules/Popups.js +++ b/packages/main/test/pages/modules/Popups.js @@ -1,49 +1,49 @@ - // web component dialog - var wcBtnOpenDialog = document.querySelector('.wcBtnOpenDialog'); - wcBtnOpenDialog.addEventListener('click', function () { - var wcDialog = document.querySelector('.wcDialog'); - wcDialog.show(); - }); +// web component dialog +var wcBtnOpenDialog = document.querySelector('.wcBtnOpenDialog'); +wcBtnOpenDialog.addEventListener('click', function () { + var wcDialog = document.querySelector('.wcDialog'); + wcDialog.show(); +}); - var wcBtnCloseDialog = document.querySelector('.wcBtnCloseDialog'); - wcBtnCloseDialog.addEventListener('click', function () { - var wcDialog = document.querySelector('.wcDialog'); - wcDialog.close(); - }); +var wcBtnCloseDialog = document.querySelector('.wcBtnCloseDialog'); +wcBtnCloseDialog.addEventListener('click', function () { + var wcDialog = document.querySelector('.wcDialog'); + wcDialog.close(); +}); - var wcBtnOpenNewDialog = document.querySelector('.wcBtnOpenNewDialog'); - wcBtnOpenNewDialog.addEventListener('click', function () { - var wcNewDialog = document.querySelector('.wcNewDialog'); - wcNewDialog.show(); - }); +var wcBtnOpenNewDialog = document.querySelector('.wcBtnOpenNewDialog'); +wcBtnOpenNewDialog.addEventListener('click', function () { + var wcNewDialog = document.querySelector('.wcNewDialog'); + wcNewDialog.show(); +}); - var wcBtnOpenNewDialogPopover = document.querySelector('.wcBtnOpenNewDialogPopover'); - wcBtnOpenNewDialogPopover.addEventListener('click', function () { - var wcNewDialogPopover = document.querySelector('.wcNewDialogPopover'); - wcNewDialogPopover.showAt(wcBtnOpenNewDialogPopover); - }); +var wcBtnOpenNewDialogPopover = document.querySelector('.wcBtnOpenNewDialogPopover'); +wcBtnOpenNewDialogPopover.addEventListener('click', function () { + var wcNewDialogPopover = document.querySelector('.wcNewDialogPopover'); + wcNewDialogPopover.showAt(wcBtnOpenNewDialogPopover); +}); - // web component popover - var wcBtnOpenPopover = document.querySelector('.wcBtnOpenPopover'); - wcBtnOpenPopover.addEventListener('click', function () { - var wcPopover = document.querySelector('.wcPopover'); - wcPopover.showAt(wcBtnOpenPopover); - }); +// web component popover +var wcBtnOpenPopover = document.querySelector('.wcBtnOpenPopover'); +wcBtnOpenPopover.addEventListener('click', function () { + var wcPopover = document.querySelector('.wcPopover'); + wcPopover.showAt(wcBtnOpenPopover); +}); - var wcBtnClosePopover = document.querySelector('.wcBtnClosePopover'); - wcBtnClosePopover.addEventListener('click', function () { - var wcPopover = document.querySelector('.wcPopover'); - wcPopover.close(); - }); +var wcBtnClosePopover = document.querySelector('.wcBtnClosePopover'); +wcBtnClosePopover.addEventListener('click', function () { + var wcPopover = document.querySelector('.wcPopover'); + wcPopover.close(); +}); - var wcBtnOpenNewPopover = document.querySelector('.wcBtnOpenNewPopover'); - wcBtnOpenNewPopover.addEventListener('click', function () { - var wcNewPopover = document.querySelector('.wcNewPopover'); - wcNewPopover.showAt(wcBtnOpenNewPopover); - }); +var wcBtnOpenNewPopover = document.querySelector('.wcBtnOpenNewPopover'); +wcBtnOpenNewPopover.addEventListener('click', function () { + var wcNewPopover = document.querySelector('.wcNewPopover'); + wcNewPopover.showAt(wcBtnOpenNewPopover); +}); - var wcBtnOpenNewPopoverDialog11 = document.querySelector('.wcBtnOpenNewPopoverDialog11'); - wcBtnOpenNewPopoverDialog11.addEventListener('click', function () { - var wcNewPopoverDialog11 = document.querySelector('.wcNewPopoverDialog11'); - wcNewPopoverDialog11.show(); - }); +var wcBtnOpenNewPopoverDialog11 = document.querySelector('.wcBtnOpenNewPopoverDialog11'); +wcBtnOpenNewPopoverDialog11.addEventListener('click', function () { + var wcNewPopoverDialog11 = document.querySelector('.wcNewPopoverDialog11'); + wcNewPopoverDialog11.show(); +}); diff --git a/packages/main/test/specs/Dialog.spec.js b/packages/main/test/specs/Dialog.spec.js index 7e04f807133f..ee79eba07c9f 100644 --- a/packages/main/test/specs/Dialog.spec.js +++ b/packages/main/test/specs/Dialog.spec.js @@ -68,9 +68,39 @@ describe("Dialog general interaction", () => { */ }); - it("draggable - mouse support", async () => { + it("dialog repositions after screen resize", async () => { await browser.url(`http://localhost:${PORT}/test-resources/pages/Dialog.html`); + // Setup + const openDialogButton = await browser.$("#btnOpenDialogWithAttr"); + await openDialogButton.click(); + + const dialog = await browser.$("#dlgAttr"); + const topBeforeScreenResize = parseInt((await dialog.getCSSProperty("top")).value); + const leftBeforeScreenResize = parseInt((await dialog.getCSSProperty("left")).value); + + const { + height: oldScreenHeight, + width: oldScreenWidth + } = await browser.getWindowSize(); + + // Act + await browser.setWindowSize(2000, 2000); + + // Assert + const topAfterScreenResize = parseInt((await dialog.getCSSProperty("top")).value); + const leftAfterScreenResize = parseInt((await dialog.getCSSProperty("left")).value); + + assert.notStrictEqual(topBeforeScreenResize, topAfterScreenResize, "dialog's top has changed after screen resize") + assert.notStrictEqual(leftBeforeScreenResize, leftAfterScreenResize, "dialog's left has changed after screen resize") + + // Clean-up + await browser.keys("Escape"); + await browser.setWindowSize(oldScreenWidth, oldScreenHeight); + }); + + it("draggable - mouse support", async () => { + // Setup const openDraggableDialogButton = await browser.$("#draggable-open"); await openDraggableDialogButton.click();