ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Fix positioning of popover

This commit is contained in:
Ramon Wenger 2024-02-29 10:50:52 +01:00
parent c2561c2014
commit 2ee56aa3c0
1 changed files with 50 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
client/src/helpers/highlight.ts
View File

@ -292,8 +292,15 @@ const onUpdateTextCurry = (highlight: HighlightNode) => (text: string) =>
}, },
}); });
const markClickListenerCurry = (popoverWrapper: HTMLElement | null, highlight: HighlightNode) => () => { interface ClickListenerCurryOptions {
if (popoverWrapper) { wrapper: HTMLElement; // the element the popover will be the direct child of, which has relative positioning
parent: HTMLElement; // the element (paragraph/list) the highlight is inside
highlight: HighlightNode;
}
const markClickListenerCurry =
({ wrapper, parent, highlight }: ClickListenerCurryOptions) =>
() => {
if (wrapper) {
const onChooseColor = async (color: string) => { const onChooseColor = async (color: string) => {
try { try {
const { const {
@ -317,9 +324,10 @@ const markClickListenerCurry = (popoverWrapper: HTMLElement | null, highlight: H
} }
}; };
const top = parent.getBoundingClientRect().top - wrapper.getBoundingClientRect().top;
popover.show({ popover.show({
wrapper: popoverWrapper, wrapper: wrapper,
offsetTop: 0, offsetTop: top,
onChooseColor, onChooseColor,
onDelete: deleteHighlightCurry(highlight), onDelete: deleteHighlightCurry(highlight),
}); });
@ -328,7 +336,7 @@ const markClickListenerCurry = (popoverWrapper: HTMLElement | null, highlight: H
highlight, highlight,
onUpdateText: onUpdateTextCurry(highlight), onUpdateText: onUpdateTextCurry(highlight),
}); });
}; };
export const markHighlight = (highlight: HighlightNode, element: HTMLElement, popoverElement: HTMLElement | null) => { export const markHighlight = (highlight: HighlightNode, element: HTMLElement, popoverElement: HTMLElement | null) => {
const instance = new Mark(element); const instance = new Mark(element);
@ -345,7 +353,14 @@ export const markHighlight = (highlight: HighlightNode, element: HTMLElement, po
each: (newMark: HTMLElement) => { each: (newMark: HTMLElement) => {
newMark.dataset.id = highlight.id; newMark.dataset.id = highlight.id;
newMark.dataset.cy = 'highlight-mark'; newMark.dataset.cy = 'highlight-mark';
newMark.addEventListener('click', markClickListenerCurry(popoverElement, highlight)); newMark.addEventListener(
'click',
markClickListenerCurry({
wrapper: popoverElement,
parent: element,
highlight,
})
);
}, },
}); });
}; };