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

12
src/editor/Editor.jsx
View File

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

11
src/editor/setPosition.js
View File

@ -1,6 +1,6 @@
/** Sets the editor position and determines a proper orientation **/ /** Sets the editor position and determines a proper orientation **/
const setPosition = (wrapperEl, editorEl, selectedEl) => { const setPosition = (wrapperEl, editorEl, selectedEl) => {
// Container element offset // Container element offset
const containerBounds = wrapperEl.getBoundingClientRect(); const containerBounds = wrapperEl.getBoundingClientRect();
const { scrollX, scrollY } = window; const { scrollX, scrollY } = window;
@ -23,10 +23,13 @@ const setPosition = (wrapperEl, editorEl, selectedEl) => {
editorEl.style.left = `${right - defaultOrientation.width + scrollX - containerBounds.left}px`; 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 // Flip vertically
const annotationTop = top + scrollY; // Annotation top relative to parents console.log('flipping');
const containerHeight = containerBounds.height + containerBounds.top + scrollY; const annotationTop = top + scrollY; // Annotation bottom relative to parents
const containerHeight = containerBounds.bottom + scrollY;
editorEl.classList.add('align-bottom'); editorEl.classList.add('align-bottom');
editorEl.style.top = 'auto'; editorEl.style.top = 'auto';