query parser html templates
This commit is contained in:
parent
cbfae2b9d7
commit
6c63a17d66
@ -1,2 +0,0 @@
|
||||
#!/bin/sh
|
||||
handlebars tmpl/*.html -f ext/bg/js/templates.js
|
@ -1,16 +0,0 @@
|
||||
#!/bin/bash
|
||||
DIRECTORY_TO_OBSERVE="tmpl"
|
||||
BUILD_SCRIPT="build_tmpl.sh"
|
||||
|
||||
function block_for_change {
|
||||
inotifywait -e modify,move,create,delete $DIRECTORY_TO_OBSERVE
|
||||
}
|
||||
|
||||
function build {
|
||||
bash $BUILD_SCRIPT
|
||||
}
|
||||
|
||||
build
|
||||
while block_for_change; do
|
||||
build
|
||||
done
|
@ -37,7 +37,6 @@
|
||||
<script src="/bg/js/options.js"></script>
|
||||
<script src="/bg/js/profile-conditions.js"></script>
|
||||
<script src="/bg/js/request.js"></script>
|
||||
<script src="/bg/js/templates.js"></script>
|
||||
<script src="/bg/js/translator.js"></script>
|
||||
<script src="/bg/js/util.js"></script>
|
||||
<script src="/mixed/js/audio.js"></script>
|
||||
|
@ -33,6 +33,10 @@ function apiClipboardGet() {
|
||||
return _apiInvoke('clipboardGet');
|
||||
}
|
||||
|
||||
function apiGetQueryParserTemplatesHtml() {
|
||||
return _apiInvoke('getQueryParserTemplatesHtml');
|
||||
}
|
||||
|
||||
function _apiInvoke(action, params={}) {
|
||||
const data = {action, params};
|
||||
return new Promise((resolve, reject) => {
|
||||
|
@ -567,6 +567,11 @@ class Backend {
|
||||
return await requestText(url, 'GET');
|
||||
}
|
||||
|
||||
async _onApiGetQueryParserTemplatesHtml() {
|
||||
const url = chrome.runtime.getURL('/bg/query-parser-templates.html');
|
||||
return await requestText(url, 'GET');
|
||||
}
|
||||
|
||||
_onApiGetZoom(params, sender) {
|
||||
if (!sender || !sender.tab) {
|
||||
return Promise.reject(new Error('Invalid tab'));
|
||||
@ -854,6 +859,7 @@ Backend._messageHandlers = new Map([
|
||||
['getEnvironmentInfo', (self, ...args) => self._onApiGetEnvironmentInfo(...args)],
|
||||
['clipboardGet', (self, ...args) => self._onApiClipboardGet(...args)],
|
||||
['getDisplayTemplatesHtml', (self, ...args) => self._onApiGetDisplayTemplatesHtml(...args)],
|
||||
['getQueryParserTemplatesHtml', (self, ...args) => self._onApiGetQueryParserTemplatesHtml(...args)],
|
||||
['getZoom', (self, ...args) => self._onApiGetZoom(...args)]
|
||||
]);
|
||||
|
||||
|
78
ext/bg/js/search-query-parser-generator.js
Normal file
78
ext/bg/js/search-query-parser-generator.js
Normal file
@ -0,0 +1,78 @@
|
||||
/*
|
||||
* Copyright (C) 2020 Alex Yatskov <alex@foosoft.net>
|
||||
* Author: Alex Yatskov <alex@foosoft.net>
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
|
||||
class QueryParserGenerator {
|
||||
constructor() {
|
||||
this._templateHandler = null;
|
||||
this._initialize();
|
||||
}
|
||||
|
||||
async _initialize() {
|
||||
const html = await apiGetQueryParserTemplatesHtml();
|
||||
this._templateHandler = new TemplateHandler(html);
|
||||
}
|
||||
|
||||
createParseResult(terms, preview=false) {
|
||||
const fragment = document.createDocumentFragment();
|
||||
for (const term of terms) {
|
||||
const termContainer = this._templateHandler.instantiate(preview ? 'term-preview' : 'term');
|
||||
for (const segment of term) {
|
||||
if (!segment.text.trim()) { continue; }
|
||||
if (!segment.reading || !segment.reading.trim()) {
|
||||
termContainer.appendChild(this.createSegmentText(segment.text));
|
||||
} else {
|
||||
termContainer.appendChild(this.createSegment(segment));
|
||||
}
|
||||
}
|
||||
fragment.appendChild(termContainer);
|
||||
}
|
||||
return fragment;
|
||||
}
|
||||
|
||||
createSegment(segment) {
|
||||
const segmentContainer = this._templateHandler.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.innerText = segment.reading;
|
||||
return segmentContainer;
|
||||
}
|
||||
|
||||
createSegmentText(text) {
|
||||
const fragment = document.createDocumentFragment();
|
||||
for (const chr of text) {
|
||||
const charContainer = this._templateHandler.instantiate('char');
|
||||
charContainer.innerText = chr;
|
||||
fragment.appendChild(charContainer);
|
||||
}
|
||||
return fragment;
|
||||
}
|
||||
|
||||
createParserSelect(parseResults, selectedParser) {
|
||||
const selectContainer = this._templateHandler.instantiate('select');
|
||||
for (const parseResult of parseResults) {
|
||||
const optionContainer = this._templateHandler.instantiate('select-option');
|
||||
optionContainer.value = parseResult.id;
|
||||
optionContainer.innerText = parseResult.name;
|
||||
optionContainer.defaultSelected = selectedParser === parseResult.id;
|
||||
selectContainer.appendChild(optionContainer);
|
||||
}
|
||||
return selectContainer;
|
||||
}
|
||||
}
|
@ -19,14 +19,16 @@
|
||||
|
||||
class QueryParser extends TextScanner {
|
||||
constructor(search) {
|
||||
super(document.querySelector('#query-parser'), [], [], []);
|
||||
super(document.querySelector('#query-parser-content'), [], [], []);
|
||||
this.search = search;
|
||||
|
||||
this.parseResults = [];
|
||||
this.selectedParser = null;
|
||||
|
||||
this.queryParser = document.querySelector('#query-parser');
|
||||
this.queryParserSelect = document.querySelector('#query-parser-select');
|
||||
this.queryParser = document.querySelector('#query-parser-content');
|
||||
this.queryParserSelect = document.querySelector('#query-parser-select-container');
|
||||
|
||||
this.queryParserGenerator = new QueryParserGenerator();
|
||||
}
|
||||
|
||||
onError(error) {
|
||||
@ -64,7 +66,7 @@ class QueryParser extends TextScanner {
|
||||
const selectedParser = e.target.value;
|
||||
this.selectedParser = selectedParser;
|
||||
apiOptionsSet({parsing: {selectedParser}}, this.search.getOptionsContext());
|
||||
this.renderParseResult(this.getParseResult());
|
||||
this.renderParseResult();
|
||||
}
|
||||
|
||||
getMouseEventListeners() {
|
||||
@ -113,13 +115,13 @@ class QueryParser extends TextScanner {
|
||||
async setText(text) {
|
||||
this.search.setSpinnerVisible(true);
|
||||
|
||||
await this.setPreview(text);
|
||||
this.setPreview(text);
|
||||
|
||||
this.parseResults = await this.parseText(text);
|
||||
this.refreshSelectedParser();
|
||||
|
||||
this.renderParserSelect();
|
||||
await this.renderParseResult();
|
||||
this.renderParseResult();
|
||||
|
||||
this.search.setSpinnerVisible(false);
|
||||
}
|
||||
@ -146,57 +148,29 @@ class QueryParser extends TextScanner {
|
||||
return results;
|
||||
}
|
||||
|
||||
async setPreview(text) {
|
||||
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.split('')}]);
|
||||
previewTerms.push([{text: tempText}]);
|
||||
}
|
||||
this.queryParser.innerHTML = await apiTemplateRender('query-parser.html', {
|
||||
terms: previewTerms,
|
||||
preview: true
|
||||
});
|
||||
this.queryParser.textContent = '';
|
||||
this.queryParser.appendChild(this.queryParserGenerator.createParseResult(previewTerms, true));
|
||||
}
|
||||
|
||||
renderParserSelect() {
|
||||
this.queryParserSelect.innerHTML = '';
|
||||
if (this.parseResults.length > 1) {
|
||||
const select = document.createElement('select');
|
||||
select.classList.add('form-control');
|
||||
for (const parseResult of this.parseResults) {
|
||||
const option = document.createElement('option');
|
||||
option.value = parseResult.id;
|
||||
option.innerText = parseResult.name;
|
||||
option.defaultSelected = this.selectedParser === parseResult.id;
|
||||
select.appendChild(option);
|
||||
}
|
||||
const select = this.queryParserGenerator.createParserSelect(this.parseResults, this.selectedParser);
|
||||
select.addEventListener('change', this.onParserChange.bind(this));
|
||||
this.queryParserSelect.appendChild(select);
|
||||
}
|
||||
}
|
||||
|
||||
async renderParseResult() {
|
||||
renderParseResult() {
|
||||
const parseResult = this.getParseResult();
|
||||
if (!parseResult) {
|
||||
this.queryParser.innerHTML = '';
|
||||
return;
|
||||
}
|
||||
|
||||
this.queryParser.innerHTML = await apiTemplateRender(
|
||||
'query-parser.html',
|
||||
{terms: QueryParser.processParseResultForDisplay(parseResult.parsedText)}
|
||||
);
|
||||
}
|
||||
|
||||
static processParseResultForDisplay(result) {
|
||||
return result.map((term) => {
|
||||
return term.filter((part) => part.text.trim()).map((part) => {
|
||||
return {
|
||||
text: part.text.split(''),
|
||||
reading: part.reading,
|
||||
raw: !part.reading || !part.reading.trim()
|
||||
};
|
||||
});
|
||||
});
|
||||
this.queryParser.textContent = '';
|
||||
if (!parseResult) { return; }
|
||||
this.queryParser.appendChild(this.queryParserGenerator.createParseResult(parseResult.parsedText));
|
||||
}
|
||||
}
|
||||
|
@ -1,55 +0,0 @@
|
||||
(function() {
|
||||
var template = Handlebars.template, templates = Handlebars.templates = Handlebars.templates || {};
|
||||
templates['query-parser.html'] = template({"1":function(container,depth0,helpers,partials,data) {
|
||||
var stack1, alias1=depth0 != null ? depth0 : (container.nullContext || {});
|
||||
|
||||
return ((stack1 = helpers["if"].call(alias1,(depth0 != null ? depth0.preview : depth0),{"name":"if","hash":{},"fn":container.program(2, data, 0),"inverse":container.program(4, data, 0),"data":data})) != null ? stack1 : "")
|
||||
+ ((stack1 = helpers.each.call(alias1,depth0,{"name":"each","hash":{},"fn":container.program(6, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
|
||||
+ "</span>";
|
||||
},"2":function(container,depth0,helpers,partials,data) {
|
||||
return "<span class=\"query-parser-term-preview\">";
|
||||
},"4":function(container,depth0,helpers,partials,data) {
|
||||
return "<span class=\"query-parser-term\">";
|
||||
},"6":function(container,depth0,helpers,partials,data) {
|
||||
var stack1;
|
||||
|
||||
return ((stack1 = container.invokePartial(partials.part,depth0,{"name":"part","data":data,"helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "");
|
||||
},"8":function(container,depth0,helpers,partials,data) {
|
||||
var stack1;
|
||||
|
||||
return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.raw : depth0),{"name":"if","hash":{},"fn":container.program(9, data, 0),"inverse":container.program(12, data, 0),"data":data})) != null ? stack1 : "");
|
||||
},"9":function(container,depth0,helpers,partials,data) {
|
||||
var stack1;
|
||||
|
||||
return ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.text : depth0),{"name":"each","hash":{},"fn":container.program(10, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "");
|
||||
},"10":function(container,depth0,helpers,partials,data) {
|
||||
return "<span class=\"query-parser-char\">"
|
||||
+ container.escapeExpression(container.lambda(depth0, depth0))
|
||||
+ "</span>";
|
||||
},"12":function(container,depth0,helpers,partials,data) {
|
||||
var stack1, helper, alias1=depth0 != null ? depth0 : (container.nullContext || {});
|
||||
|
||||
return "<ruby>"
|
||||
+ ((stack1 = helpers.each.call(alias1,(depth0 != null ? depth0.text : depth0),{"name":"each","hash":{},"fn":container.program(10, data, 0),"inverse":container.noop,"data":data})) != null ? stack1 : "")
|
||||
+ "<rt>"
|
||||
+ container.escapeExpression(((helper = (helper = helpers.reading || (depth0 != null ? depth0.reading : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(alias1,{"name":"reading","hash":{},"data":data}) : helper)))
|
||||
+ "</rt></ruby>";
|
||||
},"14":function(container,depth0,helpers,partials,data,blockParams,depths) {
|
||||
var stack1;
|
||||
|
||||
return ((stack1 = container.invokePartial(partials.term,depth0,{"name":"term","hash":{"preview":(depths[1] != null ? depths[1].preview : depths[1])},"data":data,"helpers":helpers,"partials":partials,"decorators":container.decorators})) != null ? stack1 : "");
|
||||
},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data,blockParams,depths) {
|
||||
var stack1;
|
||||
|
||||
return ((stack1 = helpers.each.call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.terms : depth0),{"name":"each","hash":{},"fn":container.program(14, data, 0, blockParams, depths),"inverse":container.noop,"data":data})) != null ? stack1 : "");
|
||||
},"main_d": function(fn, props, container, depth0, data, blockParams, depths) {
|
||||
|
||||
var decorators = container.decorators;
|
||||
|
||||
fn = decorators.inline(fn,props,container,{"name":"inline","hash":{},"fn":container.program(1, data, 0, blockParams, depths),"inverse":container.noop,"args":["term"],"data":data}) || fn;
|
||||
fn = decorators.inline(fn,props,container,{"name":"inline","hash":{},"fn":container.program(8, data, 0, blockParams, depths),"inverse":container.noop,"args":["part"],"data":data}) || fn;
|
||||
return fn;
|
||||
}
|
||||
|
||||
,"useDecorators":true,"usePartial":true,"useData":true,"useDepths":true});
|
||||
})();
|
12
ext/bg/query-parser-templates.html
Normal file
12
ext/bg/query-parser-templates.html
Normal file
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html><html><head></head><body>
|
||||
|
||||
<template id="term-template"><span class="query-parser-term" data-type="normal"></span></template>
|
||||
<template id="term-preview-template"><span class="query-parser-term" data-type="preview"></span></template>
|
||||
<template id="segment-template"><ruby class="query-parser-segment"><span class="query-parser-segment-text"></span><rt class="query-parser-segment-reading"></rt></ruby></template>
|
||||
<template id="char-template"><span class="query-parser-char"></span></template>
|
||||
|
||||
<template id="select-template"><select class="query-parser-select form-control">
|
||||
</select></template>
|
||||
<template id="select-option-template"><option class="query-parser-select-option"></option></template>
|
||||
|
||||
</body></html>
|
@ -48,8 +48,8 @@
|
||||
<div id="spinner" hidden><img src="/mixed/img/spinner.gif"></div>
|
||||
|
||||
<div class="scan-disable">
|
||||
<div id="query-parser-select" class="input-group"></div>
|
||||
<div id="query-parser"></div>
|
||||
<div id="query-parser-select-container" class="input-group"></div>
|
||||
<div id="query-parser-content"></div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
@ -78,7 +78,6 @@
|
||||
<script src="/bg/js/dictionary.js"></script>
|
||||
<script src="/bg/js/handlebars.js"></script>
|
||||
<script src="/bg/js/japanese.js"></script>
|
||||
<script src="/bg/js/templates.js"></script>
|
||||
<script src="/fg/js/document.js"></script>
|
||||
<script src="/fg/js/source.js"></script>
|
||||
<script src="/mixed/js/audio.js"></script>
|
||||
@ -87,7 +86,9 @@
|
||||
<script src="/mixed/js/display-generator.js"></script>
|
||||
<script src="/mixed/js/scroll.js"></script>
|
||||
<script src="/mixed/js/text-scanner.js"></script>
|
||||
<script src="/mixed/js/template-handler.js"></script>
|
||||
|
||||
<script src="/bg/js/search-query-parser-generator.js"></script>
|
||||
<script src="/bg/js/search-query-parser.js"></script>
|
||||
<script src="/bg/js/clipboard-monitor.js"></script>
|
||||
<script src="/bg/js/search.js"></script>
|
||||
|
@ -1097,7 +1097,6 @@
|
||||
<script src="/bg/js/options.js"></script>
|
||||
<script src="/bg/js/page-exit-prevention.js"></script>
|
||||
<script src="/bg/js/profile-conditions.js"></script>
|
||||
<script src="/bg/js/templates.js"></script>
|
||||
<script src="/bg/js/util.js"></script>
|
||||
<script src="/mixed/js/audio.js"></script>
|
||||
|
||||
|
@ -127,12 +127,12 @@ html:root[data-yomichan-page=float] .navigation-header:not([hidden])~.navigation
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
#query-parser {
|
||||
#query-parser-content {
|
||||
margin-top: 0.5em;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
#query-parser[data-term-spacing=true] .query-parser-term {
|
||||
#query-parser-content[data-term-spacing=true] .query-parser-term {
|
||||
margin-right: 0.2em;
|
||||
}
|
||||
|
||||
|
@ -105,6 +105,10 @@ function apiGetDisplayTemplatesHtml() {
|
||||
return _apiInvoke('getDisplayTemplatesHtml');
|
||||
}
|
||||
|
||||
function apiGetQueryParserTemplatesHtml() {
|
||||
return _apiInvoke('getQueryParserTemplatesHtml');
|
||||
}
|
||||
|
||||
function apiGetZoom() {
|
||||
return _apiInvoke('getZoom');
|
||||
}
|
||||
|
53
ext/mixed/js/template-handler.js
Normal file
53
ext/mixed/js/template-handler.js
Normal file
@ -0,0 +1,53 @@
|
||||
/*
|
||||
* Copyright (C) 2020 Alex Yatskov <alex@foosoft.net>
|
||||
* Author: Alex Yatskov <alex@foosoft.net>
|
||||
*
|
||||
* This program is free software: you can redistribute it and/or modify
|
||||
* it under the terms of the GNU General Public License as published by
|
||||
* the Free Software Foundation, either version 3 of the License, or
|
||||
* (at your option) any later version.
|
||||
*
|
||||
* This program is distributed in the hope that it will be useful,
|
||||
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
* GNU General Public License for more details.
|
||||
*
|
||||
* You should have received a copy of the GNU General Public License
|
||||
* along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||
*/
|
||||
|
||||
|
||||
class TemplateHandler {
|
||||
constructor(html) {
|
||||
this._templates = new Map();
|
||||
this._html = html;
|
||||
this._doc = null;
|
||||
|
||||
this._initialize();
|
||||
}
|
||||
|
||||
_initialize() {
|
||||
this._doc = new DOMParser().parseFromString(this._html, 'text/html');
|
||||
for (const template of this._doc.querySelectorAll('template')) {
|
||||
this._setTemplate(template);
|
||||
}
|
||||
}
|
||||
|
||||
_setTemplate(template) {
|
||||
const idMatch = template.id.match(/^([a-z-]+)-template$/);
|
||||
if (!idMatch) {
|
||||
throw new Error(`Invalid template ID: ${template.id}`);
|
||||
}
|
||||
this._templates.set(idMatch[1], template);
|
||||
}
|
||||
|
||||
instantiate(name) {
|
||||
const template = this._templates.get(name);
|
||||
return document.importNode(template.content.firstChild, true);
|
||||
}
|
||||
|
||||
instantiateFragment(name) {
|
||||
const template = this._templates.get(name);
|
||||
return document.importNode(template.content, true);
|
||||
}
|
||||
}
|
@ -1,27 +0,0 @@
|
||||
{{~#*inline "term"~}}
|
||||
{{~#if preview~}}
|
||||
<span class="query-parser-term-preview">
|
||||
{{~else~}}
|
||||
<span class="query-parser-term">
|
||||
{{~/if~}}
|
||||
{{~#each this~}}
|
||||
{{> part }}
|
||||
{{~/each~}}
|
||||
</span>
|
||||
{{~/inline~}}
|
||||
|
||||
{{~#*inline "part"~}}
|
||||
{{~#if raw~}}
|
||||
{{~#each text~}}
|
||||
<span class="query-parser-char">{{this}}</span>
|
||||
{{~/each~}}
|
||||
{{~else~}}
|
||||
<ruby>{{~#each text~}}
|
||||
<span class="query-parser-char">{{this}}</span>
|
||||
{{~/each~}}<rt>{{reading}}</rt></ruby>
|
||||
{{~/if~}}
|
||||
{{~/inline~}}
|
||||
|
||||
{{~#each terms~}}
|
||||
{{> term preview=../preview }}
|
||||
{{~/each~}}
|
Loading…
Reference in New Issue
Block a user