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) => () => { interface ClickListenerCurryOptions {
if (popoverWrapper) { wrapper: HTMLElement; // the element the popover will be the direct child of, which has relative positioning
const onChooseColor = async (color: string) => { parent: HTMLElement; // the element (paragraph/list) the highlight is inside
try { highlight: HighlightNode;
const { }
data: { const markClickListenerCurry =
updateHighlight: { highlight: newHighlight }, ({ wrapper, parent, highlight }: ClickListenerCurryOptions) =>
}, () => {
} = await doUpdateHighlight({ if (wrapper) {
input: { const onChooseColor = async (color: string) => {
color: color, try {
id: highlight.id, const {
}, data: {
}); updateHighlight: { highlight: newHighlight },
},
} = await doUpdateHighlight({
input: {
color: color,
id: highlight.id,
},
});
// we need to refresh the sidebar // we need to refresh the sidebar
highlightSidebar.open({ highlightSidebar.open({
highlight, highlight,
onUpdateText: onUpdateTextCurry(newHighlight), onUpdateText: onUpdateTextCurry(newHighlight),
}); });
} catch (error) { } catch (error) {
console.error('Error updating highlight:', error); console.error('Error updating highlight:', error);
} }
}; };
popover.show({ const top = parent.getBoundingClientRect().top - wrapper.getBoundingClientRect().top;
wrapper: popoverWrapper, popover.show({
offsetTop: 0, wrapper: wrapper,
onChooseColor, offsetTop: top,
onDelete: deleteHighlightCurry(highlight), 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) => { 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,
})
);
}, },
}); });
}; };