diff --git a/ext/bg/js/backend.js b/ext/bg/js/backend.js
index 5462d4c9..fe9c9c76 100644
--- a/ext/bg/js/backend.js
+++ b/ext/bg/js/backend.js
@@ -100,7 +100,6 @@ class Backend {
['clipboardGet', {async: true, contentScript: true, handler: this._onApiClipboardGet.bind(this)}],
['clipboardGetImage', {async: true, contentScript: true, handler: this._onApiClipboardImageGet.bind(this)}],
['getDisplayTemplatesHtml', {async: true, contentScript: true, handler: this._onApiGetDisplayTemplatesHtml.bind(this)}],
- ['getQueryParserTemplatesHtml', {async: true, contentScript: true, handler: this._onApiGetQueryParserTemplatesHtml.bind(this)}],
['getZoom', {async: true, contentScript: true, handler: this._onApiGetZoom.bind(this)}],
['getDefaultAnkiFieldTemplates', {async: false, contentScript: true, handler: this._onApiGetDefaultAnkiFieldTemplates.bind(this)}],
['getDictionaryInfo', {async: true, contentScript: false, handler: this._onApiGetDictionaryInfo.bind(this)}],
@@ -594,10 +593,6 @@ class Backend {
return await this._fetchAsset('/mixed/display-templates.html');
}
- async _onApiGetQueryParserTemplatesHtml() {
- return await this._fetchAsset('/bg/query-parser-templates.html');
- }
-
_onApiGetZoom(params, sender) {
if (!sender || !sender.tab) {
return Promise.reject(new Error('Invalid tab'));
diff --git a/ext/bg/js/query-parser-generator.js b/ext/bg/js/query-parser-generator.js
index 3f49184b..d53183ba 100644
--- a/ext/bg/js/query-parser-generator.js
+++ b/ext/bg/js/query-parser-generator.js
@@ -15,76 +15,78 @@
* along with this program. If not, see .
*/
-/* global
- * HtmlTemplateCollection
- * api
- */
-
class QueryParserGenerator {
- constructor() {
- this._templates = null;
- }
-
- async prepare() {
- const html = await api.getQueryParserTemplatesHtml();
- this._templates = new HtmlTemplateCollection(html);
- }
-
- createParseResult(terms, preview=false) {
+ createParseResult(terms, preview) {
+ const type = preview ? 'preview' : 'normal';
const fragment = document.createDocumentFragment();
for (const term of terms) {
- const termContainer = this._templates.instantiate(preview ? 'term-preview' : 'term');
+ const termNode = document.createElement('span');
+ termNode.className = 'query-parser-term';
+ termNode.dataset.type = type;
for (const segment of term) {
if (!segment.text.trim()) { continue; }
if (!segment.reading.trim()) {
- termContainer.appendChild(this.createSegmentText(segment.text));
+ this._addSegmentText(segment.text, termNode);
} else {
- termContainer.appendChild(this.createSegment(segment));
+ termNode.appendChild(this._createSegment(segment));
}
}
- fragment.appendChild(termContainer);
- }
- return fragment;
- }
-
- createSegment(segment) {
- const segmentContainer = this._templates.instantiate('segment');
- const segmentTextContainer = segmentContainer.querySelector('.query-parser-segment-text');
- const segmentReadingContainer = segmentContainer.querySelector('.query-parser-segment-reading');
- segmentTextContainer.appendChild(this.createSegmentText(segment.text));
- segmentReadingContainer.textContent = segment.reading;
- return segmentContainer;
- }
-
- createSegmentText(text) {
- const fragment = document.createDocumentFragment();
- for (const chr of text) {
- const charContainer = this._templates.instantiate('char');
- charContainer.textContent = chr;
- fragment.appendChild(charContainer);
+ fragment.appendChild(termNode);
}
return fragment;
}
createParserSelect(parseResults, selectedParser) {
- const selectContainer = this._templates.instantiate('select');
+ const select = document.createElement('select');
+ select.className = 'query-parser-select form-control';
for (const parseResult of parseResults) {
- const optionContainer = this._templates.instantiate('select-option');
- optionContainer.value = parseResult.id;
+ const option = document.createElement('option');
+ option.className = 'query-parser-select-option';
+ option.value = parseResult.id;
switch (parseResult.source) {
case 'scanning-parser':
- optionContainer.textContent = 'Scanning parser';
+ option.textContent = 'Scanning parser';
break;
case 'mecab':
- optionContainer.textContent = `MeCab: ${parseResult.dictionary}`;
+ option.textContent = `MeCab: ${parseResult.dictionary}`;
break;
default:
- optionContainer.textContent = 'Unrecognized dictionary';
+ option.textContent = 'Unrecognized dictionary';
break;
}
- optionContainer.defaultSelected = selectedParser === parseResult.id;
- selectContainer.appendChild(optionContainer);
+ option.defaultSelected = selectedParser === parseResult.id;
+ select.appendChild(option);
+ }
+ return select;
+ }
+
+ // Private
+
+ _createSegment(segment) {
+ const segmentNode = document.createElement('ruby');
+ segmentNode.className = 'query-parser-segment';
+
+ const textNode = document.createElement('span');
+ textNode.className = 'query-parser-segment-text';
+
+ const readingNode = document.createElement('rt');
+ readingNode.className = 'query-parser-segment-reading';
+
+ segmentNode.appendChild(textNode);
+ segmentNode.appendChild(readingNode);
+
+ this._addSegmentText(segment.text, textNode);
+ readingNode.textContent = segment.reading;
+
+ return segmentNode;
+ }
+
+ _addSegmentText(text, container) {
+ for (const character of text) {
+ const node = document.createElement('span');
+ node.className = 'query-parser-char';
+ node.textContent = character;
+ container.appendChild(node);
}
- return selectContainer;
}
}
diff --git a/ext/bg/js/query-parser.js b/ext/bg/js/query-parser.js
index dc3cc581..8f17a5c1 100644
--- a/ext/bg/js/query-parser.js
+++ b/ext/bg/js/query-parser.js
@@ -44,8 +44,7 @@ class QueryParser extends EventDispatcher {
});
}
- async prepare() {
- await this._queryParserGenerator.prepare();
+ prepare() {
this._textScanner.prepare();
this._textScanner.on('searched', this._onSearched.bind(this));
}
@@ -125,13 +124,9 @@ class QueryParser extends EventDispatcher {
}
_setPreview(text) {
- const previewTerms = [];
- for (let i = 0, ii = text.length; i < ii; i += 2) {
- const tempText = text.substring(i, i + 2);
- previewTerms.push([{text: tempText, reading: ''}]);
- }
+ const terms = [[{text, reading: ''}]];
this._queryParser.textContent = '';
- this._queryParser.appendChild(this._queryParserGenerator.createParseResult(previewTerms, true));
+ this._queryParser.appendChild(this._queryParserGenerator.createParseResult(terms, true));
}
_renderParserSelect() {
@@ -148,6 +143,6 @@ class QueryParser extends EventDispatcher {
const parseResult = this._getParseResult();
this._queryParser.textContent = '';
if (!parseResult) { return; }
- this._queryParser.appendChild(this._queryParserGenerator.createParseResult(parseResult.content));
+ this._queryParser.appendChild(this._queryParserGenerator.createParseResult(parseResult.content, false));
}
}
diff --git a/ext/bg/query-parser-templates.html b/ext/bg/query-parser-templates.html
deleted file mode 100644
index 7cab16a9..00000000
--- a/ext/bg/query-parser-templates.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
diff --git a/ext/mixed/js/api.js b/ext/mixed/js/api.js
index e826b68b..43db1562 100644
--- a/ext/mixed/js/api.js
+++ b/ext/mixed/js/api.js
@@ -137,10 +137,6 @@ const api = (() => {
return this._invoke('getDisplayTemplatesHtml');
}
- getQueryParserTemplatesHtml() {
- return this._invoke('getQueryParserTemplatesHtml');
- }
-
getZoom() {
return this._invoke('getZoom');
}
diff --git a/ext/mixed/js/display.js b/ext/mixed/js/display.js
index 38a441bd..33d8f986 100644
--- a/ext/mixed/js/display.js
+++ b/ext/mixed/js/display.js
@@ -164,7 +164,7 @@ class Display extends EventDispatcher {
this._updateMode();
this._setInteractive(true);
await this._displayGenerator.prepare();
- await this._queryParser.prepare();
+ this._queryParser.prepare();
this._history.prepare();
this._history.on('stateChanged', this._onStateChanged.bind(this));
this._queryParser.on('searched', this._onQueryParserSearch.bind(this));