diff --git a/dev/translator-vm.js b/dev/translator-vm.js
index 742036a8..49101cf0 100644
--- a/dev/translator-vm.js
+++ b/dev/translator-vm.js
@@ -38,10 +38,6 @@ class TranslatorVM extends DatabaseVM {
return this._translator;
}
- get ankiNoteDataCreator() {
- return this._ankiNoteDataCreator;
- }
-
async prepare(dictionaryDirectory, dictionaryName) {
this.execute([
'js/core.js',
diff --git a/ext/js/templates/sandbox/anki-template-renderer.js b/ext/js/templates/sandbox/anki-template-renderer.js
new file mode 100644
index 00000000..907ab0fa
--- /dev/null
+++ b/ext/js/templates/sandbox/anki-template-renderer.js
@@ -0,0 +1,555 @@
+/*
+ * Copyright (C) 2021 Yomichan Authors
+ *
+ * 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 .
+ */
+
+/* global
+ * AnkiNoteDataCreator
+ * CssStyleApplier
+ * DictionaryDataUtil
+ * Handlebars
+ * JapaneseUtil
+ * StructuredContentGenerator
+ * TemplateRenderer
+ * TemplateRendererMediaProvider
+ */
+
+/**
+ * This class contains all Anki-specific template rendering functionality. It is built on
+ * the generic TemplateRenderer class and various other Anki-related classes.
+ */
+class AnkiTemplateRenderer {
+ /**
+ * Creates a new instance of the class.
+ */
+ constructor() {
+ this._cssStyleApplier = new CssStyleApplier('/data/structured-content-style.json');
+ this._japaneseUtil = new JapaneseUtil(null);
+ this._templateRenderer = new TemplateRenderer();
+ this._ankiNoteDataCreator = new AnkiNoteDataCreator(this._japaneseUtil);
+ this._mediaProvider = new TemplateRendererMediaProvider();
+ this._stateStack = null;
+ this._requirements = null;
+ this._cleanupCallbacks = null;
+ this._temporaryElement = null;
+ }
+
+ /**
+ * Gets the generic TemplateRenderer instance.
+ */
+ get templateRenderer() {
+ return this._templateRenderer;
+ }
+
+ /**
+ * Prepares the data that is necessary before the template renderer can be safely used.
+ */
+ async prepare() {
+ this._templateRenderer.registerHelpers([
+ ['dumpObject', this._dumpObject.bind(this)],
+ ['furigana', this._furigana.bind(this)],
+ ['furiganaPlain', this._furiganaPlain.bind(this)],
+ ['kanjiLinks', this._kanjiLinks.bind(this)],
+ ['multiLine', this._multiLine.bind(this)],
+ ['sanitizeCssClass', this._sanitizeCssClass.bind(this)],
+ ['regexReplace', this._regexReplace.bind(this)],
+ ['regexMatch', this._regexMatch.bind(this)],
+ ['mergeTags', this._mergeTags.bind(this)],
+ ['eachUpTo', this._eachUpTo.bind(this)],
+ ['spread', this._spread.bind(this)],
+ ['op', this._op.bind(this)],
+ ['get', this._get.bind(this)],
+ ['set', this._set.bind(this)],
+ ['scope', this._scope.bind(this)],
+ ['property', this._property.bind(this)],
+ ['noop', this._noop.bind(this)],
+ ['isMoraPitchHigh', this._isMoraPitchHigh.bind(this)],
+ ['getKanaMorae', this._getKanaMorae.bind(this)],
+ ['typeof', this._getTypeof.bind(this)],
+ ['join', this._join.bind(this)],
+ ['concat', this._concat.bind(this)],
+ ['pitchCategories', this._pitchCategories.bind(this)],
+ ['formatGlossary', this._formatGlossary.bind(this)],
+ ['hasMedia', this._hasMedia.bind(this)],
+ ['getMedia', this._getMedia.bind(this)]
+ ]);
+ this._templateRenderer.registerDataType('ankiNote', {
+ modifier: ({marker, commonData}) => this._ankiNoteDataCreator.create(marker, commonData),
+ composeData: (marker, commonData) => ({marker, commonData})
+ });
+ this._templateRenderer.setRenderCallbacks(
+ this._onRenderSetup.bind(this),
+ this._onRenderCleanup.bind(this)
+ );
+ await this._cssStyleApplier.prepare();
+ }
+
+ // Private
+
+ _onRenderSetup() {
+ const requirements = [];
+ this._stateStack = [new Map()];
+ this._requirements = requirements;
+ this._mediaProvider.requirements = requirements;
+ this._cleanupCallbacks = [];
+ return {requirements};
+ }
+
+ _onRenderCleanup() {
+ for (const callback of this._cleanupCallbacks) { callback(); }
+ this._stateStack = null;
+ this._requirements = null;
+ this._mediaProvider.requirements = null;
+ this._cleanupCallbacks = null;
+ }
+
+ _escape(text) {
+ return Handlebars.Utils.escapeExpression(text);
+ }
+
+ // Template helpers
+
+ _dumpObject(context, options) {
+ const dump = JSON.stringify(options.fn(context), null, 4);
+ return this._escape(dump);
+ }
+
+ _furigana(context, ...args) {
+ const {expression, reading} = this._getFuriganaExpressionAndReading(context, ...args);
+ const segs = this._japaneseUtil.distributeFurigana(expression, reading);
+
+ let result = '';
+ for (const {text, reading: reading2} of segs) {
+ if (reading2.length > 0) {
+ result += `${text}`;
+ } else {
+ result += text;
+ }
+ }
+
+ return result;
+ }
+
+ _furiganaPlain(context, ...args) {
+ const {expression, reading} = this._getFuriganaExpressionAndReading(context, ...args);
+ const segs = this._japaneseUtil.distributeFurigana(expression, reading);
+
+ let result = '';
+ for (const {text, reading: reading2} of segs) {
+ if (reading2.length > 0) {
+ if (result.length > 0) { result += ' '; }
+ result += `${text}[${reading2}]`;
+ } else {
+ result += text;
+ }
+ }
+
+ return result;
+ }
+
+ _getFuriganaExpressionAndReading(context, ...args) {
+ const options = args[args.length - 1];
+ if (args.length >= 3) {
+ return {expression: args[0], reading: args[1]};
+ } else {
+ const {expression, reading} = options.fn(context);
+ return {expression, reading};
+ }
+ }
+
+ _kanjiLinks(context, options) {
+ const jp = this._japaneseUtil;
+ let result = '';
+ for (const c of options.fn(context)) {
+ if (jp.isCodePointKanji(c.codePointAt(0))) {
+ result += `${c}`;
+ } else {
+ result += c;
+ }
+ }
+
+ return result;
+ }
+
+ _stringToMultiLineHtml(string) {
+ return string.split('\n').join('
');
+ }
+
+ _multiLine(context, options) {
+ return this._stringToMultiLineHtml(options.fn(context));
+ }
+
+ _sanitizeCssClass(context, options) {
+ return options.fn(context).replace(/[^_a-z0-9\u00a0-\uffff]/ig, '_');
+ }
+
+ _regexReplace(context, ...args) {
+ // Usage:
+ // {{#regexReplace regex string [flags]}}content{{/regexReplace}}
+ // regex: regular expression string
+ // string: string to replace
+ // flags: optional flags for regular expression
+ // e.g. "i" for case-insensitive, "g" for replace all
+ let value = args[args.length - 1].fn(context);
+ if (args.length >= 3) {
+ try {
+ const flags = args.length > 3 ? args[2] : 'g';
+ const regex = new RegExp(args[0], flags);
+ value = value.replace(regex, args[1]);
+ } catch (e) {
+ return `${e}`;
+ }
+ }
+ return value;
+ }
+
+ _regexMatch(context, ...args) {
+ // Usage:
+ // {{#regexMatch regex [flags]}}content{{/regexMatch}}
+ // regex: regular expression string
+ // flags: optional flags for regular expression
+ // e.g. "i" for case-insensitive, "g" for match all
+ let value = args[args.length - 1].fn(context);
+ if (args.length >= 2) {
+ try {
+ const flags = args.length > 2 ? args[1] : '';
+ const regex = new RegExp(args[0], flags);
+ const parts = [];
+ value.replace(regex, (g0) => parts.push(g0));
+ value = parts.join('');
+ } catch (e) {
+ return `${e}`;
+ }
+ }
+ return value;
+ }
+
+ _mergeTags(context, object, isGroupMode, isMergeMode) {
+ const tagSources = [];
+ if (isGroupMode || isMergeMode) {
+ for (const definition of object.definitions) {
+ tagSources.push(definition.definitionTags);
+ }
+ } else {
+ tagSources.push(object.definitionTags);
+ }
+
+ const tags = new Set();
+ for (const tagSource of tagSources) {
+ if (!Array.isArray(tagSource)) { continue; }
+ for (const tag of tagSource) {
+ tags.add(tag.name);
+ }
+ }
+
+ return [...tags].join(', ');
+ }
+
+ _eachUpTo(context, iterable, maxCount, options) {
+ if (iterable) {
+ const results = [];
+ let any = false;
+ for (const entry of iterable) {
+ any = true;
+ if (results.length >= maxCount) { break; }
+ const processedEntry = options.fn(entry);
+ results.push(processedEntry);
+ }
+ if (any) {
+ return results.join('');
+ }
+ }
+ return options.inverse(context);
+ }
+
+ _spread(context, ...args) {
+ const result = [];
+ for (let i = 0, ii = args.length - 1; i < ii; ++i) {
+ try {
+ result.push(...args[i]);
+ } catch (e) {
+ // NOP
+ }
+ }
+ return result;
+ }
+
+ _op(context, ...args) {
+ switch (args.length) {
+ case 3: return this._evaluateUnaryExpression(args[0], args[1]);
+ case 4: return this._evaluateBinaryExpression(args[0], args[1], args[2]);
+ case 5: return this._evaluateTernaryExpression(args[0], args[1], args[2], args[3]);
+ default: return void 0;
+ }
+ }
+
+ _evaluateUnaryExpression(operator, operand1) {
+ switch (operator) {
+ case '+': return +operand1;
+ case '-': return -operand1;
+ case '~': return ~operand1;
+ case '!': return !operand1;
+ default: return void 0;
+ }
+ }
+
+ _evaluateBinaryExpression(operator, operand1, operand2) {
+ switch (operator) {
+ case '+': return operand1 + operand2;
+ case '-': return operand1 - operand2;
+ case '/': return operand1 / operand2;
+ case '*': return operand1 * operand2;
+ case '%': return operand1 % operand2;
+ case '**': return operand1 ** operand2;
+ case '==': return operand1 == operand2; // eslint-disable-line eqeqeq
+ case '!=': return operand1 != operand2; // eslint-disable-line eqeqeq
+ case '===': return operand1 === operand2;
+ case '!==': return operand1 !== operand2;
+ case '<': return operand1 < operand2;
+ case '<=': return operand1 <= operand2;
+ case '>': return operand1 > operand2;
+ case '>=': return operand1 >= operand2;
+ case '<<': return operand1 << operand2;
+ case '>>': return operand1 >> operand2;
+ case '>>>': return operand1 >>> operand2;
+ case '&': return operand1 & operand2;
+ case '|': return operand1 | operand2;
+ case '^': return operand1 ^ operand2;
+ case '&&': return operand1 && operand2;
+ case '||': return operand1 || operand2;
+ default: return void 0;
+ }
+ }
+
+ _evaluateTernaryExpression(operator, operand1, operand2, operand3) {
+ switch (operator) {
+ case '?:': return operand1 ? operand2 : operand3;
+ default: return void 0;
+ }
+ }
+
+ _get(context, key) {
+ const stateStack = this._stateStack;
+ for (let i = stateStack.length; --i >= 0;) {
+ const map = stateStack[i];
+ if (map.has(key)) {
+ return map.get(key);
+ }
+ }
+ return void 0;
+ }
+
+ _set(context, ...args) {
+ const stateStack = this._stateStack;
+ switch (args.length) {
+ case 2:
+ {
+ const [key, options] = args;
+ const value = options.fn(context);
+ stateStack[stateStack.length - 1].set(key, value);
+ }
+ break;
+ case 3:
+ {
+ const [key, value] = args;
+ stateStack[stateStack.length - 1].set(key, value);
+ }
+ break;
+ }
+ return '';
+ }
+
+ _scope(context, options) {
+ const stateStack = this._stateStack;
+ try {
+ stateStack.push(new Map());
+ return options.fn(context);
+ } finally {
+ if (stateStack.length > 1) {
+ stateStack.pop();
+ }
+ }
+ }
+
+ _property(context, ...args) {
+ const ii = args.length - 1;
+ if (ii <= 0) { return void 0; }
+
+ try {
+ let value = args[0];
+ for (let i = 1; i < ii; ++i) {
+ value = value[args[i]];
+ }
+ return value;
+ } catch (e) {
+ return void 0;
+ }
+ }
+
+ _noop(context, options) {
+ return options.fn(context);
+ }
+
+ _isMoraPitchHigh(context, index, position) {
+ return this._japaneseUtil.isMoraPitchHigh(index, position);
+ }
+
+ _getKanaMorae(context, text) {
+ return this._japaneseUtil.getKanaMorae(`${text}`);
+ }
+
+ _getTypeof(context, ...args) {
+ const ii = args.length - 1;
+ const value = (ii > 0 ? args[0] : args[ii].fn(context));
+ return typeof value;
+ }
+
+ _join(context, ...args) {
+ return args.length > 1 ? args.slice(1, args.length - 1).flat().join(args[0]) : '';
+ }
+
+ _concat(context, ...args) {
+ let result = '';
+ for (let i = 0, ii = args.length - 1; i < ii; ++i) {
+ result += args[i];
+ }
+ return result;
+ }
+
+ _pitchCategories(context, data) {
+ const {pronunciations, headwords} = data.dictionaryEntry;
+ const categories = new Set();
+ for (const {headwordIndex, pitches} of pronunciations) {
+ const {reading, wordClasses} = headwords[headwordIndex];
+ const isVerbOrAdjective = DictionaryDataUtil.isNonNounVerbOrAdjective(wordClasses);
+ for (const {position} of pitches) {
+ const category = this._japaneseUtil.getPitchCategory(reading, position, isVerbOrAdjective);
+ if (category !== null) {
+ categories.add(category);
+ }
+ }
+ }
+ return [...categories];
+ }
+
+ _getTemporaryElement() {
+ let element = this._temporaryElement;
+ if (element === null) {
+ element = document.createElement('div');
+ this._temporaryElement = element;
+ }
+ return element;
+ }
+
+ _getHtml(node) {
+ const container = this._getTemporaryElement();
+ container.appendChild(node);
+ this._normalizeHtml(container);
+ const result = container.innerHTML;
+ container.textContent = '';
+ return result;
+ }
+
+ _normalizeHtml(root) {
+ const {ELEMENT_NODE, TEXT_NODE} = Node;
+ const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
+ const elements = [];
+ const textNodes = [];
+ while (true) {
+ const node = treeWalker.nextNode();
+ if (node === null) { break; }
+ switch (node.nodeType) {
+ case ELEMENT_NODE:
+ elements.push(node);
+ break;
+ case TEXT_NODE:
+ textNodes.push(node);
+ break;
+ }
+ }
+ this._cssStyleApplier.applyClassStyles(elements);
+ for (const element of elements) {
+ const {dataset} = element;
+ for (const key of Object.keys(dataset)) {
+ delete dataset[key];
+ }
+ }
+ for (const textNode of textNodes) {
+ this._replaceNewlines(textNode);
+ }
+ }
+
+ _replaceNewlines(textNode) {
+ const parts = textNode.nodeValue.split('\n');
+ if (parts.length <= 1) { return; }
+ const {parentNode} = textNode;
+ if (parentNode === null) { return; }
+ const fragment = document.createDocumentFragment();
+ for (let i = 0, ii = parts.length; i < ii; ++i) {
+ if (i > 0) { fragment.appendChild(document.createElement('br')); }
+ fragment.appendChild(document.createTextNode(parts[i]));
+ }
+ parentNode.replaceChild(fragment, textNode);
+ }
+
+ _createStructuredContentGenerator(data) {
+ const mediaLoader = {
+ loadMedia: async (path, dictionary, onLoad, onUnload) => {
+ const imageUrl = this._mediaProvider.getMedia(data, ['dictionaryMedia', path], {dictionary, format: 'fileName', default: null});
+ if (imageUrl !== null) {
+ onLoad(imageUrl);
+ this._cleanupCallbacks.push(() => onUnload(true));
+ }
+ }
+ };
+ return new StructuredContentGenerator(mediaLoader, document);
+ }
+
+ _formatGlossary(context, dictionary, options) {
+ const data = options.data.root;
+ const content = options.fn(context);
+ if (typeof content === 'string') { return this._stringToMultiLineHtml(this._escape(content)); }
+ if (!(typeof content === 'object' && content !== null)) { return ''; }
+ switch (content.type) {
+ case 'image': return this._formatGlossaryImage(content, dictionary, data);
+ case 'structured-content': return this._formatStructuredContent(content, dictionary, data);
+ }
+ return '';
+ }
+
+ _formatGlossaryImage(content, dictionary, data) {
+ const structuredContentGenerator = this._createStructuredContentGenerator(data);
+ const node = structuredContentGenerator.createDefinitionImage(content, dictionary);
+ return this._getHtml(node);
+ }
+
+ _formatStructuredContent(content, dictionary, data) {
+ const structuredContentGenerator = this._createStructuredContentGenerator(data);
+ const node = structuredContentGenerator.createStructuredContent(content.content, dictionary);
+ return node !== null ? this._getHtml(node) : '';
+ }
+
+ _hasMedia(context, ...args) {
+ const ii = args.length - 1;
+ const options = args[ii];
+ return this._mediaProvider.hasMedia(options.data.root, args.slice(0, ii), options.hash);
+ }
+
+ _getMedia(context, ...args) {
+ const ii = args.length - 1;
+ const options = args[ii];
+ return this._mediaProvider.getMedia(options.data.root, args.slice(0, ii), options.hash);
+ }
+}
diff --git a/ext/js/templates/sandbox/template-renderer-frame-main.js b/ext/js/templates/sandbox/template-renderer-frame-main.js
index bb9cac3a..15fe7781 100644
--- a/ext/js/templates/sandbox/template-renderer-frame-main.js
+++ b/ext/js/templates/sandbox/template-renderer-frame-main.js
@@ -16,23 +16,13 @@
*/
/* globals
- * AnkiNoteDataCreator
- * CssStyleApplier
- * JapaneseUtil
- * TemplateRenderer
+ * AnkiTemplateRenderer
* TemplateRendererFrameApi
*/
(async () => {
- const cssStyleApplier = new CssStyleApplier('/data/structured-content-style.json');
- await cssStyleApplier.prepare();
- const japaneseUtil = new JapaneseUtil(null);
- const templateRenderer = new TemplateRenderer(japaneseUtil, cssStyleApplier);
- const ankiNoteDataCreator = new AnkiNoteDataCreator(japaneseUtil);
- templateRenderer.registerDataType('ankiNote', {
- modifier: ({marker, commonData}) => ankiNoteDataCreator.create(marker, commonData),
- composeData: (marker, commonData) => ({marker, commonData})
- });
- const templateRendererFrameApi = new TemplateRendererFrameApi(templateRenderer);
+ const ankiTemplateRenderer = new AnkiTemplateRenderer();
+ await ankiTemplateRenderer.prepare();
+ const templateRendererFrameApi = new TemplateRendererFrameApi(ankiTemplateRenderer.templateRenderer);
templateRendererFrameApi.prepare();
})();
diff --git a/ext/js/templates/sandbox/template-renderer.js b/ext/js/templates/sandbox/template-renderer.js
index 02471c97..adb6733a 100644
--- a/ext/js/templates/sandbox/template-renderer.js
+++ b/ext/js/templates/sandbox/template-renderer.js
@@ -16,31 +16,34 @@
*/
/* global
- * DictionaryDataUtil
* Handlebars
- * StructuredContentGenerator
- * TemplateRendererMediaProvider
*/
class TemplateRenderer {
- constructor(japaneseUtil, cssStyleApplier) {
- this._japaneseUtil = japaneseUtil;
- this._cssStyleApplier = cssStyleApplier;
- this._mediaProvider = new TemplateRendererMediaProvider();
+ constructor() {
this._cache = new Map();
this._cacheMaxSize = 5;
- this._helpersRegistered = false;
- this._stateStack = null;
this._dataTypes = new Map();
- this._requirements = null;
- this._cleanupCallbacks = null;
- this._temporaryElement = null;
+ this._renderSetup = null;
+ this._renderCleanup = null;
+ }
+
+ registerHelpers(helpers) {
+ Handlebars.partials = Handlebars.templates;
+ for (const [name, helper] of helpers) {
+ this._registerHelper(name, helper);
+ }
}
registerDataType(name, {modifier=null, composeData=null}) {
this._dataTypes.set(name, {modifier, composeData});
}
+ setRenderCallbacks(setup, cleanup) {
+ this._renderSetup = setup;
+ this._renderCleanup = cleanup;
+ }
+
render(template, data, type) {
const instance = this._getTemplateInstance(template);
data = this._getModifiedData(data, void 0, type);
@@ -75,10 +78,6 @@ class TemplateRenderer {
// Private
_getTemplateInstance(template) {
- if (!this._helpersRegistered) {
- this._registerHelpers();
- }
-
const cache = this._cache;
let instance = cache.get(template);
if (typeof instance === 'undefined') {
@@ -91,22 +90,18 @@ class TemplateRenderer {
}
_renderTemplate(instance, data) {
- const cleanupCallbacks = [];
- const requirements = [];
+ const renderSetup = this._renderSetup;
+ const renderCleanup = this._renderCleanup;
+ let result;
+ let additions1;
+ let additions2;
try {
- this._stateStack = [new Map()];
- this._requirements = requirements;
- this._mediaProvider.requirements = requirements;
- this._cleanupCallbacks = cleanupCallbacks;
- const result = instance(data).trim();
- return {result, requirements};
+ additions1 = (typeof renderSetup === 'function' ? renderSetup(data) : null);
+ result = instance(data).trim();
} finally {
- for (const callback of cleanupCallbacks) { callback(); }
- this._stateStack = null;
- this._requirements = null;
- this._mediaProvider.requirements = null;
- this._cleanupCallbacks = null;
+ additions2 = (typeof renderCleanup === 'function' ? renderCleanup(data) : null);
}
+ return Object.assign({result}, additions1, additions2);
}
_getModifiedData(data, commonData, type) {
@@ -139,482 +134,10 @@ class TemplateRenderer {
}
}
- _registerHelpers() {
- Handlebars.partials = Handlebars.templates;
-
- const helpers = [
- ['dumpObject', this._dumpObject.bind(this)],
- ['furigana', this._furigana.bind(this)],
- ['furiganaPlain', this._furiganaPlain.bind(this)],
- ['kanjiLinks', this._kanjiLinks.bind(this)],
- ['multiLine', this._multiLine.bind(this)],
- ['sanitizeCssClass', this._sanitizeCssClass.bind(this)],
- ['regexReplace', this._regexReplace.bind(this)],
- ['regexMatch', this._regexMatch.bind(this)],
- ['mergeTags', this._mergeTags.bind(this)],
- ['eachUpTo', this._eachUpTo.bind(this)],
- ['spread', this._spread.bind(this)],
- ['op', this._op.bind(this)],
- ['get', this._get.bind(this)],
- ['set', this._set.bind(this)],
- ['scope', this._scope.bind(this)],
- ['property', this._property.bind(this)],
- ['noop', this._noop.bind(this)],
- ['isMoraPitchHigh', this._isMoraPitchHigh.bind(this)],
- ['getKanaMorae', this._getKanaMorae.bind(this)],
- ['typeof', this._getTypeof.bind(this)],
- ['join', this._join.bind(this)],
- ['concat', this._concat.bind(this)],
- ['pitchCategories', this._pitchCategories.bind(this)],
- ['formatGlossary', this._formatGlossary.bind(this)],
- ['hasMedia', this._hasMedia.bind(this)],
- ['getMedia', this._getMedia.bind(this)]
- ];
-
- for (const [name, helper] of helpers) {
- this._registerHelper(name, helper);
- }
-
- this._helpersRegistered = true;
- }
-
_registerHelper(name, helper) {
function wrapper(...args) {
return helper(this, ...args);
}
Handlebars.registerHelper(name, wrapper);
}
-
- _escape(text) {
- return Handlebars.Utils.escapeExpression(text);
- }
-
- _dumpObject(context, options) {
- const dump = JSON.stringify(options.fn(context), null, 4);
- return this._escape(dump);
- }
-
- _furigana(context, ...args) {
- const {expression, reading} = this._getFuriganaExpressionAndReading(context, ...args);
- const segs = this._japaneseUtil.distributeFurigana(expression, reading);
-
- let result = '';
- for (const {text, reading: reading2} of segs) {
- if (reading2.length > 0) {
- result += `${text}`;
- } else {
- result += text;
- }
- }
-
- return result;
- }
-
- _furiganaPlain(context, ...args) {
- const {expression, reading} = this._getFuriganaExpressionAndReading(context, ...args);
- const segs = this._japaneseUtil.distributeFurigana(expression, reading);
-
- let result = '';
- for (const {text, reading: reading2} of segs) {
- if (reading2.length > 0) {
- if (result.length > 0) { result += ' '; }
- result += `${text}[${reading2}]`;
- } else {
- result += text;
- }
- }
-
- return result;
- }
-
- _getFuriganaExpressionAndReading(context, ...args) {
- const options = args[args.length - 1];
- if (args.length >= 3) {
- return {expression: args[0], reading: args[1]};
- } else {
- const {expression, reading} = options.fn(context);
- return {expression, reading};
- }
- }
-
- _kanjiLinks(context, options) {
- const jp = this._japaneseUtil;
- let result = '';
- for (const c of options.fn(context)) {
- if (jp.isCodePointKanji(c.codePointAt(0))) {
- result += `${c}`;
- } else {
- result += c;
- }
- }
-
- return result;
- }
-
- _stringToMultiLineHtml(string) {
- return string.split('\n').join('
');
- }
-
- _multiLine(context, options) {
- return this._stringToMultiLineHtml(options.fn(context));
- }
-
- _sanitizeCssClass(context, options) {
- return options.fn(context).replace(/[^_a-z0-9\u00a0-\uffff]/ig, '_');
- }
-
- _regexReplace(context, ...args) {
- // Usage:
- // {{#regexReplace regex string [flags]}}content{{/regexReplace}}
- // regex: regular expression string
- // string: string to replace
- // flags: optional flags for regular expression
- // e.g. "i" for case-insensitive, "g" for replace all
- let value = args[args.length - 1].fn(context);
- if (args.length >= 3) {
- try {
- const flags = args.length > 3 ? args[2] : 'g';
- const regex = new RegExp(args[0], flags);
- value = value.replace(regex, args[1]);
- } catch (e) {
- return `${e}`;
- }
- }
- return value;
- }
-
- _regexMatch(context, ...args) {
- // Usage:
- // {{#regexMatch regex [flags]}}content{{/regexMatch}}
- // regex: regular expression string
- // flags: optional flags for regular expression
- // e.g. "i" for case-insensitive, "g" for match all
- let value = args[args.length - 1].fn(context);
- if (args.length >= 2) {
- try {
- const flags = args.length > 2 ? args[1] : '';
- const regex = new RegExp(args[0], flags);
- const parts = [];
- value.replace(regex, (g0) => parts.push(g0));
- value = parts.join('');
- } catch (e) {
- return `${e}`;
- }
- }
- return value;
- }
-
- _mergeTags(context, object, isGroupMode, isMergeMode) {
- const tagSources = [];
- if (isGroupMode || isMergeMode) {
- for (const definition of object.definitions) {
- tagSources.push(definition.definitionTags);
- }
- } else {
- tagSources.push(object.definitionTags);
- }
-
- const tags = new Set();
- for (const tagSource of tagSources) {
- if (!Array.isArray(tagSource)) { continue; }
- for (const tag of tagSource) {
- tags.add(tag.name);
- }
- }
-
- return [...tags].join(', ');
- }
-
- _eachUpTo(context, iterable, maxCount, options) {
- if (iterable) {
- const results = [];
- let any = false;
- for (const entry of iterable) {
- any = true;
- if (results.length >= maxCount) { break; }
- const processedEntry = options.fn(entry);
- results.push(processedEntry);
- }
- if (any) {
- return results.join('');
- }
- }
- return options.inverse(context);
- }
-
- _spread(context, ...args) {
- const result = [];
- for (let i = 0, ii = args.length - 1; i < ii; ++i) {
- try {
- result.push(...args[i]);
- } catch (e) {
- // NOP
- }
- }
- return result;
- }
-
- _op(context, ...args) {
- switch (args.length) {
- case 3: return this._evaluateUnaryExpression(args[0], args[1]);
- case 4: return this._evaluateBinaryExpression(args[0], args[1], args[2]);
- case 5: return this._evaluateTernaryExpression(args[0], args[1], args[2], args[3]);
- default: return void 0;
- }
- }
-
- _evaluateUnaryExpression(operator, operand1) {
- switch (operator) {
- case '+': return +operand1;
- case '-': return -operand1;
- case '~': return ~operand1;
- case '!': return !operand1;
- default: return void 0;
- }
- }
-
- _evaluateBinaryExpression(operator, operand1, operand2) {
- switch (operator) {
- case '+': return operand1 + operand2;
- case '-': return operand1 - operand2;
- case '/': return operand1 / operand2;
- case '*': return operand1 * operand2;
- case '%': return operand1 % operand2;
- case '**': return operand1 ** operand2;
- case '==': return operand1 == operand2; // eslint-disable-line eqeqeq
- case '!=': return operand1 != operand2; // eslint-disable-line eqeqeq
- case '===': return operand1 === operand2;
- case '!==': return operand1 !== operand2;
- case '<': return operand1 < operand2;
- case '<=': return operand1 <= operand2;
- case '>': return operand1 > operand2;
- case '>=': return operand1 >= operand2;
- case '<<': return operand1 << operand2;
- case '>>': return operand1 >> operand2;
- case '>>>': return operand1 >>> operand2;
- case '&': return operand1 & operand2;
- case '|': return operand1 | operand2;
- case '^': return operand1 ^ operand2;
- case '&&': return operand1 && operand2;
- case '||': return operand1 || operand2;
- default: return void 0;
- }
- }
-
- _evaluateTernaryExpression(operator, operand1, operand2, operand3) {
- switch (operator) {
- case '?:': return operand1 ? operand2 : operand3;
- default: return void 0;
- }
- }
-
- _get(context, key) {
- for (let i = this._stateStack.length; --i >= 0;) {
- const map = this._stateStack[i];
- if (map.has(key)) {
- return map.get(key);
- }
- }
- return void 0;
- }
-
- _set(context, ...args) {
- switch (args.length) {
- case 2:
- {
- const [key, options] = args;
- const value = options.fn(context);
- this._stateStack[this._stateStack.length - 1].set(key, value);
- }
- break;
- case 3:
- {
- const [key, value] = args;
- this._stateStack[this._stateStack.length - 1].set(key, value);
- }
- break;
- }
- return '';
- }
-
- _scope(context, options) {
- try {
- this._stateStack.push(new Map());
- return options.fn(context);
- } finally {
- if (this._stateStack.length > 1) {
- this._stateStack.pop();
- }
- }
- }
-
- _property(context, ...args) {
- const ii = args.length - 1;
- if (ii <= 0) { return void 0; }
-
- try {
- let value = args[0];
- for (let i = 1; i < ii; ++i) {
- value = value[args[i]];
- }
- return value;
- } catch (e) {
- return void 0;
- }
- }
-
- _noop(context, options) {
- return options.fn(context);
- }
-
- _isMoraPitchHigh(context, index, position) {
- return this._japaneseUtil.isMoraPitchHigh(index, position);
- }
-
- _getKanaMorae(context, text) {
- return this._japaneseUtil.getKanaMorae(`${text}`);
- }
-
- _getTypeof(context, ...args) {
- const ii = args.length - 1;
- const value = (ii > 0 ? args[0] : args[ii].fn(context));
- return typeof value;
- }
-
- _join(context, ...args) {
- return args.length > 1 ? args.slice(1, args.length - 1).flat().join(args[0]) : '';
- }
-
- _concat(context, ...args) {
- let result = '';
- for (let i = 0, ii = args.length - 1; i < ii; ++i) {
- result += args[i];
- }
- return result;
- }
-
- _pitchCategories(context, data) {
- const {pronunciations, headwords} = data.dictionaryEntry;
- const categories = new Set();
- for (const {headwordIndex, pitches} of pronunciations) {
- const {reading, wordClasses} = headwords[headwordIndex];
- const isVerbOrAdjective = DictionaryDataUtil.isNonNounVerbOrAdjective(wordClasses);
- for (const {position} of pitches) {
- const category = this._japaneseUtil.getPitchCategory(reading, position, isVerbOrAdjective);
- if (category !== null) {
- categories.add(category);
- }
- }
- }
- return [...categories];
- }
-
- _getTemporaryElement() {
- let element = this._temporaryElement;
- if (element === null) {
- element = document.createElement('div');
- this._temporaryElement = element;
- }
- return element;
- }
-
- _getHtml(node) {
- const container = this._getTemporaryElement();
- container.appendChild(node);
- this._normalizeHtml(container);
- const result = container.innerHTML;
- container.textContent = '';
- return result;
- }
-
- _normalizeHtml(root) {
- const {ELEMENT_NODE, TEXT_NODE} = Node;
- const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT);
- const elements = [];
- const textNodes = [];
- while (true) {
- const node = treeWalker.nextNode();
- if (node === null) { break; }
- switch (node.nodeType) {
- case ELEMENT_NODE:
- elements.push(node);
- break;
- case TEXT_NODE:
- textNodes.push(node);
- break;
- }
- }
- this._cssStyleApplier.applyClassStyles(elements);
- for (const element of elements) {
- const {dataset} = element;
- for (const key of Object.keys(dataset)) {
- delete dataset[key];
- }
- }
- for (const textNode of textNodes) {
- this._replaceNewlines(textNode);
- }
- }
-
- _replaceNewlines(textNode) {
- const parts = textNode.nodeValue.split('\n');
- if (parts.length <= 1) { return; }
- const {parentNode} = textNode;
- if (parentNode === null) { return; }
- const fragment = document.createDocumentFragment();
- for (let i = 0, ii = parts.length; i < ii; ++i) {
- if (i > 0) { fragment.appendChild(document.createElement('br')); }
- fragment.appendChild(document.createTextNode(parts[i]));
- }
- parentNode.replaceChild(fragment, textNode);
- }
-
- _createStructuredContentGenerator(data) {
- const mediaLoader = {
- loadMedia: async (path, dictionary, onLoad, onUnload) => {
- const imageUrl = this._mediaProvider.getMedia(data, ['dictionaryMedia', path], {dictionary, format: 'fileName', default: null});
- if (imageUrl !== null) {
- onLoad(imageUrl);
- this._cleanupCallbacks.push(() => onUnload(true));
- }
- }
- };
- return new StructuredContentGenerator(mediaLoader, document);
- }
-
- _formatGlossary(context, dictionary, options) {
- const data = options.data.root;
- const content = options.fn(context);
- if (typeof content === 'string') { return this._stringToMultiLineHtml(this._escape(content)); }
- if (!(typeof content === 'object' && content !== null)) { return ''; }
- switch (content.type) {
- case 'image': return this._formatGlossaryImage(content, dictionary, data);
- case 'structured-content': return this._formatStructuredContent(content, dictionary, data);
- }
- return '';
- }
-
- _formatGlossaryImage(content, dictionary, data) {
- const structuredContentGenerator = this._createStructuredContentGenerator(data);
- const node = structuredContentGenerator.createDefinitionImage(content, dictionary);
- return this._getHtml(node);
- }
-
- _formatStructuredContent(content, dictionary, data) {
- const structuredContentGenerator = this._createStructuredContentGenerator(data);
- const node = structuredContentGenerator.createStructuredContent(content.content, dictionary);
- return node !== null ? this._getHtml(node) : '';
- }
-
- _hasMedia(context, ...args) {
- const ii = args.length - 1;
- const options = args[ii];
- return this._mediaProvider.hasMedia(options.data.root, args.slice(0, ii), options.hash);
- }
-
- _getMedia(context, ...args) {
- const ii = args.length - 1;
- const options = args[ii];
- return this._mediaProvider.getMedia(options.data.root, args.slice(0, ii), options.hash);
- }
}
diff --git a/ext/template-renderer.html b/ext/template-renderer.html
index 9e0769f9..2db61d05 100644
--- a/ext/template-renderer.html
+++ b/ext/template-renderer.html
@@ -22,6 +22,7 @@
+
diff --git a/test/test-anki-note-builder.js b/test/test-anki-note-builder.js
index d6b41c3b..b8002c4b 100644
--- a/test/test-anki-note-builder.js
+++ b/test/test-anki-note-builder.js
@@ -45,6 +45,7 @@ async function createVM() {
'js/data/anki-util.js',
'js/dom/sandbox/css-style-applier.js',
'js/display/sandbox/structured-content-generator.js',
+ 'js/templates/sandbox/anki-template-renderer.js',
'js/templates/sandbox/template-renderer.js',
'js/templates/sandbox/template-renderer-media-provider.js',
'lib/handlebars.min.js'
@@ -52,37 +53,28 @@ async function createVM() {
const [
JapaneseUtil,
- TemplateRenderer,
AnkiNoteBuilder,
- CssStyleApplier
+ AnkiTemplateRenderer
] = vm.get([
'JapaneseUtil',
- 'TemplateRenderer',
'AnkiNoteBuilder',
- 'CssStyleApplier'
+ 'AnkiTemplateRenderer'
]);
- const ankiNoteDataCreator = vm.ankiNoteDataCreator;
class TemplateRendererProxy {
constructor() {
this._preparePromise = null;
- this._japaneseUtil = new JapaneseUtil(null);
- this._cssStyleApplier = new CssStyleApplier('/data/structured-content-style.json');
- this._templateRenderer = new TemplateRenderer(this._japaneseUtil, this._cssStyleApplier);
- this._templateRenderer.registerDataType('ankiNote', {
- modifier: ({marker, commonData}) => ankiNoteDataCreator.create(marker, commonData),
- composeData: (marker, commonData) => ({marker, commonData})
- });
+ this._ankiTemplateRenderer = new AnkiTemplateRenderer();
}
async render(template, data, type) {
await this._prepare();
- return await this._templateRenderer.render(template, data, type);
+ return await this._ankiTemplateRenderer.templateRenderer.render(template, data, type);
}
async renderMulti(items) {
await this._prepare();
- return await this._serializeMulti(this._templateRenderer.renderMulti(items));
+ return await this._serializeMulti(this._ankiTemplateRenderer.templateRenderer.renderMulti(items));
}
_prepare() {
@@ -93,7 +85,7 @@ async function createVM() {
}
async _prepareInternal() {
- await this._cssStyleApplier.prepare();
+ await this._ankiTemplateRenderer.prepare();
}
_serializeError(error) {