67 lines
1.7 KiB
JavaScript
67 lines
1.7 KiB
JavaScript
export default function positionDropdown(element, { anchor, align }) {
|
|
let positionSide = "top"
|
|
let maxHeight = 0
|
|
let dimensions = getDimensions(anchor)
|
|
|
|
function getDimensions() {
|
|
const {
|
|
bottom,
|
|
top: spaceAbove,
|
|
left,
|
|
width,
|
|
} = anchor.getBoundingClientRect()
|
|
const spaceBelow = window.innerHeight - bottom
|
|
const containerRect = element.getBoundingClientRect()
|
|
|
|
let y
|
|
|
|
if (spaceAbove > spaceBelow) {
|
|
positionSide = "bottom"
|
|
maxHeight = spaceAbove - 20
|
|
y = window.innerHeight - spaceAbove + 5
|
|
} else {
|
|
positionSide = "top"
|
|
y = bottom + 5
|
|
maxHeight = spaceBelow - 20
|
|
}
|
|
|
|
return {
|
|
[positionSide]: y,
|
|
left,
|
|
width,
|
|
containerWidth: containerRect.width,
|
|
}
|
|
}
|
|
|
|
function calcLeftPosition() {
|
|
return align === "right"
|
|
? dimensions.left + dimensions.width - dimensions.containerWidth
|
|
: dimensions.left
|
|
}
|
|
|
|
element.style.position = "absolute"
|
|
element.style.zIndex = "9999"
|
|
element.style.minWidth = `${dimensions.width}px`
|
|
element.style.maxHeight = `${maxHeight.toFixed(0)}px`
|
|
element.style.transformOrigin = `center ${positionSide}`
|
|
element.style[positionSide] = `${dimensions[positionSide]}px`
|
|
element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
|
|
|
|
const resizeObserver = new ResizeObserver(entries => {
|
|
entries.forEach(() => {
|
|
dimensions = getDimensions()
|
|
element.style[positionSide] = `${dimensions[positionSide]}px`
|
|
element.style.left = `${calcLeftPosition(dimensions).toFixed(0)}px`
|
|
})
|
|
})
|
|
|
|
resizeObserver.observe(anchor)
|
|
resizeObserver.observe(element)
|
|
|
|
return {
|
|
destroy() {
|
|
resizeObserver.disconnect()
|
|
},
|
|
}
|
|
}
|