aboutsummaryrefslogtreecommitdiff
path: root/ext/fg/js
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-08-31 15:30:32 -0400
committertoasted-nutbread <toasted-nutbread@users.noreply.github.com>2019-08-31 15:30:32 -0400
commite3e7dad2cc896a84c5c332f4c95a8984386be844 (patch)
treea7d39382b8e60f73fb67ad88014971fc24f31946 /ext/fg/js
parent9b46fe70de9d0e7b625649fcdde53f5b91bbb114 (diff)
Use important CSS priority for imposter element styles
Diffstat (limited to 'ext/fg/js')
-rw-r--r--ext/fg/js/document.js55
1 files changed, 31 insertions, 24 deletions
diff --git a/ext/fg/js/document.js b/ext/fg/js/document.js
index 1a49521b..247ff0ee 100644
--- a/ext/fg/js/document.js
+++ b/ext/fg/js/document.js
@@ -17,6 +17,10 @@
*/
+function docSetImposterStyle(style, propertyName, value) {
+ style.setProperty(propertyName, value, 'important');
+}
+
function docOffsetCalc(elementRect) {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
@@ -31,32 +35,34 @@ function docOffsetCalc(elementRect) {
}
function docImposterCreate(element, isTextarea) {
- const styleProps = window.getComputedStyle(element);
- const stylePairs = [];
- for (const key of styleProps) {
- stylePairs.push(`${key}: ${styleProps[key]};`);
- }
-
+ const elementStyle = window.getComputedStyle(element);
const elementRect = element.getBoundingClientRect();
const offset = docOffsetCalc(elementRect);
const imposter = document.createElement('div');
+ const imposterStyle = imposter.style;
+
imposter.className = 'yomichan-imposter';
imposter.innerText = element.value;
- imposter.style.cssText = stylePairs.join('\n');
- imposter.style.position = 'absolute';
- imposter.style.top = `${offset.top}px`;
- imposter.style.left = `${offset.left}px`;
- imposter.style.opacity = 0;
- imposter.style.zIndex = 2147483646;
- imposter.style.margin = '0';
+
+ for (let i = 0, ii = elementStyle.length; i < ii; ++i) {
+ const property = elementStyle[i];
+ docSetImposterStyle(imposterStyle, property, elementStyle.getPropertyValue(property));
+ }
+ docSetImposterStyle(imposterStyle, 'position', 'absolute');
+ docSetImposterStyle(imposterStyle, 'top', `${offset.top}px`);
+ docSetImposterStyle(imposterStyle, 'left', `${offset.left}px`);
+ docSetImposterStyle(imposterStyle, 'opacity', '0');
+ docSetImposterStyle(imposterStyle, 'z-index', '2147483646');
+ docSetImposterStyle(imposterStyle, 'margin', '0');
+
if (isTextarea) {
- if (styleProps.overflow === 'visible') {
- imposter.style.overflow = 'auto';
+ if (elementStyle.overflow === 'visible') {
+ docSetImposterStyle(imposterStyle, 'overflow', 'auto');
}
} else {
- imposter.style.overflow = 'hidden';
- imposter.style.whiteSpace = 'nowrap';
- imposter.style.lineHeight = styleProps.height;
+ docSetImposterStyle(imposterStyle, 'overflow', 'hidden');
+ docSetImposterStyle(imposterStyle, 'white-space', 'nowrap');
+ docSetImposterStyle(imposterStyle, 'line-height', elementStyle.height);
}
document.body.appendChild(imposter);
@@ -64,10 +70,10 @@ function docImposterCreate(element, isTextarea) {
// 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`;
+ const width = parseFloat(elementStyle.width) + (elementRect.width - imposterRect.width);
+ const height = parseFloat(elementStyle.height) + (elementRect.height - imposterRect.height);
+ docSetImposterStyle(imposterStyle, 'width', `${width}px`);
+ docSetImposterStyle(imposterStyle, 'height', `${height}px`);
}
imposter.scrollTop = element.scrollTop;
@@ -96,8 +102,9 @@ function docRangeFromPoint(point) {
const range = document.caretRangeFromPoint(point.x, point.y);
if (range !== null && isPointInRange(point, range)) {
if (imposter !== null) {
- imposter.style.zIndex = -2147483646;
- imposter.style.pointerEvents = 'none';
+ const imposterStyle = imposter.style;
+ docSetImposterStyle(imposterStyle, 'z-index', '-2147483646');
+ docSetImposterStyle(imposterStyle, 'pointer-events', 'none');
}
return new TextSourceRange(range, '', imposter);
} else {