From 12e6e377854a9163b322a16f3effe816d0222c67 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 8 Nov 2020 12:35:32 -0500 Subject: [PATCH] Query parser generator refactor (#1006) * Simplify select generation * Refactor text generation * Change optional argument * Remove query-parser-templates.html * Simplify prepare * Simplify preview --- ext/bg/js/backend.js | 5 -- ext/bg/js/query-parser-generator.js | 96 +++++++++++++++-------------- ext/bg/js/query-parser.js | 13 ++-- ext/bg/query-parser-templates.html | 11 ---- ext/mixed/js/api.js | 4 -- ext/mixed/js/display.js | 2 +- 6 files changed, 54 insertions(+), 77 deletions(-) delete mode 100644 ext/bg/query-parser-templates.html 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));