alex/yomichan
1
Fork 0
Code Releases Activity

Create container for imposter element

Browse Source 
The container will prevent the imposter element's size from affecting the document's primary scrollbars.
This commit is contained in:
toasted-nutbread 2019-09-01 16:06:22 -04:00
parent e3e7dad2cc
commit e3d7ec8db7
2 changed files with 39 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -21,27 +21,32 @@ function docSetImposterStyle(style, propertyName, value) {
style.setProperty(propertyName, value, 'important'); 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;
const clientTop = document.documentElement.clientTop || document.body.clientTop || 0;
const clientLeft = document.documentElement.clientLeft || document.body.clientLeft || 0;
const top = elementRect.top + scrollTop - clientTop;
const left = elementRect.left + scrollLeft - clientLeft;
return {top, left};
}
function docImposterCreate(element, isTextarea) { function docImposterCreate(element, isTextarea) {
const elementStyle = window.getComputedStyle(element); const elementStyle = window.getComputedStyle(element);
const elementRect = element.getBoundingClientRect(); const elementRect = element.getBoundingClientRect();
const offset = docOffsetCalc(elementRect); const documentRect = document.documentElement.getBoundingClientRect();
const left = elementRect.left - documentRect.left;
const top = elementRect.top - documentRect.top;
// Container
const container = document.createElement('div');
const containerStyle = container.style;
docSetImposterStyle(containerStyle, 'all', 'initial');
docSetImposterStyle(containerStyle, 'position', 'absolute');
docSetImposterStyle(containerStyle, 'left', '0');
docSetImposterStyle(containerStyle, 'top', '0');
docSetImposterStyle(containerStyle, 'width', `${documentRect.width}px`);
docSetImposterStyle(containerStyle, 'height', `${documentRect.height}px`);
docSetImposterStyle(containerStyle, 'overflow', 'hidden');
docSetImposterStyle(containerStyle, 'opacity', '0');
docSetImposterStyle(containerStyle, 'pointer-events', 'none');
docSetImposterStyle(containerStyle, 'z-index', '2147483646');
// Imposter
const imposter = document.createElement('div'); const imposter = document.createElement('div');
const imposterStyle = imposter.style; const imposterStyle = imposter.style;
imposter.className = 'yomichan-imposter';
imposter.innerText = element.value; imposter.innerText = element.value;
for (let i = 0, ii = elementStyle.length; i < ii; ++i) { for (let i = 0, ii = elementStyle.length; i < ii; ++i) {
@ -49,11 +54,10 @@ function docImposterCreate(element, isTextarea) {
docSetImposterStyle(imposterStyle, property, elementStyle.getPropertyValue(property)); docSetImposterStyle(imposterStyle, property, elementStyle.getPropertyValue(property));
} }
docSetImposterStyle(imposterStyle, 'position', 'absolute'); docSetImposterStyle(imposterStyle, 'position', 'absolute');
docSetImposterStyle(imposterStyle, 'top', `${offset.top}px`); docSetImposterStyle(imposterStyle, 'top', `${top}px`);
docSetImposterStyle(imposterStyle, 'left', `${offset.left}px`); docSetImposterStyle(imposterStyle, 'left', `${left}px`);
docSetImposterStyle(imposterStyle, 'opacity', '0');
docSetImposterStyle(imposterStyle, 'z-index', '2147483646');
docSetImposterStyle(imposterStyle, 'margin', '0'); docSetImposterStyle(imposterStyle, 'margin', '0');
docSetImposterStyle(imposterStyle, 'pointer-events', 'auto');
if (isTextarea) { if (isTextarea) {
if (elementStyle.overflow === 'visible') { if (elementStyle.overflow === 'visible') {
@ -65,7 +69,8 @@ function docImposterCreate(element, isTextarea) {
docSetImposterStyle(imposterStyle, 'line-height', elementStyle.height); docSetImposterStyle(imposterStyle, 'line-height', elementStyle.height);
} }
document.body.appendChild(imposter); container.appendChild(imposter);
document.body.appendChild(container);
// Adjust size // Adjust size
const imposterRect = imposter.getBoundingClientRect(); const imposterRect = imposter.getBoundingClientRect();
@ -79,22 +84,23 @@ function docImposterCreate(element, isTextarea) {
imposter.scrollTop = element.scrollTop; imposter.scrollTop = element.scrollTop;
imposter.scrollLeft = element.scrollLeft; imposter.scrollLeft = element.scrollLeft;
return imposter; return [imposter, container];
} }
function docRangeFromPoint(point) { function docRangeFromPoint(point) {
const element = document.elementFromPoint(point.x, point.y); const element = document.elementFromPoint(point.x, point.y);
let imposter = null; let imposter = null;
let imposterContainer = null;
if (element) { if (element) {
switch (element.nodeName) { switch (element.nodeName) {
case 'IMG': case 'IMG':
case 'BUTTON': case 'BUTTON':
return new TextSourceElement(element); return new TextSourceElement(element);
case 'INPUT': case 'INPUT':
imposter = docImposterCreate(element, false); [imposter, imposterContainer] = docImposterCreate(element, false);
break; break;
case 'TEXTAREA': case 'TEXTAREA':
imposter = docImposterCreate(element, true); [imposter, imposterContainer] = docImposterCreate(element, true);
break; break;
} }
} }
@ -102,14 +108,13 @@ 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) {
const imposterStyle = imposter.style; docSetImposterStyle(imposterContainer.style, 'z-index', '-2147483646');
docSetImposterStyle(imposterStyle, 'z-index', '-2147483646'); docSetImposterStyle(imposter.style, 'pointer-events', 'none');
docSetImposterStyle(imposterStyle, 'pointer-events', 'none');
} }
return new TextSourceRange(range, '', imposter); return new TextSourceRange(range, '', imposterContainer);
} else { } else {
if (imposter !== null) { if (imposterContainer !== null) {
imposter.parentNode.removeChild(imposter); imposterContainer.parentNode.removeChild(imposterContainer);
} }
return null; return null;
} }

10
ext/fg/js/source.js
View File

@ -25,19 +25,19 @@ const IGNORE_TEXT_PATTERN = /\u200c/;
*/ */
class TextSourceRange { class TextSourceRange {
constructor(range, content, imposter) { constructor(range, content, imposterContainer) {
this.range = range; this.range = range;
this.content = content; this.content = content;
this.imposter = imposter; this.imposterContainer = imposterContainer;
} }
clone() { clone() {
return new TextSourceRange(this.range.cloneRange(), this.content, this.imposter); return new TextSourceRange(this.range.cloneRange(), this.content, this.imposterContainer);
} }
cleanup() { cleanup() {
if (this.imposter !== null && this.imposter.parentNode !== null) { if (this.imposterContainer !== null && this.imposterContainer.parentNode !== null) {
this.imposter.parentNode.removeChild(this.imposter); this.imposterContainer.parentNode.removeChild(this.imposterContainer);
} }
} }