alex/yomichan
1
Fork 0
Code Releases Activity

Use important CSS priority for imposter element styles

Browse Source
This commit is contained in:
toasted-nutbread 2019-08-31 15:30:32 -04:00
parent 9b46fe70de
commit e3e7dad2cc
1 changed files with 31 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,6 +17,10 @@
*/ */
function docSetImposterStyle(style, propertyName, value) {
style.setProperty(propertyName, value, 'important');
}
function docOffsetCalc(elementRect) { 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;
@ -31,32 +35,34 @@ function docOffsetCalc(elementRect) {
} }
function docImposterCreate(element, isTextarea) { function docImposterCreate(element, isTextarea) {
const styleProps = window.getComputedStyle(element); const elementStyle = window.getComputedStyle(element);
const stylePairs = [];
for (const key of styleProps) {
stylePairs.push(`${key}: ${styleProps[key]};`);
}
const elementRect = element.getBoundingClientRect(); const elementRect = element.getBoundingClientRect();
const offset = docOffsetCalc(elementRect); const offset = docOffsetCalc(elementRect);
const imposter = document.createElement('div'); const imposter = document.createElement('div');
const imposterStyle = imposter.style;
imposter.className = 'yomichan-imposter'; imposter.className = 'yomichan-imposter';
imposter.innerText = element.value; imposter.innerText = element.value;
imposter.style.cssText = stylePairs.join('\n');
imposter.style.position = 'absolute'; for (let i = 0, ii = elementStyle.length; i < ii; ++i) {
imposter.style.top = `${offset.top}px`; const property = elementStyle[i];
imposter.style.left = `${offset.left}px`; docSetImposterStyle(imposterStyle, property, elementStyle.getPropertyValue(property));
imposter.style.opacity = 0; }
imposter.style.zIndex = 2147483646; docSetImposterStyle(imposterStyle, 'position', 'absolute');
imposter.style.margin = '0'; 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 (isTextarea) {
if (styleProps.overflow === 'visible') { if (elementStyle.overflow === 'visible') {
imposter.style.overflow = 'auto'; docSetImposterStyle(imposterStyle, 'overflow', 'auto');
} }
} else { } else {
imposter.style.overflow = 'hidden'; docSetImposterStyle(imposterStyle, 'overflow', 'hidden');
imposter.style.whiteSpace = 'nowrap'; docSetImposterStyle(imposterStyle, 'white-space', 'nowrap');
imposter.style.lineHeight = styleProps.height; docSetImposterStyle(imposterStyle, 'line-height', elementStyle.height);
} }
document.body.appendChild(imposter); document.body.appendChild(imposter);
@ -64,10 +70,10 @@ function docImposterCreate(element, isTextarea) {
// Adjust size // Adjust size
const imposterRect = imposter.getBoundingClientRect(); const imposterRect = imposter.getBoundingClientRect();
if (imposterRect.width !== elementRect.width || imposterRect.height !== elementRect.height) { if (imposterRect.width !== elementRect.width || imposterRect.height !== elementRect.height) {
const width = parseFloat(styleProps.width) + (elementRect.width - imposterRect.width); const width = parseFloat(elementStyle.width) + (elementRect.width - imposterRect.width);
const height = parseFloat(styleProps.height) + (elementRect.height - imposterRect.height); const height = parseFloat(elementStyle.height) + (elementRect.height - imposterRect.height);
imposter.style.width = `${width}px`; docSetImposterStyle(imposterStyle, 'width', `${width}px`);
imposter.style.height = `${height}px`; docSetImposterStyle(imposterStyle, 'height', `${height}px`);
} }
imposter.scrollTop = element.scrollTop; imposter.scrollTop = element.scrollTop;
@ -96,8 +102,9 @@ function docRangeFromPoint(point) {
const range = document.caretRangeFromPoint(point.x, point.y); const range = document.caretRangeFromPoint(point.x, point.y);
if (range !== null && isPointInRange(point, range)) { if (range !== null && isPointInRange(point, range)) {
if (imposter !== null) { if (imposter !== null) {
imposter.style.zIndex = -2147483646; const imposterStyle = imposter.style;
imposter.style.pointerEvents = 'none'; docSetImposterStyle(imposterStyle, 'z-index', '-2147483646');
docSetImposterStyle(imposterStyle, 'pointer-events', 'none');
} }
return new TextSourceRange(range, '', imposter); return new TextSourceRange(range, '', imposter);
} else { } else {