From 637d4a2087b9e93ccd47d689411887b6c40c3992 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 18 Jul 2021 13:43:11 -0400 Subject: Pronunciation template helper (#1840) * Rename field * Set up pronunication components * Fix documentation * Rename function * Update test dependencies * Fix constructor * Log errors * Add pronunciation helper * Add styleApplier argument to _getHtml/_normalizeHtml * Use getAttribute for 'class' to support namespaced elements (e.g. svg) * Update format name * Add optional tag * Update docs --- ext/js/templates/sandbox/anki-template-renderer.js | 57 ++++++++++++++++++---- 1 file changed, 48 insertions(+), 9 deletions(-) (limited to 'ext/js/templates') diff --git a/ext/js/templates/sandbox/anki-template-renderer.js b/ext/js/templates/sandbox/anki-template-renderer.js index 907ab0fa..43092ec2 100644 --- a/ext/js/templates/sandbox/anki-template-renderer.js +++ b/ext/js/templates/sandbox/anki-template-renderer.js @@ -21,6 +21,7 @@ * DictionaryDataUtil * Handlebars * JapaneseUtil + * PronunciationGenerator * StructuredContentGenerator * TemplateRenderer * TemplateRendererMediaProvider @@ -35,11 +36,13 @@ class AnkiTemplateRenderer { * Creates a new instance of the class. */ constructor() { - this._cssStyleApplier = new CssStyleApplier('/data/structured-content-style.json'); + this._structuredContentStyleApplier = new CssStyleApplier('/data/structured-content-style.json'); + this._pronunciationStyleApplier = new CssStyleApplier('/data/pronunciation-style.json'); this._japaneseUtil = new JapaneseUtil(null); this._templateRenderer = new TemplateRenderer(); this._ankiNoteDataCreator = new AnkiNoteDataCreator(this._japaneseUtil); this._mediaProvider = new TemplateRendererMediaProvider(); + this._pronunciationGenerator = new PronunciationGenerator(this._japaneseUtil); this._stateStack = null; this._requirements = null; this._cleanupCallbacks = null; @@ -83,7 +86,8 @@ class AnkiTemplateRenderer { ['pitchCategories', this._pitchCategories.bind(this)], ['formatGlossary', this._formatGlossary.bind(this)], ['hasMedia', this._hasMedia.bind(this)], - ['getMedia', this._getMedia.bind(this)] + ['getMedia', this._getMedia.bind(this)], + ['pronunciation', this._pronunciation.bind(this)] ]); this._templateRenderer.registerDataType('ankiNote', { modifier: ({marker, commonData}) => this._ankiNoteDataCreator.create(marker, commonData), @@ -93,7 +97,10 @@ class AnkiTemplateRenderer { this._onRenderSetup.bind(this), this._onRenderCleanup.bind(this) ); - await this._cssStyleApplier.prepare(); + await Promise.all([ + this._structuredContentStyleApplier.prepare(), + this._pronunciationStyleApplier.prepare() + ]); } // Private @@ -453,16 +460,16 @@ class AnkiTemplateRenderer { return element; } - _getHtml(node) { + _getHtml(node, styleApplier) { const container = this._getTemporaryElement(); container.appendChild(node); - this._normalizeHtml(container); + this._normalizeHtml(container, styleApplier); const result = container.innerHTML; container.textContent = ''; return result; } - _normalizeHtml(root) { + _normalizeHtml(root, styleApplier) { const {ELEMENT_NODE, TEXT_NODE} = Node; const treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT); const elements = []; @@ -479,7 +486,7 @@ class AnkiTemplateRenderer { break; } } - this._cssStyleApplier.applyClassStyles(elements); + styleApplier.applyClassStyles(elements); for (const element of elements) { const {dataset} = element; for (const key of Object.keys(dataset)) { @@ -532,13 +539,13 @@ class AnkiTemplateRenderer { _formatGlossaryImage(content, dictionary, data) { const structuredContentGenerator = this._createStructuredContentGenerator(data); const node = structuredContentGenerator.createDefinitionImage(content, dictionary); - return this._getHtml(node); + return this._getHtml(node, this._structuredContentStyleApplier); } _formatStructuredContent(content, dictionary, data) { const structuredContentGenerator = this._createStructuredContentGenerator(data); const node = structuredContentGenerator.createStructuredContent(content.content, dictionary); - return node !== null ? this._getHtml(node) : ''; + return node !== null ? this._getHtml(node, this._structuredContentStyleApplier) : ''; } _hasMedia(context, ...args) { @@ -552,4 +559,36 @@ class AnkiTemplateRenderer { const options = args[ii]; return this._mediaProvider.getMedia(options.data.root, args.slice(0, ii), options.hash); } + + _pronunciation(context, ...args) { + const ii = args.length - 1; + const options = args[ii]; + let {format, reading, downstepPosition, nasalPositions, devoicePositions} = options.hash; + + if (typeof reading !== 'string' || reading.length === 0) { return ''; } + if (typeof downstepPosition !== 'number') { return ''; } + if (!Array.isArray(nasalPositions)) { nasalPositions = []; } + if (!Array.isArray(devoicePositions)) { devoicePositions = []; } + const morae = this._japaneseUtil.getKanaMorae(reading); + + switch (format) { + case 'text': + return this._getHtml( + this._pronunciationGenerator.createPronunciationText(morae, downstepPosition, nasalPositions, devoicePositions), + this._pronunciationStyleApplier + ); + case 'graph': + return this._getHtml( + this._pronunciationGenerator.createPronunciationGraph(morae, downstepPosition), + this._pronunciationStyleApplier + ); + case 'position': + return this._getHtml( + this._pronunciationGenerator.createPronunciationDownstepPosition(downstepPosition), + this._pronunciationStyleApplier + ); + default: + return ''; + } + } } -- cgit v1.2.3