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

Editor position bugfix

This commit is contained in:
Rainer Simon 2020-04-17 13:08:08 +02:00
parent b5e640bd34
commit 3bf995d596
1 changed files with 4 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/editor/setPosition.js
View File

@ -1,7 +1,7 @@
/** Sets the editor position and determines a proper orientation **/ /** Sets the editor position and determines a proper orientation **/
const setPosition = (wrapperEl, editorEl, annotationBounds) => { const setPosition = (wrapperEl, editorEl, annotationBounds) => {
// Container element offset // Container element offset
const { offsetLeft, offsetTop } = wrapperEl; const containerBounds = wrapperEl.getBoundingClientRect();
const { scrollX, scrollY } = window; const { scrollX, scrollY } = window;
// Re-set orientation class // Re-set orientation class
@ -12,21 +12,20 @@ const setPosition = (wrapperEl, editorEl, annotationBounds) => {
// Default orientation // Default orientation
const { x, y, height, top, right } = annotationBounds; const { x, y, height, top, right } = annotationBounds;
editorEl.style.top = `${y + height + scrollY - offsetTop}px`; editorEl.style.top = `${y + height - containerBounds.top}px`;
editorEl.style.left = `${x + scrollX - offsetLeft}px`; editorEl.style.left = `${x + scrollX - containerBounds.left}px`;
const defaultOrientation = editorEl.getBoundingClientRect(); const defaultOrientation = editorEl.getBoundingClientRect();
if (defaultOrientation.right > window.innerWidth) { if (defaultOrientation.right > window.innerWidth) {
// Default bounds clipped - flip horizontally // Default bounds clipped - flip horizontally
editorEl.classList.add('align-right'); editorEl.classList.add('align-right');
editorEl.style.left = `${right - defaultOrientation.width + scrollX - offsetLeft}px`; editorEl.style.left = `${right - defaultOrientation.width + scrollX - containerBounds.left}px`;
} }
if (defaultOrientation.bottom > window.innerHeight - scrollY) { if (defaultOrientation.bottom > window.innerHeight - scrollY) {
// Flip vertically // Flip vertically
const annotationTop = top + scrollY; // Annotation top relative to parents const annotationTop = top + scrollY; // Annotation top relative to parents
const containerBounds = wrapperEl.getBoundingClientRect();
const containerHeight = containerBounds.height + containerBounds.top + scrollY; const containerHeight = containerBounds.height + containerBounds.top + scrollY;
editorEl.classList.add('align-bottom'); editorEl.classList.add('align-bottom');