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();
// Re-set orientation class
editorEl.className = 'r6o-editor';
editorEl.className = 'r6o-editor r6o-arrow-top r6o-arrow-left';
// Make visible
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?
// If so, flip horizontally
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`;
}
// Test 2: does the bottom edge extend beyond the height of the page?
// If so, flip vertically
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;
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?
// If so, push it down
if (currentOrientation.top < 0) {
editorEl.classList.add('pushed-down');
editorEl.classList.add('pushed', 'down');
editorEl.style.top = `${-containerBounds.top}px`;
const shapeBottom = bottom - containerBounds.top;
const editorBottom = currentOrientation.height - containerBounds.top;
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?
// If so, push inward
if (currentOrientation.left < 0)
if (currentOrientation.left < 0) {
editorEl.classList.add('pushed', 'right');
editorEl.style.left = `${-containerBounds.left}px`;
}
}
}

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

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