aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ext/bg/js/anki.js5
-rw-r--r--ext/bg/js/api.js68
-rw-r--r--ext/bg/js/backend.js12
-rw-r--r--ext/bg/js/dictionary.js3
-rw-r--r--ext/bg/js/options.js10
-rw-r--r--ext/bg/js/settings.js7
-rw-r--r--ext/bg/settings.html13
-rw-r--r--ext/fg/js/api.js12
-rw-r--r--ext/fg/js/document.js74
-rw-r--r--ext/fg/js/frontend.js6
-rw-r--r--ext/fg/js/popup.js8
-rw-r--r--ext/fg/js/source.js57
-rw-r--r--ext/mixed/js/display.js46
13 files changed, 269 insertions, 52 deletions
diff --git a/ext/bg/js/anki.js b/ext/bg/js/anki.js
index 183f37bc..bd4e46cd 100644
--- a/ext/bg/js/anki.js
+++ b/ext/bg/js/anki.js
@@ -58,6 +58,11 @@ class AnkiConnect {
return await this.ankiInvoke('guiBrowse', {query});
}
+ async storeMediaFile(filename, dataBase64) {
+ await this.checkVersion();
+ return await this.ankiInvoke('storeMediaFile', {filename, data: dataBase64});
+ }
+
async checkVersion() {
if (this.remoteVersion < this.localVersion) {
this.remoteVersion = await this.ankiInvoke('version');
diff --git a/ext/bg/js/api.js b/ext/bg/js/api.js
index de3ad64e..c33ba709 100644
--- a/ext/bg/js/api.js
+++ b/ext/bg/js/api.js
@@ -53,7 +53,7 @@ async function apiKanjiFind(text) {
return definitions.slice(0, options.general.maxResults);
}
-async function apiDefinitionAdd(definition, mode) {
+async function apiDefinitionAdd(definition, mode, context) {
const options = utilBackend().options;
if (mode !== 'kanji') {
@@ -64,6 +64,14 @@ async function apiDefinitionAdd(definition, mode) {
);
}
+ if (context.screenshot) {
+ await apiInjectScreenshot(
+ definition,
+ options.anki.terms.fields,
+ context.screenshot
+ );
+ }
+
const note = await dictNoteFormat(definition, mode, options);
return utilBackend().anki.addNote(note);
}
@@ -139,3 +147,61 @@ async function apiCommandExec(command) {
async function apiAudioGetUrl(definition, source) {
return audioBuildUrl(definition, source);
}
+
+async function apiInjectScreenshot(definition, fields, screenshot) {
+ let usesScreenshot = false;
+ for (const name in fields) {
+ if (fields[name].includes('{screenshot}')) {
+ usesScreenshot = true;
+ break;
+ }
+ }
+
+ if (!usesScreenshot) {
+ return;
+ }
+
+ const dateToString = (date) => {
+ const year = date.getUTCFullYear();
+ const month = date.getUTCMonth().toString().padStart(2, '0');
+ const day = date.getUTCDate().toString().padStart(2, '0');
+ const hours = date.getUTCHours().toString().padStart(2, '0');
+ const minutes = date.getUTCMinutes().toString().padStart(2, '0');
+ const seconds = date.getUTCSeconds().toString().padStart(2, '0');
+ return `${year}-${month}-${day}-${hours}-${minutes}-${seconds}`;
+ };
+
+ const now = new Date(Date.now());
+ const filename = `yomichan_browser_screenshot_${definition.reading}_${dateToString(now)}.${screenshot.format}`;
+ const data = screenshot.dataUrl.replace(/^data:[\w\W]*?,/, '');
+
+ try {
+ await utilBackend().anki.storeMediaFile(filename, data);
+ } catch (e) {
+ return;
+ }
+
+ definition.screenshotFileName = filename;
+}
+
+function apiScreenshotGet(options, sender) {
+ if (!(sender && sender.tab)) {
+ return Promise.resolve();
+ }
+
+ const windowId = sender.tab.windowId;
+ return new Promise((resolve) => {
+ chrome.tabs.captureVisibleTab(windowId, options, (dataUrl) => resolve(dataUrl));
+ });
+}
+
+function apiForward(action, params, sender) {
+ if (!(sender && sender.tab)) {
+ return Promise.resolve();
+ }
+
+ const tabId = sender.tab.id;
+ return new Promise((resolve) => {
+ chrome.tabs.sendMessage(tabId, {action, params}, (response) => resolve(response));
+ });
+}
diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index c191a150..d49286d0 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -94,8 +94,8 @@ class Backend {
forward(apiTermsFind(text), callback);
},
- definitionAdd: ({definition, mode, callback}) => {
- forward(apiDefinitionAdd(definition, mode), callback);
+ definitionAdd: ({definition, mode, context, callback}) => {
+ forward(apiDefinitionAdd(definition, mode, context), callback);
},
definitionsAddable: ({definitions, modes, callback}) => {
@@ -116,6 +116,14 @@ class Backend {
audioGetUrl: ({definition, source, callback}) => {
forward(apiAudioGetUrl(definition, source), callback);
+ },
+
+ screenshotGet: ({options}) => {
+ forward(apiScreenshotGet(options, sender), callback);
+ },
+
+ forward: ({action, params}) => {
+ forward(apiForward(action, params, sender), callback);
}
};
diff --git a/ext/bg/js/dictionary.js b/ext/bg/js/dictionary.js
index 368bb18d..49afc368 100644
--- a/ext/bg/js/dictionary.js
+++ b/ext/bg/js/dictionary.js
@@ -343,7 +343,8 @@ async function dictFieldFormat(field, definition, mode, options) {
'reading',
'sentence',
'tags',
- 'url'
+ 'url',
+ 'screenshot'
];
for (const marker of markers) {
diff --git a/ext/bg/js/options.js b/ext/bg/js/options.js
index f1fc2cf8..29d8a215 100644
--- a/ext/bg/js/options.js
+++ b/ext/bg/js/options.js
@@ -175,6 +175,10 @@ function optionsFieldTemplates() {
<a href="{{definition.url}}">{{definition.url}}</a>
{{/inline}}
+{{#*inline "screenshot"}}
+ <img src="{{definition.screenshotFileName}}" />
+{{/inline}}
+
{{~> (lookup . "marker") ~}}
`.trim();
}
@@ -220,6 +224,7 @@ function optionsSetDefaults(options) {
server: 'http://127.0.0.1:8765',
tags: ['yomichan'],
sentenceExt: 200,
+ screenshot: {format: 'png', quality: 92},
terms: {deck: '', model: '', fields: {}},
kanji: {deck: '', model: '', fields: {}},
fieldTemplates: optionsFieldTemplates()
@@ -283,6 +288,11 @@ function optionsVersion(options) {
if (utilStringHashCode(options.anki.fieldTemplates) === 1285806040) {
options.anki.fieldTemplates = optionsFieldTemplates();
}
+ },
+ () => {
+ if (utilStringHashCode(options.anki.fieldTemplates) === -250091611) {
+ options.anki.fieldTemplates = optionsFieldTemplates();
+ }
}
];
diff --git a/ext/bg/js/settings.js b/ext/bg/js/settings.js
index 953120da..75082f3e 100644
--- a/ext/bg/js/settings.js
+++ b/ext/bg/js/settings.js
@@ -51,6 +51,8 @@ async function formRead() {
optionsNew.anki.tags = $('#card-tags').val().split(/[,; ]+/);
optionsNew.anki.sentenceExt = parseInt($('#sentence-detection-extent').val(), 10);
optionsNew.anki.server = $('#interface-server').val();
+ optionsNew.anki.screenshot.format = $('#screenshot-format').val();
+ optionsNew.anki.screenshot.quality = parseInt($('#screenshot-quality').val(), 10);
optionsNew.anki.fieldTemplates = $('#field-templates').val();
if (optionsOld.anki.enable && !ankiErrorShown()) {
@@ -188,6 +190,8 @@ async function onReady() {
$('#card-tags').val(options.anki.tags.join(' '));
$('#sentence-detection-extent').val(options.anki.sentenceExt);
$('#interface-server').val(options.anki.server);
+ $('#screenshot-format').val(options.anki.screenshot.format);
+ $('#screenshot-quality').val(options.anki.screenshot.quality);
$('#field-templates').val(options.anki.fieldTemplates);
$('#field-templates-reset').click(utilAsync(onAnkiFieldTemplatesReset));
$('input, select, textarea').not('.anki-model').change(utilAsync(onFormOptionsChanged));
@@ -505,7 +509,8 @@ async function ankiFieldsPopulate(element, options) {
'reading',
'sentence',
'tags',
- 'url'
+ 'url',
+ 'screenshot'
],
'kanji': [
'character',
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index 086d67d2..c6677018 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -293,6 +293,19 @@
<input type="text" id="interface-server" class="form-control">
</div>
+ <div class="form-group options-advanced">
+ <label for="screenshot-format">Screenshot format</label>
+ <select class="form-control" id="screenshot-format">
+ <option value="png">PNG</option>
+ <option value="jpeg">JPEG</option>
+ </select>
+ </div>
+
+ <div class="form-group options-advanced">
+ <label for="screenshot-quality">Screenshot quality (JPEG only)</label>
+ <input type="number" min="0" max="100" step="1" id="screenshot-quality" class="form-control">
+ </div>
+
<div id="anki-format">
<p class="help-block">
Specify the information you would like included in your flashcards in the field editor below.
diff --git a/ext/fg/js/api.js b/ext/fg/js/api.js
index 4b4d9d74..0c86b412 100644
--- a/ext/fg/js/api.js
+++ b/ext/fg/js/api.js
@@ -33,8 +33,8 @@ function apiKanjiFind(text) {
return utilInvoke('kanjiFind', {text});
}
-function apiDefinitionAdd(definition, mode) {
- return utilInvoke('definitionAdd', {definition, mode});
+function apiDefinitionAdd(definition, mode, context) {
+ return utilInvoke('definitionAdd', {definition, mode, context});
}
function apiDefinitionsAddable(definitions, modes) {
@@ -53,6 +53,10 @@ function apiCommandExec(command) {
return utilInvoke('commandExec', {command});
}
-function apiAudioGetUrl(definition, source) {
- return utilInvoke('audioGetUrl', {definition, source});
+function apiScreenshotGet(options) {
+ return utilInvoke('screenshotGet', {options});
+}
+
+function apiForward(action, params) {
+ return utilInvoke('forward', {action, params});
}
diff --git a/ext/fg/js/document.js b/ext/fg/js/document.js
index f58a64fc..86396a8a 100644
--- a/ext/fg/js/document.js
+++ b/ext/fg/js/document.js
@@ -17,6 +17,8 @@
*/
+const IS_FIREFOX = /Firefox/.test(navigator.userAgent);
+
function docOffsetCalc(element) {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft;
@@ -69,43 +71,23 @@ function docRangeFromPoint(point) {
const element = document.elementFromPoint(point.x, point.y);
let imposter = null;
if (element) {
- if (element.nodeName === 'IMG' || element.nodeName === 'BUTTON') {
- return new TextSourceElement(element);
- } else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
- imposter = docImposterCreate(element);
+ switch (element.nodeName) {
+ case 'IMG':
+ case 'BUTTON':
+ return new TextSourceElement(element);
+ case 'INPUT':
+ case 'TEXTAREA':
+ imposter = docImposterCreate(element);
+ break;
}
}
- if (!document.caretRangeFromPoint) {
- document.caretRangeFromPoint = (x, y) => {
- const position = document.caretPositionFromPoint(x,y);
- if (position && position.offsetNode && position.offsetNode.nodeType === Node.TEXT_NODE) {
- const range = document.createRange();
- range.setStart(position.offsetNode, position.offset);
- range.setEnd(position.offsetNode, position.offset);
- return range;
- }
- return null;
- };
- }
-
const range = document.caretRangeFromPoint(point.x, point.y);
- if (range === null) {
- return;
+ if (imposter !== null) {
+ imposter.style.zIndex = -2147483646;
}
- if(imposter !== null) imposter.style.zIndex = -2147483646;
-
- const rects = range.getClientRects();
- for (const rect of rects) {
- if (point.y <= rect.bottom + 2) {
- return new TextSourceRange(range);
- }
- }
-
- if (navigator.userAgent.match(/Firefox/)) {
- return new TextSourceRange(range);
- }
+ return range !== null && isPointInRange(point, range) ? new TextSourceRange(range) : null;
}
function docSentenceExtract(source, extent) {
@@ -178,3 +160,33 @@ function docSentenceExtract(source, extent) {
offset: position - startPos - padding
};
}
+
+function isPointInRange(point, range) {
+ if (IS_FIREFOX) {
+ // Always return true on Firefox due to an issue where range.getClientRects()
+ // does not return a correct set of rects for characters at the beginning of a line.
+ return true;
+ }
+
+ const y = point.y - 2;
+ for (const rect of range.getClientRects()) {
+ if (y <= rect.bottom) {
+ return true;
+ }
+ }
+
+ return false;
+}
+
+if (typeof document.caretRangeFromPoint !== 'function') {
+ document.caretRangeFromPoint = (x, y) => {
+ const position = document.caretPositionFromPoint(x, y);
+ if (position && position.offsetNode && position.offsetNode.nodeType === Node.TEXT_NODE) {
+ const range = document.createRange();
+ range.setStart(position.offsetNode, position.offset);
+ range.setEnd(position.offsetNode, position.offset);
+ return range;
+ }
+ return null;
+ };
+}
diff --git a/ext/fg/js/frontend.js b/ext/fg/js/frontend.js
index 83fd9aff..3c5f2ac8 100644
--- a/ext/fg/js/frontend.js
+++ b/ext/fg/js/frontend.js
@@ -197,7 +197,7 @@ class Frontend {
}
onTouchMove(e) {
- if (!this.scrollPrevent || this.primaryTouchIdentifier === null) {
+ if (!this.scrollPrevent || !e.cancelable || this.primaryTouchIdentifier === null) {
return;
}
@@ -249,6 +249,10 @@ class Frontend {
if (!this.options.enable) {
this.searchClear();
}
+ },
+
+ popupSetVisible: ({visible}) => {
+ this.popup.setVisible(visible);
}
};
diff --git a/ext/fg/js/popup.js b/ext/fg/js/popup.js
index c8cc9baa..18dc0386 100644
--- a/ext/fg/js/popup.js
+++ b/ext/fg/js/popup.js
@@ -113,6 +113,14 @@ class Popup {
return this.injected && this.container.style.visibility !== 'hidden';
}
+ setVisible(visible) {
+ if (visible) {
+ this.container.style.setProperty('display', '');
+ } else {
+ this.container.style.setProperty('display', 'none', 'important');
+ }
+ }
+
containsPoint(point) {
if (!this.isVisible()) {
return false;
diff --git a/ext/fg/js/source.js b/ext/fg/js/source.js
index 664dbec7..bbf00e30 100644
--- a/ext/fg/js/source.js
+++ b/ext/fg/js/source.js
@@ -16,6 +16,9 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
+// \u200c (Zero-width non-joiner) appears on Google Docs from Chrome 76 onwards
+const IGNORE_TEXT_PATTERN = /\u200c/;
+
/*
* TextSourceRange
@@ -124,11 +127,23 @@ class TextSourceRange {
static seekForwardHelper(node, state) {
if (node.nodeType === 3 && node.parentElement && TextSourceRange.shouldEnter(node.parentElement)) {
const offset = state.node === node ? state.offset : 0;
- const remaining = node.length - offset;
- const consumed = Math.min(remaining, state.remainder);
- state.content = state.content + node.nodeValue.substring(offset, offset + consumed);
+
+ let consumed = 0;
+ let stripped = 0;
+ while (state.remainder - consumed > 0) {
+ const currentChar = node.nodeValue[offset + consumed + stripped];
+ if (!currentChar) {
+ break;
+ } else if (currentChar.match(IGNORE_TEXT_PATTERN)) {
+ stripped++;
+ } else {
+ consumed++;
+ state.content += currentChar;
+ }
+ }
+
state.node = node;
- state.offset = offset + consumed;
+ state.offset = offset + consumed + stripped;
state.remainder -= consumed;
} else if (TextSourceRange.shouldEnter(node)) {
for (let i = 0; i < node.childNodes.length; ++i) {
@@ -161,11 +176,23 @@ class TextSourceRange {
static seekBackwardHelper(node, state) {
if (node.nodeType === 3 && node.parentElement && TextSourceRange.shouldEnter(node.parentElement)) {
const offset = state.node === node ? state.offset : node.length;
- const remaining = offset;
- const consumed = Math.min(remaining, state.remainder);
- state.content = node.nodeValue.substring(offset - consumed, offset) + state.content;
+
+ let consumed = 0;
+ let stripped = 0;
+ while (state.remainder - consumed > 0) {
+ const currentChar = node.nodeValue[offset - consumed - stripped]; // negative indices are undefined in JS
+ if (!currentChar) {
+ break;
+ } else if (currentChar.match(IGNORE_TEXT_PATTERN)) {
+ stripped++;
+ } else {
+ consumed++;
+ state.content = currentChar + state.content;
+ }
+ }
+
state.node = node;
- state.offset = offset - consumed;
+ state.offset = offset - consumed - stripped;
state.remainder -= consumed;
} else if (TextSourceRange.shouldEnter(node)) {
for (let i = node.childNodes.length - 1; i >= 0; --i) {
@@ -211,8 +238,18 @@ class TextSourceElement {
break;
}
- this.content = this.content || '';
- this.content = this.content.substring(0, length);
+ let consumed = 0;
+ let content = '';
+ for (let currentChar of this.content || '') {
+ if (consumed >= length) {
+ break;
+ } else if (!currentChar.match(IGNORE_TEXT_PATTERN)) {
+ consumed++;
+ content += currentChar;
+ }
+ }
+
+ this.content = content;
return this.content.length;
}
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 8901ba71..a2707bd0 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -81,6 +81,9 @@ class Display {
const clickedElement = $(e.target);
const textSource = docRangeFromPoint({x: e.clientX, y: e.clientY});
+ if (textSource === null) {
+ return false;
+ }
textSource.setEndOffset(this.options.scanning.length);
const {definitions, length} = await apiTermsFind(textSource.text());
@@ -436,7 +439,15 @@ class Display {
try {
this.spinner.show();
- const noteId = await apiDefinitionAdd(definition, mode);
+ const context = {};
+ if (this.noteUsesScreenshot()) {
+ const screenshot = await this.getScreenshot();
+ if (screenshot) {
+ context.screenshot = screenshot;
+ }
+ }
+
+ const noteId = await apiDefinitionAdd(definition, mode, context);
if (noteId) {
const index = this.definitions.indexOf(definition);
Display.adderButtonFind(index, mode).addClass('disabled');
@@ -489,10 +500,39 @@ class Display {
}
}
+ noteUsesScreenshot() {
+ const fields = this.options.anki.terms.fields;
+ for (const name in fields) {
+ if (fields[name].includes('{screenshot}')) {
+ return true;
+ }
+ }
+ return false;
+ }
+
+ async getScreenshot() {
+ try {
+ await this.setPopupVisible(false);
+ await Display.delay(1); // Wait for popup to be hidden.
+
+ const {format, quality} = this.options.anki.screenshot;
+ const dataUrl = await apiScreenshotGet({format, quality});
+ if (!dataUrl || dataUrl.error) { return; }
+
+ return {dataUrl, format};
+ } finally {
+ await this.setPopupVisible(true);
+ }
+ }
+
get firstExpressionIndex() {
return this.options.general.resultOutputMode === 'merge' ? 0 : -1;
}
+ setPopupVisible(visible) {
+ return apiForward('popupSetVisible', {visible});
+ }
+
static clozeBuild(sentence, source) {
const result = {
sentence: sentence.text.trim()
@@ -518,4 +558,8 @@ class Display {
static viewerButtonFind(index) {
return $('.entry').eq(index).find('.action-view-note');
}
+
+ static delay(time) {
+ return new Promise((resolve) => setTimeout(resolve, time));
+ }
}