alex/yomichan
1
Fork 0
Code Releases Activity

Structured content auto language (#2131)

Browse Source 
* Pass JapaneseUtil instance to StructuredContentGenerator

* Move body of createStructuredContent to an internal function

* Create _createStructuredContentGenericElement

* Wrap structured content in a <span>

* Change _createStructuredContent to _appendStructuredContent

* Add public appendStructuredContent function

* Add missing return

* Remove unused _createDocumentFragment

* Automatically assign lang=ja for content with Japanese characters
without an explicit language

* Add test
This commit is contained in:
toasted-nutbread 2022-05-14 18:12:57 -04:00 committed by GitHub
parent 6a74746113
commit 5dcc2315d2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 87 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
ext/js/display/display-generator.js
View File

@ -28,7 +28,7 @@ class DisplayGenerator {
this._contentManager = contentManager;
this._hotkeyHelpController = hotkeyHelpController;
this._templates = null;
this._structuredContentGenerator = new StructuredContentGenerator(this._contentManager, document);
this._structuredContentGenerator = new StructuredContentGenerator(this._contentManager, japaneseUtil, document);
this._pronunciationGenerator = new PronunciationGenerator(japaneseUtil);
}
@ -347,11 +347,8 @@ class DisplayGenerator {
_createTermDefinitionEntryStructuredContent(content, dictionary) {
const node = this._templates.instantiate('gloss-item');
const child = this._structuredContentGenerator.createStructuredContent(content, dictionary);
if (child !== null) {
const contentContainer = node.querySelector('.gloss-content');
contentContainer.appendChild(child);
}
const contentContainer = node.querySelector('.gloss-content');
this._structuredContentGenerator.appendStructuredContent(contentContainer, content, dictionary);
return node;
}

141
ext/js/display/sandbox/structured-content-generator.js
View File

@ -16,56 +16,21 @@
*/
class StructuredContentGenerator {
constructor(contentManager, document) {
constructor(contentManager, japaneseUtil, document) {
this._contentManager = contentManager;
this._japaneseUtil = japaneseUtil;
this._document = document;
}
appendStructuredContent(node, content, dictionary) {
node.classList.add('structured-content');
this._appendStructuredContent(node, content, dictionary, null);
}
createStructuredContent(content, dictionary) {
if (typeof content === 'string') {
return this._createTextNode(content);
}
if (!(typeof content === 'object' && content !== null)) {
return null;
}
if (Array.isArray(content)) {
const fragment = this._createDocumentFragment();
for (const item of content) {
const child = this.createStructuredContent(item, dictionary);
if (child !== null) { fragment.appendChild(child); }
}
return fragment;
}
const {tag} = content;
switch (tag) {
case 'br':
return this._createStructuredContentElement(tag, content, dictionary, 'simple', false, false);
case 'ruby':
case 'rt':
case 'rp':
return this._createStructuredContentElement(tag, content, dictionary, 'simple', true, false);
case 'table':
return this._createStructuredContentTableElement(tag, content, dictionary);
case 'thead':
case 'tbody':
case 'tfoot':
case 'tr':
return this._createStructuredContentElement(tag, content, dictionary, 'table', true, false);
case 'th':
case 'td':
return this._createStructuredContentElement(tag, content, dictionary, 'table-cell', true, true);
case 'div':
case 'span':
case 'ol':
case 'ul':
case 'li':
return this._createStructuredContentElement(tag, content, dictionary, 'simple', true, true);
case 'img':
return this.createDefinitionImage(content, dictionary);
case 'a':
return this._createLinkElement(content, dictionary);
}
return null;
const node = this._createElement('span', 'structured-content');
this._appendStructuredContent(node, content, dictionary, null);
return node;
}
createDefinitionImage(data, dictionary) {
@ -160,6 +125,31 @@ class StructuredContentGenerator {
// Private
_appendStructuredContent(container, content, dictionary, language) {
if (typeof content === 'string') {
if (content.length > 0) {
container.appendChild(this._createTextNode(content));
if (language === null && this._japaneseUtil.isStringPartiallyJapanese(content)) {
container.lang = 'ja';
}
}
return;
}
if (!(typeof content === 'object' && content !== null)) {
return;
}
if (Array.isArray(content)) {
for (const item of content) {
this._appendStructuredContent(container, item, dictionary, language);
}
return;
}
const node = this._createStructuredContentGenericElement(content, dictionary, language);
if (node !== null) {
container.appendChild(node);
}
}
_createElement(tagName, className) {
const node = this._document.createElement(tagName);
node.className = className;
@ -170,10 +160,6 @@ class StructuredContentGenerator {
return this._document.createTextNode(data);
}
_createDocumentFragment() {
return this._document.createDocumentFragment();
}
_setElementDataset(element, data) {
for (let [key, value] of Object.entries(data)) {
if (key.length > 0) {
@ -198,18 +184,54 @@ class StructuredContentGenerator {
}
}
_createStructuredContentTableElement(tag, content, dictionary) {
_createStructuredContentGenericElement(content, dictionary, language) {
const {tag} = content;
switch (tag) {
case 'br':
return this._createStructuredContentElement(tag, content, dictionary, language, 'simple', false, false);
case 'ruby':
case 'rt':
case 'rp':
return this._createStructuredContentElement(tag, content, dictionary, language, 'simple', true, false);
case 'table':
return this._createStructuredContentTableElement(tag, content, dictionary, language);
case 'thead':
case 'tbody':
case 'tfoot':
case 'tr':
return this._createStructuredContentElement(tag, content, dictionary, language, 'table', true, false);
case 'th':
case 'td':
return this._createStructuredContentElement(tag, content, dictionary, language, 'table-cell', true, true);
case 'div':
case 'span':
case 'ol':
case 'ul':
case 'li':
return this._createStructuredContentElement(tag, content, dictionary, language, 'simple', true, true);
case 'img':
return this.createDefinitionImage(content, dictionary);
case 'a':
return this._createLinkElement(content, dictionary, language);
}
return null;
}
_createStructuredContentTableElement(tag, content, dictionary, language) {
const container = this._createElement('div', 'gloss-sc-table-container');
const table = this._createStructuredContentElement(tag, content, dictionary, 'table', true, false);
const table = this._createStructuredContentElement(tag, content, dictionary, language, 'table', true, false);
container.appendChild(table);
return container;
}
_createStructuredContentElement(tag, content, dictionary, type, hasChildren, hasStyle) {
_createStructuredContentElement(tag, content, dictionary, language, type, hasChildren, hasStyle) {
const node = this._createElement(tag, `gloss-sc-${tag}`);
const {data, lang} = content;
if (typeof data === 'object' && data !== null) { this._setElementDataset(node, data); }
if (typeof lang === 'string') { node.lang = lang; }
if (typeof lang === 'string') {
node.lang = lang;
language = lang;
}
switch (type) {
case 'table-cell':
{
@ -226,8 +248,7 @@ class StructuredContentGenerator {
}
}
if (hasChildren) {
const child = this.createStructuredContent(content.content, dictionary);
if (child !== null) { node.appendChild(child); }
this._appendStructuredContent(node, content.content, dictionary, language);
}
return node;
}
@ -262,7 +283,7 @@ class StructuredContentGenerator {
if (typeof listStyleType === 'string') { style.listStyleType = listStyleType; }
}
_createLinkElement(content, dictionary) {
_createLinkElement(content, dictionary, language) {
let {href} = content;
const internal = href.startsWith('?');
if (internal) {
@ -276,10 +297,12 @@ class StructuredContentGenerator {
node.appendChild(text);
const {lang} = content;
if (typeof lang === 'string') { node.lang = lang; }
if (typeof lang === 'string') {
node.lang = lang;
language = lang;
}
const child = this.createStructuredContent(content.content, dictionary);
if (child !== null) { text.appendChild(child); }
this._appendStructuredContent(text, content.content, dictionary, language);
if (!internal) {
const icon = this._createElement('span', 'gloss-link-external-icon icon');

2
ext/js/templates/sandbox/anki-template-renderer.js
View File

@ -536,7 +536,7 @@ class AnkiTemplateRenderer {
_createStructuredContentGenerator(data) {
const contentManager = new AnkiTemplateRendererContentManager(this._mediaProvider, data);
const instance = new StructuredContentGenerator(contentManager, document);
const instance = new StructuredContentGenerator(contentManager, this._japaneseUtil, document);
this._cleanupCallbacks.push(() => contentManager.unloadAll());
return instance;
}

1
test/data/dictionaries/valid-dictionary1/term_bank_1.json
View File

@ -243,6 +243,7 @@
]}
]},
{"type": "structured-content", "content": [
{"tag": "div", "style": {"fontSize": "xxx-large"}, "content": "直次茶冷 (auto lang)"},
{"tag": "div", "lang": "?????", "style": {"fontSize": "xxx-large"}, "content": "直次茶冷 (invalid lang)"},
{"tag": "div", "lang": "ja-JP", "style": {"fontSize": "xxx-large"}, "content": "直次茶冷 (lang=ja-JP)"},
{"tag": "div", "lang": "zh-CN", "style": {"fontSize": "xxx-large"}, "content": "直次茶冷 (lang=zh-CN)"},