Browse Source

Markup tooltip:

Fix displaying tooltip when changing selection with keyboard
Change position of tooltip when changing selection
master
Eduard Kuzmenko 3 years ago
parent
commit
b0225329c9
  1. 18
      src/components/chat/markupTooltip.ts
  2. 3
      src/helpers/dom/getVisibleRect.ts

18
src/components/chat/markupTooltip.ts

@ -17,6 +17,7 @@ import { attachClickEvent } from "../../helpers/dom/clickEvent";
import getSelectedNodes from "../../helpers/dom/getSelectedNodes"; import getSelectedNodes from "../../helpers/dom/getSelectedNodes";
import isSelectionEmpty from "../../helpers/dom/isSelectionEmpty"; import isSelectionEmpty from "../../helpers/dom/isSelectionEmpty";
import { MarkdownType, markdownTags } from "../../helpers/dom/getRichElementValue"; import { MarkdownType, markdownTags } from "../../helpers/dom/getRichElementValue";
import getVisibleRect from "../../helpers/dom/getVisibleRect";
//import { logger } from "../../lib/logger"; //import { logger } from "../../lib/logger";
export default class MarkupTooltip { export default class MarkupTooltip {
@ -251,7 +252,9 @@ export default class MarkupTooltip {
this.container.style.maxWidth = inputRect.width + 'px'; this.container.style.maxWidth = inputRect.width + 'px';
const selectionTop = selectionRect.top + (bodyRect.top * -1); const visibleRect = getVisibleRect(undefined, this.appImManager.chat.input.messageInput, false, selectionRect);
const selectionTop = visibleRect.rect.top/* selectionRect.top */ + (bodyRect.top * -1);
const currentTools = this.container.classList.contains('is-link') ? this.wrapper.lastElementChild : this.wrapper.firstElementChild; const currentTools = this.container.classList.contains('is-link') ? this.wrapper.lastElementChild : this.wrapper.firstElementChild;
@ -333,12 +336,12 @@ export default class MarkupTooltip {
//document.removeEventListener('mouseup', this.onMouseUp); //document.removeEventListener('mouseup', this.onMouseUp);
}; */ }; */
private onMouseUpSingle = (e: Event) => { private onMouseUpSingle = (e?: Event) => {
//this.log('onMouseUpSingle'); //this.log('onMouseUpSingle');
this.waitingForMouseUp = false; this.waitingForMouseUp = false;
if(IS_TOUCH_SUPPORTED) { if(IS_TOUCH_SUPPORTED) {
cancelEvent(e); e && cancelEvent(e);
if(this.mouseUpCounter++ === 0) { if(this.mouseUpCounter++ === 0) {
this.resetSelection(this.savedRange); this.resetSelection(this.savedRange);
} else { } else {
@ -383,7 +386,8 @@ export default class MarkupTooltip {
return; return;
} }
if(document.activeElement !== this.appImManager.chat.input.messageInput) { const messageInput = this.appImManager.chat.input.messageInput;
if(document.activeElement !== messageInput) {
this.hide(); this.hide();
return; return;
} }
@ -412,8 +416,12 @@ export default class MarkupTooltip {
this.show(); this.show();
}, {once: true, passive: false}); */ }, {once: true, passive: false}); */
} }
} else { } else if(this.container && this.container.classList.contains('is-visible')) {
this.setTooltipPosition();
} else if(messageInput.matches(':active')) {
this.setMouseUpEvent(); this.setMouseUpEvent();
} else {
this.show();
} }
}); });
} }

3
src/helpers/dom/getVisibleRect.ts

@ -4,8 +4,7 @@
* https://github.com/morethanwords/tweb/blob/master/LICENSE * https://github.com/morethanwords/tweb/blob/master/LICENSE
*/ */
export default function getVisibleRect(element: HTMLElement, overflowElement: HTMLElement, lookForSticky?: boolean) { export default function getVisibleRect(element: HTMLElement, overflowElement: HTMLElement, lookForSticky?: boolean, rect = element.getBoundingClientRect()) {
const rect = element.getBoundingClientRect();
const overflowRect = overflowElement.getBoundingClientRect(); const overflowRect = overflowElement.getBoundingClientRect();
let {top: overflowTop, bottom: overflowBottom} = overflowRect; let {top: overflowTop, bottom: overflowBottom} = overflowRect;

Loading…
Cancel
Save