hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix popover left/right placement

Browse source
This commit is contained in:
Henry Jameson 2025-01-12 22:19:33 +02:00
parent 5222da7748
commit af3c2bc6fc
1 changed files with 11 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
src/components/popover/popover.js
View file

@ -198,7 +198,7 @@ const Popover = {
let usingTop = this.placement !== 'bottom' let usingTop = this.placement !== 'bottom'
// Handle special cases, first force to displaying on top if there's not space on bottom, // Handle special cases, first force to displaying on top if there's not space on bottom,
// regardless of what placement value was. Then check if there's not space on top, and // regardless of what placement value was. Then check if there's no space on top, and
// force to bottom, again regardless of what placement value was. // force to bottom, again regardless of what placement value was.
const topBoundary = origin.y - anchorHeight * 0.5 + (this.removePadding ? topPadding : 0) const topBoundary = origin.y - anchorHeight * 0.5 + (this.removePadding ? topPadding : 0)
const bottomBoundary = origin.y + anchorHeight * 0.5 - (this.removePadding ? bottomPadding : 0) const bottomBoundary = origin.y + anchorHeight * 0.5 - (this.removePadding ? bottomPadding : 0)
@ -214,20 +214,20 @@ const Popover = {
translateX = origin.x + horizOffset + xOffset translateX = origin.x + horizOffset + xOffset
} else { } else {
// Default to whatever user wished with placement prop // Default to whatever user wished with placement prop
let usingRight = this.placement !== 'left' let usingLeft = this.placement !== 'right'
// Handle special cases, first force to displaying on top if there's not space on bottom, // Handle special cases, first force to displaying on left if there's not space on right,
// regardless of what placement value was. Then check if there's not space on top, and // regardless of what placement value was. Then check if there's no space on right, and
// force to bottom, again regardless of what placement value was. // force to bottom, again regardless of what placement value was.
const rightBoundary = origin.x - anchorWidth * 0.5 + (this.removePadding ? rightPadding : 0) const leftBoundary = origin.x - anchorWidth * 0.5 + (this.removePadding ? leftPadding : 0)
const leftBoundary = origin.x + anchorWidth * 0.5 - (this.removePadding ? leftPadding : 0) const rightBoundary = origin.x + anchorWidth * 0.5 - (this.removePadding ? rightPadding : 0)
if (leftBoundary + content.offsetWidth > xBounds.max) usingRight = true if (leftBoundary - content.offsetWidth > xBounds.max) usingLeft = true
if (rightBoundary - content.offsetWidth < xBounds.min) usingRight = false if (rightBoundary + content.offsetWidth < xBounds.min) usingLeft = false
const xOffset = (this.offset && this.offset.x) || 0 const xOffset = (this.offset && this.offset.x) || 0
translateX = usingRight translateX = usingLeft
? rightBoundary - xOffset - content.offsetWidth ? leftBoundary - xOffset - content.offsetWidth
: leftBoundary + xOffset : rightBoundary + xOffset
const yOffset = (this.offset && this.offset.y) || 0 const yOffset = (this.offset && this.offset.y) || 0
translateY = origin.y + vertOffset + yOffset translateY = origin.y + vertOffset + yOffset