From 68d8201506681549502b066998642933bdba9335 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Wed, 3 May 2023 14:44:47 +0200 Subject: [PATCH] Suppress the forced alignment of elements on desktop The change 33420e94314be013a48d6fecb1a8a38c1635e6d1 was targeted at touch devices, but affected desktop environments too. --- ts/WoltLabSuite/Core/Ui/Alignment.ts | 15 +++++++++++---- .../js/WoltLabSuite/Core/Ui/Alignment.js | 19 ++++++++++++------- 2 files changed, 23 insertions(+), 11 deletions(-) diff --git a/ts/WoltLabSuite/Core/Ui/Alignment.ts b/ts/WoltLabSuite/Core/Ui/Alignment.ts index cd320fdf13..5b2ddb4e37 100644 --- a/ts/WoltLabSuite/Core/Ui/Alignment.ts +++ b/ts/WoltLabSuite/Core/Ui/Alignment.ts @@ -10,6 +10,7 @@ import * as Core from "../Core"; import * as DomTraverse from "../Dom/Traverse"; import DomUtil from "../Dom/Util"; import * as Language from "../Language"; +import * as Environment from "../Environment"; type HorizontalAlignment = "center" | "left" | "right"; type VerticalAlignment = "bottom" | "top"; @@ -264,6 +265,8 @@ export function set(element: HTMLElement, referenceElement: HTMLElement, options } } + let isForcedVerticalPosition = false; + const left = horizontal!.left; const right = horizontal!.right; let vertical = tryAlignmentVertical( @@ -286,7 +289,7 @@ export function set(element: HTMLElement, referenceElement: HTMLElement, options // only use these results if it fits into the boundaries, otherwise both directions exceed and we honor the demanded direction if (verticalFlipped.result) { vertical = verticalFlipped; - } else { + } else if (Environment.platform() !== "desktop") { // The element fits neither to the top nor the bottom. This is // especially an issue on mobile devices where the element might // exceed the window boundary if we are stubborn about the alignment. @@ -312,6 +315,8 @@ export function set(element: HTMLElement, referenceElement: HTMLElement, options top: preferTop ? "auto" : 0, }; } + + isForcedVerticalPosition = true; } } @@ -349,9 +354,11 @@ export function set(element: HTMLElement, referenceElement: HTMLElement, options window.getComputedStyle(element).position === "fixed" || (element.offsetParent && window.getComputedStyle(element.offsetParent).position === "fixed") ) { - // Ignore offsets caused by page scrolling. - if (bottom !== "auto") bottom = bottom + window.scrollY; - if (top !== "auto") top = top - window.scrollY; + if (!isForcedVerticalPosition) { + // Ignore offsets caused by page scrolling. + if (bottom !== "auto") bottom = bottom + window.scrollY; + if (top !== "auto") top = top - window.scrollY; + } } DomUtil.setStyles(element, { diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Alignment.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Alignment.js index a567321531..db01391b6d 100644 --- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Alignment.js +++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Alignment.js @@ -5,7 +5,7 @@ * @copyright 2001-2019 WoltLab GmbH * @license GNU Lesser General Public License */ -define(["require", "exports", "tslib", "../Core", "../Dom/Traverse", "../Dom/Util", "../Language"], function (require, exports, tslib_1, Core, DomTraverse, Util_1, Language) { +define(["require", "exports", "tslib", "../Core", "../Dom/Traverse", "../Dom/Util", "../Language", "../Environment"], function (require, exports, tslib_1, Core, DomTraverse, Util_1, Language, Environment) { "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.set = void 0; @@ -13,6 +13,7 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Traverse", "../Dom/Uti DomTraverse = tslib_1.__importStar(DomTraverse); Util_1 = tslib_1.__importDefault(Util_1); Language = tslib_1.__importStar(Language); + Environment = tslib_1.__importStar(Environment); /** * Calculates top/bottom position and verifies if the element would be still within the page's boundaries. */ @@ -198,6 +199,7 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Traverse", "../Dom/Uti } } } + let isForcedVerticalPosition = false; const left = horizontal.left; const right = horizontal.right; let vertical = tryAlignmentVertical(options.vertical, elDimensions, refDimensions, refOffsets, windowHeight, options.verticalOffset); @@ -207,7 +209,7 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Traverse", "../Dom/Uti if (verticalFlipped.result) { vertical = verticalFlipped; } - else { + else if (Environment.platform() !== "desktop") { // The element fits neither to the top nor the bottom. This is // especially an issue on mobile devices where the element might // exceed the window boundary if we are stubborn about the alignment. @@ -233,6 +235,7 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Traverse", "../Dom/Uti top: preferTop ? "auto" : 0, }; } + isForcedVerticalPosition = true; } } let bottom = vertical.bottom; @@ -267,11 +270,13 @@ define(["require", "exports", "tslib", "../Core", "../Dom/Traverse", "../Dom/Uti // Check if the element itself has a position of `fixed`. if (window.getComputedStyle(element).position === "fixed" || (element.offsetParent && window.getComputedStyle(element.offsetParent).position === "fixed")) { - // Ignore offsets caused by page scrolling. - if (bottom !== "auto") - bottom = bottom + window.scrollY; - if (top !== "auto") - top = top - window.scrollY; + if (!isForcedVerticalPosition) { + // Ignore offsets caused by page scrolling. + if (bottom !== "auto") + bottom = bottom + window.scrollY; + if (top !== "auto") + top = top - window.scrollY; + } } Util_1.default.setStyles(element, { bottom: bottom === "auto" ? bottom : Math.round(bottom).toString() + "px", -- 2.20.1