1 | class Tooltip {
|
2 | constructor(quill, boundsContainer) {
|
3 | this.quill = quill;
|
4 | this.boundsContainer = boundsContainer || document.body;
|
5 | this.root = quill.addContainer('ql-tooltip');
|
6 | this.root.innerHTML = this.constructor.TEMPLATE;
|
7 | if (this.quill.root === this.quill.scrollingContainer) {
|
8 | this.quill.root.addEventListener('scroll', () => {
|
9 | this.root.style.marginTop = (-1*this.quill.root.scrollTop) + 'px';
|
10 | });
|
11 | }
|
12 | this.hide();
|
13 | }
|
14 |
|
15 | hide() {
|
16 | this.root.classList.add('ql-hidden');
|
17 | }
|
18 |
|
19 | position(reference) {
|
20 | let left = reference.left + reference.width/2 - this.root.offsetWidth/2;
|
21 |
|
22 | let top = reference.bottom + this.quill.root.scrollTop;
|
23 | this.root.style.left = left + 'px';
|
24 | this.root.style.top = top + 'px';
|
25 | this.root.classList.remove('ql-flip');
|
26 | let containerBounds = this.boundsContainer.getBoundingClientRect();
|
27 | let rootBounds = this.root.getBoundingClientRect();
|
28 | let shift = 0;
|
29 | if (rootBounds.right > containerBounds.right) {
|
30 | shift = containerBounds.right - rootBounds.right;
|
31 | this.root.style.left = (left + shift) + 'px';
|
32 | }
|
33 | if (rootBounds.left < containerBounds.left) {
|
34 | shift = containerBounds.left - rootBounds.left;
|
35 | this.root.style.left = (left + shift) + 'px';
|
36 | }
|
37 | if (rootBounds.bottom > containerBounds.bottom) {
|
38 | let height = rootBounds.bottom - rootBounds.top;
|
39 | let verticalShift = reference.bottom - reference.top + height;
|
40 | this.root.style.top = (top - verticalShift) + 'px';
|
41 | this.root.classList.add('ql-flip');
|
42 | }
|
43 | return shift;
|
44 | }
|
45 |
|
46 | show() {
|
47 | this.root.classList.remove('ql-editing');
|
48 | this.root.classList.remove('ql-hidden');
|
49 | }
|
50 | }
|
51 |
|
52 |
|
53 | export default Tooltip;
|