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

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

@ -292,43 +292,51 @@ const onUpdateTextCurry = (highlight: HighlightNode) => (text: string) =>
},
});
const markClickListenerCurry = (popoverWrapper: HTMLElement | null, highlight: HighlightNode) => () => {
if (popoverWrapper) {
const onChooseColor = async (color: string) => {
try {
const {
data: {
updateHighlight: { highlight: newHighlight },
},
} = await doUpdateHighlight({
input: {
color: color,
id: highlight.id,
},
});
interface ClickListenerCurryOptions {
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) => {
try {
const {
data: {
updateHighlight: { highlight: newHighlight },
},
} = await doUpdateHighlight({
input: {
color: color,
id: highlight.id,
},
});
// we need to refresh the sidebar
highlightSidebar.open({
highlight,
onUpdateText: onUpdateTextCurry(newHighlight),
});
} catch (error) {
console.error('Error updating highlight:', error);
}
};
// we need to refresh the sidebar
highlightSidebar.open({
highlight,
onUpdateText: onUpdateTextCurry(newHighlight),
});
} catch (error) {
console.error('Error updating highlight:', error);
}
};
popover.show({
wrapper: popoverWrapper,
offsetTop: 0,
onChooseColor,
onDelete: deleteHighlightCurry(highlight),
const top = parent.getBoundingClientRect().top - wrapper.getBoundingClientRect().top;
popover.show({
wrapper: wrapper,
offsetTop: top,
onChooseColor,
onDelete: deleteHighlightCurry(highlight),
});
}
highlightSidebar.open({
highlight,
onUpdateText: onUpdateTextCurry(highlight),
});
}
highlightSidebar.open({
highlight,
onUpdateText: onUpdateTextCurry(highlight),
});
};
};
export const markHighlight = (highlight: HighlightNode, element: HTMLElement, popoverElement: HTMLElement | null) => {
const instance = new Mark(element);
@ -345,7 +353,14 @@ export const markHighlight = (highlight: HighlightNode, element: HTMLElement, po
each: (newMark: HTMLElement) => {
newMark.dataset.id = highlight.id;
newMark.dataset.cy = 'highlight-mark';
newMark.addEventListener('click', markClickListenerCurry(popoverElement, highlight));
newMark.addEventListener(
'click',
markClickListenerCurry({
wrapper: popoverElement,
parent: element,
highlight,
})
);
},
});
};