wip
This commit is contained in:
parent
aac2a58b5f
commit
3ca28a9374
@ -32,30 +32,18 @@ window.yomichan_frontend = new class {
|
||||
async prepare() {
|
||||
try {
|
||||
this.options = await apiOptionsGet();
|
||||
|
||||
window.addEventListener('message', e => this.onFrameMessage(e));
|
||||
window.addEventListener('mousedown', e => this.onMouseDown(e));
|
||||
window.addEventListener('mousemove', e => this.onMouseMove(e));
|
||||
window.addEventListener('mouseover', e => this.onMouseOver(e));
|
||||
window.addEventListener('mouseup', e => this.onMouseUp(e));
|
||||
window.addEventListener('resize', e => this.onResize(e));
|
||||
|
||||
chrome.runtime.onMessage.addListener(({action, params}, sender, callback) => this.onBgMessage(action, params, sender, callback));
|
||||
} catch (e) {
|
||||
this.onError(e);
|
||||
}
|
||||
|
||||
window.addEventListener('message', this.onFrameMessage.bind(this));
|
||||
window.addEventListener('mousedown', this.onMouseDown.bind(this));
|
||||
window.addEventListener('mousemove', this.onMouseMove.bind(this));
|
||||
window.addEventListener('mouseover', this.onMouseOver.bind(this));
|
||||
window.addEventListener('mouseup', this.onMouseUp.bind(this));
|
||||
window.addEventListener('resize', this.onResize.bind(this));
|
||||
|
||||
chrome.runtime.onMessage.addListener(this.onBgMessage.bind(this));
|
||||
}
|
||||
|
||||
popupTimerSet(callback) {
|
||||
this.popupTimerClear();
|
||||
this.popupTimer = window.setTimeout(callback, this.options.scanning.delay);
|
||||
}
|
||||
|
||||
popupTimerClear() {
|
||||
if (this.popupTimer) {
|
||||
window.clearTimeout(this.popupTimer);
|
||||
this.popupTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
onMouseOver(e) {
|
||||
@ -132,7 +120,11 @@ window.yomichan_frontend = new class {
|
||||
}
|
||||
}
|
||||
|
||||
onBgMessage({action, params}, sender, callback) {
|
||||
onResize() {
|
||||
this.onSearchClear();
|
||||
}
|
||||
|
||||
onBgMessage(action, params, sender, callback) {
|
||||
const handlers = {
|
||||
optionsSet: options => {
|
||||
this.options = options;
|
||||
@ -150,37 +142,55 @@ window.yomichan_frontend = new class {
|
||||
callback();
|
||||
}
|
||||
|
||||
onResize() {
|
||||
this.onSearchClear();
|
||||
onError(error) {
|
||||
if (window.yomichan_orphaned) {
|
||||
if (this.lastTextSource && this.options.scanning.modifier !== 'none') {
|
||||
this.popup.showOrphaned(this.lastTextSource.getRect(), this.options);
|
||||
}
|
||||
} else {
|
||||
window.alert(`Error: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
popupTimerSet(callback) {
|
||||
this.popupTimerClear();
|
||||
this.popupTimer = window.setTimeout(callback, this.options.scanning.delay);
|
||||
}
|
||||
|
||||
popupTimerClear() {
|
||||
if (this.popupTimer) {
|
||||
window.clearTimeout(this.popupTimer);
|
||||
this.popupTimer = null;
|
||||
}
|
||||
}
|
||||
|
||||
async searchAt(point) {
|
||||
if (this.pendingLookup) {
|
||||
return;
|
||||
}
|
||||
|
||||
const textSource = docRangeFromPoint(point);
|
||||
if (!textSource || !textSource.containsPoint(point)) {
|
||||
docImposterDestroy();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.lastTextSource && this.lastTextSource.equals(textSource)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.pendingLookup = true;
|
||||
|
||||
try {
|
||||
if (this.pendingLookup) {
|
||||
return;
|
||||
}
|
||||
|
||||
const textSource = docRangeFromPoint(point);
|
||||
if (!textSource || !textSource.containsPoint(point)) {
|
||||
docImposterDestroy();
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.lastTextSource && this.lastTextSource.equals(textSource)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.pendingLookup = true;
|
||||
|
||||
if (!await this.searchTerms(textSource)) {
|
||||
await this.searchKanji(textSource);
|
||||
}
|
||||
} catch (e) {
|
||||
this.onError(e);
|
||||
} finally {
|
||||
docImposterDestroy();
|
||||
this.pendingLookup = false;
|
||||
}
|
||||
|
||||
docImposterDestroy();
|
||||
this.pendingLookup = false;
|
||||
}
|
||||
|
||||
async searchTerms(textSource) {
|
||||
@ -245,14 +255,6 @@ window.yomichan_frontend = new class {
|
||||
|
||||
this.lastTextSource = null;
|
||||
}
|
||||
}();
|
||||
|
||||
handleError(error, textSource) {
|
||||
if (window.yomichan_orphaned) {
|
||||
if (textSource && this.options.scanning.modifier !== 'none') {
|
||||
this.popup.showOrphaned(textSource.getRect(), this.options);
|
||||
}
|
||||
} else {
|
||||
window.alert(`Error: ${error}`);
|
||||
}
|
||||
}
|
||||
};
|
||||
window.yomichan_frontend.prepare();
|
||||
|
@ -40,51 +40,51 @@ class Popup {
|
||||
return this.injected;
|
||||
}
|
||||
|
||||
show(elementRect, options) {
|
||||
return this.inject().then(() => {
|
||||
const containerStyle = window.getComputedStyle(this.container);
|
||||
const containerHeight = parseInt(containerStyle.height);
|
||||
const containerWidth = parseInt(containerStyle.width);
|
||||
async show(elementRect, options) {
|
||||
await this.inject();
|
||||
|
||||
const limitX = document.body.clientWidth;
|
||||
const limitY = window.innerHeight;
|
||||
const containerStyle = window.getComputedStyle(this.container);
|
||||
const containerHeight = parseInt(containerStyle.height);
|
||||
const containerWidth = parseInt(containerStyle.width);
|
||||
|
||||
let x = elementRect.left;
|
||||
let width = Math.max(containerWidth, options.general.popupWidth);
|
||||
const overflowX = Math.max(x + width - limitX, 0);
|
||||
if (overflowX > 0) {
|
||||
if (x >= overflowX) {
|
||||
x -= overflowX;
|
||||
} else {
|
||||
width = limitX;
|
||||
x = 0;
|
||||
}
|
||||
}
|
||||
const limitX = document.body.clientWidth;
|
||||
const limitY = window.innerHeight;
|
||||
|
||||
let y = 0;
|
||||
let height = Math.max(containerHeight, options.general.popupHeight);
|
||||
const yBelow = elementRect.bottom + options.general.popupOffset;
|
||||
const yAbove = elementRect.top - options.general.popupOffset;
|
||||
const overflowBelow = Math.max(yBelow + height - limitY, 0);
|
||||
const overflowAbove = Math.max(height - yAbove, 0);
|
||||
if (overflowBelow > 0 || overflowAbove > 0) {
|
||||
if (overflowBelow < overflowAbove) {
|
||||
height = Math.max(height - overflowBelow, 0);
|
||||
y = yBelow;
|
||||
} else {
|
||||
height = Math.max(height - overflowAbove, 0);
|
||||
y = Math.max(yAbove - height, 0);
|
||||
}
|
||||
let x = elementRect.left;
|
||||
let width = Math.max(containerWidth, options.general.popupWidth);
|
||||
const overflowX = Math.max(x + width - limitX, 0);
|
||||
if (overflowX > 0) {
|
||||
if (x >= overflowX) {
|
||||
x -= overflowX;
|
||||
} else {
|
||||
y = yBelow;
|
||||
width = limitX;
|
||||
x = 0;
|
||||
}
|
||||
}
|
||||
|
||||
this.container.style.left = `${x}px`;
|
||||
this.container.style.top = `${y}px`;
|
||||
this.container.style.width = `${width}px`;
|
||||
this.container.style.height = `${height}px`;
|
||||
this.container.style.visibility = 'visible';
|
||||
});
|
||||
let y = 0;
|
||||
let height = Math.max(containerHeight, options.general.popupHeight);
|
||||
const yBelow = elementRect.bottom + options.general.popupOffset;
|
||||
const yAbove = elementRect.top - options.general.popupOffset;
|
||||
const overflowBelow = Math.max(yBelow + height - limitY, 0);
|
||||
const overflowAbove = Math.max(height - yAbove, 0);
|
||||
if (overflowBelow > 0 || overflowAbove > 0) {
|
||||
if (overflowBelow < overflowAbove) {
|
||||
height = Math.max(height - overflowBelow, 0);
|
||||
y = yBelow;
|
||||
} else {
|
||||
height = Math.max(height - overflowAbove, 0);
|
||||
y = Math.max(yAbove - height, 0);
|
||||
}
|
||||
} else {
|
||||
y = yBelow;
|
||||
}
|
||||
|
||||
this.container.style.left = `${x}px`;
|
||||
this.container.style.top = `${y}px`;
|
||||
this.container.style.width = `${width}px`;
|
||||
this.container.style.height = `${height}px`;
|
||||
this.container.style.visibility = 'visible';
|
||||
}
|
||||
|
||||
hide() {
|
||||
@ -95,25 +95,22 @@ class Popup {
|
||||
return this.injected && this.container.style.visibility !== 'hidden';
|
||||
}
|
||||
|
||||
showTermDefs(elementRect, definitions, options, context) {
|
||||
this.show(elementRect, options).then(() => {
|
||||
this.invokeApi('showTermDefs', {definitions, options, context});
|
||||
});
|
||||
async termsShow(elementRect, definitions, options, context) {
|
||||
await this.show(elementRect, options);
|
||||
this.invokeApi('termsShow', {definitions, options, context});
|
||||
}
|
||||
|
||||
showKanjiDefs(elementRect, definitions, options, context) {
|
||||
this.show(elementRect, options).then(() => {
|
||||
this.invokeApi('showKanjiDefs', {definitions, options, context});
|
||||
});
|
||||
}
|
||||
|
||||
showOrphaned(elementRect, options) {
|
||||
this.show(elementRect, options).then(() => {
|
||||
this.invokeApi('showOrphaned');
|
||||
});
|
||||
async kanjiShow(elementRect, definitions, options, context) {
|
||||
await this.show(elementRect, options);
|
||||
this.invokeApi('termsShow', {definitions, options, context});
|
||||
}
|
||||
|
||||
invokeApi(action, params={}) {
|
||||
this.container.contentWindow.postMessage({action, params}, '*');
|
||||
}
|
||||
|
||||
async onOrphaned(elementRect, options) {
|
||||
await this.show(elementRect, options);
|
||||
this.invokeApi('orphaned');
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user