alex/yomichan
1
Fork 0
Code Releases Activity

Merge pull request #212 from toasted-nutbread/frontend-cleanup

Browse Source 
Frontend cleanup
This commit is contained in:
Alex Yatskov 2019-09-15 11:33:48 -07:00 committed by GitHub
commit e4fa658295
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 55 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -89,8 +89,18 @@ function docImposterCreate(element, isTextarea) {
return [imposter, container]; return [imposter, container];
} }
function docRangeFromPoint({x, y}, options) { function docElementsFromPoint(x, y, all) {
const elements = document.elementsFromPoint(x, y); if (all) {
return document.elementsFromPoint(x, y);
}
const e = document.elementFromPoint(x, y);
return e !== null ? [e] : [];
}
function docRangeFromPoint(x, y, options) {
const deepDomScan = options.scanning.deepDomScan;
const elements = docElementsFromPoint(x, y, deepDomScan);
let imposter = null; let imposter = null;
let imposterContainer = null; let imposterContainer = null;
if (elements.length > 0) { if (elements.length > 0) {
@ -108,7 +118,7 @@ function docRangeFromPoint({x, y}, options) {
} }
} }
const range = caretRangeFromPointExt(x, y, options.scanning.deepDomScan ? elements : []); const range = caretRangeFromPointExt(x, y, deepDomScan ? elements : []);
if (range !== null) { if (range !== null) {
if (imposter !== null) { if (imposter !== null) {
docSetImposterStyle(imposterContainer.style, 'z-index', '-2147483646'); docSetImposterStyle(imposterContainer.style, 'z-index', '-2147483646');

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

@ -21,8 +21,6 @@ class Frontend {
constructor(popup, ignoreNodes) { constructor(popup, ignoreNodes) {
this.popup = popup; this.popup = popup;
this.popupTimer = null; this.popupTimer = null;
this.mouseDownLeft = false;
this.mouseDownMiddle = false;
this.textSourceLast = null; this.textSourceLast = null;
this.pendingLookup = false; this.pendingLookup = false;
this.options = null; this.options = null;
@ -61,7 +59,6 @@ class Frontend {
window.addEventListener('mousemove', this.onMouseMove.bind(this)); window.addEventListener('mousemove', this.onMouseMove.bind(this));
window.addEventListener('mouseover', this.onMouseOver.bind(this)); window.addEventListener('mouseover', this.onMouseOver.bind(this));
window.addEventListener('mouseout', this.onMouseOut.bind(this)); window.addEventListener('mouseout', this.onMouseOut.bind(this));
window.addEventListener('mouseup', this.onMouseUp.bind(this));
window.addEventListener('resize', this.onResize.bind(this)); window.addEventListener('resize', this.onResize.bind(this));
if (this.options.scanning.touchInputEnabled) { if (this.options.scanning.touchInputEnabled) {
@ -80,7 +77,7 @@ class Frontend {
} }
onMouseOver(e) { onMouseOver(e) {
if (e.target === this.popup.container && this.popupTimer) { if (e.target === this.popup.container && this.popupTimer !== null) {
this.popupTimerClear(); this.popupTimerClear();
} }
} }
@ -88,38 +85,32 @@ class Frontend {
onMouseMove(e) { onMouseMove(e) {
this.popupTimerClear(); this.popupTimerClear();
if (!this.options.general.enable) { if (
this.pendingLookup ||
!this.options.general.enable ||
(e.buttons & 0x1) !== 0x0 // Left mouse button
) {
return; return;
} }
if (this.mouseDownLeft) { const scanningOptions = this.options.scanning;
return; const scanningModifier = scanningOptions.modifier;
} if (!(
Frontend.isScanningModifierPressed(scanningModifier, e) ||
if (this.pendingLookup) { (scanningOptions.middleMouse && (e.buttons & 0x4) !== 0x0) // Middle mouse button
return; )) {
}
const mouseScan = this.mouseDownMiddle && this.options.scanning.middleMouse;
const keyScan =
this.options.scanning.modifier === 'alt' && e.altKey ||
this.options.scanning.modifier === 'ctrl' && e.ctrlKey ||
this.options.scanning.modifier === 'shift' && e.shiftKey ||
this.options.scanning.modifier === 'none';
if (!keyScan && !mouseScan) {
return; return;
} }
const search = async () => { const search = async () => {
try { try {
await this.searchAt({x: e.clientX, y: e.clientY}, 'mouse'); await this.searchAt(e.clientX, e.clientY, 'mouse');
} catch (e) { } catch (e) {
this.onError(e); this.onError(e);
} }
}; };
if (this.options.scanning.modifier === 'none') { if (scanningModifier === 'none') {
this.popupTimerSet(search); this.popupTimerSet(search);
} else { } else {
search(); search();
@ -135,23 +126,8 @@ class Frontend {
return false; return false;
} }
this.mousePosLast = {x: e.clientX, y: e.clientY};
this.popupTimerClear(); this.popupTimerClear();
this.searchClear(); this.searchClear();
if (e.which === 1) {
this.mouseDownLeft = true;
} else if (e.which === 2) {
this.mouseDownMiddle = true;
}
}
onMouseUp(e) {
if (e.which === 1) {
this.mouseDownLeft = false;
} else if (e.which === 2) {
this.mouseDownMiddle = false;
}
} }
onMouseOut(e) { onMouseOut(e) {
@ -243,8 +219,8 @@ class Frontend {
} }
} }
onAfterSearch(newRange, type, searched, success) { onAfterSearch(newRange, cause, searched, success) {
if (type === 'mouse') { if (cause === 'mouse') {
return; return;
} }
@ -254,7 +230,7 @@ class Frontend {
return; return;
} }
if (type === 'touchStart' && newRange !== null) { if (cause === 'touchStart' && newRange !== null) {
this.scrollPrevent = true; this.scrollPrevent = true;
} }
@ -293,23 +269,22 @@ class Frontend {
} }
popupTimerSet(callback) { popupTimerSet(callback) {
this.popupTimerClear();
this.popupTimer = window.setTimeout(callback, this.options.scanning.delay); this.popupTimer = window.setTimeout(callback, this.options.scanning.delay);
} }
popupTimerClear() { popupTimerClear() {
if (this.popupTimer) { if (this.popupTimer !== null) {
window.clearTimeout(this.popupTimer); window.clearTimeout(this.popupTimer);
this.popupTimer = null; this.popupTimer = null;
} }
} }
async searchAt(point, type) { async searchAt(x, y, cause) {
if (this.pendingLookup || await this.popup.containsPoint(point)) { if (this.pendingLookup || await this.popup.containsPoint(x, y)) {
return; return;
} }
const textSource = docRangeFromPoint(point, this.options); const textSource = docRangeFromPoint(x, y, this.options);
let hideResults = textSource === null; let hideResults = textSource === null;
let searched = false; let searched = false;
let success = false; let success = false;
@ -318,7 +293,7 @@ class Frontend {
if (!hideResults && (!this.textSourceLast || !this.textSourceLast.equals(textSource))) { if (!hideResults && (!this.textSourceLast || !this.textSourceLast.equals(textSource))) {
searched = true; searched = true;
this.pendingLookup = true; this.pendingLookup = true;
const focus = (type === 'mouse'); const focus = (cause === 'mouse');
hideResults = !await this.searchTerms(textSource, focus) && !await this.searchKanji(textSource, focus); hideResults = !await this.searchTerms(textSource, focus) && !await this.searchKanji(textSource, focus);
success = true; success = true;
} }
@ -343,7 +318,7 @@ class Frontend {
} }
this.pendingLookup = false; this.pendingLookup = false;
this.onAfterSearch(this.textSourceLast, type, searched, success); this.onAfterSearch(this.textSourceLast, cause, searched, success);
} }
} }
@ -485,7 +460,7 @@ class Frontend {
this.clickPrevent = value; this.clickPrevent = value;
} }
searchFromTouch(x, y, type) { searchFromTouch(x, y, cause) {
this.popupTimerClear(); this.popupTimerClear();
if (!this.options.general.enable || this.pendingLookup) { if (!this.options.general.enable || this.pendingLookup) {
@ -494,7 +469,7 @@ class Frontend {
const search = async () => { const search = async () => {
try { try {
await this.searchAt({x, y}, type); await this.searchAt(x, y, cause);
} catch (e) { } catch (e) {
this.onError(e); this.onError(e);
} }
@ -531,6 +506,16 @@ class Frontend {
textSource.setEndOffset(length); textSource.setEndOffset(length);
} }
} }
static isScanningModifierPressed(scanningModifier, mouseEvent) {
switch (scanningModifier) {
case 'alt': return mouseEvent.altKey;
case 'ctrl': return mouseEvent.ctrlKey;
case 'shift': return mouseEvent.shiftKey;
case 'none': return true;
default: return false;
}
}
} }
window.yomichan_frontend = Frontend.create(); window.yomichan_frontend = Frontend.create();

6
ext/fg/js/popup-proxy-host.js
View File

@ -42,7 +42,7 @@ class PopupProxyHost {
showOrphaned: ({id, elementRect, options}) => this.show(id, elementRect, options), showOrphaned: ({id, elementRect, options}) => this.show(id, elementRect, options),
hide: ({id}) => this.hide(id), hide: ({id}) => this.hide(id),
setVisible: ({id, visible}) => this.setVisible(id, visible), setVisible: ({id, visible}) => this.setVisible(id, visible),
containsPoint: ({id, point}) => this.containsPoint(id, point), containsPoint: ({id, x, y}) => this.containsPoint(id, x, y),
termsShow: ({id, elementRect, writingMode, definitions, options, context}) => this.termsShow(id, elementRect, writingMode, definitions, options, context), termsShow: ({id, elementRect, writingMode, definitions, options, context}) => this.termsShow(id, elementRect, writingMode, definitions, options, context),
kanjiShow: ({id, elementRect, writingMode, definitions, options, context}) => this.kanjiShow(id, elementRect, writingMode, definitions, options, context), kanjiShow: ({id, elementRect, writingMode, definitions, options, context}) => this.kanjiShow(id, elementRect, writingMode, definitions, options, context),
clearAutoPlayTimer: ({id}) => this.clearAutoPlayTimer(id) clearAutoPlayTimer: ({id}) => this.clearAutoPlayTimer(id)
@ -108,9 +108,9 @@ class PopupProxyHost {
return popup.setVisible(visible); return popup.setVisible(visible);
} }
async containsPoint(id, point) { async containsPoint(id, x, y) {
const popup = this.getPopup(id); const popup = this.getPopup(id);
return await popup.containsPoint(point); return await popup.containsPoint(x, y);
} }
async termsShow(id, elementRect, writingMode, definitions, options, context) { async termsShow(id, elementRect, writingMode, definitions, options, context) {

4
ext/fg/js/popup-proxy.js
View File

@ -69,11 +69,11 @@ class PopupProxy {
return await this.invokeHostApi('setVisible', {id, visible}); return await this.invokeHostApi('setVisible', {id, visible});
} }
async containsPoint(point) { async containsPoint(x, y) {
if (this.id === null) { if (this.id === null) {
return false; return false;
} }
return await this.invokeHostApi('containsPoint', {id: this.id, point}); return await this.invokeHostApi('containsPoint', {id: this.id, x, y});
} }
async termsShow(elementRect, writingMode, definitions, options, context) { async termsShow(elementRect, writingMode, definitions, options, context) {

2
ext/fg/js/popup.js
View File

@ -254,7 +254,7 @@ class Popup {
} }
} }
async containsPoint({x, y}) { async containsPoint(x, y) {
for (let popup = this; popup !== null && popup.isVisible(); popup = popup.child) { for (let popup = this; popup !== null && popup.isVisible(); popup = popup.child) {
const rect = popup.container.getBoundingClientRect(); const rect = popup.container.getBoundingClientRect();
if (x >= rect.left && y >= rect.top && x < rect.right && y < rect.bottom) { if (x >= rect.left && y >= rect.top && x < rect.right && y < rect.bottom) {

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

@ -81,7 +81,7 @@ class Display {
const {docRangeFromPoint, docSentenceExtract} = this.dependencies; const {docRangeFromPoint, docSentenceExtract} = this.dependencies;
const clickedElement = $(e.target); const clickedElement = $(e.target);
const textSource = docRangeFromPoint({x: e.clientX, y: e.clientY}, this.options); const textSource = docRangeFromPoint(e.clientX, e.clientY, this.options);
if (textSource === null) { if (textSource === null) {
return false; return false;
} }