fix(ui5-popover): calculate offset for all sides of the page (#2916)

Author: georgimkv

packages/base/src/util/clamp.js

@@ -0,0 +1,12 @@
+/**
+ * Returns a value clamped between an upper bound 'max' and lower bound 'min'.
+ * @param {number} val value
+ * @param {number} min lower bound
+ * @param {number} max upper bound
+ * @returns {number}
+ */
+const clamp = (val, min, max) => {
+	return Math.min(Math.max(val, min), max);
+};
+
+export default clamp;

packages/main/src/Dialog.js

@@ -1,4 +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 Popup from "./Popup.js";
 import "@ui5/webcomponents-icons/dist/resize-corner.js";
@@ -223,10 +224,6 @@ class Dialog extends Popup {
 		this._center();
 	}
 
-	_clamp(val, min, max) {
-		return Math.min(Math.max(val, min), max);
-	}
-
 	onBeforeRendering() {
 		this._isRTL = this.effectiveDir === "rtl";
 		this.onPhone = isPhone();
@@ -386,26 +383,26 @@ class Dialog extends Popup {
 		let newLeft;
 
 		if (this._isRTL) {
-			newWidth = this._clamp(
+			newWidth = clamp(
 				this._initialWidth - (clientX - this._initialX),
 				this._minWidth,
 				this._initialLeft + this._initialWidth,
 			);
 
-			newLeft = this._clamp(
+			newLeft = clamp(
 				this._initialLeft + (clientX - this._initialX),
 				0,
 				this._initialX + this._initialWidth - this._minWidth,
 			);
 		} else {
-			newWidth = this._clamp(
+			newWidth = clamp(
 				this._initialWidth + (clientX - this._initialX),
 				this._minWidth,
 				window.innerWidth - this._initialLeft,
 			);
 		}
 
-		const newHeight = this._clamp(
+		const newHeight = clamp(
 			this._initialHeight + (clientY - this._initialY),
 			this._minHeight,
 			window.innerHeight - this._initialTop,

packages/main/src/Popover.js

@@ -1,6 +1,7 @@
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
+import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
 import Popup from "./Popup.js";
 import PopoverPlacementType from "./types/PopoverPlacementType.js";
 import PopoverVerticalAlign from "./types/PopoverVerticalAlign.js";
@@ -396,15 +397,44 @@ class Popover extends Popup {
 
 		this._oldPlacement = placement;
 
+		const left = clamp(
+			this._left,
+			Popover.MIN_OFFSET,
+			document.documentElement.clientWidth - popoverSize.width - Popover.MIN_OFFSET,
+		);
+
+		const top = clamp(
+			this._top,
+			Popover.MIN_OFFSET,
+			document.documentElement.clientHeight - popoverSize.height - Popover.MIN_OFFSET,
+		);
+
+		let { arrowX, arrowY } = placement;
+
 		const popoverOnLeftBorder = this._left === 0;
+		const popoverOnRightBorder = this._left + popoverSize.width >= document.documentElement.clientWidth;
+		if (popoverOnLeftBorder) {
+			arrowX -= Popover.MIN_OFFSET;
+		} else if (popoverOnRightBorder) {
+			arrowX += Popover.MIN_OFFSET;
+		}
+		this.arrowTranslateX = arrowX;
+
 		const popoverOnTopBorder = this._top === 0;
+		const popoverOnBottomBorder = this._top + popoverSize.height >= document.documentElement.clientHeight;
+		if (popoverOnTopBorder) {
+			arrowY -= Popover.MIN_OFFSET;
+		} else if (popoverOnBottomBorder) {
+			arrowY += Popover.MIN_OFFSET;
+		}
+		this.arrowTranslateY = arrowY;
 
 		this.actualPlacementType = placement.placementType;
-		this.arrowTranslateX = popoverOnLeftBorder ? placement.arrowX - Popover.MIN_OFFSET : placement.arrowX;
-		this.arrowTranslateY = popoverOnTopBorder ? placement.arrowY - Popover.MIN_OFFSET : placement.arrowY;
 
-		this.style.left = `${popoverOnLeftBorder ? Popover.MIN_OFFSET : this._left}px`;
-		this.style.top = `${popoverOnTopBorder ? Popover.MIN_OFFSET : this._top}px`;
+		Object.assign(this.style, {
+			top: `${top}px`,
+			left: `${left}px`,
+		});
 		super.show();
 
 		if (stretching && this._width) {
@@ -413,25 +443,17 @@ class Popover extends Popup {
 	}
 
 	getPopoverSize() {
-		let width,
-			height;
-		let rect = this.getBoundingClientRect();
-
-		if (this.opened) {
-			width = rect.width;
-			height = rect.height;
-
-			return { width, height };
+		if (!this.opened) {
+			Object.assign(this.style, {
+				display: "block",
+				top: "-10000px",
+				left: "-10000px",
+			});
 		}
 
-		this.style.display = "block";
-		this.style.top = "-10000px";
-		this.style.left = "-10000px";
-
-		rect = this.getBoundingClientRect();
-
-		width = rect.width;
-		height = rect.height;
+		const rect = this.getBoundingClientRect(),
+			width = rect.width,
+			height = rect.height;
 
 		return { width, height };
 	}

packages/main/test/pages/Popover.html

@@ -402,6 +402,16 @@
 		</div>
 	</ui5-popover>
 
+	<div style="display: flex; justify-content: flex-end;">
+		<ui5-button id="btnRightEdge">Popover on right edge of screen</ui5-button>
+	</div>
+
+	<ui5-popover header-text="Header" id="popoverRightEdge" placement-type="Top">
+		<ui5-label>Input field: </ui5-label>
+		<ui5-input></ui5-input>
+	</ui5-popover>
+
+
 	<script>
 		btn.addEventListener("click", function (event) {
 			pop.openBy(btn);
@@ -515,6 +525,10 @@
 			popXRightWide.openBy(btnOpenXRightWide);
 		});
 
+		btnRightEdge.addEventListener("click", function () {
+			popoverRightEdge.openBy(btnRightEdge);
+		});
+
 	</script>
 </body>