verdnatura/salix
verdnatura
/
salix
3
4
Fork 0
Code Issues Pull Requests 67 Releases Wiki Activity

Popover fixes

This commit is contained in:
Juan Ferrer 2019-04-10 15:47:23 +02:00
parent 862f0b6c1e
commit c1b103d170
1 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
front/core/components/popover/popover.js
View File

@ -118,7 +118,9 @@ export default class Popover extends Component {
*/ */
relocate() { relocate() {
if (!(this.parent && this._shown)) return; if (!(this.parent && this._shown)) return;
let margin = 10; let margin = 10;
let scrollbarSize = 10;
let style = this.popover.style; let style = this.popover.style;
style.width = ''; style.width = '';
@ -131,37 +133,40 @@ export default class Popover extends Component {
let parentRect = this.parent.getBoundingClientRect(); let parentRect = this.parent.getBoundingClientRect();
let popoverRect = this.popover.getBoundingClientRect(); let popoverRect = this.popover.getBoundingClientRect();
let arrowRect = this.arrow.getBoundingClientRect(); let arrowRect = this.arrow.getBoundingClientRect();
let clamp = (value, min, max) => Math.min(Math.max(value, min), max);
let arrowHeight = Math.sqrt(Math.pow(arrowRect.height, 2) * 2) / 2; let arrowHeight = Math.sqrt(Math.pow(arrowRect.height, 2) * 2) / 2;
let endMargin = margin + scrollbarSize;
let maxRight = window.innerWidth - endMargin;
let maxBottom = window.innerHeight - endMargin;
let maxWith = maxRight - margin;
let maxHeight = maxBottom - margin - arrowHeight;
let width = clamp(popoverRect.width, parentRect.width, maxWith);
let height = popoverRect.height; let height = popoverRect.height;
let width = Math.max(popoverRect.width, parentRect.width);
let left = parentRect.left + parentRect.width / 2 - width / 2;
left = clamp(left, margin, maxRight - width);
let top = parentRect.top + parentRect.height + arrowHeight; let top = parentRect.top + parentRect.height + arrowHeight;
let left = Math.max(parentRect.left + parentRect.width / 2 - width / 2, margin); let showTop = top + height > maxBottom;
if (showTop) top = parentRect.top - height - arrowHeight;
let showTop = top + height + margin > window.innerHeight; top = Math.max(top, margin);
if (showTop)
top = Math.max(parentRect.top - height - arrowHeight, margin);
if (left + width + margin > window.innerWidth)
left = window.innerWidth - width - margin;
if (showTop) if (showTop)
arrowStyle.bottom = `0`; arrowStyle.bottom = `0`;
else else
arrowStyle.top = `0`; arrowStyle.top = `0`;
let arrowMargin = margin + 10;
let arrowLeft = (parentRect.left - left) + parentRect.width / 2; let arrowLeft = (parentRect.left - left) + parentRect.width / 2;
arrowLeft = Math.max(Math.min(arrowLeft, width - arrowMargin), arrowMargin); arrowLeft = clamp(arrowLeft, arrowHeight, width - arrowHeight);
arrowStyle.left = `${arrowLeft}px`; arrowStyle.left = `${arrowLeft}px`;
style.top = `${top}px`; style.top = `${top}px`;
style.left = `${left}px`; style.left = `${left}px`;
style.width = `${width}px`; style.width = `${width}px`;
if (height > maxHeight) style.height = `${maxHeight}px`;
if (height + margin * 2 + arrowHeight > window.innerHeight)
style.height = `${window.innerHeight - margin * 2 - arrowHeight}px`;
} }
onDocKeyDown(event) { onDocKeyDown(event) {