sam/pleroma-fe
sam
/
pleroma-fe
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

turns out it is needed still + some code cleanup

This commit is contained in:
Henry Jameson 2022-06-12 15:21:09 +03:00
parent 71b5462a05
commit ce00954e7c
1 changed files with 26 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/popover/popover.js
View File

@ -58,10 +58,18 @@ const Popover = {
const anchorEl = (this.$refs.trigger && this.$refs.trigger.children[0]) || this.$el
// SVGs don't have offsetWidth/Height, use fallback
const anchorHeight = anchorEl.offsetHeight || anchorEl.clientHeight
const anchorWidth = anchorEl.offsetWidth || anchorEl.clientWidth
const anchorScreenBox = anchorEl.getBoundingClientRect()
// Screen position of the origin point for popover
const origin = { x: anchorScreenBox.left, y: anchorScreenBox.top }
const anchorStyle = getComputedStyle(anchorEl)
const topPadding = parseFloat(anchorStyle.paddingTop)
const bottomPadding = parseFloat(anchorStyle.paddingBottom)
// Screen position of the origin point for popover = center of the anchor
const origin = {
x: anchorScreenBox.left + anchorWidth * 0.5,
y: anchorScreenBox.top + anchorHeight * 0.5
}
const content = this.$refs.content
// Minor optimization, don't call a slow reflow call if we don't have to
@ -89,15 +97,17 @@ const Popover = {
max: window.innerHeight - (margin.bottom || 5)
}
let horizOffset = 0
let horizOffset = content.offsetWidth * -0.5
const leftBorder = origin.x + horizOffset
const rightBorder = origin.x - horizOffset
// If overflowing from left, move it so that it doesn't
if ((origin.x) < xBounds.min) {
horizOffset += -origin.x + xBounds.min
if (leftBorder < xBounds.min) {
horizOffset += xBounds.min - leftBorder
}
// If overflowing from right, move it so that it doesn't
if ((origin.x + horizOffset + content.offsetWidth) > xBounds.max) {
horizOffset -= (origin.x + horizOffset + content.offsetWidth) - xBounds.max
if (rightBorder > xBounds.max) {
horizOffset -= rightBorder - xBounds.max
}
// Default to whatever user wished with placement prop
@ -106,23 +116,25 @@ const Popover = {
// 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
// force to bottom, again regardless of what placement value was.
if (origin.y + content.offsetHeight > yBounds.max) usingTop = true
if (origin.y - content.offsetHeight < yBounds.min) usingTop = false
const topBoundary = origin.y - anchorHeight * 0.5 + (this.removePadding ? topPadding : 0)
const bottomBoundary = origin.y + anchorHeight * 0.5 - (this.removePadding ? bottomPadding : 0)
if (bottomBoundary + content.offsetHeight > yBounds.max) usingTop = true
if (topBoundary - content.offsetHeight < yBounds.min) usingTop = false
const yOffset = (this.offset && this.offset.y) || 0
const translateY = usingTop
? yOffset - content.offsetHeight
: yOffset + anchorHeight
? topBoundary - yOffset - content.offsetHeight
: bottomBoundary + yOffset
const xOffset = (this.offset && this.offset.x) || 0
const translateX = horizOffset + xOffset
const translateX = origin.x + horizOffset + xOffset
// Note, separate translateX and translateY avoids blurry text on chromium,
// single translate or translate3d resulted in blurry text.
this.styles = {
opacity: 1,
left: `${Math.round(origin.x + translateX)}px`,
top: `${Math.round(origin.y + translateY)}px`,
left: `${Math.round(translateX)}px`,
top: `${Math.round(translateY)}px`,
position: 'fixed'
}