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

Made editor arrow more aware of current position context

This commit is contained in:
Rainer Simon 2021-10-09 09:32:11 +02:00
parent 94b85197ae
commit aefce0c560
2 changed files with 24 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/editor/setPosition.js
View File

@ -4,7 +4,7 @@ const setPosition = (wrapperEl, editorEl, selectedEl, autoPosition) => {
const containerBounds = wrapperEl.getBoundingClientRect(); const containerBounds = wrapperEl.getBoundingClientRect();
// Re-set orientation class // Re-set orientation class
editorEl.className = 'r6o-editor'; editorEl.className = 'r6o-editor r6o-arrow-top r6o-arrow-left';
// Make visible // Make visible
editorEl.style.opacity = 1; editorEl.style.opacity = 1;
@ -20,14 +20,16 @@ const setPosition = (wrapperEl, editorEl, selectedEl, autoPosition) => {
// Test 1: does right edge extend beyond the width of the page? // Test 1: does right edge extend beyond the width of the page?
// If so, flip horizontally // If so, flip horizontally
if (defaultOrientation.right > window.innerWidth) { if (defaultOrientation.right > window.innerWidth) {
editorEl.classList.add('align-right'); editorEl.classList.remove('r6o-arrow-left');
editorEl.classList.add('r6o-arrow-right');
editorEl.style.left = `${right - defaultOrientation.width - containerBounds.left}px`; editorEl.style.left = `${right - defaultOrientation.width - containerBounds.left}px`;
} }
// Test 2: does the bottom edge extend beyond the height of the page? // Test 2: does the bottom edge extend beyond the height of the page?
// If so, flip vertically // If so, flip vertically
if (defaultOrientation.bottom > window.innerHeight) { if (defaultOrientation.bottom > window.innerHeight) {
editorEl.classList.add('align-bottom'); editorEl.classList.remove('r6o-arrow-top');
editorEl.classList.add('r6o-arrow-bottom');
const editorHeight = editorEl.children[1].getBoundingClientRect().height; const editorHeight = editorEl.children[1].getBoundingClientRect().height;
editorEl.style.top = `${top - containerBounds.top - editorHeight}px`; editorEl.style.top = `${top - containerBounds.top - editorHeight}px`;
@ -39,21 +41,23 @@ const setPosition = (wrapperEl, editorEl, selectedEl, autoPosition) => {
// 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 it down // If so, push it down
if (currentOrientation.top < 0) { if (currentOrientation.top < 0) {
editorEl.classList.add('pushed-down'); editorEl.classList.add('pushed', 'down');
editorEl.style.top = `${-containerBounds.top}px`; editorEl.style.top = `${-containerBounds.top}px`;
const shapeBottom = bottom - containerBounds.top; const shapeBottom = bottom - containerBounds.top;
const editorBottom = currentOrientation.height - containerBounds.top; const editorBottom = currentOrientation.height - containerBounds.top;
if (editorBottom > shapeBottom) if (editorBottom > shapeBottom)
editorEl.classList.remove('align-bottom'); editorEl.classList.remove('r6o-arrow-bottom');
} }
// 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.classList.add('pushed', 'right');
editorEl.style.left = `${-containerBounds.left}px`; editorEl.style.left = `${-containerBounds.left}px`;
}
} }
} }

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

@ -26,6 +26,7 @@
left:12px; left:12px;
width:28px; width:28px;
height:12px; height:12px;
display:none;
} }
.r6o-arrow:after { .r6o-arrow:after {
@ -91,7 +92,11 @@
} }
.r6o-editor.align-right { .r6o-editor.r6o-arrow-top .r6o-arrow {
display:block;
}
.r6o-editor.r6o-arrow-right {
margin-left:8px; margin-left:8px;
.r6o-arrow { .r6o-arrow {
@ -101,10 +106,11 @@
} }
.r6o-editor.align-bottom { .r6o-editor.r6o-arrow-bottom {
margin-top:-14px; margin-top:-14px;
.r6o-arrow { .r6o-arrow {
display:block;
top:auto; top:auto;
bottom:-12px; bottom:-12px;
} }
@ -116,14 +122,15 @@
} }
.r6o-editor.align-bottom.pushed-down { .r6o-editor.pushed .r6o-arrow,
margin-top:4px;
}
.r6o-editor.dragged .r6o-arrow { .r6o-editor.dragged .r6o-arrow {
display:none; display:none;
} }
.r6o-editor.r6o-arrow-bottom.pushed.down {
margin-top:4px;
}
.r6o-purposedropdown { .r6o-purposedropdown {
width: 150px; width: 150px;
display: inline-block; display: inline-block;