Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui5-popover): restrict arrow going out of bounds #4599

Merged
merged 4 commits into from
Jan 21, 2022
Merged

fix(ui5-popover): restrict arrow going out of bounds #4599

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
03e87c4
fix(ui5-popover): fixed arrow going out of bounds
georgimkv Jan 20, 2022
68a6cbb
remove meta tag in test page
georgimkv Jan 20, 2022
faa544c
improve jsdoc
georgimkv Jan 21, 2022
4b0eff8
extract css into a file
georgimkv Jan 21, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
96 changes: 68 additions & 28 deletions packages/main/src/Popover.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -284,6 +284,10 @@ class Popover extends Popup {
return 10; // px
}

static get ARROW_MARGIN() {
return 6; // px
}

onEnterDOM() {
ResizeHandler.register(this, this._handleResize);
}
Expand Down Expand Up @@ -422,43 +426,77 @@ class Popover extends Popup {
top = Math.max(top, this._top);
}

let { arrowX, arrowY } = placement;
const isVertical = this.actualPlacementType === PopoverPlacementType.Top
|| this.actualPlacementType === PopoverPlacementType.Bottom;
const isVertical = this.actualPlacementType === PopoverPlacementType.Top || this.actualPlacementType === PopoverPlacementType.Bottom;
const borderRadius = Number.parseInt(window.getComputedStyle(this).getPropertyValue("border-radius"));
const arrow = this._clampArrowPlacement(placement.arrow, isVertical, this._top, this._left, popoverSize, borderRadius);

this.arrowTranslateX = arrow.x;
this.arrowTranslateY = arrow.y;

top = this._adjustForIOSKeyboard(top);

Object.assign(this.style, {
top: `${top}px`,
left: `${left}px`,
});
super._show();

if (stretching && this._width) {
this.style.width = this._width;
}
}

/**
* Restricts the arrow's coordinates within the bounds of the popover.
* @private
* @param {{x: number, y: number}} arrow arrow's coordinates
* @param {number} isVertical if the popover is placed vertically relative to the opener
georgimkv marked this conversation as resolved.
Show resolved Hide resolved
* @param {number} top popover's top
* @param {number} left popover's left
* @param {{width: number, height: number}} popoverSize popover's width and height
* @param {number} borderRadius borderRadius
* @returns {{x: number, y: number}} Arrow's coordinates
*/
_clampArrowPlacement({ x, y }, isVertical, top, left, { width, height }, borderRadius) {
const maxY = this._getArrowRange(height, borderRadius);
const maxX = this._getArrowRange(width, borderRadius);

if (isVertical) {
const popoverOnLeftBorderOffset = Popover.VIEWPORT_MARGIN - this._left;
const popoverOnRightBorderOffset = this._left + popoverSize.width + Popover.VIEWPORT_MARGIN - document.documentElement.clientWidth;
const popoverOnLeftBorderOffset = Popover.VIEWPORT_MARGIN - left;
const popoverOnRightBorderOffset = left + width + Popover.VIEWPORT_MARGIN - document.documentElement.clientWidth;

if (popoverOnLeftBorderOffset > 0) {
arrowX -= popoverOnLeftBorderOffset;
x = Math.max(x - popoverOnLeftBorderOffset, -maxX);
} else if (popoverOnRightBorderOffset > 0) {
arrowX += popoverOnRightBorderOffset;
x = Math.min(x + popoverOnRightBorderOffset, maxX);
}
}
this.arrowTranslateX = Math.round(arrowX);

if (!isVertical) {
const popoverOnTopBorderOffset = Popover.VIEWPORT_MARGIN - this._top;
const popoverOnBottomBorderOffset = this._top + popoverSize.height + Popover.VIEWPORT_MARGIN - document.documentElement.clientHeight;
const popoverOnTopBorderOffset = Popover.VIEWPORT_MARGIN - top;
const popoverOnBottomBorderOffset = top + height + Popover.VIEWPORT_MARGIN - document.documentElement.clientHeight;
if (popoverOnTopBorderOffset > 0) {
arrowY -= popoverOnTopBorderOffset;
y = Math.max(y - popoverOnTopBorderOffset, -maxY);
} else if (popoverOnBottomBorderOffset > 0) {
arrowY += popoverOnBottomBorderOffset;
y = Math.min(y + popoverOnBottomBorderOffset, maxY);
}
}
this.arrowTranslateY = Math.round(arrowY);

top = this._adjustForIOSKeyboard(top);

Object.assign(this.style, {
top: `${top}px`,
left: `${left}px`,
});
super._show();
return {
x: Math.round(x),
y: Math.round(y),
};
}

