ted/recogito-client-core
ted
/
recogito-client-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Changed the way the ResizeObserver works on the editor popup

This commit is contained in:
Rainer Simon 2020-06-03 15:11:50 +02:00
parent c52dd4e959
commit b33819ed35
2 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/editor/Editor.jsx
View File

@ -50,13 +50,13 @@ const Editor = props => {
if (shouldApplyTemplate && props.applyImmediately)
props.onAnnotationCreated(annotation.toAnnotation());
if (element.current)
if (element.current) {
setPosition(props.wrapperEl, element.current, props.selectedElement);
return initResizeObserver();
}
}, [ props.selectedElement, bounds(props.selectedElement) ]);
// Attach resize listener on mount
useEffect(() => {
// Older iOS Safaris don't support ResizeObserver
const initResizeObserver = () => {
if (window.ResizeObserver) {
const resizeObserver = new ResizeObserver(() => {
setPosition(props.wrapperEl, element.current, props.selectedElement);
@ -65,7 +65,7 @@ const Editor = props => {
resizeObserver.observe(props.wrapperEl);
return () => resizeObserver.disconnect();
}
}, []);
}
// Creator and created/modified timestamp metadata
const creationMeta = body => {

9
src/editor/setPosition.js
View File

@ -23,10 +23,13 @@ const setPosition = (wrapperEl, editorEl, selectedEl) => {
editorEl.style.left = `${right - defaultOrientation.width + scrollX - containerBounds.left}px`;
}
if (defaultOrientation.bottom > window.innerHeight - scrollY) {
console.log(defaultOrientation.bottom, window.innerHeight)
if (defaultOrientation.bottom + scrollY > window.innerHeight) {
// Flip vertically
const annotationTop = top + scrollY; // Annotation top relative to parents
const containerHeight = containerBounds.height + containerBounds.top + scrollY;
console.log('flipping');
const annotationTop = top + scrollY; // Annotation bottom relative to parents
const containerHeight = containerBounds.bottom + scrollY;
editorEl.classList.add('align-bottom');
editorEl.style.top = 'auto';