aboutsummaryrefslogtreecommitdiff
path: root/ext/fg/js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-08-31 13:58:45 -0400
committertoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-08-31 14:57:49 -0400
commit9e9040178d1c498f4c7298a241137d2e7af59114 (patch)
tree2b601fc5c64b3f5d4e4b1b17e9e36e38896279ca /ext/fg/js
parent3bf8a9ab00153acc662de1370d43a34c49850ac3 (diff)
Fix some size and positioning issues related to imposter element
Diffstat (limited to 'ext/fg/js')
-rw-r--r--ext/fg/js/document.js21
1 files changed, 16 insertions, 5 deletions
diff --git a/ext/fg/js/document.js b/ext/fg/js/document.js
index 8a412f96..962592ec 100644
--- a/ext/fg/js/document.js
+++ b/ext/fg/js/document.js
@@ -17,16 +17,15 @@
*/
-function docOffsetCalc(element) {
+function docOffsetCalc(elementRect) {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
const clientTop = document.documentElement.clientTop || document.body.clientTop || 0;
const clientLeft = document.documentElement.clientLeft || document.body.clientLeft || 0;
- const rect = element.getBoundingClientRect();
- const top = Math.round(rect.top + scrollTop - clientTop);
- const left = Math.round(rect.left + scrollLeft - clientLeft);
+ const top = Math.round(elementRect.top + scrollTop - clientTop);
+ const left = Math.round(elementRect.left + scrollLeft - clientLeft);
return {top, left};
}
@@ -38,7 +37,8 @@ function docImposterCreate(element) {
stylePairs.push(`${key}: ${styleProps[key]};`);
}
- const offset = docOffsetCalc(element);
+ const elementRect = element.getBoundingClientRect();
+ const offset = docOffsetCalc(elementRect);
const imposter = document.createElement('div');
imposter.className = 'yomichan-imposter';
imposter.innerText = element.value;
@@ -48,11 +48,22 @@ function docImposterCreate(element) {
imposter.style.left = `${offset.left}px`;
imposter.style.opacity = 0;
imposter.style.zIndex = 2147483646;
+ imposter.style.margin = '0';
if (element.nodeName === 'TEXTAREA' && styleProps.overflow === 'visible') {
imposter.style.overflow = 'auto';
}
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.scrollLeft = element.scrollLeft;