vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor on overlay gutters

pull/5128/head
mertsincan 2024-01-21 10:43:57 +00:00
parent a0f168aba1
commit ae81a90b73
3 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/lib/confirmpopup/ConfirmPopup.vue
View File

@ -190,7 +190,7 @@ export default {
ZIndexUtils.clear(el); ZIndexUtils.clear(el);
}, },
alignOverlay() { alignOverlay() {
DomHandler.absolutePosition(this.container, this.target); DomHandler.absolutePosition(this.container, this.target, false);
const containerOffset = DomHandler.getOffset(this.container); const containerOffset = DomHandler.getOffset(this.container);
const targetOffset = DomHandler.getOffset(this.target); const targetOffset = DomHandler.getOffset(this.target);

2
components/lib/overlaypanel/OverlayPanel.vue
View File

@ -150,7 +150,7 @@ export default {
} }
}, },
alignOverlay() { alignOverlay() {
DomHandler.absolutePosition(this.container, this.target); DomHandler.absolutePosition(this.container, this.target, false);
const containerOffset = DomHandler.getOffset(this.container); const containerOffset = DomHandler.getOffset(this.container);
const targetOffset = DomHandler.getOffset(this.target); const targetOffset = DomHandler.getOffset(this.target);

24
components/lib/utils/DomHandler.js
View File

@ -294,7 +294,7 @@ export default {
return 0; return 0;
}, },
absolutePosition(element, target) { absolutePosition(element, target, gutter = true) {
if (element) { if (element) {
const elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element); const elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
const elementOuterHeight = elementDimensions.height; const elementOuterHeight = elementDimensions.height;
@ -305,20 +305,19 @@ export default {
const windowScrollTop = this.getWindowScrollTop(); const windowScrollTop = this.getWindowScrollTop();
const windowScrollLeft = this.getWindowScrollLeft(); const windowScrollLeft = this.getWindowScrollLeft();
const viewport = this.getViewport(); const viewport = this.getViewport();
let top, left; let top,
left,
origin = 'top';
if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) { if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
top = targetOffset.top + windowScrollTop - elementOuterHeight; top = targetOffset.top + windowScrollTop - elementOuterHeight;
element.style.transformOrigin = 'bottom'; origin = 'bottom';
element.style.marginTop = 'calc(var(--p-anchor-gutter) * -1)';
if (top < 0) { if (top < 0) {
top = windowScrollTop; top = windowScrollTop;
} }
} else { } else {
top = targetOuterHeight + targetOffset.top + windowScrollTop; top = targetOuterHeight + targetOffset.top + windowScrollTop;
element.style.transformOrigin = 'top';
element.style.marginTop = 'calc(var(--p-anchor-gutter))';
} }
if (targetOffset.left + elementOuterWidth > viewport.width) left = Math.max(0, targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth); if (targetOffset.left + elementOuterWidth > viewport.width) left = Math.max(0, targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth);
@ -326,27 +325,30 @@ export default {
element.style.top = top + 'px'; element.style.top = top + 'px';
element.style.left = left + 'px'; element.style.left = left + 'px';
element.style.transformOrigin = origin;
gutter && (element.style.marginTop = origin === 'bottom' ? 'calc(var(--p-anchor-gutter) * -1)' : 'calc(var(--p-anchor-gutter))');
} }
}, },
relativePosition(element, target) { relativePosition(element, target, gutter = true) {
if (element) { if (element) {
const elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element); const elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
const targetHeight = target.offsetHeight; const targetHeight = target.offsetHeight;
const targetOffset = target.getBoundingClientRect(); const targetOffset = target.getBoundingClientRect();
const viewport = this.getViewport(); const viewport = this.getViewport();
let top, left; let top,
left,
origin = 'top';
if (targetOffset.top + targetHeight + elementDimensions.height > viewport.height) { if (targetOffset.top + targetHeight + elementDimensions.height > viewport.height) {
top = -1 * elementDimensions.height; top = -1 * elementDimensions.height;
element.style.transformOrigin = 'bottom'; origin = 'bottom';
if (targetOffset.top + top < 0) { if (targetOffset.top + top < 0) {
top = -1 * targetOffset.top; top = -1 * targetOffset.top;
} }
} else { } else {
top = targetHeight; top = targetHeight;
element.style.transformOrigin = 'top';
} }
if (elementDimensions.width > viewport.width) { if (elementDimensions.width > viewport.width) {
@ -362,6 +364,8 @@ export default {
element.style.top = top + 'px'; element.style.top = top + 'px';
element.style.left = left + 'px'; element.style.left = left + 'px';
element.style.transformOrigin = origin;
gutter && (element.style.marginTop = origin === 'bottom' ? 'calc(var(--p-anchor-gutter) * -1)' : 'calc(var(--p-anchor-gutter))');
} }
}, },