7e5d4522d971193241657705a2fbe8c502df849cab73fc30241620a05492049ae3ca58fc677e11a8b42bec876b6cc14b6ca1a94ebff6f77c3b15cd64ece5c7 1.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
  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. // @ts-expect-error
  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. // root.scrollTop should be 0 if scrollContainer !== root
  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. //# sourceMappingURL=tooltip.js.map