@activecollab/components
Version:
ActiveCollab Components
83 lines • 2.32 kB
JavaScript
const Position = (targetTop, targetBottom, targetLeft, targetRight, contentHeight, contentWidth) => {
const windowHeight = window.innerHeight;
const windowWidth = window.innerWidth;
let repositionY = (targetTop + targetBottom) / 2 - contentHeight / 2;
let repositionX = (targetLeft + targetRight) / 2 - contentWidth / 2;
function handleY() {
if (targetBottom + contentHeight + 6 < windowHeight) {
repositionY = targetBottom + 6;
return true;
}
if (targetTop - contentHeight - 6 > 0) {
repositionY = targetTop - contentHeight - 6;
return true;
}
return false;
}
function handleX() {
if (targetRight + contentWidth + 6 < windowWidth) {
repositionX = targetRight + 6;
return true;
}
if (targetLeft - contentWidth - 6 > 0) {
repositionX = targetLeft - contentWidth - 6;
return true;
}
return false;
}
// Y middle
if (repositionX > 0 && repositionX + contentWidth < windowWidth && handleY()) {
return {
top: repositionY,
left: repositionX
};
}
// Y right
repositionX = targetLeft;
if (targetLeft > 0 && targetLeft + contentWidth < windowWidth && handleY()) {
return {
top: repositionY,
left: repositionX
};
}
// Y left
repositionX = targetRight - contentWidth;
if (targetRight < windowWidth && targetRight - contentWidth > 0 && handleY()) {
return {
top: repositionY,
left: repositionX
};
}
// X middle
if (repositionY > 0 && repositionY + contentHeight < windowHeight && handleX()) {
return {
top: repositionY,
left: repositionX
};
}
// X bottom
repositionY = targetTop;
if (targetTop > 0 && targetTop + contentHeight < windowHeight && handleX()) {
return {
top: repositionY,
left: repositionX
};
}
// X top
repositionY = targetBottom - contentHeight;
if (targetBottom < windowHeight && targetBottom - contentHeight > 0 && handleX()) {
return {
top: repositionY,
left: repositionX
};
}
// center
repositionY = (targetTop + targetBottom) / 2 - contentHeight / 2;
repositionX = (targetLeft + targetRight) / 2 - contentWidth / 2;
return {
top: repositionY,
left: repositionX
};
};
export default Position;
//# sourceMappingURL=usePosition.js.map