8c082e7bc9
* [v0.1.0] Major Refactor - Remove moment and Snap dependencies - Use Rollup as build tool - Use Prettier for linting/styling - Use Jest for testing - Use yarn * Change Bar hover behaviour, Bar animation * Corner radius configurable
70 lines
2.0 KiB
JavaScript
70 lines
2.0 KiB
JavaScript
export default class Popup {
|
|
constructor(parent) {
|
|
this.parent = parent;
|
|
this.make();
|
|
}
|
|
|
|
make() {
|
|
this.parent.innerHTML = `
|
|
<div class="title"></div>
|
|
<div class="subtitle"></div>
|
|
<div class="pointer"></div>
|
|
`;
|
|
|
|
this.hide();
|
|
|
|
this.title = this.parent.querySelector('.title');
|
|
this.subtitle = this.parent.querySelector('.subtitle');
|
|
this.pointer = this.parent.querySelector('.pointer');
|
|
}
|
|
|
|
show(options) {
|
|
if (!options.target_element) {
|
|
throw new Error('target_element is required to show popup');
|
|
}
|
|
if (!options.position) {
|
|
options.position = 'left';
|
|
}
|
|
const target_element = options.target_element;
|
|
|
|
// set data
|
|
this.title.innerHTML = options.title;
|
|
this.subtitle.innerHTML = options.subtitle;
|
|
|
|
this.parent.style.width = this.parent.clientWidth + 'px';
|
|
|
|
// set position
|
|
let position_meta;
|
|
if (target_element instanceof HTMLElement) {
|
|
position_meta = target_element.getBoundingClientRect();
|
|
} else if (target_element instanceof SVGElement) {
|
|
position_meta = options.target_element.getBBox();
|
|
}
|
|
|
|
if (options.position === 'left') {
|
|
this.parent.style.left =
|
|
position_meta.x + (position_meta.width + 10) + 'px';
|
|
this.parent.style.top =
|
|
position_meta.y -
|
|
this.title.clientHeight / 2 +
|
|
position_meta.height / 2 +
|
|
'px';
|
|
|
|
this.pointer.style.transform = 'rotateZ(90deg)';
|
|
this.pointer.style.left = '-7px';
|
|
this.pointer.style.top =
|
|
this.title.clientHeight / 2 -
|
|
this.pointer.getBoundingClientRect().height +
|
|
2 +
|
|
'px';
|
|
}
|
|
|
|
// show
|
|
this.parent.style.opacity = 1;
|
|
}
|
|
|
|
hide() {
|
|
this.parent.style.opacity = 0;
|
|
}
|
|
}
|