alex/yomichan
1
Fork 0
Code Releases Activity

Fix some size and positioning issues related to imposter element

Browse Source
This commit is contained in:
toasted-nutbread 2019-08-31 13:58:45 -04:00
parent 3bf8a9ab00
commit 9e9040178d
1 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
ext/fg/js/document.js
View File

@ -17,16 +17,15 @@
*/ */
function docOffsetCalc(element) { function docOffsetCalc(elementRect) {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft; const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
const clientTop = document.documentElement.clientTop || document.body.clientTop || 0; const clientTop = document.documentElement.clientTop || document.body.clientTop || 0;
const clientLeft = document.documentElement.clientLeft || document.body.clientLeft || 0; const clientLeft = document.documentElement.clientLeft || document.body.clientLeft || 0;
const rect = element.getBoundingClientRect(); const top = Math.round(elementRect.top + scrollTop - clientTop);
const top = Math.round(rect.top + scrollTop - clientTop); const left = Math.round(elementRect.left + scrollLeft - clientLeft);
const left = Math.round(rect.left + scrollLeft - clientLeft);
return {top, left}; return {top, left};
} }
@ -38,7 +37,8 @@ function docImposterCreate(element) {
stylePairs.push(`${key}: ${styleProps[key]};`); stylePairs.push(`${key}: ${styleProps[key]};`);
} }
const offset = docOffsetCalc(element); const elementRect = element.getBoundingClientRect();
const offset = docOffsetCalc(elementRect);
const imposter = document.createElement('div'); const imposter = document.createElement('div');
imposter.className = 'yomichan-imposter'; imposter.className = 'yomichan-imposter';
imposter.innerText = element.value; imposter.innerText = element.value;
@ -48,11 +48,22 @@ function docImposterCreate(element) {
imposter.style.left = `${offset.left}px`; imposter.style.left = `${offset.left}px`;
imposter.style.opacity = 0; imposter.style.opacity = 0;
imposter.style.zIndex = 2147483646; imposter.style.zIndex = 2147483646;
imposter.style.margin = '0';
if (element.nodeName === 'TEXTAREA' && styleProps.overflow === 'visible') { if (element.nodeName === 'TEXTAREA' && styleProps.overflow === 'visible') {
imposter.style.overflow = 'auto'; imposter.style.overflow = 'auto';
} }
document.body.appendChild(imposter); document.body.appendChild(imposter);
// Adjust size
const imposterRect = imposter.getBoundingClientRect();
if (imposterRect.width !== elementRect.width || imposterRect.height !== elementRect.height) {
const width = parseFloat(styleProps.width) + (elementRect.width - imposterRect.width);
const height = parseFloat(styleProps.height) + (elementRect.height - imposterRect.height);
imposter.style.width = `${width}px`;
imposter.style.height = `${height}px`;
}
imposter.scrollTop = element.scrollTop; imposter.scrollTop = element.scrollTop;
imposter.scrollLeft = element.scrollLeft; imposter.scrollLeft = element.scrollLeft;