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

Change setPosition to use only top property

This commit is contained in:
Rainer Simon 2021-07-11 08:54:36 +02:00
parent 724fc68e00
commit 87f9c3c66f
2 changed files with 10 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/editor/setPosition.js
View File

@ -2,7 +2,6 @@
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 { pageYOffset } = window;
// Re-set orientation class // Re-set orientation class
editorEl.className = 'r6o-editor'; editorEl.className = 'r6o-editor';
@ -28,12 +27,10 @@ const setPosition = (wrapperEl, editorEl, selectedEl) => {
// If so, flip vertically // If so, flip vertically
if (defaultOrientation.bottom > window.innerHeight) { if (defaultOrientation.bottom > window.innerHeight) {
// Flip vertically // Flip vertically
const annotationTop = top + pageYOffset; // Annotation bottom relative to parents const editorHeight = editorEl.children[1].getBoundingClientRect().height;
const containerHeight = containerBounds.bottom + pageYOffset;
editorEl.classList.add('align-bottom'); editorEl.classList.add('align-bottom');
editorEl.style.top = 'auto'; editorEl.style.top = `${top - containerBounds.top - editorHeight}px`;
editorEl.style.bottom = `${containerHeight - annotationTop}px`;
} }
// Get bounding box in current orientation // Get bounding box in current orientation
@ -42,8 +39,9 @@ const setPosition = (wrapperEl, editorEl, selectedEl) => {
// Test 3: does the top (still?) extend beyond top of the page? // Test 3: does the top (still?) extend beyond top of the page?
// If so, push down // If so, push down
if (currentOrientation.top < 0) { if (currentOrientation.top < 0) {
editorEl.classList.add('pushed-down');
editorEl.style.top = `${-containerBounds.top}px`; editorEl.style.top = `${-containerBounds.top}px`;
editorEl.style.bottom = 'auto';
const shapeBottom = bottom - containerBounds.top; const shapeBottom = bottom - containerBounds.top;
const editorBottom = currentOrientation.height - containerBounds.top; const editorBottom = currentOrientation.height - containerBounds.top;
@ -54,9 +52,8 @@ const setPosition = (wrapperEl, editorEl, selectedEl) => {
// Test 4: does the left edge extend beyond the start of the page? // Test 4: does the left edge extend beyond the start of the page?
// If so, push inward // If so, push inward
if (currentOrientation.left < 0) { if (currentOrientation.left < 0)
editorEl.style.left = `${-containerBounds.left}px`; editorEl.style.left = `${-containerBounds.left}px`;
}
} }

6
themes/default/editor/_editor.scss
View File

@ -102,7 +102,7 @@
} }
.r6o-editor.align-bottom { .r6o-editor.align-bottom {
margin-bottom:14px; margin-top:-14px;
.r6o-arrow { .r6o-arrow {
top:auto; top:auto;
@ -116,6 +116,10 @@
} }
.r6o-editor.align-bottom.pushed-down {
margin-top:4px;
}
.r6o-editor.dragged .r6o-arrow { .r6o-editor.dragged .r6o-arrow {
display:none; display:none;
} }