File size: 1,887 Bytes
76763d7 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
/**
* Popover that is displayed on top of the highlighted element
*/
import Element from './element';
export default class Popover extends Element {
constructor(options = {
padding: 10,
}, window, document) {
super();
this.options = options;
this.window = window;
this.document = document;
this.node = this.getPopover();
}
getPopover() {
// @todo: Create if not there
const popover = this.document.getElementById('sholo-popover-item');
popover.style.position = 'absolute';
return popover;
}
getHeight() {
return Math.max(this.node.scrollHeight, this.node.offsetHeight);
}
hide() {
this.node.style.display = 'none';
}
reset() {
this.node.style.display = 'block';
this.node.style.left = '';
this.node.style.top = '';
this.node.style.bottom = '';
this.node.style.right = '';
// Remove the positional classes from tip
this.node
.querySelector('.sholo-popover-tip')
.className = 'sholo-popover-tip';
}
show(position) {
this.reset();
const popoverTip = this.node.querySelector('.sholo-popover-tip');
const pageHeight = this.getFullPageSize().height;
const popoverHeight = this.getHeight();
const popoverMargin = this.options.padding + 10;
this.node.style.left = `${position.left - this.options.padding}px`;
// Calculate different dimensions after attaching popover
const pageHeightAfterPopOver = position.bottom + popoverHeight + popoverMargin;
// If adding popover would go out of the window height, then show it to the top
if (pageHeightAfterPopOver >= pageHeight) {
this.node.style.top = `${position.top - popoverHeight - popoverMargin}px`;
popoverTip.classList.add('bottom');
} else {
this.node.style.top = `${position.bottom + popoverMargin}px`;
popoverTip.classList.add('top');
}
}
}
|