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