More IE11 compatibility fixes

This commit is contained in:
Rainer Simon 2020-08-27 20:31:29 +02:00
parent 8d66a79444
commit d1cf472938
1 changed files with 6 additions and 6 deletions

View File

@ -1,8 +1,8 @@
/** 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 { pageXOffset, pageYOffset } = window;
// Re-set orientation class // Re-set orientation class
editorEl.className = 'r6o-editor'; editorEl.className = 'r6o-editor';
@ -13,20 +13,20 @@ const setPosition = (wrapperEl, editorEl, selectedEl) => {
// Default orientation // Default orientation
const { left, top, right, height } = selectedEl.getBoundingClientRect(); const { left, top, right, height } = selectedEl.getBoundingClientRect();
editorEl.style.top = `${top + height - containerBounds.top}px`; editorEl.style.top = `${top + height - containerBounds.top}px`;
editorEl.style.left = `${left + scrollX - containerBounds.left}px`; editorEl.style.left = `${left + pageXOffset - 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 - containerBounds.left}px`; editorEl.style.left = `${right - defaultOrientation.width + pageXOffset - containerBounds.left}px`;
} }
if (defaultOrientation.bottom > window.innerHeight) { if (defaultOrientation.bottom > window.innerHeight) {
// Flip vertically // Flip vertically
const annotationTop = top + scrollY; // Annotation bottom relative to parents const annotationTop = top + pageYOffset; // Annotation bottom relative to parents
const containerHeight = containerBounds.bottom + scrollY; const containerHeight = containerBounds.bottom + pageYOffset;
editorEl.classList.add('align-bottom'); editorEl.classList.add('align-bottom');
editorEl.style.top = 'auto'; editorEl.style.top = 'auto';