alex/yomichan
1
Fork 0
Code Releases Activity

Merge pull request #197 from toasted-nutbread/imposter-improvements

Browse Source 
Imposter element improvements
This commit is contained in:
Alex Yatskov 2019-09-02 08:30:19 -07:00 committed by GitHub
commit 037363e3a7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 103 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,75 +17,107 @@
*/
function docOffsetCalc(element) {
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);
return {top, left};
function docSetImposterStyle(style, propertyName, value) {
style.setProperty(propertyName, value, 'important');
}
function docImposterCreate(element) {
const styleProps = window.getComputedStyle(element);
const stylePairs = [];
for (const key of styleProps) {
stylePairs.push(`${key}: ${styleProps[key]};`);
}
function docImposterCreate(element, isTextarea) {
const elementStyle = window.getComputedStyle(element);
const elementRect = element.getBoundingClientRect();
const documentRect = document.documentElement.getBoundingClientRect();
const left = elementRect.left - documentRect.left;
const top = elementRect.top - documentRect.top;
const offset = docOffsetCalc(element);
// 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');
imposter.className = 'yomichan-imposter';
const imposterStyle = imposter.style;
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;
if (element.nodeName === 'TEXTAREA' && styleProps.overflow === 'visible') {
imposter.style.overflow = 'auto';
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', `${top}px`);
docSetImposterStyle(imposterStyle, 'left', `${left}px`);
docSetImposterStyle(imposterStyle, 'margin', '0');
docSetImposterStyle(imposterStyle, 'pointer-events', 'auto');
if (isTextarea) {
if (elementStyle.overflow === 'visible') {
docSetImposterStyle(imposterStyle, 'overflow', 'auto');
}
} else {
docSetImposterStyle(imposterStyle, 'overflow', 'hidden');
docSetImposterStyle(imposterStyle, 'white-space', 'nowrap');
docSetImposterStyle(imposterStyle, 'line-height', elementStyle.height);
}
container.appendChild(imposter);
document.body.appendChild(container);
// Adjust size
const imposterRect = imposter.getBoundingClientRect();
if (imposterRect.width !== elementRect.width || imposterRect.height !== elementRect.height) {
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`);
}
document.body.appendChild(imposter);
imposter.scrollTop = element.scrollTop;
imposter.scrollLeft = element.scrollLeft;
return imposter;
}
function docImposterDestroy() {
for (const element of document.getElementsByClassName('yomichan-imposter')) {
element.parentNode.removeChild(element);
}
return [imposter, container];
}
function docRangeFromPoint(point) {
const element = document.elementFromPoint(point.x, point.y);
let imposter = null;
let imposterContainer = null;
if (element) {
switch (element.nodeName) {
case 'IMG':
case 'BUTTON':
return new TextSourceElement(element);
case 'INPUT':
[imposter, imposterContainer] = docImposterCreate(element, false);
break;
case 'TEXTAREA':
imposter = docImposterCreate(element);
[imposter, imposterContainer] = docImposterCreate(element, true);
break;
}
}
const range = document.caretRangeFromPoint(point.x, point.y);
if (range !== null && isPointInRange(point, range)) {
if (imposter !== null) {
imposter.style.zIndex = -2147483646;
docSetImposterStyle(imposterContainer.style, 'z-index', '-2147483646');
docSetImposterStyle(imposter.style, 'pointer-events', 'none');
}
return new TextSourceRange(range, '', imposterContainer);
} else {
if (imposterContainer !== null) {
imposterContainer.parentNode.removeChild(imposterContainer);
}
return null;
}
return range !== null && isPointInRange(point, range) ? new TextSourceRange(range) : null;
}
function docSentenceExtract(source, extent) {

6
ext/fg/js/frontend.js
View File

@ -307,10 +307,11 @@ class Frontend {
this.onError(e);
}
} finally {
if (textSource !== null) {
textSource.cleanup();
}
if (hideResults && this.options.scanning.autoHideResults) {
this.searchClear();
} else {
docImposterDestroy();
}
this.pendingLookup = false;
@ -371,7 +372,6 @@ class Frontend {
}
searchClear() {
docImposterDestroy();
this.popup.hide();
this.popup.clearAutoPlayTimer();

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

@ -25,13 +25,20 @@ const IGNORE_TEXT_PATTERN = /\u200c/;
*/
class TextSourceRange {
constructor(range, content='') {
constructor(range, content, imposterContainer) {
this.range = range;
this.content = content;
this.imposterContainer = imposterContainer;
}
clone() {
return new TextSourceRange(this.range.cloneRange(), this.content);
return new TextSourceRange(this.range.cloneRange(), this.content, this.imposterContainer);
}
cleanup() {
if (this.imposterContainer !== null && this.imposterContainer.parentNode !== null) {
this.imposterContainer.parentNode.removeChild(this.imposterContainer);
}
}
text() {
@ -221,6 +228,10 @@ class TextSourceElement {
return new TextSourceElement(this.element, this.content);
}
cleanup() {
// NOP
}
text() {
return this.content;
}

10
ext/mixed/js/display.js
View File

@ -84,16 +84,22 @@ class Display {
if (textSource === null) {
return false;
}
let definitions, length, sentence;
try {
textSource.setEndOffset(this.options.scanning.length);
const {definitions, length} = await apiTermsFind(textSource.text());
({definitions, length} = await apiTermsFind(textSource.text()));
if (definitions.length === 0) {
return false;
}
textSource.setEndOffset(length);
const sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt);
sentence = docSentenceExtract(textSource, this.options.anki.sentenceExt);
} finally {
textSource.cleanup();
}
const context = {
source: {