if (stretching && this._width) {
this.style.width = this._width;
}
/**
* Returns the allowed range for the popover arrow based on its dimension.
* @private
* @param {number} dimension the height or width of the popover
* @param {number} borderRadius border radius of the popover
* @returns {number}
*/
_getArrowRange(dimension, borderRadius) {
return Math.floor((dimension / 2) - (borderRadius + Popover.ARROW_MARGIN));
}

/**
Expand All @@ -475,7 +513,7 @@ class Popover extends Popup {

const actualTop = Math.ceil(this.getBoundingClientRect().top);

return top + (parseInt(this.style.top || "0") - actualTop);
return top + (Number.parseInt(this.style.top || "0") - actualTop);
}

getPopoverSize() {
Expand All @@ -502,6 +540,9 @@ class Popover extends Popup {
return this.shadowRoot.querySelector(".ui5-popover-arrow");
}

/**
* @private
*/
calcPlacement(targetRect, popoverSize) {
let left = 0;
let top = 0;
Expand Down Expand Up @@ -587,8 +628,6 @@ class Popover extends Popup {
this._maxHeight = Math.round(maxHeight - Popover.VIEWPORT_MARGIN);
this._maxWidth = Math.round(maxWidth - Popover.VIEWPORT_MARGIN);

const arrowPos = this.getArrowPosition(targetRect, popoverSize, left, top, isVertical);

if (this._left === undefined || Math.abs(this._left - left) > 1.5) {
this._left = Math.round(left);
}
Expand All @@ -597,9 +636,10 @@ class Popover extends Popup {
this._top = Math.round(top);
}

const arrowPos = this.getArrowPosition(targetRect, popoverSize, left, top, isVertical);

return {
arrowX: arrowPos.x,
arrowY: arrowPos.y,
arrow: arrowPos,
top: this._top,
left: this._left,
placementType,
Expand Down
98 changes: 98 additions & 0 deletions packages/main/test/pages/PopoverArrowBounds.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
<!DOCTYPE html>
<html class="popover1auto">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>PopoverArrowBounds</title>

<script data-ui5-config type="application/json">
{
"language": "EN",
"libs": "sap.ui.webcomponents.main"
}
</script>

<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
<script src="../../resources/bundle.esm.js" type="module"></script>
<script nomodule src="../../resources/bundle.es5.js"></script>

<style>
.myBtn {
position: absolute;
}

#myBtn1 {
top: 0;
left: 0;
}

#myBtn2 {
top: 0;
right: 0;
}

#myBtn3 {
top: 50%;
left: 0;
}

#myBtn4 {
top: 50%;
right: 0;
}

#myBtn5 {
bottom: 0;
left: 0;
}

#myBtn6 {
bottom: 0;
right: 0;
}

#customSizeBtn {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}

.customSize {
height: 100px;
width: 100px;
}
</style>
</head>

<body>
<ui5-button id="myBtn1" data-placement-type="Left" class="myBtn">1</ui5-button>
<ui5-button id="myBtn2" data-placement-type="Left" class="myBtn">2</ui5-button>
<ui5-button id="myBtn3" data-placement-type="Bottom" class="myBtn">3</ui5-button>
<ui5-button id="myBtn4" data-placement-type="Top" class="myBtn">4</ui5-button>
<ui5-button id="myBtn5" data-placement-type="Left" class="myBtn">5</ui5-button>
<ui5-button id="myBtn6" data-placement-type="Left" class="myBtn">6</ui5-button>

<ui5-toggle-button id="customSizeBtn">Bigger Popover</ui5-toggle-button>

<ui5-popover id="myPopover">My Popover</ui5-popover>

<script>
var myPopover = document.getElementById("myPopover");

Array.from(document.querySelectorAll(".myBtn")).forEach(function (btn) {
btn.addEventListener("click", function() {
myPopover.placementType = btn.dataset.placementType;
myPopover.showAt(btn);
});
});

var customSizeBtn = document.getElementById("customSizeBtn");
customSizeBtn.addEventListener("click", function (event) {
myPopover.classList.toggle("customSize");
})
</script>
</body>

</html>